synkra-ds 0.1.1
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/dist/index.cjs +1440 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +521 -0
- package/dist/index.d.ts +521 -0
- package/dist/index.js +1341 -0
- package/dist/index.js.map +1 -0
- package/package.json +111 -0
- package/src/assets/logos/index.ts +74 -0
- package/src/assets/logos/payment/Size=large, Payment method=AMEX.svg +5 -0
- package/src/assets/logos/payment/Size=large, Payment method=Alipay.svg +13 -0
- package/src/assets/logos/payment/Size=large, Payment method=Amazon.svg +6 -0
- package/src/assets/logos/payment/Size=large, Payment method=ApplePay.svg +5 -0
- package/src/assets/logos/payment/Size=large, Payment method=Bitcoin.svg +5 -0
- package/src/assets/logos/payment/Size=large, Payment method=Etherium.svg +11 -0
- package/src/assets/logos/payment/Size=large, Payment method=GooglePay.svg +9 -0
- package/src/assets/logos/payment/Size=large, Payment method=Maestro.svg +7 -0
- package/src/assets/logos/payment/Size=large, Payment method=Mastercard.svg +7 -0
- package/src/assets/logos/payment/Size=large, Payment method=PayPal.svg +8 -0
- package/src/assets/logos/payment/Size=large, Payment method=Stripe.svg +5 -0
- package/src/assets/logos/payment/Size=large, Payment method=Visa.svg +5 -0
- package/src/assets/logos/social/black/Discord.svg +15 -0
- package/src/assets/logos/social/black/Facebook.svg +20 -0
- package/src/assets/logos/social/black/GitHub.svg +10 -0
- package/src/assets/logos/social/black/Google.svg +13 -0
- package/src/assets/logos/social/black/Instagram.svg +10 -0
- package/src/assets/logos/social/black/LinkedIn.svg +6 -0
- package/src/assets/logos/social/black/Messenger.svg +10 -0
- package/src/assets/logos/social/black/MidJourney.svg +7 -0
- package/src/assets/logos/social/black/OpenAI.svg +4 -0
- package/src/assets/logos/social/black/Pinterest.svg +10 -0
- package/src/assets/logos/social/black/Reddit.svg +11 -0
- package/src/assets/logos/social/black/Skype.svg +16 -0
- package/src/assets/logos/social/black/Snapchat.svg +4 -0
- package/src/assets/logos/social/black/SoundCloud.svg +24 -0
- package/src/assets/logos/social/black/Spotify.svg +10 -0
- package/src/assets/logos/social/black/Steam.svg +4 -0
- package/src/assets/logos/social/black/TeamViewer.svg +11 -0
- package/src/assets/logos/social/black/Telegram.svg +15 -0
- package/src/assets/logos/social/black/Threads.svg +3 -0
- package/src/assets/logos/social/black/TikTok.svg +5 -0
- package/src/assets/logos/social/black/Tinder.svg +3 -0
- package/src/assets/logos/social/black/Trello.svg +12 -0
- package/src/assets/logos/social/black/Tumblr.svg +11 -0
- package/src/assets/logos/social/black/Twitch.svg +3 -0
- package/src/assets/logos/social/black/Vine.svg +3 -0
- package/src/assets/logos/social/black/WhatsApp.svg +12 -0
- package/src/assets/logos/social/black/X.svg +3 -0
- package/src/assets/logos/social/black/YouTube.svg +11 -0
- package/src/assets/logos/social/color/Discord.svg +15 -0
- package/src/assets/logos/social/color/Facebook.svg +20 -0
- package/src/assets/logos/social/color/GitHub.svg +10 -0
- package/src/assets/logos/social/color/Google.svg +13 -0
- package/src/assets/logos/social/color/Instagram.svg +10 -0
- package/src/assets/logos/social/color/LinkedIn.svg +6 -0
- package/src/assets/logos/social/color/Messenger.svg +10 -0
- package/src/assets/logos/social/color/MidJourney.svg +7 -0
- package/src/assets/logos/social/color/OpenAI.svg +4 -0
- package/src/assets/logos/social/color/Pinterest.svg +10 -0
- package/src/assets/logos/social/color/Reddit.svg +11 -0
- package/src/assets/logos/social/color/Skype.svg +16 -0
- package/src/assets/logos/social/color/Snapchat.svg +4 -0
- package/src/assets/logos/social/color/SoundCloud.svg +24 -0
- package/src/assets/logos/social/color/Spotify.svg +10 -0
- package/src/assets/logos/social/color/Steam.svg +14 -0
- package/src/assets/logos/social/color/TeamViewer.svg +19 -0
- package/src/assets/logos/social/color/Telegram.svg +15 -0
- package/src/assets/logos/social/color/Threads.svg +3 -0
- package/src/assets/logos/social/color/TikTok.svg +5 -0
- package/src/assets/logos/social/color/Tinder.svg +9 -0
- package/src/assets/logos/social/color/Trello.svg +16 -0
- package/src/assets/logos/social/color/Tumblr.svg +11 -0
- package/src/assets/logos/social/color/Twitch.svg +3 -0
- package/src/assets/logos/social/color/Vine.svg +3 -0
- package/src/assets/logos/social/color/WhatsApp.svg +16 -0
- package/src/assets/logos/social/color/X.svg +3 -0
- package/src/assets/logos/social/color/YouTube.svg +11 -0
- package/src/assets/logos/social/white/Discord.svg +15 -0
- package/src/assets/logos/social/white/Facebook.svg +20 -0
- package/src/assets/logos/social/white/GitHub.svg +10 -0
- package/src/assets/logos/social/white/Google.svg +13 -0
- package/src/assets/logos/social/white/Instagram.svg +10 -0
- package/src/assets/logos/social/white/LinkedIn.svg +6 -0
- package/src/assets/logos/social/white/Messenger.svg +10 -0
- package/src/assets/logos/social/white/MidJourney.svg +7 -0
- package/src/assets/logos/social/white/OpenAI.svg +4 -0
- package/src/assets/logos/social/white/Pinterest.svg +10 -0
- package/src/assets/logos/social/white/Reddit.svg +11 -0
- package/src/assets/logos/social/white/Skype.svg +16 -0
- package/src/assets/logos/social/white/Snapchat.svg +4 -0
- package/src/assets/logos/social/white/SoundCloud.svg +24 -0
- package/src/assets/logos/social/white/Spotify.svg +10 -0
- package/src/assets/logos/social/white/Steam.svg +4 -0
- package/src/assets/logos/social/white/StumbleUpon.svg +0 -0
- package/src/assets/logos/social/white/TeamViewer.svg +11 -0
- package/src/assets/logos/social/white/Telegram.svg +15 -0
- package/src/assets/logos/social/white/Threads.svg +3 -0
- package/src/assets/logos/social/white/TikTok.svg +5 -0
- package/src/assets/logos/social/white/Tinder.svg +3 -0
- package/src/assets/logos/social/white/Trello.svg +12 -0
- package/src/assets/logos/social/white/Tumblr.svg +4 -0
- package/src/assets/logos/social/white/Twitch.svg +3 -0
- package/src/assets/logos/social/white/Vine.svg +3 -0
- package/src/assets/logos/social/white/WhatsApp.svg +11 -0
- package/src/assets/logos/social/white/X.svg +3 -0
- package/src/assets/logos/social/white/YouTube.svg +11 -0
- package/src/styles/globals.css +174 -0
- package/src/tokens/palette-extended.css +119 -0
- package/src/tokens/tokens.css +122 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,521 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
6
|
+
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
7
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
8
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
9
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
10
|
+
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
11
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
12
|
+
import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Synkra DS - Extended Color Palette (watchOS)
|
|
16
|
+
* Source: assets/Cores/design-tokens-colors.css
|
|
17
|
+
* Usage: Charts, badges, tags, data visualization, accent colors
|
|
18
|
+
*/
|
|
19
|
+
declare const paletteExtended: {
|
|
20
|
+
readonly reds: {
|
|
21
|
+
readonly red: "#df1125";
|
|
22
|
+
readonly neonPink: "#fb212f";
|
|
23
|
+
readonly electricPink: "#fc3644";
|
|
24
|
+
readonly hibiscus: "#fb0049";
|
|
25
|
+
readonly pink: "#fd4154";
|
|
26
|
+
readonly pinkCitrus: "#ea383a";
|
|
27
|
+
readonly pomegranate: "#d80e4f";
|
|
28
|
+
readonly dragonFruit: "#f12e6d";
|
|
29
|
+
readonly camellia: "#bf3138";
|
|
30
|
+
readonly redRose: "#ab1438";
|
|
31
|
+
readonly plum: "#81323d";
|
|
32
|
+
};
|
|
33
|
+
readonly oranges: {
|
|
34
|
+
readonly orange: "#fc4e12";
|
|
35
|
+
readonly clementine: "#fd513b";
|
|
36
|
+
readonly apricot: "#fc5c42";
|
|
37
|
+
readonly papaya: "#fd7036";
|
|
38
|
+
readonly kumquat: "#fd7441";
|
|
39
|
+
readonly lightOrange: "#fd820b";
|
|
40
|
+
readonly peach: "#e0694e";
|
|
41
|
+
readonly flamingo: "#ca6f59";
|
|
42
|
+
readonly roseGold: "#e99475";
|
|
43
|
+
readonly pinkSand: "#feb69c";
|
|
44
|
+
readonly vintageRose: "#f29c98";
|
|
45
|
+
readonly grapefruit: "#fda27e";
|
|
46
|
+
};
|
|
47
|
+
readonly yellows: {
|
|
48
|
+
readonly cream: "#ffe0ab";
|
|
49
|
+
readonly mellowYellow: "#f7f6af";
|
|
50
|
+
readonly canaryYellow: "#ffda3a";
|
|
51
|
+
readonly pollen: "#e8c511";
|
|
52
|
+
readonly flashLight: "#faed0b";
|
|
53
|
+
readonly lemonCream: "#ffeb6d";
|
|
54
|
+
readonly flash: "#dff81e";
|
|
55
|
+
};
|
|
56
|
+
readonly greens: {
|
|
57
|
+
readonly green: "#80e220";
|
|
58
|
+
readonly spearmint: "#77ea7e";
|
|
59
|
+
readonly mint: "#a2ec8e";
|
|
60
|
+
readonly beryl: "#d0f2b1";
|
|
61
|
+
readonly seaFoam: "#cff1d6";
|
|
62
|
+
readonly turquoise: "#91cec2";
|
|
63
|
+
};
|
|
64
|
+
readonly blues: {
|
|
65
|
+
readonly blue: "#1ea5fc";
|
|
66
|
+
readonly lightBlue: "#5ebad9";
|
|
67
|
+
readonly cerulean: "#87b9e7";
|
|
68
|
+
readonly surfBlue: "#1871ac";
|
|
69
|
+
readonly pacificGreen: "#0f6d8e";
|
|
70
|
+
readonly blueCobalt: "#3a6b8e";
|
|
71
|
+
readonly darkTeal: "#2c6184";
|
|
72
|
+
readonly blueHorizon: "#1e538f";
|
|
73
|
+
readonly denimBlue: "#4b709a";
|
|
74
|
+
readonly linenBlue: "#455785";
|
|
75
|
+
readonly deepNavy: "#3a4565";
|
|
76
|
+
readonly midnightBlue: "#383b65";
|
|
77
|
+
};
|
|
78
|
+
readonly purples: {
|
|
79
|
+
readonly purple: "#8962f8";
|
|
80
|
+
readonly ultraViolet: "#5f41b2";
|
|
81
|
+
readonly lilac: "#a990dd";
|
|
82
|
+
readonly oceanBlue: "#6273bd";
|
|
83
|
+
readonly delftBlue: "#4662b2";
|
|
84
|
+
readonly indigo: "#474e95";
|
|
85
|
+
readonly lavenderGray: "#757397";
|
|
86
|
+
readonly lavender: "#a58998";
|
|
87
|
+
};
|
|
88
|
+
readonly neutrals: {
|
|
89
|
+
readonly mistBlue: "#a7ab99";
|
|
90
|
+
readonly stormGray: "#578887";
|
|
91
|
+
readonly cactus: "#5b7971";
|
|
92
|
+
readonly pineGreen: "#4e6c54";
|
|
93
|
+
readonly cyprusGreen: "#525d49";
|
|
94
|
+
readonly northernBlue: "#638a8d";
|
|
95
|
+
readonly azure: "#788991";
|
|
96
|
+
readonly alaskanBlue: "#525c73";
|
|
97
|
+
};
|
|
98
|
+
readonly earths: {
|
|
99
|
+
readonly khaki: "#7a6e49";
|
|
100
|
+
readonly darkOlive: "#7c7a66";
|
|
101
|
+
readonly softWhite: "#d8c9af";
|
|
102
|
+
readonly antiqueWhite: "#cda986";
|
|
103
|
+
readonly yellowGold: "#cc996d";
|
|
104
|
+
readonly gold: "#b08053";
|
|
105
|
+
readonly camel: "#a97d4f";
|
|
106
|
+
readonly walnut: "#a17455";
|
|
107
|
+
readonly stone: "#a28872";
|
|
108
|
+
readonly pebble: "#9f8d7e";
|
|
109
|
+
readonly cocoa: "#8b7d7d";
|
|
110
|
+
readonly coastalGray: "#715d50";
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
/** 10 colors optimized for charts and data visualization */
|
|
114
|
+
declare const chartPalette: readonly ["#1ea5fc", "#D4AF37", "#22C55E", "#8962f8", "#fc4e12", "#fb0049", "#91cec2", "#f7f6af", "#a990dd", "#fd820b"];
|
|
115
|
+
/** Gradient presets */
|
|
116
|
+
declare const gradients: {
|
|
117
|
+
readonly badge: "linear-gradient(82.44deg, #ff3b57 0%, #ffda1a 100%)";
|
|
118
|
+
readonly purpleBlue: "linear-gradient(135deg, #8962f8, #1ea5fc)";
|
|
119
|
+
readonly hibiscusDragon: "linear-gradient(135deg, #fb0049, #f12e6d)";
|
|
120
|
+
readonly greenMint: "linear-gradient(135deg, #80e220, #a2ec8e)";
|
|
121
|
+
readonly goldSunset: "linear-gradient(135deg, #D4AF37, #fc4e12)";
|
|
122
|
+
};
|
|
123
|
+
type PaletteCategory = keyof typeof paletteExtended;
|
|
124
|
+
type ChartColor = (typeof chartPalette)[number];
|
|
125
|
+
type GradientName = keyof typeof gradients;
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* Synkra DS - Design Token Types & Exports
|
|
129
|
+
* Auto-generated from tokens.yaml - DO NOT edit manually
|
|
130
|
+
*/
|
|
131
|
+
declare const colors: {
|
|
132
|
+
readonly primary: {
|
|
133
|
+
readonly gold: "#D4AF37";
|
|
134
|
+
readonly "gold-dark": "#B8962E";
|
|
135
|
+
readonly "gold-light": "#E4C84A";
|
|
136
|
+
};
|
|
137
|
+
readonly background: {
|
|
138
|
+
readonly base: "#0A0A0F";
|
|
139
|
+
readonly elevated: "#111116";
|
|
140
|
+
readonly surface: "#1a1a1f";
|
|
141
|
+
readonly overlay: "rgba(0, 0, 0, 0.8)";
|
|
142
|
+
};
|
|
143
|
+
readonly text: {
|
|
144
|
+
readonly primary: "#FFFFFF";
|
|
145
|
+
readonly secondary: "#A1A1AA";
|
|
146
|
+
readonly muted: "#71717A";
|
|
147
|
+
readonly inverse: "#0A0A0F";
|
|
148
|
+
};
|
|
149
|
+
readonly semantic: {
|
|
150
|
+
readonly success: "#22C55E";
|
|
151
|
+
readonly warning: "#F59E0B";
|
|
152
|
+
readonly error: "#EF4444";
|
|
153
|
+
readonly info: "#3B82F6";
|
|
154
|
+
};
|
|
155
|
+
readonly border: {
|
|
156
|
+
readonly default: "rgba(255, 255, 255, 0.1)";
|
|
157
|
+
readonly subtle: "rgba(255, 255, 255, 0.05)";
|
|
158
|
+
readonly emphasis: "rgba(212, 175, 55, 0.3)";
|
|
159
|
+
};
|
|
160
|
+
};
|
|
161
|
+
declare const typography: {
|
|
162
|
+
readonly families: {
|
|
163
|
+
readonly sans: "'Inter', sans-serif";
|
|
164
|
+
readonly serif: "'Source Serif 4', serif";
|
|
165
|
+
readonly display: "'Rajdhani', sans-serif";
|
|
166
|
+
readonly mono: "'JetBrains Mono', monospace";
|
|
167
|
+
};
|
|
168
|
+
readonly sizes: {
|
|
169
|
+
readonly xs: "0.75rem";
|
|
170
|
+
readonly sm: "0.875rem";
|
|
171
|
+
readonly base: "1rem";
|
|
172
|
+
readonly lg: "1.125rem";
|
|
173
|
+
readonly xl: "1.25rem";
|
|
174
|
+
readonly "2xl": "1.5rem";
|
|
175
|
+
readonly "3xl": "1.875rem";
|
|
176
|
+
readonly "4xl": "2.25rem";
|
|
177
|
+
readonly "5xl": "3rem";
|
|
178
|
+
};
|
|
179
|
+
readonly lineHeights: {
|
|
180
|
+
readonly xs: "1rem";
|
|
181
|
+
readonly sm: "1.25rem";
|
|
182
|
+
readonly base: "1.5rem";
|
|
183
|
+
readonly lg: "1.75rem";
|
|
184
|
+
readonly xl: "1.75rem";
|
|
185
|
+
readonly "2xl": "2rem";
|
|
186
|
+
readonly "3xl": "2.25rem";
|
|
187
|
+
readonly "4xl": "2.5rem";
|
|
188
|
+
readonly "5xl": "1";
|
|
189
|
+
};
|
|
190
|
+
readonly weights: {
|
|
191
|
+
readonly normal: 400;
|
|
192
|
+
readonly medium: 500;
|
|
193
|
+
readonly semibold: 600;
|
|
194
|
+
readonly bold: 700;
|
|
195
|
+
};
|
|
196
|
+
};
|
|
197
|
+
declare const spacing: {
|
|
198
|
+
readonly 0: "0";
|
|
199
|
+
readonly px: "1px";
|
|
200
|
+
readonly 0.5: "0.125rem";
|
|
201
|
+
readonly 1: "0.25rem";
|
|
202
|
+
readonly 2: "0.5rem";
|
|
203
|
+
readonly 3: "0.75rem";
|
|
204
|
+
readonly 4: "1rem";
|
|
205
|
+
readonly 5: "1.25rem";
|
|
206
|
+
readonly 6: "1.5rem";
|
|
207
|
+
readonly 8: "2rem";
|
|
208
|
+
readonly 10: "2.5rem";
|
|
209
|
+
readonly 12: "3rem";
|
|
210
|
+
readonly 16: "4rem";
|
|
211
|
+
readonly 20: "5rem";
|
|
212
|
+
readonly 24: "6rem";
|
|
213
|
+
};
|
|
214
|
+
declare const radius: {
|
|
215
|
+
readonly none: "0";
|
|
216
|
+
readonly sm: "0.25rem";
|
|
217
|
+
readonly md: "0.375rem";
|
|
218
|
+
readonly lg: "0.5rem";
|
|
219
|
+
readonly xl: "0.75rem";
|
|
220
|
+
readonly "2xl": "1rem";
|
|
221
|
+
readonly full: "9999px";
|
|
222
|
+
};
|
|
223
|
+
declare const shadows: {
|
|
224
|
+
readonly none: "none";
|
|
225
|
+
readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
|
|
226
|
+
readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
|
|
227
|
+
readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1)";
|
|
228
|
+
readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1)";
|
|
229
|
+
readonly glow: "0 0 20px rgba(212, 175, 55, 0.3)";
|
|
230
|
+
};
|
|
231
|
+
declare const motion: {
|
|
232
|
+
readonly duration: {
|
|
233
|
+
readonly instant: "0ms";
|
|
234
|
+
readonly fast: "100ms";
|
|
235
|
+
readonly normal: "200ms";
|
|
236
|
+
readonly slow: "300ms";
|
|
237
|
+
readonly slower: "500ms";
|
|
238
|
+
};
|
|
239
|
+
readonly easing: {
|
|
240
|
+
readonly linear: "cubic-bezier(0, 0, 1, 1)";
|
|
241
|
+
readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
|
|
242
|
+
readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
|
|
243
|
+
readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
244
|
+
};
|
|
245
|
+
};
|
|
246
|
+
declare const zIndex: {
|
|
247
|
+
readonly dropdown: 50;
|
|
248
|
+
readonly sticky: 100;
|
|
249
|
+
readonly modal: 200;
|
|
250
|
+
readonly popover: 300;
|
|
251
|
+
readonly tooltip: 400;
|
|
252
|
+
};
|
|
253
|
+
type ColorToken = typeof colors;
|
|
254
|
+
type TypographyToken = typeof typography;
|
|
255
|
+
type SpacingToken = typeof spacing;
|
|
256
|
+
type RadiusToken = typeof radius;
|
|
257
|
+
type ShadowToken = typeof shadows;
|
|
258
|
+
type MotionToken = typeof motion;
|
|
259
|
+
type ZIndexToken = typeof zIndex;
|
|
260
|
+
type DesignTokens = {
|
|
261
|
+
colors: ColorToken;
|
|
262
|
+
typography: TypographyToken;
|
|
263
|
+
spacing: SpacingToken;
|
|
264
|
+
radius: RadiusToken;
|
|
265
|
+
shadows: ShadowToken;
|
|
266
|
+
motion: MotionToken;
|
|
267
|
+
zIndex: ZIndexToken;
|
|
268
|
+
};
|
|
269
|
+
declare const tokens: DesignTokens;
|
|
270
|
+
|
|
271
|
+
/**
|
|
272
|
+
* Synkra DS - Logo & Brand Icon Registry
|
|
273
|
+
* Social media and payment method logos in SVG format
|
|
274
|
+
*/
|
|
275
|
+
declare const socialLogos: readonly ["Discord", "Facebook", "GitHub", "Google", "Instagram", "LinkedIn", "Messenger", "MidJourney", "OpenAI", "Pinterest", "Reddit", "Skype", "Snapchat", "SoundCloud", "Spotify", "Steam", "TeamViewer", "Telegram", "Threads", "TikTok", "Tinder", "Trello", "Tumblr", "Twitch", "Vine", "WhatsApp", "X", "YouTube"];
|
|
276
|
+
declare const paymentLogos: readonly ["AMEX", "Alipay", "Amazon", "ApplePay", "Bitcoin", "Etherium", "GooglePay", "Maestro", "Mastercard", "PayPal", "Stripe", "Visa"];
|
|
277
|
+
type SocialLogoName = (typeof socialLogos)[number];
|
|
278
|
+
type PaymentLogoName = (typeof paymentLogos)[number];
|
|
279
|
+
type LogoVariant = "color" | "white" | "black";
|
|
280
|
+
/**
|
|
281
|
+
* Get the path to a social media logo SVG
|
|
282
|
+
* @param name - Logo name (e.g., "Discord", "GitHub")
|
|
283
|
+
* @param variant - Color variant: "color", "white", or "black"
|
|
284
|
+
*/
|
|
285
|
+
declare function getSocialLogoPath(name: SocialLogoName, variant?: LogoVariant): string;
|
|
286
|
+
/**
|
|
287
|
+
* Get the path to a payment method logo SVG
|
|
288
|
+
* @param name - Payment method (e.g., "Visa", "Mastercard")
|
|
289
|
+
*/
|
|
290
|
+
declare function getPaymentLogoPath(name: PaymentLogoName): string;
|
|
291
|
+
|
|
292
|
+
/**
|
|
293
|
+
* Synkra DS - Icon System
|
|
294
|
+
*
|
|
295
|
+
* Primary: lucide-react (installed, tree-shakeable)
|
|
296
|
+
* Extended: assets/icons/ (10,000+ SVGs from Figma libraries)
|
|
297
|
+
*
|
|
298
|
+
* Usage:
|
|
299
|
+
* import { Home, Settings, User } from "lucide-react";
|
|
300
|
+
* <Home size={24} className="text-text-secondary" />
|
|
301
|
+
*
|
|
302
|
+
* For icons not in lucide-react, reference the Figma libraries:
|
|
303
|
+
* - 10,000 Free Icons (16 categories, see assets/icons/README-ICONS.md)
|
|
304
|
+
* - 6,000+ UI Icons for Modern Interfaces
|
|
305
|
+
* - Iconly V3.0 (6 styles: Linear, Bold, Bulk, Broken, TwoTone, Light)
|
|
306
|
+
* - Xicons (Social, Crypto, Payment)
|
|
307
|
+
* - Vuesax (6,150+ icons, 6 styles)
|
|
308
|
+
*
|
|
309
|
+
* Total available: 24,000+ icons across 5 Figma libraries
|
|
310
|
+
* See: assets/icons/figma-bibliotecas.md for links and docs
|
|
311
|
+
*/
|
|
312
|
+
/** Icon size presets matching the design system */
|
|
313
|
+
declare const iconSizes: {
|
|
314
|
+
readonly xs: 12;
|
|
315
|
+
readonly sm: 16;
|
|
316
|
+
readonly md: 20;
|
|
317
|
+
readonly lg: 24;
|
|
318
|
+
readonly xl: 32;
|
|
319
|
+
};
|
|
320
|
+
type IconSize = keyof typeof iconSizes;
|
|
321
|
+
/** Icon categories available in the 10K library */
|
|
322
|
+
declare const iconCategories: readonly ["Artificial-Intelligence-Machine-Learning", "Computer-Devices", "Culture", "Entertainment", "Food-drink", "Health", "Images-Photography", "Interface-Essential", "Mail", "Map-Travel", "Money-Shopping", "Nature-Ecology", "Phone", "Programming", "Shipping", "Work-Education"];
|
|
323
|
+
type IconCategory = (typeof iconCategories)[number];
|
|
324
|
+
|
|
325
|
+
/**
|
|
326
|
+
* Merge Tailwind classes with clsx.
|
|
327
|
+
* Handles conditional classes and deduplication.
|
|
328
|
+
*
|
|
329
|
+
* Usage:
|
|
330
|
+
* cn("px-4 py-2", isActive && "bg-primary", className)
|
|
331
|
+
*/
|
|
332
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
333
|
+
|
|
334
|
+
declare const buttonVariants: (props?: ({
|
|
335
|
+
variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link" | null | undefined;
|
|
336
|
+
size?: "sm" | "md" | "lg" | "icon" | null | undefined;
|
|
337
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
338
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
339
|
+
/** Render as child element (Radix Slot pattern) */
|
|
340
|
+
asChild?: boolean;
|
|
341
|
+
/** Show loading spinner and disable interaction */
|
|
342
|
+
loading?: boolean;
|
|
343
|
+
}
|
|
344
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
345
|
+
|
|
346
|
+
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
347
|
+
/** Visual error state */
|
|
348
|
+
error?: boolean;
|
|
349
|
+
}
|
|
350
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
351
|
+
|
|
352
|
+
interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
|
|
353
|
+
/** Visual error state */
|
|
354
|
+
error?: boolean;
|
|
355
|
+
}
|
|
356
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
|
357
|
+
|
|
358
|
+
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
359
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
360
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
361
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
362
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
363
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
364
|
+
|
|
365
|
+
interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
|
|
366
|
+
/** Visual size */
|
|
367
|
+
size?: "sm" | "md";
|
|
368
|
+
}
|
|
369
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
370
|
+
|
|
371
|
+
declare const badgeVariants: (props?: ({
|
|
372
|
+
variant?: "secondary" | "outline" | "default" | "error" | "success" | "warning" | "info" | "gradient" | null | undefined;
|
|
373
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
374
|
+
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
375
|
+
/** Gradient name (only used with variant="gradient") */
|
|
376
|
+
gradient?: "badge" | "purple-blue" | "hibiscus" | "green-mint" | "gold-sunset";
|
|
377
|
+
}
|
|
378
|
+
declare function Badge({ className, variant, gradient, style, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
379
|
+
|
|
380
|
+
declare const Select: React.FC<SelectPrimitive.SelectProps>;
|
|
381
|
+
declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
382
|
+
declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
|
|
383
|
+
interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
|
|
384
|
+
error?: boolean;
|
|
385
|
+
}
|
|
386
|
+
declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
387
|
+
declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
388
|
+
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
389
|
+
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
390
|
+
declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
391
|
+
|
|
392
|
+
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
393
|
+
/** Error visual state */
|
|
394
|
+
error?: boolean;
|
|
395
|
+
}
|
|
396
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
397
|
+
|
|
398
|
+
interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
|
|
399
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
400
|
+
}
|
|
401
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
402
|
+
declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
|
|
403
|
+
declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
404
|
+
|
|
405
|
+
interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
|
|
406
|
+
/** Mark as required field */
|
|
407
|
+
required?: boolean;
|
|
408
|
+
}
|
|
409
|
+
declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
|
|
410
|
+
interface FormFieldProps {
|
|
411
|
+
/** Unique field ID (used for label-input association) */
|
|
412
|
+
id: string;
|
|
413
|
+
/** Label text */
|
|
414
|
+
label: string;
|
|
415
|
+
/** Helper text shown below the input */
|
|
416
|
+
helperText?: string;
|
|
417
|
+
/** Error message (replaces helperText, triggers error state) */
|
|
418
|
+
error?: string;
|
|
419
|
+
/** Mark as required */
|
|
420
|
+
required?: boolean;
|
|
421
|
+
/** Disable the field */
|
|
422
|
+
disabled?: boolean;
|
|
423
|
+
/** Additional class names for the wrapper */
|
|
424
|
+
className?: string;
|
|
425
|
+
/** Input props (passed through to Input atom) */
|
|
426
|
+
inputProps?: Omit<InputProps, "id" | "error" | "disabled" | "required">;
|
|
427
|
+
}
|
|
428
|
+
declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
429
|
+
|
|
430
|
+
interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
|
|
431
|
+
/** Collapsed state (icon-only) */
|
|
432
|
+
collapsed?: boolean;
|
|
433
|
+
}
|
|
434
|
+
declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
|
|
435
|
+
declare const SidebarHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
436
|
+
declare const SidebarContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
437
|
+
interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
438
|
+
label?: string;
|
|
439
|
+
}
|
|
440
|
+
declare const SidebarGroup: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
441
|
+
interface SidebarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
442
|
+
/** Active/selected state */
|
|
443
|
+
active?: boolean;
|
|
444
|
+
/** Icon element (left slot) */
|
|
445
|
+
icon?: React.ReactNode;
|
|
446
|
+
}
|
|
447
|
+
declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
448
|
+
declare const SidebarFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
449
|
+
|
|
450
|
+
interface LoginFormProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {
|
|
451
|
+
/** Card title */
|
|
452
|
+
title?: string;
|
|
453
|
+
/** Card description */
|
|
454
|
+
description?: string;
|
|
455
|
+
/** Submit button label */
|
|
456
|
+
submitLabel?: string;
|
|
457
|
+
/** Loading state */
|
|
458
|
+
loading?: boolean;
|
|
459
|
+
/** Error message shown at the top */
|
|
460
|
+
error?: string;
|
|
461
|
+
/** Called with email and password on submit */
|
|
462
|
+
onSubmit?: (data: {
|
|
463
|
+
email: string;
|
|
464
|
+
password: string;
|
|
465
|
+
}) => void;
|
|
466
|
+
/** Show "forgot password" link */
|
|
467
|
+
showForgotPassword?: boolean;
|
|
468
|
+
/** Called when forgot password is clicked */
|
|
469
|
+
onForgotPassword?: () => void;
|
|
470
|
+
/** Footer content (e.g., "Don't have an account? Sign up") */
|
|
471
|
+
footer?: React.ReactNode;
|
|
472
|
+
}
|
|
473
|
+
declare const LoginForm: React.ForwardRefExoticComponent<LoginFormProps & React.RefAttributes<HTMLDivElement>>;
|
|
474
|
+
|
|
475
|
+
declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
|
476
|
+
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
477
|
+
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
478
|
+
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
479
|
+
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
480
|
+
declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
481
|
+
declare const DialogHeader: {
|
|
482
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
483
|
+
displayName: string;
|
|
484
|
+
};
|
|
485
|
+
declare const DialogFooter: {
|
|
486
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
487
|
+
displayName: string;
|
|
488
|
+
};
|
|
489
|
+
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
490
|
+
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
491
|
+
|
|
492
|
+
declare const ToastProvider: React.FC<ToastPrimitive.ToastProviderProps>;
|
|
493
|
+
declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
|
|
494
|
+
declare const toastVariants: (props?: ({
|
|
495
|
+
variant?: "default" | "error" | "success" | "warning" | "info" | null | undefined;
|
|
496
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
497
|
+
interface ToastProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, VariantProps<typeof toastVariants> {
|
|
498
|
+
}
|
|
499
|
+
declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
|
|
500
|
+
declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
501
|
+
declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
502
|
+
declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
503
|
+
declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
504
|
+
|
|
505
|
+
interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
506
|
+
/** Sidebar collapsed state */
|
|
507
|
+
sidebarCollapsed?: boolean;
|
|
508
|
+
/** Sidebar header content */
|
|
509
|
+
sidebarHeader?: React.ReactNode;
|
|
510
|
+
/** Sidebar navigation content */
|
|
511
|
+
sidebarContent?: React.ReactNode;
|
|
512
|
+
/** Sidebar footer content */
|
|
513
|
+
sidebarFooter?: React.ReactNode;
|
|
514
|
+
/** Top bar content (right side of header) */
|
|
515
|
+
headerContent?: React.ReactNode;
|
|
516
|
+
/** Page title shown in header */
|
|
517
|
+
pageTitle?: string;
|
|
518
|
+
}
|
|
519
|
+
declare const DashboardLayout: React.ForwardRefExoticComponent<DashboardLayoutProps & React.RefAttributes<HTMLDivElement>>;
|
|
520
|
+
|
|
521
|
+
export { Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartColor, Checkbox, type CheckboxProps, type ColorToken, DashboardLayout, type DashboardLayoutProps, type DesignTokens, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, FormField, type FormFieldProps, type GradientName, type IconCategory, type IconSize, Input, type InputProps, Label, type LabelProps, LoginForm, type LoginFormProps, type LogoVariant, type MotionToken, type PaletteCategory, type PaymentLogoName, type RadiusToken, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type ShadowToken, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, type SocialLogoName, type SpacingToken, Switch, type SwitchProps, Textarea, type TextareaProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, type TypographyToken, type ZIndexToken, badgeVariants, buttonVariants, chartPalette, cn, colors, getPaymentLogoPath, getSocialLogoPath, gradients, iconCategories, iconSizes, motion, paletteExtended, paymentLogos, radius, shadows, socialLogos, spacing, toastVariants, tokens, typography, zIndex };
|