@impulse-ui-native/theme 2.0.1 → 2.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.
Files changed (158) hide show
  1. package/LICENSE +21 -0
  2. package/dist/constants/index.d.mts +10 -0
  3. package/dist/constants/index.js +2 -0
  4. package/dist/constants/index.js.map +1 -0
  5. package/dist/constants/style.constants.d.mts +14 -0
  6. package/dist/constants/style.constants.js +100 -0
  7. package/dist/constants/style.constants.js.map +1 -0
  8. package/dist/hooks/index.d.mts +28 -0
  9. package/dist/hooks/index.js +19 -0
  10. package/dist/hooks/index.js.map +1 -0
  11. package/dist/hooks/use-border.hook.d.mts +5 -0
  12. package/dist/hooks/use-border.hook.js +10 -0
  13. package/dist/hooks/use-border.hook.js.map +1 -0
  14. package/dist/hooks/use-colors.hook.d.mts +16 -0
  15. package/dist/hooks/use-colors.hook.js +10 -0
  16. package/dist/hooks/use-colors.hook.js.map +1 -0
  17. package/dist/hooks/use-components-tokens.hook.d.mts +16 -0
  18. package/dist/hooks/use-components-tokens.hook.js +10 -0
  19. package/dist/hooks/use-components-tokens.hook.js.map +1 -0
  20. package/dist/hooks/use-radii.hook.d.mts +5 -0
  21. package/dist/hooks/use-radii.hook.js +10 -0
  22. package/dist/hooks/use-radii.hook.js.map +1 -0
  23. package/dist/hooks/use-space.hook.d.mts +5 -0
  24. package/dist/hooks/use-space.hook.js +10 -0
  25. package/dist/hooks/use-space.hook.js.map +1 -0
  26. package/dist/hooks/use-style-props.hook.d.mts +13 -0
  27. package/dist/hooks/use-style-props.hook.js +10 -0
  28. package/dist/hooks/use-style-props.hook.js.map +1 -0
  29. package/dist/hooks/use-theme.hook.d.mts +16 -0
  30. package/dist/hooks/use-theme.hook.js +8 -0
  31. package/dist/hooks/use-theme.hook.js.map +1 -0
  32. package/dist/hooks/use-themed-styles.d.mts +22 -0
  33. package/dist/hooks/use-themed-styles.js +16 -0
  34. package/dist/hooks/use-themed-styles.js.map +1 -0
  35. package/dist/index.d.mts +39 -554
  36. package/dist/index.js +6 -1051
  37. package/dist/index.js.map +1 -1
  38. package/dist/providers/index.d.mts +16 -0
  39. package/dist/providers/index.js +2 -0
  40. package/dist/providers/index.js.map +1 -0
  41. package/dist/providers/theme.provider.d.mts +29 -0
  42. package/dist/providers/theme.provider.js +35 -0
  43. package/dist/providers/theme.provider.js.map +1 -0
  44. package/dist/theme/create-button-tokens.d.mts +16 -0
  45. package/dist/theme/create-button-tokens.js +78 -0
  46. package/dist/theme/create-button-tokens.js.map +1 -0
  47. package/dist/theme/create-control-tokens.d.mts +20 -0
  48. package/dist/theme/create-control-tokens.js +153 -0
  49. package/dist/theme/create-control-tokens.js.map +1 -0
  50. package/dist/theme/create-data-state-tokens.d.mts +16 -0
  51. package/dist/theme/create-data-state-tokens.js +23 -0
  52. package/dist/theme/create-data-state-tokens.js.map +1 -0
  53. package/dist/theme/create-datetime-picker.d.mts +16 -0
  54. package/dist/theme/create-datetime-picker.js +43 -0
  55. package/dist/theme/create-datetime-picker.js.map +1 -0
  56. package/dist/theme/create-flyout-tokens.d.mts +16 -0
  57. package/dist/theme/create-flyout-tokens.js +27 -0
  58. package/dist/theme/create-flyout-tokens.js.map +1 -0
  59. package/dist/theme/create-icon-button-tokens.d.mts +16 -0
  60. package/dist/theme/create-icon-button-tokens.js +72 -0
  61. package/dist/theme/create-icon-button-tokens.js.map +1 -0
  62. package/dist/theme/create-select-tokens.d.mts +16 -0
  63. package/dist/theme/create-select-tokens.js +14 -0
  64. package/dist/theme/create-select-tokens.js.map +1 -0
  65. package/dist/theme/create-skeleton-tokens.d.mts +16 -0
  66. package/dist/theme/create-skeleton-tokens.js +21 -0
  67. package/dist/theme/create-skeleton-tokens.js.map +1 -0
  68. package/dist/theme/create-tag-tokens.d.mts +16 -0
  69. package/dist/theme/create-tag-tokens.js +102 -0
  70. package/dist/theme/create-tag-tokens.js.map +1 -0
  71. package/dist/theme/create-time-picker-tokens.d.mts +16 -0
  72. package/dist/theme/create-time-picker-tokens.js +40 -0
  73. package/dist/theme/create-time-picker-tokens.js.map +1 -0
  74. package/dist/theme/dark.theme.d.mts +16 -0
  75. package/dist/theme/dark.theme.js +24 -0
  76. package/dist/theme/dark.theme.js.map +1 -0
  77. package/dist/theme/index.d.mts +16 -0
  78. package/dist/theme/index.js +8 -0
  79. package/dist/theme/index.js.map +1 -0
  80. package/dist/theme/light.theme.d.mts +16 -0
  81. package/dist/theme/light.theme.js +24 -0
  82. package/dist/theme/light.theme.js.map +1 -0
  83. package/dist/theme/tokens.theme.d.mts +29 -0
  84. package/dist/theme/tokens.theme.js +257 -0
  85. package/dist/theme/tokens.theme.js.map +1 -0
  86. package/dist/types/border.types.d.mts +22 -0
  87. package/dist/types/border.types.js +1 -0
  88. package/dist/types/border.types.js.map +1 -0
  89. package/dist/types/buttons-tokens.types.d.mts +42 -0
  90. package/dist/types/buttons-tokens.types.js +1 -0
  91. package/dist/types/buttons-tokens.types.js.map +1 -0
  92. package/dist/types/chart.types.d.mts +19 -0
  93. package/dist/types/chart.types.js +1 -0
  94. package/dist/types/chart.types.js.map +1 -0
  95. package/dist/types/color.types.d.mts +9 -0
  96. package/dist/types/color.types.js +1 -0
  97. package/dist/types/color.types.js.map +1 -0
  98. package/dist/types/components.types.d.mts +4 -0
  99. package/dist/types/components.types.js +1 -0
  100. package/dist/types/components.types.js.map +1 -0
  101. package/dist/types/control-tokes.types.d.mts +59 -0
  102. package/dist/types/control-tokes.types.js +1 -0
  103. package/dist/types/control-tokes.types.js.map +1 -0
  104. package/dist/types/data-state-tokens.types.d.mts +23 -0
  105. package/dist/types/data-state-tokens.types.js +1 -0
  106. package/dist/types/data-state-tokens.types.js.map +1 -0
  107. package/dist/types/datetime-picker-tokens.types.d.mts +47 -0
  108. package/dist/types/datetime-picker-tokens.types.js +1 -0
  109. package/dist/types/datetime-picker-tokens.types.js.map +1 -0
  110. package/dist/types/dimension.types.d.mts +14 -0
  111. package/dist/types/dimension.types.js +1 -0
  112. package/dist/types/dimension.types.js.map +1 -0
  113. package/dist/types/flex.types.d.mts +25 -0
  114. package/dist/types/flex.types.js +1 -0
  115. package/dist/types/flex.types.js.map +1 -0
  116. package/dist/types/flyout-tokens.types.d.mts +25 -0
  117. package/dist/types/flyout-tokens.types.js +1 -0
  118. package/dist/types/flyout-tokens.types.js.map +1 -0
  119. package/dist/types/index.d.mts +22 -0
  120. package/dist/types/index.js +22 -0
  121. package/dist/types/index.js.map +1 -0
  122. package/dist/types/select-tokens.types.d.mts +11 -0
  123. package/dist/types/select-tokens.types.js +1 -0
  124. package/dist/types/select-tokens.types.js.map +1 -0
  125. package/dist/types/shadow.types.d.mts +20 -0
  126. package/dist/types/shadow.types.js +1 -0
  127. package/dist/types/shadow.types.js.map +1 -0
  128. package/dist/types/skeleton-tokens.types.d.mts +18 -0
  129. package/dist/types/skeleton-tokens.types.js +1 -0
  130. package/dist/types/skeleton-tokens.types.js.map +1 -0
  131. package/dist/types/spacing.types.d.mts +20 -0
  132. package/dist/types/spacing.types.js +1 -0
  133. package/dist/types/spacing.types.js.map +1 -0
  134. package/dist/types/style.types.d.mts +14 -0
  135. package/dist/types/style.types.js +1 -0
  136. package/dist/types/style.types.js.map +1 -0
  137. package/dist/types/tag-tokens.types.d.mts +28 -0
  138. package/dist/types/tag-tokens.types.js +1 -0
  139. package/dist/types/tag-tokens.types.js.map +1 -0
  140. package/dist/types/theme-provider.types.d.mts +90 -0
  141. package/dist/types/theme-provider.types.js +1 -0
  142. package/dist/types/theme-provider.types.js.map +1 -0
  143. package/dist/types/time-picker-token.types.d.mts +34 -0
  144. package/dist/types/time-picker-token.types.js +1 -0
  145. package/dist/types/time-picker-token.types.js.map +1 -0
  146. package/dist/types/tokens.types.d.mts +27 -0
  147. package/dist/types/tokens.types.js +1 -0
  148. package/dist/types/tokens.types.js.map +1 -0
  149. package/dist/types/typography.types.d.mts +23 -0
  150. package/dist/types/typography.types.js +1 -0
  151. package/dist/types/typography.types.js.map +1 -0
  152. package/dist/utils/index.d.mts +22 -0
  153. package/dist/utils/index.js +2 -0
  154. package/dist/utils/index.js.map +1 -0
  155. package/dist/utils/style.utils.d.mts +27 -0
  156. package/dist/utils/style.utils.js +49 -0
  157. package/dist/utils/style.utils.js.map +1 -0
  158. package/package.json +8 -7
package/dist/index.js CHANGED
@@ -1,1052 +1,7 @@
1
- // src/constants/style.constants.ts
2
- var StylePropsRecord = {
3
- margin: 0,
4
- marginTop: 0,
5
- marginBottom: 0,
6
- marginLeft: 0,
7
- marginRight: 0,
8
- marginHorizontal: 0,
9
- marginVertical: 0,
10
- padding: 0,
11
- paddingTop: 0,
12
- paddingBottom: 0,
13
- paddingLeft: 0,
14
- paddingRight: 0,
15
- paddingHorizontal: 0,
16
- paddingVertical: 0,
17
- color: 0,
18
- backgroundColor: 0,
19
- opacity: 0,
20
- shadow: 0,
21
- shadowPosition: 0,
22
- shadowColor: 0,
23
- shadowOpacity: 0,
24
- shadowRadius: 0,
25
- shadowOffset: 0,
26
- elevation: 0,
27
- borderRadius: 0,
28
- borderTopLeftRadius: 0,
29
- borderTopRightRadius: 0,
30
- borderBottomLeftRadius: 0,
31
- borderBottomRightRadius: 0,
32
- borderWidth: 0,
33
- borderTopWidth: 0,
34
- borderRightWidth: 0,
35
- borderBottomWidth: 0,
36
- borderLeftWidth: 0,
37
- borderColor: 0,
38
- borderTopColor: 0,
39
- borderRightColor: 0,
40
- borderBottomColor: 0,
41
- borderLeftColor: 0,
42
- borderStyle: 0,
43
- fontSize: 0,
44
- fontFamily: 0,
45
- fontWeight: 0,
46
- fontStyle: 0,
47
- fontVariant: 0,
48
- letterSpacing: 0,
49
- lineHeight: 0,
50
- textAlign: 0,
51
- textDecorationLine: 0,
52
- textDecorationStyle: 0,
53
- textDecorationColor: 0,
54
- textTransform: 0,
55
- includeFontPadding: 0,
56
- textAlignVertical: 0,
57
- writingDirection: 0,
58
- flex: 0,
59
- flexGrow: 0,
60
- flexShrink: 0,
61
- flexBasis: 0,
62
- flexDirection: 0,
63
- flexWrap: 0,
64
- justifyContent: 0,
65
- alignItems: 0,
66
- alignSelf: 0,
67
- alignContent: 0,
68
- gap: 0,
69
- rowGap: 0,
70
- columnGap: 0,
71
- position: 0,
72
- top: 0,
73
- right: 0,
74
- bottom: 0,
75
- left: 0,
76
- zIndex: 0,
77
- width: 0,
78
- height: 0,
79
- minWidth: 0,
80
- maxWidth: 0,
81
- minHeight: 0,
82
- maxHeight: 0,
83
- aspectRatio: 0,
84
- overflow: 0
85
- };
86
- var StylePropsSet = new Set(
87
- Object.keys(StylePropsRecord)
88
- );
89
- var shadowScale = {
90
- none: { radius: 0, opacity: 0, elevation: 0 },
91
- xs: { radius: 2, opacity: 0.08, elevation: 1 },
92
- sm: { radius: 4, opacity: 0.1, elevation: 2 },
93
- md: { radius: 8, opacity: 0.15, elevation: 4 },
94
- lg: { radius: 16, opacity: 0.18, elevation: 8 },
95
- xl: { radius: 24, opacity: 0.22, elevation: 12 }
96
- };
97
-
98
- // src/hooks/use-border.hook.ts
99
- import { useMemo as useMemo2 } from "react";
100
-
101
- // src/providers/theme.provider.tsx
102
- import {
103
- createContext,
104
- memo,
105
- useContext,
106
- useMemo
107
- } from "react";
108
- import { merge } from "@impulse-ui-native/core";
109
-
110
- // src/theme/create-button-tokens.ts
111
- function createButtonTokens(tokens) {
112
- const primary = tokens.colors.primary.value;
113
- const primaryContrast = tokens.colors.primary.contrast;
114
- const secondary = tokens.colors.secondary.value;
115
- const secondaryContrast = tokens.colors.secondary.contrast;
116
- const neutral = tokens.colors.neutral;
117
- const disabledColor = tokens.colors.text.disabled;
118
- return {
119
- borderWidth: tokens.borderSize.sm,
120
- borderRadius: tokens.radii.md,
121
- sizes: {
122
- small: {
123
- height: 32,
124
- paddingVertical: 6,
125
- paddingHorizontal: 12,
126
- fontSize: tokens.fontSize.xsm
127
- },
128
- medium: {
129
- height: 40,
130
- paddingVertical: 8,
131
- paddingHorizontal: 16,
132
- fontSize: tokens.fontSize.sm
133
- },
134
- large: {
135
- height: 48,
136
- paddingVertical: 10,
137
- paddingHorizontal: 20,
138
- fontSize: tokens.fontSize.sm
139
- }
140
- },
141
- variants: {
142
- filled: {
143
- backgroundColor: primary,
144
- borderColor: primary,
145
- color: primaryContrast,
146
- disabledBackgroundColor: neutral["5"],
147
- disabledBorderColor: neutral["5"],
148
- disabledColor
149
- },
150
- outlined: {
151
- backgroundColor: "transparent",
152
- borderColor: primary,
153
- color: primary,
154
- disabledBackgroundColor: "transparent",
155
- disabledBorderColor: neutral["5"],
156
- disabledColor
157
- },
158
- soft: {
159
- backgroundColor: secondary,
160
- borderColor: secondary,
161
- color: secondaryContrast,
162
- disabledBackgroundColor: neutral["3"],
163
- disabledBorderColor: neutral["3"],
164
- disabledColor
165
- },
166
- ghost: {
167
- backgroundColor: "transparent",
168
- borderColor: "transparent",
169
- color: primary,
170
- disabledBackgroundColor: "transparent",
171
- disabledBorderColor: "transparent",
172
- disabledColor
173
- },
174
- plain: {
175
- backgroundColor: "transparent",
176
- borderColor: "transparent",
177
- color: primary,
178
- disabledBackgroundColor: "transparent",
179
- disabledBorderColor: "transparent",
180
- disabledColor
181
- }
182
- }
183
- };
184
- }
185
-
186
- // src/theme/create-control-tokens.ts
187
- function createControlAddonTokens(tokens) {
188
- return {
189
- marginHorizontal: tokens.space.xxs,
190
- hitSlop: tokens.space.sm,
191
- iconColor: tokens.colors.text.secondary,
192
- errorIconColor: tokens.colors.feedback.error.value,
193
- disabledIconColor: tokens.colors.text.disabled
194
- };
195
- }
196
- function createControlContainerTokens(tokens) {
197
- const ErrorColor = tokens.colors.feedback.error.value;
198
- const TransparentColor = "transparent";
199
- return {
200
- borderWidth: tokens.borderSize.sm,
201
- borderRadius: tokens.radii.sm,
202
- disabledOpacity: 0.7,
203
- sizes: {
204
- small: {
205
- height: 32,
206
- paddingHorizontal: tokens.space.xs
207
- },
208
- medium: {
209
- height: 40,
210
- paddingHorizontal: tokens.space.xs
211
- },
212
- large: {
213
- height: 48,
214
- paddingHorizontal: tokens.space.xs
215
- }
216
- },
217
- variants: {
218
- filled: {
219
- backgroundColor: tokens.colors.surface.secondary.value,
220
- borderColor: TransparentColor,
221
- errorBorderColor: ErrorColor,
222
- disabledBackgroundColor: tokens.colors.neutral["2"],
223
- disabledBorderColor: TransparentColor
224
- },
225
- outlined: {
226
- backgroundColor: TransparentColor,
227
- borderColor: tokens.colors.neutral["5"],
228
- errorBorderColor: ErrorColor,
229
- disabledBackgroundColor: TransparentColor,
230
- disabledBorderColor: tokens.colors.neutral["5"]
231
- },
232
- soft: {
233
- backgroundColor: tokens.colors.accent.value,
234
- borderColor: TransparentColor,
235
- errorBorderColor: ErrorColor,
236
- disabledBackgroundColor: tokens.colors.neutral["2"],
237
- disabledBorderColor: TransparentColor
238
- },
239
- ghost: {
240
- backgroundColor: TransparentColor,
241
- borderColor: TransparentColor,
242
- errorBorderColor: ErrorColor,
243
- disabledBackgroundColor: TransparentColor,
244
- disabledBorderColor: TransparentColor
245
- },
246
- plain: {
247
- backgroundColor: TransparentColor,
248
- borderColor: TransparentColor,
249
- errorBorderColor: ErrorColor,
250
- disabledBackgroundColor: TransparentColor,
251
- disabledBorderColor: TransparentColor
252
- }
253
- }
254
- };
255
- }
256
- function createControlErrorTokens(tokens) {
257
- return {
258
- marginTop: tokens.space.xxs,
259
- color: tokens.colors.feedback.error.value,
260
- fontSize: tokens.fontSize.xs
261
- };
262
- }
263
- function createControlInputTokens(tokens) {
264
- return {
265
- flex: 1,
266
- fontFamily: tokens.fontFamily.normal[400],
267
- paddingHorizontal: tokens.space.xxs,
268
- sizes: {
269
- small: {
270
- fontSize: tokens.fontSize.xs
271
- },
272
- medium: {
273
- fontSize: tokens.fontSize.xsm
274
- },
275
- large: {
276
- fontSize: tokens.fontSize.sm
277
- }
278
- },
279
- variants: {
280
- filled: {
281
- color: tokens.colors.text.primary,
282
- placeholderColor: tokens.colors.text.disabled,
283
- disabledColor: tokens.colors.text.disabled,
284
- disabledPlaceholderColor: tokens.colors.text.disabled,
285
- errorColor: tokens.colors.text.primary,
286
- errorPlaceholderColor: tokens.colors.feedback.error.value
287
- },
288
- outlined: {
289
- color: tokens.colors.text.primary,
290
- placeholderColor: tokens.colors.text.disabled,
291
- disabledColor: tokens.colors.text.disabled,
292
- disabledPlaceholderColor: tokens.colors.text.disabled,
293
- errorColor: tokens.colors.text.primary,
294
- errorPlaceholderColor: tokens.colors.feedback.error.value
295
- },
296
- soft: {
297
- color: tokens.colors.accent.contrast,
298
- placeholderColor: tokens.colors.accent.contrast,
299
- disabledColor: tokens.colors.text.disabled,
300
- disabledPlaceholderColor: tokens.colors.text.disabled,
301
- errorColor: tokens.colors.accent.contrast,
302
- errorPlaceholderColor: tokens.colors.feedback.error.value
303
- },
304
- ghost: {
305
- color: tokens.colors.text.primary,
306
- placeholderColor: tokens.colors.text.disabled,
307
- disabledColor: tokens.colors.text.disabled,
308
- disabledPlaceholderColor: tokens.colors.text.disabled,
309
- errorColor: tokens.colors.text.primary,
310
- errorPlaceholderColor: tokens.colors.feedback.error.value
311
- },
312
- plain: {
313
- color: tokens.colors.text.primary,
314
- placeholderColor: tokens.colors.text.disabled,
315
- disabledColor: tokens.colors.text.disabled,
316
- disabledPlaceholderColor: tokens.colors.text.disabled,
317
- errorColor: tokens.colors.text.primary,
318
- errorPlaceholderColor: tokens.colors.feedback.error.value
319
- }
320
- }
321
- };
322
- }
323
- function createControlLabelTokens(tokens) {
324
- return {
325
- marginBottom: tokens.space.xxs,
326
- fontSize: tokens.fontSize.xsm,
327
- color: tokens.colors.text.secondary,
328
- disabledColor: tokens.colors.text.disabled,
329
- errorColor: tokens.colors.feedback.error.value
330
- };
331
- }
332
-
333
- // src/theme/create-data-state-tokens.ts
334
- function createDataStateTokens(tokens) {
335
- return {
336
- details: {
337
- gap: 10,
338
- iconSize: 150,
339
- iconColor: tokens.colors.primary.value
340
- },
341
- actionsFooter: {
342
- gap: 10
343
- },
344
- content: {
345
- zIndex: 1
346
- },
347
- loading: {
348
- transitionDuration: 250,
349
- loaderZIndex: 1
350
- }
351
- };
352
- }
353
-
354
- // src/theme/create-datetime-picker.ts
355
- function createDatetimePickerTokens(tokens) {
356
- return {
357
- calendar: {
358
- dayNamesMarginBottom: tokens.space.msm,
359
- weeksGap: tokens.space.xxs
360
- },
361
- day: {
362
- size: 40,
363
- borderRadius: tokens.radii.sm,
364
- color: tokens.colors.text.primary,
365
- outsideMonthColor: tokens.colors.neutral["5"],
366
- selectedBackgroundColor: tokens.colors.primary.value,
367
- selectedColor: tokens.colors.primary.contrast,
368
- rangeBackgroundColor: tokens.colors.secondary.value,
369
- rangeColor: tokens.colors.secondary.contrast
370
- },
371
- datePickerFlyout: {
372
- gap: tokens.space.msm
373
- },
374
- datetimePickerFlyout: {
375
- gap: tokens.space.msm
376
- },
377
- datetimeRangePickerFlyout: {
378
- gap: tokens.space.msm,
379
- timeInputsGap: tokens.space.xs
380
- },
381
- flyoutActions: {
382
- gap: tokens.space.msm,
383
- buttonsGap: tokens.space.xs,
384
- clearColor: tokens.colors.primary.value
385
- },
386
- quickDateOptions: {
387
- gap: tokens.space.xs
388
- },
389
- visibleDateSelect: {
390
- gap: tokens.space.xs
391
- }
392
- };
393
- }
394
-
395
- // src/theme/create-flyout-tokens.ts
396
- function createFlyoutTokens(tokens) {
397
- return {
398
- zIndexBase: 100,
399
- maxHeightRatio: 0.7,
400
- overlayColor: tokens.colors.black,
401
- overlayVisibleOpacity: 0.4,
402
- backgroundColor: tokens.colors.surface.secondary.value,
403
- contentPaddingHorizontal: tokens.space.md,
404
- borderRadius: tokens.radii.xl,
405
- hiddenOpacity: 0,
406
- title: {
407
- paddingVertical: tokens.space.msm,
408
- paddingHorizontal: tokens.space.md
409
- },
410
- handle: {
411
- containerHeight: 32,
412
- width: "25%",
413
- height: 6,
414
- borderRadius: tokens.radii.round,
415
- backgroundColor: tokens.colors.surface.primary.value
416
- }
417
- };
418
- }
419
-
420
- // src/theme/create-icon-button-tokens.ts
421
- function createIconButtonTokens(tokens) {
422
- const primary = tokens.colors.primary.value;
423
- const primaryContrast = tokens.colors.primary.contrast;
424
- const secondary = tokens.colors.secondary.value;
425
- const secondaryContrast = tokens.colors.secondary.contrast;
426
- const neutral = tokens.colors.neutral;
427
- const disabledColor = tokens.colors.text.disabled;
428
- return {
429
- borderWidth: tokens.borderSize.sm,
430
- borderRadius: tokens.radii.md,
431
- sizes: {
432
- small: {
433
- size: 32,
434
- padding: 6
435
- },
436
- medium: {
437
- size: 40,
438
- padding: 8
439
- },
440
- large: {
441
- size: 48,
442
- padding: 10
443
- }
444
- },
445
- variants: {
446
- filled: {
447
- backgroundColor: primary,
448
- borderColor: primary,
449
- color: primaryContrast,
450
- disabledBackgroundColor: neutral["5"],
451
- disabledBorderColor: neutral["5"],
452
- disabledColor
453
- },
454
- outlined: {
455
- backgroundColor: "transparent",
456
- borderColor: primary,
457
- color: primary,
458
- disabledBackgroundColor: "transparent",
459
- disabledBorderColor: neutral["5"],
460
- disabledColor
461
- },
462
- soft: {
463
- backgroundColor: secondary,
464
- borderColor: secondary,
465
- color: secondaryContrast,
466
- disabledBackgroundColor: neutral["3"],
467
- disabledBorderColor: neutral["3"],
468
- disabledColor
469
- },
470
- ghost: {
471
- backgroundColor: "transparent",
472
- borderColor: "transparent",
473
- color: primary,
474
- disabledBackgroundColor: "transparent",
475
- disabledBorderColor: "transparent",
476
- disabledColor
477
- },
478
- plain: {
479
- backgroundColor: "transparent",
480
- borderColor: "transparent",
481
- color: primary,
482
- disabledBackgroundColor: "transparent",
483
- disabledBorderColor: "transparent",
484
- disabledColor
485
- }
486
- }
487
- };
488
- }
489
-
490
- // src/theme/create-select-tokens.ts
491
- function createSelectTokens(tokens) {
492
- return {
493
- option: {
494
- padding: tokens.space.sm,
495
- selectedIconColor: tokens.colors.primary.value,
496
- selectedIconVisibleOpacity: 1,
497
- selectedIconHiddenOpacity: 0
498
- }
499
- };
500
- }
501
-
502
- // src/theme/create-skeleton-tokens.ts
503
- function createSkeletonTokens(tokens) {
504
- const boneColor = tokens.colors.neutral["5"];
505
- return {
506
- bone: {
507
- backgroundColor: boneColor,
508
- borderColor: boneColor,
509
- initialOpacity: 1,
510
- animatedOpacity: 0.4,
511
- animationDuration: 1e3
512
- },
513
- text: {
514
- alignSelf: "flex-start",
515
- textTransform: "uppercase",
516
- opacity: 0
517
- }
518
- };
519
- }
520
-
521
- // src/theme/create-tag-tokens.ts
522
- function createTagTokens(tokens) {
523
- const neutral = tokens.colors.neutral;
524
- const disabledColor = tokens.colors.text.disabled;
525
- const createVariants = (value, contrast) => ({
526
- filled: {
527
- backgroundColor: value,
528
- borderColor: value,
529
- color: contrast,
530
- disabledBackgroundColor: neutral["4"],
531
- disabledBorderColor: neutral["6"],
532
- disabledColor
533
- },
534
- outlined: {
535
- backgroundColor: "transparent",
536
- borderColor: value,
537
- color: value,
538
- disabledBackgroundColor: "transparent",
539
- disabledBorderColor: neutral["6"],
540
- disabledColor
541
- },
542
- soft: {
543
- backgroundColor: contrast,
544
- borderColor: contrast,
545
- color: value,
546
- disabledBackgroundColor: neutral["3"],
547
- disabledBorderColor: neutral["3"],
548
- disabledColor
549
- },
550
- ghost: {
551
- backgroundColor: "transparent",
552
- borderColor: "transparent",
553
- color: value,
554
- disabledBackgroundColor: "transparent",
555
- disabledBorderColor: "transparent",
556
- disabledColor
557
- },
558
- plain: {
559
- backgroundColor: "transparent",
560
- borderColor: "transparent",
561
- color: value,
562
- disabledBackgroundColor: "transparent",
563
- disabledBorderColor: "transparent",
564
- disabledColor
565
- }
566
- });
567
- return {
568
- borderWidth: tokens.borderSize.sm,
569
- borderRadius: tokens.radii.round,
570
- gap: tokens.space.xxs,
571
- iconMarginLeft: tokens.borderSize.md,
572
- sizes: {
573
- small: {
574
- height: 24,
575
- paddingHorizontal: tokens.space.xs,
576
- minWidth: tokens.space.xl,
577
- fontSize: tokens.fontSize.xs
578
- },
579
- medium: {
580
- height: 28,
581
- paddingHorizontal: tokens.space.xs,
582
- minWidth: tokens.space.xxl,
583
- fontSize: tokens.fontSize.xsm
584
- },
585
- large: {
586
- height: 32,
587
- paddingHorizontal: tokens.space.mxs,
588
- minWidth: tokens.space.xxl,
589
- fontSize: tokens.fontSize.xsm
590
- }
591
- },
592
- colors: {
593
- primary: createVariants(
594
- tokens.colors.primary.value,
595
- tokens.colors.primary.contrast
596
- ),
597
- secondary: createVariants(
598
- tokens.colors.secondary.value,
599
- tokens.colors.secondary.contrast
600
- ),
601
- error: createVariants(
602
- tokens.colors.feedback.error.value,
603
- tokens.colors.feedback.error.contrast
604
- ),
605
- warning: createVariants(
606
- tokens.colors.feedback.warning.value,
607
- tokens.colors.feedback.warning.contrast
608
- ),
609
- success: createVariants(
610
- tokens.colors.feedback.success.value,
611
- tokens.colors.feedback.success.contrast
612
- ),
613
- info: createVariants(
614
- tokens.colors.feedback.info.value,
615
- tokens.colors.feedback.info.contrast
616
- )
617
- }
618
- };
619
- }
620
-
621
- // src/theme/create-time-picker-tokens.ts
622
- function createTimePickerTokens(tokens) {
623
- const ItemHeight = 50;
624
- const VisibleItems = 5;
625
- const ContainerHeight = ItemHeight * VisibleItems;
626
- const VerticalPadding = ContainerHeight / 2 - ItemHeight / 2;
627
- const ColumnWidth = 70;
628
- return {
629
- column: {
630
- width: ColumnWidth,
631
- height: ContainerHeight,
632
- gap: tokens.space.xxs,
633
- listWidth: 30,
634
- itemHeight: ItemHeight,
635
- visibleItems: VisibleItems,
636
- verticalPadding: VerticalPadding,
637
- initialScrollIndexViewOffset: -VerticalPadding,
638
- fontSize: tokens.fontSize.xl,
639
- selectedColor: tokens.colors.primary.value,
640
- color: tokens.colors.text.primary,
641
- selectedFontWeight: tokens.fontWeight.semiBold,
642
- fontWeight: tokens.fontWeight.regular
643
- },
644
- flyout: {
645
- gap: tokens.space.msm
646
- },
647
- columns: {
648
- height: ContainerHeight,
649
- gap: tokens.space.xs,
650
- indicatorHeight: ItemHeight,
651
- indicatorWidth: ColumnWidth * 3 + 70,
652
- indicatorTop: VerticalPadding,
653
- indicatorBorderRadius: tokens.radii.round,
654
- indicatorBackgroundColor: tokens.colors.surface.primary.value
655
- }
656
- };
657
- }
658
-
659
- // src/theme/tokens.theme.ts
660
- var SpaceTokens = {
661
- none: 0,
662
- xxs: 4,
663
- xs: 8,
664
- mxs: 12,
665
- sm: 16,
666
- msm: 24,
667
- md: 32,
668
- lg: 48,
669
- xl: 64,
670
- xxl: 96
671
- };
672
- var BorderSizeTokens = {
673
- sm: 1,
674
- md: 2,
675
- lg: 3,
676
- xl: 5,
677
- xxl: 10
678
- };
679
- var RadiiTokens = {
680
- sm: 4,
681
- md: 8,
682
- lg: 16,
683
- xl: 32,
684
- xxl: 64,
685
- xxxl: 128,
686
- round: 1e5
687
- };
688
- var FontSizeTokens = {
689
- xxs: 8,
690
- xs: 12,
691
- xsm: 14,
692
- sm: 16,
693
- md: 18,
694
- lg: 20,
695
- xl: 24,
696
- xxl: 28,
697
- xxxl: 32,
698
- huge: 36,
699
- massive: 40,
700
- giant: 48,
701
- colossal: 56
702
- };
703
- var LineHeightTokens = {
704
- xxs: 12,
705
- xs: 16,
706
- xsm: 20,
707
- sm: 24,
708
- md: 26,
709
- lg: 28,
710
- xl: 32,
711
- xxl: 36,
712
- xxxl: 40,
713
- huge: 44,
714
- massive: 48,
715
- giant: 56,
716
- colossal: 64
717
- };
718
- var FontWeightTokens = {
719
- thin: 100,
720
- extraLight: 200,
721
- light: 300,
722
- regular: 400,
723
- medium: 500,
724
- semiBold: 600,
725
- bold: 700,
726
- extraBold: 800,
727
- black: 900
728
- };
729
- var FontFamilyWeightsNormalTokens = {
730
- 100: "Montserrat_100Thin",
731
- 200: "Montserrat_200ExtraLight",
732
- 300: "Montserrat_300Light",
733
- 400: "Montserrat_400Regular",
734
- 500: "Montserrat_500Medium",
735
- 600: "Montserrat_600SemiBold",
736
- 700: "Montserrat_700Bold",
737
- 800: "Montserrat_800ExtraBold",
738
- 900: "Montserrat_900Black"
739
- };
740
- var FontFamilyWeightsItalicTokens = {
741
- 100: "Montserrat_100Thin_Italic",
742
- 200: "Montserrat_200ExtraLight_Italic",
743
- 300: "Montserrat_300Light_Italic",
744
- 400: "Montserrat_400Regular_Italic",
745
- 500: "Montserrat_500Medium_Italic",
746
- 600: "Montserrat_600SemiBold_Italic",
747
- 700: "Montserrat_700Bold_Italic",
748
- 800: "Montserrat_800ExtraBold_Italic",
749
- 900: "Montserrat_900Black_Italic"
750
- };
751
- var FontFamilyTokens = {
752
- normal: FontFamilyWeightsNormalTokens,
753
- italic: FontFamilyWeightsItalicTokens
754
- };
755
- var NeutralColorTokens = {
756
- "0": "#ffffff",
757
- "1": "#f8f9fa",
758
- "2": "#f1f3f5",
759
- "3": "#e9ecef",
760
- "4": "#dee2e6",
761
- "5": "#ced4da",
762
- "6": "#adb5bd",
763
- "7": "#868e96",
764
- "8": "#495057",
765
- "9": "#343a40",
766
- "10": "#212529",
767
- "11": "#16191d",
768
- "12": "#0d0f12",
769
- "13": "#000000"
770
- };
771
- var LightColors = {
772
- primary: {
773
- value: "#f55d6b",
774
- contrast: NeutralColorTokens["0"]
775
- },
776
- accent: {
777
- value: "#FA9EA7",
778
- contrast: NeutralColorTokens["0"]
779
- },
780
- secondary: {
781
- value: "#FEE7E9",
782
- contrast: "#f55d6b"
783
- },
784
- neutral: NeutralColorTokens,
785
- surface: {
786
- primary: {
787
- value: NeutralColorTokens["2"],
788
- contrast: NeutralColorTokens["11"]
789
- },
790
- secondary: {
791
- value: NeutralColorTokens["0"],
792
- contrast: NeutralColorTokens["11"]
793
- },
794
- elevated: {
795
- value: NeutralColorTokens["0"],
796
- contrast: NeutralColorTokens["11"]
797
- },
798
- inverse: {
799
- value: NeutralColorTokens["13"],
800
- contrast: NeutralColorTokens["0"]
801
- }
802
- },
803
- text: {
804
- primary: NeutralColorTokens["11"],
805
- secondary: NeutralColorTokens["10"],
806
- tertiary: NeutralColorTokens["9"],
807
- inverse: NeutralColorTokens["0"],
808
- disabled: NeutralColorTokens["7"]
809
- },
810
- border: {
811
- subtle: {
812
- value: NeutralColorTokens["3"],
813
- contrast: NeutralColorTokens["9"]
814
- },
815
- default: {
816
- value: NeutralColorTokens["4"],
817
- contrast: NeutralColorTokens["10"]
818
- },
819
- strong: {
820
- value: NeutralColorTokens["6"],
821
- contrast: NeutralColorTokens["11"]
822
- },
823
- focus: {
824
- value: "#f55d6b",
825
- contrast: NeutralColorTokens["0"]
826
- }
827
- },
828
- feedback: {
829
- error: {
830
- value: "#c92a2a",
831
- contrast: "#fff5f5"
832
- },
833
- warning: {
834
- value: "#e67700",
835
- contrast: "#fff4e6"
836
- },
837
- success: {
838
- value: "#7a9908",
839
- contrast: "#f4fce3"
840
- },
841
- info: {
842
- value: "#1864ab",
843
- contrast: "#e7f5ff"
844
- }
845
- },
846
- overlay: "rgba(0, 0, 0, 0.45)",
847
- white: NeutralColorTokens["0"],
848
- black: NeutralColorTokens["13"]
849
- };
850
- function createComponentsTokens(tokens) {
851
- return {
852
- button: createButtonTokens(tokens),
853
- iconButton: createIconButtonTokens(tokens),
854
- tag: createTagTokens(tokens),
855
- controlAddon: createControlAddonTokens(tokens),
856
- controlContainer: createControlContainerTokens(tokens),
857
- controlError: createControlErrorTokens(tokens),
858
- controlInput: createControlInputTokens(tokens),
859
- controlLabel: createControlLabelTokens(tokens),
860
- select: createSelectTokens(tokens),
861
- datetimePicker: createDatetimePickerTokens(tokens),
862
- timePicker: createTimePickerTokens(tokens),
863
- flyout: createFlyoutTokens(tokens),
864
- skeleton: createSkeletonTokens(tokens),
865
- dataState: createDataStateTokens(tokens)
866
- };
867
- }
868
-
869
- // src/theme/dark.theme.ts
870
- var DarkTheme = {
871
- colors: LightColors,
872
- space: SpaceTokens,
873
- radii: RadiiTokens,
874
- fontFamily: FontFamilyTokens,
875
- borderSize: BorderSizeTokens,
876
- fontSize: FontSizeTokens,
877
- fontWeight: FontWeightTokens,
878
- lineHeight: LineHeightTokens
879
- };
880
-
881
- // src/theme/light.theme.ts
882
- var LightTheme = {
883
- colors: LightColors,
884
- space: SpaceTokens,
885
- radii: RadiiTokens,
886
- fontFamily: FontFamilyTokens,
887
- borderSize: BorderSizeTokens,
888
- fontSize: FontSizeTokens,
889
- fontWeight: FontWeightTokens,
890
- lineHeight: LineHeightTokens
891
- };
892
-
893
- // src/providers/theme.provider.tsx
894
- import { jsx } from "react/jsx-runtime";
895
- var ThemeContext = createContext(void 0);
896
- var ThemeProvider = memo(function ThemeProvider2(props) {
897
- const scheme = props?.scheme ?? "light";
898
- const context = useMemo(() => {
899
- const baseTheme = scheme === "light" ? LightTheme : DarkTheme;
900
- const customBaseTheme = props.theme?.[scheme];
901
- const theme = merge(baseTheme, customBaseTheme);
902
- return {
903
- ...theme,
904
- components: createComponentsTokens(theme)
905
- };
906
- }, [scheme, props.theme?.light, props.theme?.dark, props.components]);
907
- return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: context, children: props.children });
908
- });
909
- function useThemeContext() {
910
- const context = useContext(ThemeContext);
911
- if (!context) {
912
- throw new Error("useThemeContext must be used within a ThemeProvider");
913
- }
914
- return context;
915
- }
916
-
917
- // src/hooks/use-border.hook.ts
918
- function useBorder() {
919
- const context = useThemeContext();
920
- return useMemo2(() => context.borderSize, [context.borderSize]);
921
- }
922
-
923
- // src/hooks/use-colors.hook.ts
924
- import { useMemo as useMemo3 } from "react";
925
- function useColors() {
926
- const context = useThemeContext();
927
- return useMemo3(() => context.colors, [context.colors]);
928
- }
929
-
930
- // src/hooks/use-components-tokens.hook.ts
931
- import { useMemo as useMemo4 } from "react";
932
- function useComponentsTokens() {
933
- const context = useThemeContext();
934
- return useMemo4(() => context.components, [context.components]);
935
- }
936
-
937
- // src/hooks/use-radii.hook.ts
938
- import { useMemo as useMemo5 } from "react";
939
- function useRadii() {
940
- const context = useThemeContext();
941
- return useMemo5(() => context.radii, [context.radii]);
942
- }
943
-
944
- // src/hooks/use-space.hook.ts
945
- import { useMemo as useMemo6 } from "react";
946
- function useSpace() {
947
- const context = useThemeContext();
948
- return useMemo6(() => context.space, [context.space]);
949
- }
950
-
951
- // src/hooks/use-style-props.hook.ts
952
- import { useMemo as useMemo7 } from "react";
953
-
954
- // src/utils/style.utils.ts
955
- import { Platform } from "react-native";
956
- var isStylePropKey = (k) => StylePropsSet.has(k);
957
- var extractStyleProps = (props) => {
958
- const style = {};
959
- for (const k in props) {
960
- if (isStylePropKey(k) && props[k] !== void 0) {
961
- style[k] = props[k];
962
- }
963
- }
964
- return style;
965
- };
966
- var createStyleKey = (props) => {
967
- let key = "";
968
- for (const k in props) {
969
- if (isStylePropKey(k)) {
970
- key += String(props[k]);
971
- }
972
- }
973
- return key;
974
- };
975
- var getShadowStyle = (level = "none", position = "bottom", colors) => {
976
- const token = shadowScale[level];
977
- if (level === "none") return {};
978
- if (Platform.OS === "android") {
979
- return {
980
- elevation: token.elevation
981
- };
982
- }
983
- let offsetY = 0;
984
- if (position === "bottom") offsetY = token.radius / 2;
985
- if (position === "top") offsetY = -token.radius / 2;
986
- if (position === "around") offsetY = 0;
987
- return {
988
- shadowColor: colors.black,
989
- shadowOpacity: token.opacity,
990
- shadowRadius: token.radius,
991
- shadowOffset: {
992
- width: 0,
993
- height: offsetY
994
- }
995
- };
996
- };
997
-
998
- // src/hooks/use-style-props.hook.ts
999
- function useStyleProps(props) {
1000
- const key = useMemo7(() => createStyleKey(props), [props]);
1001
- return useMemo7(() => extractStyleProps(props), [key]);
1002
- }
1003
-
1004
- // src/hooks/use-theme.hook.ts
1005
- function useTheme() {
1006
- return useThemeContext();
1007
- }
1008
-
1009
- // src/hooks/use-themed-styles.ts
1010
- import { useMemo as useMemo8 } from "react";
1011
- function useThemedStyles(styledFunction, props, dependencies) {
1012
- const theme = useTheme();
1013
- const memoDependencies = dependencies ?? (props === void 0 ? [] : [props]);
1014
- return useMemo8(() => {
1015
- if (props === void 0) {
1016
- return styledFunction(theme);
1017
- }
1018
- return styledFunction(theme, props);
1019
- }, [theme, styledFunction, ...memoDependencies]);
1020
- }
1021
- export {
1022
- BorderSizeTokens,
1023
- DarkTheme,
1024
- FontFamilyTokens,
1025
- FontFamilyWeightsItalicTokens,
1026
- FontFamilyWeightsNormalTokens,
1027
- FontSizeTokens,
1028
- FontWeightTokens,
1029
- LightColors,
1030
- LightTheme,
1031
- LineHeightTokens,
1032
- NeutralColorTokens,
1033
- RadiiTokens,
1034
- SpaceTokens,
1035
- StylePropsSet,
1036
- ThemeProvider,
1037
- createComponentsTokens,
1038
- createStyleKey,
1039
- extractStyleProps,
1040
- getShadowStyle,
1041
- shadowScale,
1042
- useBorder,
1043
- useColors,
1044
- useComponentsTokens,
1045
- useRadii,
1046
- useSpace,
1047
- useStyleProps,
1048
- useTheme,
1049
- useThemeContext,
1050
- useThemedStyles
1051
- };
1
+ export * from "./constants";
2
+ export * from "./hooks";
3
+ export * from "./providers";
4
+ export * from "./theme";
5
+ export * from "./types";
6
+ export * from "./utils";
1052
7
  //# sourceMappingURL=index.js.map