@moul-dev/ui 2026.8.21 → 2026.8.25

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.
Files changed (42) hide show
  1. package/dist/assets/stylex.css +456 -4
  2. package/dist/moul-ui.js +4639 -1724
  3. package/dist/src/components/Avatar/Avatar.d.ts +10 -0
  4. package/dist/src/components/Avatar/Avatar.styles.d.ts +178 -6
  5. package/dist/src/components/Avatar/AvatarGroup.d.ts +18 -0
  6. package/dist/src/components/Avatar/index.d.ts +3 -1
  7. package/dist/src/components/Badge/Badge.d.ts +4 -1
  8. package/dist/src/components/Badge/Badge.styles.d.ts +59 -3
  9. package/dist/src/components/Badge/index.d.ts +1 -1
  10. package/dist/src/components/Calendar/Calendar.d.ts +24 -0
  11. package/dist/src/components/Calendar/Calendar.styles.d.ts +161 -0
  12. package/dist/src/components/Calendar/index.d.ts +2 -0
  13. package/dist/src/components/CommandPalette/CommandPalette.d.ts +81 -0
  14. package/dist/src/components/CommandPalette/CommandPalette.styles.d.ts +216 -0
  15. package/dist/src/components/CommandPalette/index.d.ts +2 -0
  16. package/dist/src/components/DateField/DateField.d.ts +24 -0
  17. package/dist/src/components/DateField/DateField.styles.d.ts +99 -0
  18. package/dist/src/components/DateField/index.d.ts +2 -0
  19. package/dist/src/components/DatePicker/DatePicker.d.ts +23 -0
  20. package/dist/src/components/DatePicker/DatePicker.styles.d.ts +127 -0
  21. package/dist/src/components/DatePicker/index.d.ts +2 -0
  22. package/dist/src/components/EmptyState/EmptyState.d.ts +44 -0
  23. package/dist/src/components/EmptyState/EmptyState.styles.d.ts +134 -0
  24. package/dist/src/components/EmptyState/index.d.ts +2 -0
  25. package/dist/src/components/Pagination/Pagination.d.ts +105 -0
  26. package/dist/src/components/Pagination/Pagination.styles.d.ts +152 -0
  27. package/dist/src/components/Pagination/index.d.ts +2 -0
  28. package/dist/src/components/ProgressBar/ProgressBar.d.ts +22 -0
  29. package/dist/src/components/ProgressBar/ProgressBar.styles.d.ts +83 -0
  30. package/dist/src/components/ProgressBar/index.d.ts +2 -0
  31. package/dist/src/components/Skeleton/Skeleton.d.ts +5 -0
  32. package/dist/src/components/Skeleton/Skeleton.styles.d.ts +22 -1
  33. package/dist/src/components/Skeleton/index.d.ts +1 -1
  34. package/dist/src/components/Spinner/Spinner.d.ts +2 -0
  35. package/dist/src/components/Spinner/Spinner.styles.d.ts +19 -1
  36. package/dist/src/components/Spinner/index.d.ts +1 -1
  37. package/dist/src/components/Table/Table.d.ts +97 -12
  38. package/dist/src/components/Table/Table.styles.d.ts +171 -30
  39. package/dist/src/components/Table/index.d.ts +2 -2
  40. package/dist/src/index.d.ts +22 -8
  41. package/dist/tokens.stylex.js +137 -125
  42. package/package.json +1 -1
package/dist/tokens.stylex.js CHANGED
@@ -1,126 +1,138 @@
1
- "use client";
2
- import "@stylexjs/stylex";
3
- //#region src/tokens/tokens.stylex.ts
4
- var e = {
5
- colorNeutral50: "var(--x1ox3f4o)",
6
- colorNeutral100: "var(--x1oziaxx)",
7
- colorNeutral200: "var(--xekkakv)",
8
- colorNeutral300: "var(--x4npmm6)",
9
- colorNeutral400: "var(--x6l5ye8)",
10
- colorNeutral500: "var(--x1s9rx7n)",
11
- colorNeutral600: "var(--x7rwqrp)",
12
- colorNeutral700: "var(--x1ol9w3z)",
13
- colorNeutral800: "var(--xaubso4)",
14
- colorNeutral900: "var(--x21z8aa)",
15
- colorPrimary50: "var(--x1l7m7gb)",
16
- colorPrimary100: "var(--xvy7zpp)",
17
- colorPrimary200: "var(--x189jvvz)",
18
- colorPrimary300: "var(--x1smr4m2)",
19
- colorPrimary400: "var(--x1p3wd7v)",
20
- colorPrimary500: "var(--x11vz4nw)",
21
- colorPrimary600: "var(--x19wncxt)",
22
- colorPrimary700: "var(--xms5kwx)",
23
- colorPrimary800: "var(--x1f1ph2q)",
24
- colorPrimary900: "var(--x27tw8h)",
25
- colorError300: "var(--xywa26s)",
26
- colorError400: "var(--x1ttemnr)",
27
- colorError500: "var(--xgm7y0w)",
28
- colorError600: "var(--x14tkvwa)",
29
- colorError700: "var(--xle5duh)",
30
- colorWarning300: "var(--xxkj1oe)",
31
- colorWarning400: "var(--xvbe47b)",
32
- colorWarning500: "var(--x9boa8o)",
33
- colorWarning600: "var(--x1foz1o3)",
34
- colorWarning700: "var(--x1i80a2t)",
35
- colorSuccess300: "var(--x1eg0uv7)",
36
- colorSuccess400: "var(--x1xkz733)",
37
- colorSuccess500: "var(--xo79180)",
38
- colorSuccess600: "var(--xftmch4)",
39
- colorSuccess700: "var(--x6beaur)",
40
- colorBg: "var(--x1poa4dm)",
41
- colorBgSubtle: "var(--xg2wbmg)",
42
- colorBgElevated: "var(--x1qnu6yg)",
43
- colorFg: "var(--x1jfchzy)",
44
- colorFgSubtle: "var(--xaffrw6)",
45
- colorFgOnPrimary: "var(--x16n9mb9)",
46
- colorBorder: "var(--x1t7g4u6)",
47
- colorBorderSubtle: "var(--xrlp4ei)",
48
- colorBorderFocus: "var(--x79fgis)",
49
- colorBgGlass: "var(--x7we1u4)",
50
- colorBorderGlass: "var(--x8ovk6j)",
51
- colorShadow: "var(--x1qvbbfx)",
52
- colorOverlay: "var(--x2r2dxw)",
53
- colorAlertBgInfo: "var(--x1yncxg9)",
54
- colorAlertBorderInfo: "var(--xgvswlc)",
55
- colorAlertHoverInfo: "var(--xdv3703)",
56
- colorAlertActiveInfo: "var(--x1b4xit2)",
57
- colorAlertBgAccent: "var(--xfh678y)",
58
- colorAlertBorderAccent: "var(--xtwqyzw)",
59
- colorAlertHoverAccent: "var(--x2hivg9)",
60
- colorAlertActiveAccent: "var(--x1wzp30q)",
61
- colorAlertBgSuccess: "var(--xvq252x)",
62
- colorAlertBorderSuccess: "var(--x1iepgx6)",
63
- colorAlertHoverSuccess: "var(--x1gcqxgm)",
64
- colorAlertActiveSuccess: "var(--x1epzsal)",
65
- colorAlertBgWarning: "var(--xg2n39v)",
66
- colorAlertBorderWarning: "var(--x1n16z78)",
67
- colorAlertHoverWarning: "var(--xq3y2id)",
68
- colorAlertActiveWarning: "var(--xf8i1ro)",
69
- colorAlertBgError: "var(--x1u4wyvx)",
70
- colorAlertBorderError: "var(--xwq48n1)",
71
- colorAlertHoverError: "var(--x1cujurv)",
72
- colorAlertActiveError: "var(--x3091pa)",
73
- fontSizeXs: "var(--xpanzj7)",
74
- fontSizeSm: "var(--xz9ra21)",
75
- fontSizeMd: "var(--x19jnf71)",
76
- fontSizeLg: "var(--x16hg6gx)",
77
- fontSizeXl: "var(--xkl0paq)",
78
- fontSizeXxl: "var(--x18r5va)",
79
- fontSize3xl: "var(--x1cwqm9m)",
80
- fontSize4xl: "var(--x14r6drk)",
81
- lineHeightXs: "var(--x1vx0k0f)",
82
- lineHeightSm: "var(--x186dp4y)",
83
- lineHeightMd: "var(--x1bapz3m)",
84
- lineHeightLg: "var(--x107177a)",
85
- lineHeightXl: "var(--x1x2zchm)",
86
- lineHeightXxl: "var(--x1t135xi)",
87
- lineHeight3xl: "var(--xqmssti)",
88
- lineHeight4xl: "var(--x1458rh6)",
89
- fontWeightNormal: "var(--x1oo7w7q)",
90
- fontWeightMedium: "var(--x1i7new4)",
91
- fontWeightSemibold: "var(--xrtlgup)",
92
- fontWeightBold: "var(--x1jugmoa)",
93
- fontFamilyBase: "var(--xb7uvbd)",
94
- spacing1: "var(--x1jforli)",
95
- spacing2: "var(--x9epbqz)",
96
- spacing3: "var(--x1fim08e)",
97
- spacing4: "var(--x1djehx3)",
98
- spacing5: "var(--xpmkuee)",
99
- spacing6: "var(--x1xsmz2k)",
100
- spacing7: "var(--x1aetgvy)",
101
- spacing8: "var(--x3461u0)",
102
- radiusNone: "var(--x10dfn0a)",
103
- radiusSm: "var(--xcxkm4p)",
104
- radiusMd: "var(--x11qts0k)",
105
- radiusLg: "var(--x8ikvy7)",
106
- radiusFull: "var(--x69bofi)",
107
- shadowSm: "var(--x1nbpjwp)",
108
- shadowMd: "var(--xi6zbv0)",
109
- shadowLg: "var(--xckknmd)",
110
- zIndexBase: "var(--x1x05ep0)",
111
- zIndexDropdown: "var(--x1r4igc)",
112
- zIndexModal: "var(--xjyalnt)",
113
- zIndexTooltip: "var(--x1yamzkk)",
114
- zIndexToast: "var(--xd3kluz)",
115
- colorChart1: "var(--x1sjgkb4)",
116
- colorChart2: "var(--xndyysw)",
117
- colorChart3: "var(--x97jlmp)",
118
- colorChart4: "var(--x1te5qoh)",
119
- colorChart5: "var(--x174xad0)",
120
- colorChart6: "var(--xljzat3)",
121
- colorChart7: "var(--x76stw)",
122
- colorChart8: "var(--x2x0qih)",
123
- __varGroupHash__: "x1x2wves"
1
+ 'use client';
2
+ export const tokens = {
3
+ // ── Color palette — oklch(L C H) ──────────────────────────────────
4
+ // Neutral — zero chroma (C=0), hue irrelevant
5
+ colorNeutral50: 'light-dark(oklch(0.98 0 0), oklch(0.14 0 0))',
6
+ colorNeutral100: 'light-dark(oklch(0.96 0 0), oklch(0.18 0 0))',
7
+ colorNeutral200: 'light-dark(oklch(0.92 0 0), oklch(0.24 0 0))',
8
+ colorNeutral300: 'light-dark(oklch(0.84 0 0), oklch(0.32 0 0))',
9
+ colorNeutral400: 'light-dark(oklch(0.70 0 0), oklch(0.45 0 0))',
10
+ colorNeutral500: 'light-dark(oklch(0.55 0 0), oklch(0.55 0 0))',
11
+ colorNeutral600: 'light-dark(oklch(0.42 0 0), oklch(0.68 0 0))',
12
+ colorNeutral700: 'light-dark(oklch(0.32 0 0), oklch(0.78 0 0))',
13
+ colorNeutral800: 'light-dark(oklch(0.22 0 0), oklch(0.88 0 0))',
14
+ colorNeutral900: 'light-dark(oklch(0.14 0 0), oklch(0.96 0 0))',
15
+ // Primary — dynamic hue & chroma
16
+ colorPrimary50: 'light-dark(oklch(0.96 calc(0.025 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.22 calc(0.050 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
17
+ colorPrimary100: 'light-dark(oklch(0.92 calc(0.050 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.28 calc(0.080 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
18
+ colorPrimary200: 'light-dark(oklch(0.85 calc(0.090 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.36 calc(0.120 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
19
+ colorPrimary300: 'light-dark(oklch(0.77 calc(0.140 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.45 calc(0.160 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
20
+ colorPrimary400: 'light-dark(oklch(0.66 calc(0.190 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.56 calc(0.200 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
21
+ colorPrimary500: 'light-dark(oklch(0.55 calc(0.240 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.66 calc(0.220 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
22
+ colorPrimary600: 'light-dark(oklch(0.46 calc(0.220 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.75 calc(0.190 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
23
+ colorPrimary700: 'light-dark(oklch(0.38 calc(0.190 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.83 calc(0.150 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
24
+ colorPrimary800: 'light-dark(oklch(0.30 calc(0.150 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.90 calc(0.090 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
25
+ colorPrimary900: 'light-dark(oklch(0.22 calc(0.110 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.95 calc(0.040 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
26
+ // Error — red hue (H ≈ 27)
27
+ colorError300: 'light-dark(oklch(0.80 0.120 27), oklch(0.45 0.150 27))',
28
+ colorError400: 'light-dark(oklch(0.68 0.170 27), oklch(0.58 0.180 27))',
29
+ colorError500: 'light-dark(oklch(0.56 0.200 27), oklch(0.68 0.190 27))',
30
+ colorError600: 'light-dark(oklch(0.46 0.190 27), oklch(0.78 0.150 27))',
31
+ colorError700: 'light-dark(oklch(0.36 0.160 27), oklch(0.87 0.090 27))',
32
+ // Warning — yellow hue (H ≈ 85)
33
+ colorWarning300: 'light-dark(oklch(0.85 0.130 85), oklch(0.48 0.140 85))',
34
+ colorWarning400: 'light-dark(oklch(0.78 0.160 85), oklch(0.60 0.165 85))',
35
+ colorWarning500: 'light-dark(oklch(0.70 0.175 85), oklch(0.72 0.165 85))',
36
+ colorWarning600: 'light-dark(oklch(0.60 0.165 85), oklch(0.82 0.130 85))',
37
+ colorWarning700: 'light-dark(oklch(0.48 0.140 85), oklch(0.90 0.080 85))',
38
+ // Success — green hue (H ≈ 145)
39
+ colorSuccess300: 'light-dark(oklch(0.82 0.120 145), oklch(0.44 0.130 145))',
40
+ colorSuccess400: 'light-dark(oklch(0.72 0.155 145), oklch(0.56 0.160 145))',
41
+ colorSuccess500: 'light-dark(oklch(0.62 0.175 145), oklch(0.68 0.170 145))',
42
+ colorSuccess600: 'light-dark(oklch(0.52 0.165 145), oklch(0.78 0.135 145))',
43
+ colorSuccess700: 'light-dark(oklch(0.40 0.135 145), oklch(0.87 0.085 145))',
44
+ // ── Semantic surface / text aliases ───────────────────────────────
45
+ colorBg: 'light-dark(oklch(1 0 0), oklch(0.12 0 0))',
46
+ colorBgSubtle: 'light-dark(oklch(0.97 0 0), oklch(0.16 0 0))',
47
+ colorBgElevated: 'light-dark(oklch(1 0 0), oklch(0.20 0 0))',
48
+ colorFg: 'light-dark(oklch(0.14 0 0), oklch(0.96 0 0))',
49
+ colorFgSubtle: 'light-dark(oklch(0.42 0 0), oklch(0.68 0 0))',
50
+ colorFgOnPrimary: 'light-dark(oklch(1 0 0), oklch(0.10 0 0))',
51
+ colorBorder: 'light-dark(oklch(0.84 0 0), oklch(0.28 0 0))',
52
+ colorBorderSubtle: 'light-dark(oklch(0.92 0 0), oklch(0.22 0 0))',
53
+ colorBorderFocus: 'light-dark(oklch(0.55 calc(0.240 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.66 calc(0.220 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
54
+ colorBgGlass: 'light-dark(oklch(1 0 0 / 0.55), oklch(0.20 0 0 / 0.45))',
55
+ colorBorderGlass: 'light-dark(oklch(0 0 0 / 0.08), oklch(1 0 0 / 0.10))',
56
+ // Shadows use oklch with alpha (oklch L C H / alpha)
57
+ colorShadow: 'light-dark(oklch(0 0 0 / 0.10), oklch(0 0 0 / 0.40))',
58
+ colorOverlay: 'light-dark(oklch(0 0 0 / 0.40), oklch(0 0 0 / 0.60))',
59
+ // Alert/Status status variants
60
+ colorAlertBgInfo: 'light-dark(oklch(0.97 0 0), oklch(0.16 0 0))',
61
+ colorAlertBorderInfo: 'light-dark(oklch(0.92 0 0), oklch(0.22 0 0))',
62
+ colorAlertHoverInfo: 'light-dark(oklch(0.92 calc(0.01 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.12 calc(0.01 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
63
+ colorAlertActiveInfo: 'light-dark(oklch(0.88 calc(0.01 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.08 calc(0.01 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
64
+ colorAlertBgAccent: 'light-dark(oklch(0.97 calc(0.02 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.19 calc(0.035 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
65
+ colorAlertBorderAccent: 'light-dark(oklch(0.88 calc(0.04 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.28 calc(0.06 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
66
+ colorAlertHoverAccent: 'light-dark(oklch(0.92 calc(0.04 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.14 calc(0.05 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
67
+ colorAlertActiveAccent: 'light-dark(oklch(0.87 calc(0.06 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.10 calc(0.06 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
68
+ colorAlertBgSuccess: 'light-dark(oklch(0.97 0.02 145), oklch(0.19 0.035 145))',
69
+ colorAlertBorderSuccess: 'light-dark(oklch(0.88 0.04 145), oklch(0.28 0.06 145))',
70
+ colorAlertHoverSuccess: 'light-dark(oklch(0.92 0.04 145), oklch(0.14 0.05 145))',
71
+ colorAlertActiveSuccess: 'light-dark(oklch(0.87 0.06 145), oklch(0.10 0.06 145))',
72
+ colorAlertBgWarning: 'light-dark(oklch(0.98 0.02 85), oklch(0.19 0.035 85))',
73
+ colorAlertBorderWarning: 'light-dark(oklch(0.90 0.05 85), oklch(0.28 0.06 85))',
74
+ colorAlertHoverWarning: 'light-dark(oklch(0.93 0.04 85), oklch(0.14 0.05 85))',
75
+ colorAlertActiveWarning: 'light-dark(oklch(0.88 0.06 85), oklch(0.10 0.06 85))',
76
+ colorAlertBgError: 'light-dark(oklch(0.97 0.02 27), oklch(0.19 0.035 27))',
77
+ colorAlertBorderError: 'light-dark(oklch(0.90 0.05 27), oklch(0.28 0.06 27))',
78
+ colorAlertHoverError: 'light-dark(oklch(0.92 0.04 27), oklch(0.14 0.05 27))',
79
+ colorAlertActiveError: 'light-dark(oklch(0.87 0.06 27), oklch(0.10 0.06 27))',
80
+ // ── Typography ────────────────────────────────────────────────────
81
+ fontSizeXs: 'calc(0.75rem * var(--brand-font-scale, 1))', // 12px
82
+ fontSizeSm: 'calc(0.875rem * var(--brand-font-scale, 1))', // 14px
83
+ fontSizeMd: 'calc(1rem * var(--brand-font-scale, 1))', // 16px
84
+ fontSizeLg: 'calc(1.125rem * var(--brand-font-scale, 1))', // 18px
85
+ fontSizeXl: 'calc(1.25rem * var(--brand-font-scale, 1))', // 20px
86
+ fontSizeXxl: 'calc(1.5rem * var(--brand-font-scale, 1))', // 24px
87
+ fontSize3xl: 'calc(1.875rem * var(--brand-font-scale, 1))', // 30px
88
+ fontSize4xl: 'calc(2.25rem * var(--brand-font-scale, 1))', // 36px
89
+ lineHeightXs: 'calc(1rem * var(--brand-font-scale, 1))',
90
+ lineHeightSm: 'calc(1.25rem * var(--brand-font-scale, 1))',
91
+ lineHeightMd: 'calc(1.5rem * var(--brand-font-scale, 1))',
92
+ lineHeightLg: 'calc(1.75rem * var(--brand-font-scale, 1))',
93
+ lineHeightXl: 'calc(1.75rem * var(--brand-font-scale, 1))',
94
+ lineHeightXxl: 'calc(2rem * var(--brand-font-scale, 1))',
95
+ lineHeight3xl: 'calc(2.25rem * var(--brand-font-scale, 1))',
96
+ lineHeight4xl: 'calc(2.5rem * var(--brand-font-scale, 1))',
97
+ fontWeightNormal: '400',
98
+ fontWeightMedium: '500',
99
+ fontWeightSemibold: '600',
100
+ fontWeightBold: '700',
101
+ fontFamilyBase: "'Google Sans', 'Inter', system-ui, sans-serif",
102
+ // ── Spacing (8 steps, 4px base) ───────────────────────────────────
103
+ spacing1: 'calc(0.25rem * var(--brand-density-factor, 1))', // 4px * density
104
+ spacing2: 'calc(0.5rem * var(--brand-density-factor, 1))', // 8px * density
105
+ spacing3: 'calc(0.75rem * var(--brand-density-factor, 1))', // 12px * density
106
+ spacing4: 'calc(1rem * var(--brand-density-factor, 1))', // 16px * density
107
+ spacing5: 'calc(1.25rem * var(--brand-density-factor, 1))', // 20px * density
108
+ spacing6: 'calc(1.5rem * var(--brand-density-factor, 1))', // 24px * density
109
+ spacing7: 'calc(1.75rem * var(--brand-density-factor, 1))', // 28px * density
110
+ spacing8: 'calc(2rem * var(--brand-density-factor, 1))', // 32px * density
111
+ // ── Border radius ─────────────────────────────────────────────────
112
+ radiusNone: '0',
113
+ radiusSm: 'calc(0.375rem * var(--brand-radius-factor, 1))',
114
+ radiusMd: 'calc(0.75rem * var(--brand-radius-factor, 1))',
115
+ radiusLg: 'calc(1.25rem * var(--brand-radius-factor, 1))',
116
+ radiusFull: '9999px',
117
+ // ── Shadows — use colorShadow token for the shadow color ──────────
118
+ shadowSm: '0 1px 2px 0 var(--colorShadow)',
119
+ shadowMd: '0 4px 6px -1px var(--colorShadow), 0 2px 4px -2px var(--colorShadow)',
120
+ shadowLg: '0 10px 15px -3px var(--colorShadow), 0 4px 6px -4px var(--colorShadow)',
121
+ // ── Z-index ───────────────────────────────────────────────────────
122
+ zIndexBase: '0',
123
+ zIndexDropdown: '1000',
124
+ zIndexModal: '1300',
125
+ zIndexTooltip: '1500',
126
+ zIndexToast: '1700',
127
+ // ── Chart Colors (8 steps for light/dark responsive graphs) ───────
128
+ colorChart1: 'light-dark(oklch(0.60 0.18 250), oklch(0.65 0.16 250))', // Blue
129
+ colorChart2: 'light-dark(oklch(0.75 0.15 75), oklch(0.75 0.14 75))', // Yellow / Gold
130
+ colorChart3: 'light-dark(oklch(0.65 0.18 5), oklch(0.68 0.16 5))', // Rose / Pink
131
+ colorChart4: 'light-dark(oklch(0.62 0.20 300), oklch(0.65 0.18 300))', // Purple / Violet
132
+ colorChart5: 'light-dark(oklch(0.68 0.16 195), oklch(0.70 0.14 195))', // Teal / Cyan
133
+ colorChart6: 'light-dark(oklch(0.58 0.16 45), oklch(0.62 0.15 45))', // Orange / Rust
134
+ colorChart7: 'light-dark(oklch(0.64 0.17 145), oklch(0.68 0.15 145))', // Green
135
+ colorChart8: 'light-dark(oklch(0.60 0 0), oklch(0.65 0 0))', // Gray / Neutral
124
136
  };
125
- //#endregion
126
- export { e as tokens };
137
+ export const rawTokens = tokens;
138
+ export const tokenValues = tokens;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moul-dev/ui",
3
- "version": "2026.08.21",
3
+ "version": "2026.08.25",
4
4
  "description": "Accessible, zero-runtime React component library built on React Aria and StyleX",
5
5
  "license": "MIT",
6
6
  "type": "module",