@wealthx/ui 0.0.1 → 1.0.0

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.
@@ -0,0 +1,615 @@
1
+ import {
2
+ __spreadProps,
3
+ __spreadValues
4
+ } from "../chunk-I4E63NIC.mjs";
5
+
6
+ // src/theme/ThemeProvider.tsx
7
+ import { useMemo, useId } from "react";
8
+ import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
9
+ import CssBaseline from "@mui/material/CssBaseline";
10
+
11
+ // src/theme/createDesignTheme.ts
12
+ import {
13
+ createTheme
14
+ } from "@mui/material/styles";
15
+
16
+ // src/theme/constants.ts
17
+ var FOUNDATION_COLORS = {
18
+ // Brand are tenant-driven; defaults for fallback
19
+ brand: {
20
+ primary: "#33FF99",
21
+ secondary: "#162029"
22
+ },
23
+ text: {
24
+ primary: "#040D13",
25
+ secondary: "#4A5C6A",
26
+ disabled: "#9EAAB5",
27
+ inverse: "#FFFFFF"
28
+ },
29
+ background: {
30
+ primary: "#FFFFFF",
31
+ secondary: "#F5F8FA",
32
+ tertiary: "#E8EAEC",
33
+ elevated: "#FFFFFF"
34
+ },
35
+ border: {
36
+ default: "#E8EAEC",
37
+ focus: "#33FF99",
38
+ // default only; at runtime --color-border-focus uses brand primary
39
+ error: "#F44336"
40
+ },
41
+ state: {
42
+ error: "#F44336",
43
+ warning: "#FF9800",
44
+ success: "#4CAF50",
45
+ info: "#2196F3"
46
+ }
47
+ };
48
+ var GRAY_SCALE = {
49
+ 50: "#F6F6F8",
50
+ 100: "#E8E8EB",
51
+ 200: "#D9D9D9",
52
+ 300: "#B9BCBF",
53
+ 400: "#959495",
54
+ 500: "#868686",
55
+ 600: "#8A8F94"
56
+ };
57
+ var ACCENTS = {
58
+ purple: "#9747FF",
59
+ darkGreen: "#1E4620"
60
+ };
61
+ var OPACITY_UTILITY = {
62
+ disabled: 0.38,
63
+ hover: 0.08
64
+ };
65
+ var CHART_COLORS = {
66
+ background: "#F7F7F8",
67
+ textLabels: "#000000",
68
+ textTitle: "#757373",
69
+ grid: "#E3E3E8",
70
+ series: {
71
+ blue: "#2B72FB",
72
+ teal: "#64BDC6",
73
+ yellow: "#EECA34",
74
+ orange: "#FE6A35",
75
+ red: "#FA4B42",
76
+ pink: "#EE60E0",
77
+ purple: "#7B47E9",
78
+ indigo: "#5D89DF",
79
+ lightBlue: "#6AD1FE",
80
+ green: "#3FDC7E"
81
+ }
82
+ };
83
+ var PRIMARY_OPACITY_STEPS = [0.05, 0.1, 0.2, 0.3, 0.4, 0.6, 0.7, 0.8, 0.9];
84
+ var SECONDARY_OPACITY_STEPS = [0.05, 0.1, 0.2, 0.6, 0.7, 0.8, 0.9];
85
+ var PRIMARY_SCALE_KEYS = ["50", "100", "200", "300", "400", "600", "700", "800", "900"];
86
+ var SECONDARY_SCALE_KEYS = ["50", "100", "200", "600", "700", "800", "900"];
87
+ var DEFAULT_THEME_OPTIONS = {
88
+ primary: FOUNDATION_COLORS.brand.primary,
89
+ secondary: FOUNDATION_COLORS.brand.secondary
90
+ };
91
+ var CONTRAST_DARK = "#040D13";
92
+ var CONTRAST_LIGHT = "#FFFFFF";
93
+
94
+ // src/theme/typography.ts
95
+ var FONT_FAMILY_SANS = '"Proxima Nova", sans-serif';
96
+ function style(weight, size, lineHeight, extra) {
97
+ return __spreadValues({ fontWeight: weight, fontSize: size, lineHeight }, extra);
98
+ }
99
+ var TYPOGRAPHY_DISPLAY = {
100
+ large: style(700, "4rem", "4.5rem", { letterSpacing: "-0.03125rem" }),
101
+ medium: style(700, "3rem", "3.5rem"),
102
+ small: style(600, "2.125rem", "2.625rem")
103
+ };
104
+ var TYPOGRAPHY_HEADING = {
105
+ h1: style(700, "2rem", "2.5rem"),
106
+ h2: style(600, "1.75rem", "2.25rem"),
107
+ h3: style(600, "1.5rem", "2rem"),
108
+ h4: style(600, "1.3125rem", "1.75rem"),
109
+ h5: style(600, "1.125rem", "1.5rem"),
110
+ h6: style(600, "1rem", "1.375rem")
111
+ };
112
+ var TYPOGRAPHY_BODY = {
113
+ large: style(400, "1.125rem", "1.75rem"),
114
+ medium: style(400, "1rem", "1.5rem"),
115
+ small: style(400, "0.875rem", "1.25rem")
116
+ };
117
+ var TYPOGRAPHY_LABEL = {
118
+ large: style(600, "1rem", "1.25rem"),
119
+ medium: style(600, "0.875rem", "1.125rem"),
120
+ small: style(600, "0.75rem", "1rem", { letterSpacing: "0.03125rem" })
121
+ };
122
+ var TYPOGRAPHY_UTILITY = {
123
+ caption: style(400, "0.75rem", "1rem"),
124
+ overline: style(600, "0.625rem", "0.875rem", {
125
+ letterSpacing: "0.09375rem",
126
+ textTransform: "uppercase"
127
+ }),
128
+ code: style(400, "0.875rem", "1.25rem")
129
+ };
130
+ var TYPOGRAPHY = {
131
+ display: TYPOGRAPHY_DISPLAY,
132
+ heading: TYPOGRAPHY_HEADING,
133
+ body: TYPOGRAPHY_BODY,
134
+ label: TYPOGRAPHY_LABEL,
135
+ utility: TYPOGRAPHY_UTILITY
136
+ };
137
+ function toFontShorthand(s, family = FONT_FAMILY_SANS) {
138
+ var _a;
139
+ const f = (_a = s.fontFamily) != null ? _a : family;
140
+ return `${s.fontWeight} ${s.fontSize}/${s.lineHeight} ${f}`;
141
+ }
142
+ function getTypographyCssVars() {
143
+ var _a;
144
+ const family = FONT_FAMILY_SANS;
145
+ const entries = [];
146
+ entries.push(["--font-family-sans", family]);
147
+ for (const [key, style2] of Object.entries(TYPOGRAPHY_DISPLAY)) {
148
+ entries.push([`--font-display-${key}`, toFontShorthand(style2, family)]);
149
+ }
150
+ for (const [key, style2] of Object.entries(TYPOGRAPHY_HEADING)) {
151
+ entries.push([`--font-${key}`, toFontShorthand(style2, family)]);
152
+ }
153
+ for (const [key, style2] of Object.entries(TYPOGRAPHY_BODY)) {
154
+ entries.push([`--font-body-${key}`, toFontShorthand(style2, family)]);
155
+ }
156
+ for (const [key, style2] of Object.entries(TYPOGRAPHY_LABEL)) {
157
+ entries.push([`--font-label-${key}`, toFontShorthand(style2, family)]);
158
+ }
159
+ for (const [key, style2] of Object.entries(TYPOGRAPHY_UTILITY)) {
160
+ entries.push([`--font-${key}`, toFontShorthand(style2, (_a = style2.fontFamily) != null ? _a : family)]);
161
+ }
162
+ const out = {};
163
+ entries.forEach(([k, v]) => {
164
+ out[k] = v;
165
+ });
166
+ return out;
167
+ }
168
+ var TYPOGRAPHY_EXTRA_CSS = {
169
+ "font-display-large": { letterSpacing: "-0.03125rem" },
170
+ "font-label-small": { letterSpacing: "0.03125rem" },
171
+ "font-overline": { letterSpacing: "0.09375rem", textTransform: "uppercase" }
172
+ };
173
+ var VIEWPORT_LABELS = {
174
+ desktop: "Desktop (default)",
175
+ tablet: "Tablet (768\u20131024px)",
176
+ mobile: "Mobile (< 768px)"
177
+ };
178
+ var VIEWPORT_MAX_WIDTH = {
179
+ desktop: void 0,
180
+ tablet: 768,
181
+ mobile: 375
182
+ };
183
+ var RESPONSIVE_DISPLAY_MOBILE = {
184
+ displayLarge: style(700, "2.5rem", "2.8125rem", { letterSpacing: "-0.03125rem" }),
185
+ displayMedium: style(700, "2rem", "2.334rem"),
186
+ h1: style(700, "1.75rem", "2.1875rem"),
187
+ h2: style(600, "1.5rem", "1.93rem")
188
+ };
189
+ var RESPONSIVE_DISPLAY_TABLET = {
190
+ displayLarge: style(700, "3.6rem", "4.05rem", { letterSpacing: "-0.03125rem" }),
191
+ displayMedium: style(700, "2.7rem", "3.15rem"),
192
+ displaySmall: style(600, "1.9125rem", "2.3625rem")
193
+ };
194
+ function getResponsiveFontOverrides(mode) {
195
+ if (mode === "desktop") return {};
196
+ const f = FONT_FAMILY_SANS;
197
+ if (mode === "mobile") {
198
+ return {
199
+ "--font-display-large": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.displayLarge, f),
200
+ "--font-display-medium": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.displayMedium, f),
201
+ "--font-h1": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.h1, f),
202
+ "--font-h2": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.h2, f)
203
+ };
204
+ }
205
+ return {
206
+ "--font-display-large": toFontShorthand(RESPONSIVE_DISPLAY_TABLET.displayLarge, f),
207
+ "--font-display-medium": toFontShorthand(RESPONSIVE_DISPLAY_TABLET.displayMedium, f),
208
+ "--font-display-small": toFontShorthand(RESPONSIVE_DISPLAY_TABLET.displaySmall, f)
209
+ };
210
+ }
211
+
212
+ // src/theme/utils.ts
213
+ function hexToRgb(hex) {
214
+ const normalized = hex.replace(/^#/, "");
215
+ if (normalized.length === 3) {
216
+ const r = parseInt(normalized[0] + normalized[0], 16);
217
+ const g = parseInt(normalized[1] + normalized[1], 16);
218
+ const b = parseInt(normalized[2] + normalized[2], 16);
219
+ return [r, g, b];
220
+ }
221
+ if (normalized.length === 6) {
222
+ const r = parseInt(normalized.slice(0, 2), 16);
223
+ const g = parseInt(normalized.slice(2, 4), 16);
224
+ const b = parseInt(normalized.slice(4, 6), 16);
225
+ return [r, g, b];
226
+ }
227
+ throw new Error(`Invalid hex color: ${hex}`);
228
+ }
229
+ function rgbToCssRgbString(rgb) {
230
+ return `${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
231
+ }
232
+ function rgba(hex, alpha) {
233
+ const [r, g, b] = hexToRgb(hex);
234
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
235
+ }
236
+ function buildOpacityScale(hex, steps) {
237
+ const [r, g, b] = hexToRgb(hex);
238
+ const out = {};
239
+ for (const { key, opacity } of steps) {
240
+ out[key] = `rgba(${r}, ${g}, ${b}, ${opacity})`;
241
+ }
242
+ return out;
243
+ }
244
+ function linearizeSrgb(c) {
245
+ const n = c / 255;
246
+ return n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
247
+ }
248
+ function getLuminance(hex) {
249
+ const [r, g, b] = hexToRgb(hex);
250
+ return 0.2126 * linearizeSrgb(r) + 0.7152 * linearizeSrgb(g) + 0.0722 * linearizeSrgb(b);
251
+ }
252
+ function getContrastText(backgroundColor) {
253
+ const luminance = getLuminance(backgroundColor);
254
+ return luminance > 0.179 ? CONTRAST_DARK : CONTRAST_LIGHT;
255
+ }
256
+
257
+ // src/theme/createDesignTheme.ts
258
+ function buildPrimaryScale(primaryHex) {
259
+ const steps = [
260
+ { key: "50", opacity: 0.05 },
261
+ { key: "100", opacity: 0.1 },
262
+ { key: "200", opacity: 0.2 },
263
+ { key: "300", opacity: 0.3 },
264
+ { key: "400", opacity: 0.4 },
265
+ { key: "600", opacity: 0.6 },
266
+ { key: "700", opacity: 0.7 },
267
+ { key: "800", opacity: 0.8 },
268
+ { key: "900", opacity: 0.9 }
269
+ ];
270
+ const out = {};
271
+ steps.forEach(({ key, opacity }) => {
272
+ out[key] = rgba(primaryHex, opacity);
273
+ });
274
+ return out;
275
+ }
276
+ function buildSecondaryScale(secondaryHex) {
277
+ const steps = [
278
+ { key: "50", opacity: 0.05 },
279
+ { key: "100", opacity: 0.1 },
280
+ { key: "200", opacity: 0.2 },
281
+ { key: "600", opacity: 0.6 },
282
+ { key: "700", opacity: 0.7 },
283
+ { key: "800", opacity: 0.8 },
284
+ { key: "900", opacity: 0.9 }
285
+ ];
286
+ const out = {};
287
+ steps.forEach(({ key, opacity }) => {
288
+ out[key] = rgba(secondaryHex, opacity);
289
+ });
290
+ return out;
291
+ }
292
+ function buildPrimaryScalePalette(primaryHex) {
293
+ const scale = buildPrimaryScale(primaryHex);
294
+ return {
295
+ 50: scale["50"],
296
+ 100: scale["100"],
297
+ 200: scale["200"],
298
+ 300: scale["300"],
299
+ 400: scale["400"],
300
+ 500: primaryHex,
301
+ 600: scale["600"],
302
+ 700: scale["700"],
303
+ 800: scale["800"],
304
+ 900: scale["900"],
305
+ main: primaryHex,
306
+ light: scale["200"],
307
+ dark: scale["800"],
308
+ contrastText: getContrastText(primaryHex)
309
+ };
310
+ }
311
+ function buildSecondaryScalePalette(secondaryHex) {
312
+ const scale = buildSecondaryScale(secondaryHex);
313
+ return {
314
+ 50: scale["50"],
315
+ 100: scale["100"],
316
+ 200: scale["200"],
317
+ 600: scale["600"],
318
+ 700: scale["700"],
319
+ 800: scale["800"],
320
+ 900: scale["900"],
321
+ main: secondaryHex,
322
+ light: scale["200"],
323
+ dark: scale["800"],
324
+ contrastText: getContrastText(secondaryHex)
325
+ };
326
+ }
327
+ function createDesignTheme(config) {
328
+ const { primary, secondary } = config;
329
+ const foundation = FOUNDATION_COLORS;
330
+ const palette = {
331
+ mode: "light",
332
+ primary: buildPrimaryScalePalette(primary),
333
+ secondary: buildSecondaryScalePalette(secondary),
334
+ error: {
335
+ main: FOUNDATION_COLORS.state.error
336
+ },
337
+ warning: {
338
+ main: FOUNDATION_COLORS.state.warning
339
+ },
340
+ success: {
341
+ main: FOUNDATION_COLORS.state.success
342
+ },
343
+ info: {
344
+ main: FOUNDATION_COLORS.state.info
345
+ },
346
+ background: {
347
+ default: foundation.background.primary,
348
+ paper: foundation.background.elevated
349
+ },
350
+ text: {
351
+ primary: foundation.text.primary,
352
+ secondary: foundation.text.secondary,
353
+ disabled: foundation.text.disabled
354
+ },
355
+ grey: GRAY_SCALE,
356
+ divider: foundation.border.default
357
+ };
358
+ const themeOptions = {
359
+ palette,
360
+ typography: {
361
+ fontFamily: FONT_FAMILY_SANS,
362
+ h1: {
363
+ fontFamily: FONT_FAMILY_SANS,
364
+ fontWeight: TYPOGRAPHY_HEADING.h1.fontWeight,
365
+ fontSize: TYPOGRAPHY_HEADING.h1.fontSize,
366
+ lineHeight: TYPOGRAPHY_HEADING.h1.lineHeight
367
+ },
368
+ h2: {
369
+ fontFamily: FONT_FAMILY_SANS,
370
+ fontWeight: TYPOGRAPHY_HEADING.h2.fontWeight,
371
+ fontSize: TYPOGRAPHY_HEADING.h2.fontSize,
372
+ lineHeight: TYPOGRAPHY_HEADING.h2.lineHeight
373
+ },
374
+ h3: {
375
+ fontFamily: FONT_FAMILY_SANS,
376
+ fontWeight: TYPOGRAPHY_HEADING.h3.fontWeight,
377
+ fontSize: TYPOGRAPHY_HEADING.h3.fontSize,
378
+ lineHeight: TYPOGRAPHY_HEADING.h3.lineHeight
379
+ },
380
+ h4: {
381
+ fontFamily: FONT_FAMILY_SANS,
382
+ fontWeight: TYPOGRAPHY_HEADING.h4.fontWeight,
383
+ fontSize: TYPOGRAPHY_HEADING.h4.fontSize,
384
+ lineHeight: TYPOGRAPHY_HEADING.h4.lineHeight
385
+ },
386
+ h5: {
387
+ fontFamily: FONT_FAMILY_SANS,
388
+ fontWeight: TYPOGRAPHY_HEADING.h5.fontWeight,
389
+ fontSize: TYPOGRAPHY_HEADING.h5.fontSize,
390
+ lineHeight: TYPOGRAPHY_HEADING.h5.lineHeight
391
+ },
392
+ h6: {
393
+ fontFamily: FONT_FAMILY_SANS,
394
+ fontWeight: TYPOGRAPHY_HEADING.h6.fontWeight,
395
+ fontSize: TYPOGRAPHY_HEADING.h6.fontSize,
396
+ lineHeight: TYPOGRAPHY_HEADING.h6.lineHeight
397
+ },
398
+ body1: {
399
+ fontFamily: FONT_FAMILY_SANS,
400
+ fontWeight: TYPOGRAPHY_BODY.medium.fontWeight,
401
+ fontSize: TYPOGRAPHY_BODY.medium.fontSize,
402
+ lineHeight: TYPOGRAPHY_BODY.medium.lineHeight
403
+ },
404
+ body2: {
405
+ fontFamily: FONT_FAMILY_SANS,
406
+ fontWeight: TYPOGRAPHY_BODY.small.fontWeight,
407
+ fontSize: TYPOGRAPHY_BODY.small.fontSize,
408
+ lineHeight: TYPOGRAPHY_BODY.small.lineHeight
409
+ }
410
+ },
411
+ components: {
412
+ MuiButton: {
413
+ styleOverrides: {
414
+ root: {
415
+ textTransform: "none",
416
+ borderRadius: 0
417
+ },
418
+ outlined: {
419
+ color: CONTRAST_DARK,
420
+ "& .MuiButton-startIcon, & .MuiButton-endIcon": {
421
+ color: CONTRAST_DARK
422
+ }
423
+ },
424
+ sizeSmall: {
425
+ height: 32,
426
+ minHeight: 32
427
+ },
428
+ sizeMedium: {
429
+ height: 40,
430
+ minHeight: 40
431
+ },
432
+ sizeLarge: {
433
+ height: 48,
434
+ minHeight: 48
435
+ }
436
+ }
437
+ },
438
+ MuiCssBaseline: {
439
+ styleOverrides: {
440
+ ":root": {
441
+ "--theme-primary": primary,
442
+ "--theme-secondary": secondary
443
+ }
444
+ }
445
+ }
446
+ }
447
+ };
448
+ return createTheme(themeOptions);
449
+ }
450
+
451
+ // src/theme/buildCssVariables.ts
452
+ function entriesToVars(prefix, obj) {
453
+ const out = {};
454
+ for (const k of Object.keys(obj)) {
455
+ out[prefix + k] = obj[k];
456
+ }
457
+ return out;
458
+ }
459
+ function buildPrimaryScale2(primaryHex) {
460
+ const steps = PRIMARY_SCALE_KEYS.map((key, i) => ({
461
+ key,
462
+ opacity: PRIMARY_OPACITY_STEPS[i]
463
+ }));
464
+ const [r, g, b] = hexToRgb(primaryHex);
465
+ const out = {};
466
+ steps.forEach(({ key, opacity }) => {
467
+ out[key] = `rgba(${r}, ${g}, ${b}, ${opacity})`;
468
+ });
469
+ return out;
470
+ }
471
+ function buildSecondaryScale2(secondaryHex) {
472
+ const steps = SECONDARY_SCALE_KEYS.map((key, i) => ({
473
+ key,
474
+ opacity: SECONDARY_OPACITY_STEPS[i]
475
+ }));
476
+ const [r, g, b] = hexToRgb(secondaryHex);
477
+ const out = {};
478
+ steps.forEach(({ key, opacity }) => {
479
+ out[key] = `rgba(${r}, ${g}, ${b}, ${opacity})`;
480
+ });
481
+ return out;
482
+ }
483
+ function buildCssVariables(options) {
484
+ var _a;
485
+ const { primary, secondary } = options;
486
+ const foundation = FOUNDATION_COLORS;
487
+ const primaryRgb = hexToRgb(primary);
488
+ const secondaryRgb = hexToRgb(secondary);
489
+ const primaryScale = buildPrimaryScale2(primary);
490
+ const secondaryScale = buildSecondaryScale2(secondary);
491
+ return __spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
492
+ // RGB triplets for opacity-based usage
493
+ "--primary-rgb": rgbToCssRgbString(primaryRgb),
494
+ "--secondary-rgb": rgbToCssRgbString(secondaryRgb),
495
+ // Brand (tenant)
496
+ "--color-brand-primary": primary,
497
+ "--color-brand-secondary": secondary
498
+ }, entriesToVars("--primary-", primaryScale)), entriesToVars("--secondary-", secondaryScale)), {
499
+ // Foundation – text
500
+ "--color-text-primary": foundation.text.primary,
501
+ "--color-text-secondary": foundation.text.secondary,
502
+ "--color-text-disabled": foundation.text.disabled,
503
+ "--color-text-inverse": foundation.text.inverse,
504
+ // Foundation – background
505
+ "--color-background-primary": foundation.background.primary,
506
+ "--color-background-secondary": foundation.background.secondary,
507
+ "--color-background-tertiary": foundation.background.tertiary,
508
+ "--color-background-elevated": foundation.background.elevated,
509
+ // Foundation – border (focus = brand primary for tenant theming)
510
+ "--color-border-default": foundation.border.default,
511
+ "--color-border-focus": primary,
512
+ "--color-border-error": foundation.border.error,
513
+ // Foundation – state
514
+ "--color-state-error": FOUNDATION_COLORS.state.error,
515
+ "--color-state-warning": FOUNDATION_COLORS.state.warning,
516
+ "--color-state-success": FOUNDATION_COLORS.state.success,
517
+ "--color-state-info": FOUNDATION_COLORS.state.info
518
+ }), entriesToVars("--gray-", GRAY_SCALE)), {
519
+ // Accents
520
+ "--accent-purple": ACCENTS.purple,
521
+ "--accent-dark-green": ACCENTS.darkGreen,
522
+ // Opacity utility
523
+ "--opacity-disabled": String(OPACITY_UTILITY.disabled),
524
+ "--opacity-hover": String(OPACITY_UTILITY.hover),
525
+ // Semantic aliases (component-level tokens that alias foundation/extended)
526
+ "--input-background": foundation.background.primary,
527
+ "--input-border": foundation.border.default,
528
+ "--input-border-focus": foundation.border.focus,
529
+ "--input-border-error": foundation.border.error,
530
+ "--input-text": foundation.text.primary,
531
+ "--input-placeholder": foundation.text.disabled,
532
+ "--card-background": foundation.background.elevated,
533
+ "--card-border": foundation.border.default,
534
+ "--navbar-background": foundation.background.elevated,
535
+ "--navbar-text": foundation.text.primary,
536
+ "--navbar-text-active": primary,
537
+ "--navbar-border": foundation.border.default,
538
+ "--link-default": primary,
539
+ "--link-hover": (_a = primaryScale["400"]) != null ? _a : rgba(primary, 0.4),
540
+ "--modal-background": foundation.background.elevated,
541
+ "--tooltip-background": secondary,
542
+ "--tooltip-text": foundation.text.inverse,
543
+ "--divider": foundation.border.default,
544
+ // Charts
545
+ "--chart-background": CHART_COLORS.background,
546
+ "--chart-text-labels": CHART_COLORS.textLabels,
547
+ "--chart-text-title": CHART_COLORS.textTitle,
548
+ "--chart-grid": CHART_COLORS.grid,
549
+ "--chart-series-blue": CHART_COLORS.series.blue,
550
+ "--chart-series-teal": CHART_COLORS.series.teal,
551
+ "--chart-series-yellow": CHART_COLORS.series.yellow,
552
+ "--chart-series-orange": CHART_COLORS.series.orange,
553
+ "--chart-series-red": CHART_COLORS.series.red,
554
+ "--chart-series-pink": CHART_COLORS.series.pink,
555
+ "--chart-series-purple": CHART_COLORS.series.purple,
556
+ "--chart-series-indigo": CHART_COLORS.series.indigo,
557
+ "--chart-series-light-blue": CHART_COLORS.series.lightBlue,
558
+ "--chart-series-green": CHART_COLORS.series.green
559
+ }), getTypographyCssVars());
560
+ }
561
+
562
+ // src/theme/ThemeProvider.tsx
563
+ import { jsx, jsxs } from "react/jsx-runtime";
564
+ function ThemeProvider({
565
+ children,
566
+ primary = DEFAULT_THEME_OPTIONS.primary,
567
+ secondary = DEFAULT_THEME_OPTIONS.secondary,
568
+ injectCssVariables = true
569
+ }) {
570
+ const options = useMemo(() => ({ primary, secondary }), [primary, secondary]);
571
+ const theme = useMemo(() => createDesignTheme(options), [options]);
572
+ const cssVars = useMemo(() => buildCssVariables(options), [options]);
573
+ const styleId = useId().replace(/:/g, "-");
574
+ const styleContent = useMemo(() => {
575
+ if (!injectCssVariables) return "";
576
+ const declarations = Object.entries(cssVars).map(([key, value]) => `${key}: ${value};`).join("\n ");
577
+ return `:root {
578
+ ${declarations}
579
+ }`;
580
+ }, [cssVars, injectCssVariables]);
581
+ return /* @__PURE__ */ jsxs(MuiThemeProvider, { theme, children: [
582
+ injectCssVariables && styleContent ? /* @__PURE__ */ jsx("style", { id: `theme-vars-${styleId}`, "data-theme-vars": true, children: styleContent }) : null,
583
+ /* @__PURE__ */ jsx(CssBaseline, {}),
584
+ children
585
+ ] });
586
+ }
587
+ ThemeProvider.displayName = "ThemeProvider";
588
+ export {
589
+ ACCENTS,
590
+ CHART_COLORS,
591
+ FONT_FAMILY_SANS,
592
+ FOUNDATION_COLORS,
593
+ GRAY_SCALE,
594
+ OPACITY_UTILITY,
595
+ TYPOGRAPHY,
596
+ TYPOGRAPHY_BODY,
597
+ TYPOGRAPHY_DISPLAY,
598
+ TYPOGRAPHY_EXTRA_CSS,
599
+ TYPOGRAPHY_HEADING,
600
+ TYPOGRAPHY_LABEL,
601
+ TYPOGRAPHY_UTILITY,
602
+ ThemeProvider,
603
+ VIEWPORT_LABELS,
604
+ VIEWPORT_MAX_WIDTH,
605
+ buildCssVariables,
606
+ buildOpacityScale,
607
+ createDesignTheme,
608
+ getContrastText,
609
+ getLuminance,
610
+ getResponsiveFontOverrides,
611
+ getTypographyCssVars,
612
+ hexToRgb,
613
+ rgbToCssRgbString,
614
+ rgba
615
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wealthx/ui",
3
- "version": "0.0.1",
3
+ "version": "1.0.0",
4
4
  "sideEffects": false,
5
5
  "license": "MIT",
6
6
  "exports": {