@wireservers-ui/react-natives 2.0.1 → 2.0.2

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 (404) hide show
  1. package/CHANGELOG.md +94 -71
  2. package/LICENSE +21 -21
  3. package/README.md +653 -613
  4. package/bin/cli.js +83 -5
  5. package/bin/init.js +470 -324
  6. package/package.json +1 -1
  7. package/src/accordion/accordion-content.tsx +30 -30
  8. package/src/accordion/accordion-icon.tsx +54 -54
  9. package/src/accordion/accordion-item.tsx +37 -37
  10. package/src/accordion/accordion-title-text.tsx +24 -24
  11. package/src/accordion/accordion-trigger.tsx +38 -38
  12. package/src/accordion/accordion.tsx +91 -91
  13. package/src/accordion/index.ts +24 -24
  14. package/src/accordion/styles.ts +74 -74
  15. package/src/accordion/types.ts +56 -56
  16. package/src/actionsheet/actionsheet-backdrop.tsx +23 -23
  17. package/src/actionsheet/actionsheet-content.tsx +19 -19
  18. package/src/actionsheet/actionsheet-drag-indicator-wrapper.tsx +19 -19
  19. package/src/actionsheet/actionsheet-drag-indicator.tsx +19 -19
  20. package/src/actionsheet/actionsheet-item-text.tsx +19 -19
  21. package/src/actionsheet/actionsheet-item.tsx +20 -20
  22. package/src/actionsheet/actionsheet-scroll-view.tsx +12 -12
  23. package/src/actionsheet/actionsheet.tsx +45 -45
  24. package/src/actionsheet/index.ts +20 -20
  25. package/src/actionsheet/styles.ts +25 -25
  26. package/src/actionsheet/types.ts +49 -49
  27. package/src/alert/alert-body.tsx +19 -19
  28. package/src/alert/alert-close-button.tsx +23 -23
  29. package/src/alert/alert-icon.tsx +40 -40
  30. package/src/alert/alert-text.tsx +22 -22
  31. package/src/alert/alert.tsx +33 -33
  32. package/src/alert/index.ts +15 -15
  33. package/src/alert/styles.ts +112 -112
  34. package/src/alert/types.ts +36 -36
  35. package/src/alert-dialog/alert-dialog.tsx +54 -54
  36. package/src/alert-dialog/index.ts +2 -2
  37. package/src/alert-dialog/styles.ts +40 -40
  38. package/src/alert-dialog/types.ts +40 -40
  39. package/src/aspect-ratio/aspect-ratio.tsx +20 -20
  40. package/src/aspect-ratio/index.ts +2 -2
  41. package/src/aspect-ratio/styles.ts +6 -6
  42. package/src/aspect-ratio/types.ts +7 -7
  43. package/src/avatar/avatar-badge.tsx +22 -22
  44. package/src/avatar/avatar-fallback-text.tsx +33 -33
  45. package/src/avatar/avatar-group.tsx +53 -53
  46. package/src/avatar/avatar-image.tsx +21 -21
  47. package/src/avatar/avatar.tsx +27 -27
  48. package/src/avatar/index.ts +14 -14
  49. package/src/avatar/styles.ts +94 -94
  50. package/src/avatar/types.ts +35 -35
  51. package/src/badge/badge-icon.tsx +20 -20
  52. package/src/badge/badge-text.tsx +24 -24
  53. package/src/badge/badge.tsx +39 -39
  54. package/src/badge/index.ts +11 -11
  55. package/src/badge/styles.ts +175 -175
  56. package/src/badge/types.ts +37 -37
  57. package/src/blockquote/blockquote.tsx +21 -21
  58. package/src/blockquote/index.ts +2 -2
  59. package/src/blockquote/styles.ts +11 -11
  60. package/src/blockquote/types.ts +6 -6
  61. package/src/box/box.tsx +19 -19
  62. package/src/box/index.ts +2 -2
  63. package/src/box/styles.ts +6 -6
  64. package/src/box/types.ts +6 -6
  65. package/src/breadcrumb/breadcrumb-item.tsx +20 -20
  66. package/src/breadcrumb/breadcrumb-link.tsx +20 -20
  67. package/src/breadcrumb/breadcrumb-text.tsx +19 -19
  68. package/src/breadcrumb/breadcrumb.tsx +43 -43
  69. package/src/breadcrumb/index.ts +12 -12
  70. package/src/breadcrumb/styles.ts +36 -36
  71. package/src/breadcrumb/types.ts +33 -33
  72. package/src/button/button-group.tsx +35 -35
  73. package/src/button/button-icon.tsx +37 -37
  74. package/src/button/button-spinner.tsx +12 -12
  75. package/src/button/button-text.tsx +27 -27
  76. package/src/button/button.tsx +42 -42
  77. package/src/button/index.ts +19 -19
  78. package/src/button/styles.ts +250 -250
  79. package/src/button/types.ts +67 -67
  80. package/src/calendar/calendar-day-cell.tsx +67 -67
  81. package/src/calendar/calendar-day-view.tsx +66 -66
  82. package/src/calendar/calendar-event.tsx +59 -59
  83. package/src/calendar/calendar-header.tsx +60 -60
  84. package/src/calendar/calendar-horizontal-view.tsx +372 -372
  85. package/src/calendar/calendar-legend.tsx +41 -41
  86. package/src/calendar/calendar-month-view.tsx +47 -47
  87. package/src/calendar/calendar-vertical-view.tsx +395 -395
  88. package/src/calendar/calendar-view-switcher.tsx +65 -65
  89. package/src/calendar/calendar-week-view.tsx +52 -52
  90. package/src/calendar/calendar.tsx +74 -74
  91. package/src/calendar/index.ts +27 -27
  92. package/src/calendar/styles.ts +367 -367
  93. package/src/calendar/types.ts +101 -101
  94. package/src/calendar/use-calendar.ts +170 -170
  95. package/src/calendar/utils.ts +278 -278
  96. package/src/card/card-body.tsx +22 -22
  97. package/src/card/card-footer.tsx +19 -19
  98. package/src/card/card-header.tsx +22 -22
  99. package/src/card/card.tsx +27 -27
  100. package/src/card/index.ts +13 -13
  101. package/src/card/styles.ts +54 -54
  102. package/src/card/types.ts +31 -31
  103. package/src/carousel/carousel.tsx +436 -436
  104. package/src/carousel/index.ts +2 -2
  105. package/src/carousel/styles.ts +21 -21
  106. package/src/carousel/types.ts +41 -41
  107. package/src/center/center.tsx +19 -19
  108. package/src/center/index.ts +2 -2
  109. package/src/center/styles.ts +6 -6
  110. package/src/center/types.ts +6 -6
  111. package/src/checkbox/checkbox-group.tsx +63 -63
  112. package/src/checkbox/checkbox-icon.tsx +35 -35
  113. package/src/checkbox/checkbox-indicator.tsx +30 -30
  114. package/src/checkbox/checkbox-label.tsx +24 -24
  115. package/src/checkbox/checkbox.tsx +86 -86
  116. package/src/checkbox/index.ts +14 -14
  117. package/src/checkbox/styles.ts +69 -69
  118. package/src/checkbox/types.ts +55 -55
  119. package/src/circular-progress/circular-progress.tsx +82 -82
  120. package/src/circular-progress/index.ts +2 -2
  121. package/src/circular-progress/styles.ts +31 -31
  122. package/src/circular-progress/types.ts +18 -18
  123. package/src/code/code.tsx +36 -36
  124. package/src/code/index.ts +2 -2
  125. package/src/code/styles.ts +25 -25
  126. package/src/code/types.ts +13 -13
  127. package/src/collapsible/collapsible.tsx +58 -58
  128. package/src/collapsible/index.ts +2 -2
  129. package/src/collapsible/styles.ts +5 -5
  130. package/src/collapsible/types.ts +21 -21
  131. package/src/color-picker/color-picker-box.tsx +115 -115
  132. package/src/color-picker/color-picker-slider.tsx +98 -98
  133. package/src/color-picker/color-picker.tsx +162 -162
  134. package/src/color-picker/color-utils.ts +215 -215
  135. package/src/color-picker/index.ts +34 -34
  136. package/src/color-picker/styles.ts +32 -32
  137. package/src/color-picker/types.ts +49 -49
  138. package/src/color-picker/use-pointer-drag.ts +80 -80
  139. package/src/container/container.tsx +19 -19
  140. package/src/container/index.ts +2 -2
  141. package/src/container/styles.ts +21 -21
  142. package/src/container/types.ts +10 -10
  143. package/src/date-picker/date-picker.tsx +136 -136
  144. package/src/date-picker/index.ts +15 -15
  145. package/src/date-picker/styles.ts +18 -18
  146. package/src/date-picker/types.ts +33 -33
  147. package/src/divider/divider.tsx +21 -21
  148. package/src/divider/index.ts +2 -2
  149. package/src/divider/styles.ts +14 -14
  150. package/src/divider/types.ts +7 -7
  151. package/src/drawer/drawer-backdrop.tsx +23 -23
  152. package/src/drawer/drawer-body.tsx +19 -19
  153. package/src/drawer/drawer-close-button.tsx +29 -29
  154. package/src/drawer/drawer-content.tsx +142 -142
  155. package/src/drawer/drawer-footer.tsx +19 -19
  156. package/src/drawer/drawer-header.tsx +19 -19
  157. package/src/drawer/drawer.tsx +54 -54
  158. package/src/drawer/index.ts +22 -22
  159. package/src/drawer/styles.ts +36 -36
  160. package/src/drawer/types.ts +62 -62
  161. package/src/empty/empty.tsx +53 -53
  162. package/src/empty/index.ts +2 -2
  163. package/src/empty/styles.ts +26 -26
  164. package/src/empty/types.ts +22 -22
  165. package/src/fab/fab-icon.tsx +20 -20
  166. package/src/fab/fab-label.tsx +22 -22
  167. package/src/fab/fab.tsx +45 -45
  168. package/src/fab/index.ts +11 -11
  169. package/src/fab/styles.ts +57 -57
  170. package/src/fab/types.ts +33 -33
  171. package/src/form-control/form-control-error-icon.tsx +25 -25
  172. package/src/form-control/form-control-error-message.tsx +40 -40
  173. package/src/form-control/form-control-helper-text.tsx +25 -25
  174. package/src/form-control/form-control-label-text.tsx +25 -25
  175. package/src/form-control/form-control-label.tsx +36 -36
  176. package/src/form-control/form-control.tsx +46 -46
  177. package/src/form-control/index.ts +20 -20
  178. package/src/form-control/styles.ts +105 -105
  179. package/src/form-control/types.ts +45 -45
  180. package/src/heading/heading.tsx +21 -21
  181. package/src/heading/index.ts +2 -2
  182. package/src/heading/styles.ts +24 -24
  183. package/src/heading/types.ts +19 -19
  184. package/src/icon/icon.tsx +21 -21
  185. package/src/icon/index.ts +2 -2
  186. package/src/icon/styles.ts +18 -18
  187. package/src/icon/types.ts +8 -8
  188. package/src/icon-button/icon-button.tsx +23 -23
  189. package/src/icon-button/index.ts +2 -2
  190. package/src/icon-button/styles.ts +78 -78
  191. package/src/icon-button/types.ts +15 -15
  192. package/src/image/image.tsx +20 -20
  193. package/src/image/index.ts +2 -2
  194. package/src/image/styles.ts +28 -28
  195. package/src/image/types.ts +11 -11
  196. package/src/index.ts +1039 -1039
  197. package/src/input/index.ts +13 -13
  198. package/src/input/input-field.tsx +35 -35
  199. package/src/input/input-icon.tsx +25 -25
  200. package/src/input/input-slot.tsx +24 -24
  201. package/src/input/input.tsx +73 -73
  202. package/src/input/styles.ts +90 -90
  203. package/src/input/types.ts +39 -39
  204. package/src/kbd/index.ts +2 -2
  205. package/src/kbd/kbd.tsx +21 -21
  206. package/src/kbd/styles.ts +11 -11
  207. package/src/kbd/types.ts +7 -7
  208. package/src/link/index.ts +4 -4
  209. package/src/link/link-text.tsx +19 -19
  210. package/src/link/link.tsx +31 -31
  211. package/src/link/styles.ts +19 -19
  212. package/src/link/types.ts +13 -13
  213. package/src/list/index.ts +2 -2
  214. package/src/list/list.tsx +55 -55
  215. package/src/list/styles.ts +8 -8
  216. package/src/list/types.ts +17 -17
  217. package/src/menu/index.ts +2 -2
  218. package/src/menu/menu.tsx +99 -99
  219. package/src/menu/styles.ts +14 -14
  220. package/src/menu/types.ts +30 -30
  221. package/src/modal/index.ts +18 -18
  222. package/src/modal/modal-backdrop.tsx +23 -23
  223. package/src/modal/modal-body.tsx +19 -19
  224. package/src/modal/modal-close-button.tsx +29 -29
  225. package/src/modal/modal-content.tsx +22 -22
  226. package/src/modal/modal-footer.tsx +19 -19
  227. package/src/modal/modal-header.tsx +19 -19
  228. package/src/modal/modal.tsx +50 -50
  229. package/src/modal/styles.ts +37 -37
  230. package/src/modal/types.ts +49 -49
  231. package/src/nativewind-env.d.ts +1 -1
  232. package/src/number-input/index.ts +18 -18
  233. package/src/number-input/number-input.tsx +161 -161
  234. package/src/number-input/styles.ts +35 -35
  235. package/src/number-input/types.ts +44 -44
  236. package/src/overlay/index.ts +2 -2
  237. package/src/overlay/overlay.tsx +21 -21
  238. package/src/overlay/styles.ts +6 -6
  239. package/src/overlay/types.ts +7 -7
  240. package/src/pagination/index.ts +2 -2
  241. package/src/pagination/pagination.tsx +58 -58
  242. package/src/pagination/styles.ts +27 -27
  243. package/src/pagination/types.ts +19 -19
  244. package/src/password-input/index.ts +14 -14
  245. package/src/password-input/password-input.tsx +79 -79
  246. package/src/password-input/styles.ts +25 -25
  247. package/src/password-input/types.ts +24 -24
  248. package/src/pin-input/index.ts +12 -12
  249. package/src/pin-input/pin-input.tsx +96 -96
  250. package/src/pin-input/styles.ts +16 -16
  251. package/src/pin-input/types.ts +26 -26
  252. package/src/popover/index.ts +2 -2
  253. package/src/popover/popover.tsx +98 -98
  254. package/src/popover/styles.ts +31 -31
  255. package/src/popover/types.ts +46 -46
  256. package/src/portal/index.ts +2 -2
  257. package/src/portal/portal.tsx +8 -8
  258. package/src/portal/styles.ts +2 -2
  259. package/src/portal/types.ts +3 -3
  260. package/src/pressable/index.ts +2 -2
  261. package/src/pressable/pressable.tsx +20 -20
  262. package/src/pressable/styles.ts +10 -10
  263. package/src/pressable/types.ts +6 -6
  264. package/src/progress/index.ts +9 -9
  265. package/src/progress/progress-filled-track.tsx +26 -26
  266. package/src/progress/progress.tsx +52 -52
  267. package/src/progress/styles.ts +34 -34
  268. package/src/progress/types.ts +28 -28
  269. package/src/radio/index.ts +14 -14
  270. package/src/radio/radio-group.tsx +61 -61
  271. package/src/radio/radio-icon.tsx +24 -24
  272. package/src/radio/radio-indicator.tsx +30 -30
  273. package/src/radio/radio-label.tsx +24 -24
  274. package/src/radio/radio.tsx +68 -68
  275. package/src/radio/styles.ts +69 -69
  276. package/src/radio/types.ts +51 -51
  277. package/src/rating/index.ts +7 -7
  278. package/src/rating/rating.tsx +93 -93
  279. package/src/rating/styles.ts +13 -13
  280. package/src/rating/types.ts +29 -29
  281. package/src/search-input/index.ts +16 -16
  282. package/src/search-input/search-input.tsx +119 -119
  283. package/src/search-input/styles.ts +28 -28
  284. package/src/search-input/types.ts +31 -31
  285. package/src/segmented-control/index.ts +2 -2
  286. package/src/segmented-control/segmented-control.tsx +34 -34
  287. package/src/segmented-control/styles.ts +22 -22
  288. package/src/segmented-control/types.ts +22 -22
  289. package/src/select/index.ts +28 -28
  290. package/src/select/select-backdrop.tsx +25 -25
  291. package/src/select/select-content.tsx +49 -49
  292. package/src/select/select-drag-indicator.tsx +19 -19
  293. package/src/select/select-icon.tsx +25 -25
  294. package/src/select/select-input.tsx +32 -32
  295. package/src/select/select-item-text.tsx +30 -30
  296. package/src/select/select-item.tsx +72 -72
  297. package/src/select/select-portal.tsx +22 -22
  298. package/src/select/select-scroll-view.tsx +22 -22
  299. package/src/select/select-trigger.tsx +64 -64
  300. package/src/select/select.tsx +101 -101
  301. package/src/select/styles.ts +114 -114
  302. package/src/select/types.ts +92 -92
  303. package/src/skeleton/index.ts +2 -2
  304. package/src/skeleton/skeleton.tsx +29 -29
  305. package/src/skeleton/styles.ts +14 -14
  306. package/src/skeleton/types.ts +12 -12
  307. package/src/slider/index.ts +12 -12
  308. package/src/slider/slider-filled-track.tsx +31 -31
  309. package/src/slider/slider-thumb.tsx +52 -52
  310. package/src/slider/slider-track.tsx +154 -154
  311. package/src/slider/slider.tsx +193 -193
  312. package/src/slider/styles.ts +71 -71
  313. package/src/slider/types.ts +47 -47
  314. package/src/snackbar/index.ts +2 -2
  315. package/src/snackbar/snackbar.tsx +39 -39
  316. package/src/snackbar/styles.ts +29 -29
  317. package/src/snackbar/types.ts +21 -21
  318. package/src/spinner/index.ts +2 -2
  319. package/src/spinner/spinner.tsx +29 -29
  320. package/src/spinner/styles.ts +15 -15
  321. package/src/spinner/types.ts +10 -10
  322. package/src/stack/index.ts +2 -2
  323. package/src/stack/stack.tsx +49 -49
  324. package/src/stack/styles.ts +25 -25
  325. package/src/stack/types.ts +15 -15
  326. package/src/stat/index.ts +2 -2
  327. package/src/stat/stat.tsx +48 -48
  328. package/src/stat/styles.ts +34 -34
  329. package/src/stat/types.ts +24 -24
  330. package/src/stepper/index.ts +2 -2
  331. package/src/stepper/stepper.tsx +95 -95
  332. package/src/stepper/styles.ts +49 -49
  333. package/src/stepper/types.ts +20 -20
  334. package/src/switch/index.ts +2 -2
  335. package/src/switch/styles.ts +24 -24
  336. package/src/switch/switch.tsx +67 -67
  337. package/src/switch/types.ts +23 -23
  338. package/src/table/index.ts +2 -2
  339. package/src/table/styles.ts +12 -12
  340. package/src/table/table.tsx +52 -52
  341. package/src/table/types.ts +10 -10
  342. package/src/tabs/index.ts +18 -18
  343. package/src/tabs/styles.ts +113 -113
  344. package/src/tabs/tab-list.tsx +29 -29
  345. package/src/tabs/tab-panel.tsx +29 -29
  346. package/src/tabs/tab-panels.tsx +21 -21
  347. package/src/tabs/tab-text.tsx +26 -26
  348. package/src/tabs/tab.tsx +56 -56
  349. package/src/tabs/tabs.tsx +71 -71
  350. package/src/tabs/types.ts +53 -53
  351. package/src/tag/index.ts +14 -14
  352. package/src/tag/styles.ts +115 -115
  353. package/src/tag/tag-close-button.tsx +26 -26
  354. package/src/tag/tag-icon.tsx +20 -20
  355. package/src/tag/tag-text.tsx +22 -22
  356. package/src/tag/tag.tsx +40 -40
  357. package/src/tag/types.ts +33 -33
  358. package/src/tags-input/index.ts +18 -18
  359. package/src/tags-input/styles.ts +29 -29
  360. package/src/tags-input/tags-input.tsx +149 -149
  361. package/src/tags-input/types.ts +37 -37
  362. package/src/text/index.ts +2 -2
  363. package/src/text/styles.ts +54 -54
  364. package/src/text/text.tsx +51 -51
  365. package/src/text/types.ts +36 -36
  366. package/src/textarea/index.ts +2 -2
  367. package/src/textarea/styles.ts +37 -37
  368. package/src/textarea/textarea.tsx +68 -68
  369. package/src/textarea/types.ts +14 -14
  370. package/src/timeline/index.ts +2 -2
  371. package/src/timeline/styles.ts +57 -57
  372. package/src/timeline/timeline.tsx +52 -52
  373. package/src/timeline/types.ts +30 -30
  374. package/src/toast/index.ts +17 -17
  375. package/src/toast/styles.ts +118 -118
  376. package/src/toast/toast-description.tsx +22 -22
  377. package/src/toast/toast-provider.tsx +136 -136
  378. package/src/toast/toast-title.tsx +22 -22
  379. package/src/toast/toast.tsx +43 -43
  380. package/src/toast/types.ts +50 -50
  381. package/src/toast/use-toast.ts +7 -7
  382. package/src/toggle/index.ts +2 -2
  383. package/src/toggle/styles.ts +30 -30
  384. package/src/toggle/toggle.tsx +25 -25
  385. package/src/toggle/types.ts +15 -15
  386. package/src/toggle-group/index.ts +2 -2
  387. package/src/toggle-group/styles.ts +35 -35
  388. package/src/toggle-group/toggle-group.tsx +60 -60
  389. package/src/toggle-group/types.ts +29 -29
  390. package/src/tooltip/index.ts +11 -11
  391. package/src/tooltip/styles.ts +9 -9
  392. package/src/tooltip/tooltip-content.tsx +19 -19
  393. package/src/tooltip/tooltip-text.tsx +19 -19
  394. package/src/tooltip/tooltip.tsx +116 -116
  395. package/src/tooltip/types.ts +35 -35
  396. package/src/utils/brand.ts +5 -5
  397. package/src/utils/create-context.ts +17 -17
  398. package/src/utils/index.ts +8 -8
  399. package/src/utils/types.ts +20 -20
  400. package/src/visually-hidden/index.ts +2 -2
  401. package/src/visually-hidden/styles.ts +6 -6
  402. package/src/visually-hidden/types.ts +6 -6
  403. package/src/visually-hidden/visually-hidden.tsx +22 -22
  404. package/tailwind-preset.js +212 -203
package/tailwind-preset.js CHANGED
@@ -1,203 +1,212 @@
1
- const path = require('path');
2
-
3
- /** @type {import('tailwindcss').Config} */
4
- module.exports = {
5
- darkMode: 'class',
6
- content: [
7
- path.join(__dirname, 'src/**/*.{ts,tsx}'),
8
- ],
9
- presets: [require('nativewind/preset')],
10
- safelist: [
11
- {
12
- pattern:
13
- /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/,
14
- },
15
- ],
16
- theme: {
17
- extend: {
18
- colors: {
19
- primary: {
20
- 0: 'rgb(var(--color-primary-0)/<alpha-value>)',
21
- 50: 'rgb(var(--color-primary-50)/<alpha-value>)',
22
- 100: 'rgb(var(--color-primary-100)/<alpha-value>)',
23
- 200: 'rgb(var(--color-primary-200)/<alpha-value>)',
24
- 300: 'rgb(var(--color-primary-300)/<alpha-value>)',
25
- 400: 'rgb(var(--color-primary-400)/<alpha-value>)',
26
- 500: 'rgb(var(--color-primary-500)/<alpha-value>)',
27
- 600: 'rgb(var(--color-primary-600)/<alpha-value>)',
28
- 700: 'rgb(var(--color-primary-700)/<alpha-value>)',
29
- 800: 'rgb(var(--color-primary-800)/<alpha-value>)',
30
- 900: 'rgb(var(--color-primary-900)/<alpha-value>)',
31
- 950: 'rgb(var(--color-primary-950)/<alpha-value>)',
32
- },
33
- secondary: {
34
- 0: 'rgb(var(--color-secondary-0)/<alpha-value>)',
35
- 50: 'rgb(var(--color-secondary-50)/<alpha-value>)',
36
- 100: 'rgb(var(--color-secondary-100)/<alpha-value>)',
37
- 200: 'rgb(var(--color-secondary-200)/<alpha-value>)',
38
- 300: 'rgb(var(--color-secondary-300)/<alpha-value>)',
39
- 400: 'rgb(var(--color-secondary-400)/<alpha-value>)',
40
- 500: 'rgb(var(--color-secondary-500)/<alpha-value>)',
41
- 600: 'rgb(var(--color-secondary-600)/<alpha-value>)',
42
- 700: 'rgb(var(--color-secondary-700)/<alpha-value>)',
43
- 800: 'rgb(var(--color-secondary-800)/<alpha-value>)',
44
- 900: 'rgb(var(--color-secondary-900)/<alpha-value>)',
45
- 950: 'rgb(var(--color-secondary-950)/<alpha-value>)',
46
- },
47
- tertiary: {
48
- 50: 'rgb(var(--color-tertiary-50)/<alpha-value>)',
49
- 100: 'rgb(var(--color-tertiary-100)/<alpha-value>)',
50
- 200: 'rgb(var(--color-tertiary-200)/<alpha-value>)',
51
- 300: 'rgb(var(--color-tertiary-300)/<alpha-value>)',
52
- 400: 'rgb(var(--color-tertiary-400)/<alpha-value>)',
53
- 500: 'rgb(var(--color-tertiary-500)/<alpha-value>)',
54
- 600: 'rgb(var(--color-tertiary-600)/<alpha-value>)',
55
- 700: 'rgb(var(--color-tertiary-700)/<alpha-value>)',
56
- 800: 'rgb(var(--color-tertiary-800)/<alpha-value>)',
57
- 900: 'rgb(var(--color-tertiary-900)/<alpha-value>)',
58
- 950: 'rgb(var(--color-tertiary-950)/<alpha-value>)',
59
- },
60
- error: {
61
- 0: 'rgb(var(--color-error-0)/<alpha-value>)',
62
- 50: 'rgb(var(--color-error-50)/<alpha-value>)',
63
- 100: 'rgb(var(--color-error-100)/<alpha-value>)',
64
- 200: 'rgb(var(--color-error-200)/<alpha-value>)',
65
- 300: 'rgb(var(--color-error-300)/<alpha-value>)',
66
- 400: 'rgb(var(--color-error-400)/<alpha-value>)',
67
- 500: 'rgb(var(--color-error-500)/<alpha-value>)',
68
- 600: 'rgb(var(--color-error-600)/<alpha-value>)',
69
- 700: 'rgb(var(--color-error-700)/<alpha-value>)',
70
- 800: 'rgb(var(--color-error-800)/<alpha-value>)',
71
- 900: 'rgb(var(--color-error-900)/<alpha-value>)',
72
- 950: 'rgb(var(--color-error-950)/<alpha-value>)',
73
- },
74
- success: {
75
- 0: 'rgb(var(--color-success-0)/<alpha-value>)',
76
- 50: 'rgb(var(--color-success-50)/<alpha-value>)',
77
- 100: 'rgb(var(--color-success-100)/<alpha-value>)',
78
- 200: 'rgb(var(--color-success-200)/<alpha-value>)',
79
- 300: 'rgb(var(--color-success-300)/<alpha-value>)',
80
- 400: 'rgb(var(--color-success-400)/<alpha-value>)',
81
- 500: 'rgb(var(--color-success-500)/<alpha-value>)',
82
- 600: 'rgb(var(--color-success-600)/<alpha-value>)',
83
- 700: 'rgb(var(--color-success-700)/<alpha-value>)',
84
- 800: 'rgb(var(--color-success-800)/<alpha-value>)',
85
- 900: 'rgb(var(--color-success-900)/<alpha-value>)',
86
- 950: 'rgb(var(--color-success-950)/<alpha-value>)',
87
- },
88
- warning: {
89
- 0: 'rgb(var(--color-warning-0)/<alpha-value>)',
90
- 50: 'rgb(var(--color-warning-50)/<alpha-value>)',
91
- 100: 'rgb(var(--color-warning-100)/<alpha-value>)',
92
- 200: 'rgb(var(--color-warning-200)/<alpha-value>)',
93
- 300: 'rgb(var(--color-warning-300)/<alpha-value>)',
94
- 400: 'rgb(var(--color-warning-400)/<alpha-value>)',
95
- 500: 'rgb(var(--color-warning-500)/<alpha-value>)',
96
- 600: 'rgb(var(--color-warning-600)/<alpha-value>)',
97
- 700: 'rgb(var(--color-warning-700)/<alpha-value>)',
98
- 800: 'rgb(var(--color-warning-800)/<alpha-value>)',
99
- 900: 'rgb(var(--color-warning-900)/<alpha-value>)',
100
- 950: 'rgb(var(--color-warning-950)/<alpha-value>)',
101
- },
102
- info: {
103
- 0: 'rgb(var(--color-info-0)/<alpha-value>)',
104
- 50: 'rgb(var(--color-info-50)/<alpha-value>)',
105
- 100: 'rgb(var(--color-info-100)/<alpha-value>)',
106
- 200: 'rgb(var(--color-info-200)/<alpha-value>)',
107
- 300: 'rgb(var(--color-info-300)/<alpha-value>)',
108
- 400: 'rgb(var(--color-info-400)/<alpha-value>)',
109
- 500: 'rgb(var(--color-info-500)/<alpha-value>)',
110
- 600: 'rgb(var(--color-info-600)/<alpha-value>)',
111
- 700: 'rgb(var(--color-info-700)/<alpha-value>)',
112
- 800: 'rgb(var(--color-info-800)/<alpha-value>)',
113
- 900: 'rgb(var(--color-info-900)/<alpha-value>)',
114
- 950: 'rgb(var(--color-info-950)/<alpha-value>)',
115
- },
116
- typography: {
117
- 0: 'rgb(var(--color-typography-0)/<alpha-value>)',
118
- 50: 'rgb(var(--color-typography-50)/<alpha-value>)',
119
- 100: 'rgb(var(--color-typography-100)/<alpha-value>)',
120
- 200: 'rgb(var(--color-typography-200)/<alpha-value>)',
121
- 300: 'rgb(var(--color-typography-300)/<alpha-value>)',
122
- 400: 'rgb(var(--color-typography-400)/<alpha-value>)',
123
- 500: 'rgb(var(--color-typography-500)/<alpha-value>)',
124
- 600: 'rgb(var(--color-typography-600)/<alpha-value>)',
125
- 700: 'rgb(var(--color-typography-700)/<alpha-value>)',
126
- 800: 'rgb(var(--color-typography-800)/<alpha-value>)',
127
- 900: 'rgb(var(--color-typography-900)/<alpha-value>)',
128
- 950: 'rgb(var(--color-typography-950)/<alpha-value>)',
129
- white: '#FFFFFF',
130
- gray: '#D4D4D4',
131
- black: '#181718',
132
- },
133
- outline: {
134
- 0: 'rgb(var(--color-outline-0)/<alpha-value>)',
135
- 50: 'rgb(var(--color-outline-50)/<alpha-value>)',
136
- 100: 'rgb(var(--color-outline-100)/<alpha-value>)',
137
- 200: 'rgb(var(--color-outline-200)/<alpha-value>)',
138
- 300: 'rgb(var(--color-outline-300)/<alpha-value>)',
139
- 400: 'rgb(var(--color-outline-400)/<alpha-value>)',
140
- 500: 'rgb(var(--color-outline-500)/<alpha-value>)',
141
- 600: 'rgb(var(--color-outline-600)/<alpha-value>)',
142
- 700: 'rgb(var(--color-outline-700)/<alpha-value>)',
143
- 800: 'rgb(var(--color-outline-800)/<alpha-value>)',
144
- 900: 'rgb(var(--color-outline-900)/<alpha-value>)',
145
- 950: 'rgb(var(--color-outline-950)/<alpha-value>)',
146
- },
147
- background: {
148
- 0: 'rgb(var(--color-background-0)/<alpha-value>)',
149
- 50: 'rgb(var(--color-background-50)/<alpha-value>)',
150
- 100: 'rgb(var(--color-background-100)/<alpha-value>)',
151
- 200: 'rgb(var(--color-background-200)/<alpha-value>)',
152
- 300: 'rgb(var(--color-background-300)/<alpha-value>)',
153
- 400: 'rgb(var(--color-background-400)/<alpha-value>)',
154
- 500: 'rgb(var(--color-background-500)/<alpha-value>)',
155
- 600: 'rgb(var(--color-background-600)/<alpha-value>)',
156
- 700: 'rgb(var(--color-background-700)/<alpha-value>)',
157
- 800: 'rgb(var(--color-background-800)/<alpha-value>)',
158
- 900: 'rgb(var(--color-background-900)/<alpha-value>)',
159
- 950: 'rgb(var(--color-background-950)/<alpha-value>)',
160
- error: 'rgb(var(--color-background-error)/<alpha-value>)',
161
- warning: 'rgb(var(--color-background-warning)/<alpha-value>)',
162
- muted: 'rgb(var(--color-background-muted)/<alpha-value>)',
163
- success: 'rgb(var(--color-background-success)/<alpha-value>)',
164
- info: 'rgb(var(--color-background-info)/<alpha-value>)',
165
- light: '#FBFBFB',
166
- dark: '#181719',
167
- },
168
- indicator: {
169
- primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)',
170
- info: 'rgb(var(--color-indicator-info)/<alpha-value>)',
171
- error: 'rgb(var(--color-indicator-error)/<alpha-value>)',
172
- },
173
- },
174
- fontFamily: {
175
- heading: ['System', 'ui-sans-serif', 'system-ui', 'sans-serif'],
176
- body: ['System', 'ui-sans-serif', 'system-ui', 'sans-serif'],
177
- mono: ['ui-monospace', 'SFMono-Regular', 'monospace'],
178
- jakarta: ['var(--font-plus-jakarta-sans)'],
179
- roboto: ['var(--font-roboto)'],
180
- code: ['var(--font-source-code-pro)'],
181
- inter: ['var(--font-inter)'],
182
- 'space-mono': ['var(--font-space-mono)'],
183
- },
184
- fontWeight: {
185
- extrablack: '950',
186
- },
187
- fontSize: {
188
- '2xs': '10px',
189
- },
190
- boxShadow: {
191
- 'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
192
- 'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
193
- 'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
194
- 'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
195
- 'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
196
- 'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
197
- 'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
198
- 'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
199
- 'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
200
- },
201
- },
202
- },
203
- };
1
+ const path = require("path");
2
+ const { createRequire } = require("module");
3
+
4
+ function loadNativewindPreset() {
5
+ try {
6
+ return require("nativewind/preset");
7
+ } catch {
8
+ // When this package is linked from a local source path, resolve from the app.
9
+ const appRequire = createRequire(path.join(process.cwd(), "package.json"));
10
+ return appRequire("nativewind/preset");
11
+ }
12
+ }
13
+
14
+ /** @type {import('tailwindcss').Config} */
15
+ module.exports = {
16
+ darkMode: "class",
17
+ content: [path.join(__dirname, "src/**/*.{ts,tsx}")],
18
+ presets: [loadNativewindPreset()],
19
+ safelist: [
20
+ {
21
+ pattern:
22
+ /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/,
23
+ },
24
+ ],
25
+ theme: {
26
+ extend: {
27
+ colors: {
28
+ primary: {
29
+ 0: "rgb(var(--color-primary-0)/<alpha-value>)",
30
+ 50: "rgb(var(--color-primary-50)/<alpha-value>)",
31
+ 100: "rgb(var(--color-primary-100)/<alpha-value>)",
32
+ 200: "rgb(var(--color-primary-200)/<alpha-value>)",
33
+ 300: "rgb(var(--color-primary-300)/<alpha-value>)",
34
+ 400: "rgb(var(--color-primary-400)/<alpha-value>)",
35
+ 500: "rgb(var(--color-primary-500)/<alpha-value>)",
36
+ 600: "rgb(var(--color-primary-600)/<alpha-value>)",
37
+ 700: "rgb(var(--color-primary-700)/<alpha-value>)",
38
+ 800: "rgb(var(--color-primary-800)/<alpha-value>)",
39
+ 900: "rgb(var(--color-primary-900)/<alpha-value>)",
40
+ 950: "rgb(var(--color-primary-950)/<alpha-value>)",
41
+ },
42
+ secondary: {
43
+ 0: "rgb(var(--color-secondary-0)/<alpha-value>)",
44
+ 50: "rgb(var(--color-secondary-50)/<alpha-value>)",
45
+ 100: "rgb(var(--color-secondary-100)/<alpha-value>)",
46
+ 200: "rgb(var(--color-secondary-200)/<alpha-value>)",
47
+ 300: "rgb(var(--color-secondary-300)/<alpha-value>)",
48
+ 400: "rgb(var(--color-secondary-400)/<alpha-value>)",
49
+ 500: "rgb(var(--color-secondary-500)/<alpha-value>)",
50
+ 600: "rgb(var(--color-secondary-600)/<alpha-value>)",
51
+ 700: "rgb(var(--color-secondary-700)/<alpha-value>)",
52
+ 800: "rgb(var(--color-secondary-800)/<alpha-value>)",
53
+ 900: "rgb(var(--color-secondary-900)/<alpha-value>)",
54
+ 950: "rgb(var(--color-secondary-950)/<alpha-value>)",
55
+ },
56
+ tertiary: {
57
+ 50: "rgb(var(--color-tertiary-50)/<alpha-value>)",
58
+ 100: "rgb(var(--color-tertiary-100)/<alpha-value>)",
59
+ 200: "rgb(var(--color-tertiary-200)/<alpha-value>)",
60
+ 300: "rgb(var(--color-tertiary-300)/<alpha-value>)",
61
+ 400: "rgb(var(--color-tertiary-400)/<alpha-value>)",
62
+ 500: "rgb(var(--color-tertiary-500)/<alpha-value>)",
63
+ 600: "rgb(var(--color-tertiary-600)/<alpha-value>)",
64
+ 700: "rgb(var(--color-tertiary-700)/<alpha-value>)",
65
+ 800: "rgb(var(--color-tertiary-800)/<alpha-value>)",
66
+ 900: "rgb(var(--color-tertiary-900)/<alpha-value>)",
67
+ 950: "rgb(var(--color-tertiary-950)/<alpha-value>)",
68
+ },
69
+ error: {
70
+ 0: "rgb(var(--color-error-0)/<alpha-value>)",
71
+ 50: "rgb(var(--color-error-50)/<alpha-value>)",
72
+ 100: "rgb(var(--color-error-100)/<alpha-value>)",
73
+ 200: "rgb(var(--color-error-200)/<alpha-value>)",
74
+ 300: "rgb(var(--color-error-300)/<alpha-value>)",
75
+ 400: "rgb(var(--color-error-400)/<alpha-value>)",
76
+ 500: "rgb(var(--color-error-500)/<alpha-value>)",
77
+ 600: "rgb(var(--color-error-600)/<alpha-value>)",
78
+ 700: "rgb(var(--color-error-700)/<alpha-value>)",
79
+ 800: "rgb(var(--color-error-800)/<alpha-value>)",
80
+ 900: "rgb(var(--color-error-900)/<alpha-value>)",
81
+ 950: "rgb(var(--color-error-950)/<alpha-value>)",
82
+ },
83
+ success: {
84
+ 0: "rgb(var(--color-success-0)/<alpha-value>)",
85
+ 50: "rgb(var(--color-success-50)/<alpha-value>)",
86
+ 100: "rgb(var(--color-success-100)/<alpha-value>)",
87
+ 200: "rgb(var(--color-success-200)/<alpha-value>)",
88
+ 300: "rgb(var(--color-success-300)/<alpha-value>)",
89
+ 400: "rgb(var(--color-success-400)/<alpha-value>)",
90
+ 500: "rgb(var(--color-success-500)/<alpha-value>)",
91
+ 600: "rgb(var(--color-success-600)/<alpha-value>)",
92
+ 700: "rgb(var(--color-success-700)/<alpha-value>)",
93
+ 800: "rgb(var(--color-success-800)/<alpha-value>)",
94
+ 900: "rgb(var(--color-success-900)/<alpha-value>)",
95
+ 950: "rgb(var(--color-success-950)/<alpha-value>)",
96
+ },
97
+ warning: {
98
+ 0: "rgb(var(--color-warning-0)/<alpha-value>)",
99
+ 50: "rgb(var(--color-warning-50)/<alpha-value>)",
100
+ 100: "rgb(var(--color-warning-100)/<alpha-value>)",
101
+ 200: "rgb(var(--color-warning-200)/<alpha-value>)",
102
+ 300: "rgb(var(--color-warning-300)/<alpha-value>)",
103
+ 400: "rgb(var(--color-warning-400)/<alpha-value>)",
104
+ 500: "rgb(var(--color-warning-500)/<alpha-value>)",
105
+ 600: "rgb(var(--color-warning-600)/<alpha-value>)",
106
+ 700: "rgb(var(--color-warning-700)/<alpha-value>)",
107
+ 800: "rgb(var(--color-warning-800)/<alpha-value>)",
108
+ 900: "rgb(var(--color-warning-900)/<alpha-value>)",
109
+ 950: "rgb(var(--color-warning-950)/<alpha-value>)",
110
+ },
111
+ info: {
112
+ 0: "rgb(var(--color-info-0)/<alpha-value>)",
113
+ 50: "rgb(var(--color-info-50)/<alpha-value>)",
114
+ 100: "rgb(var(--color-info-100)/<alpha-value>)",
115
+ 200: "rgb(var(--color-info-200)/<alpha-value>)",
116
+ 300: "rgb(var(--color-info-300)/<alpha-value>)",
117
+ 400: "rgb(var(--color-info-400)/<alpha-value>)",
118
+ 500: "rgb(var(--color-info-500)/<alpha-value>)",
119
+ 600: "rgb(var(--color-info-600)/<alpha-value>)",
120
+ 700: "rgb(var(--color-info-700)/<alpha-value>)",
121
+ 800: "rgb(var(--color-info-800)/<alpha-value>)",
122
+ 900: "rgb(var(--color-info-900)/<alpha-value>)",
123
+ 950: "rgb(var(--color-info-950)/<alpha-value>)",
124
+ },
125
+ typography: {
126
+ 0: "rgb(var(--color-typography-0)/<alpha-value>)",
127
+ 50: "rgb(var(--color-typography-50)/<alpha-value>)",
128
+ 100: "rgb(var(--color-typography-100)/<alpha-value>)",
129
+ 200: "rgb(var(--color-typography-200)/<alpha-value>)",
130
+ 300: "rgb(var(--color-typography-300)/<alpha-value>)",
131
+ 400: "rgb(var(--color-typography-400)/<alpha-value>)",
132
+ 500: "rgb(var(--color-typography-500)/<alpha-value>)",
133
+ 600: "rgb(var(--color-typography-600)/<alpha-value>)",
134
+ 700: "rgb(var(--color-typography-700)/<alpha-value>)",
135
+ 800: "rgb(var(--color-typography-800)/<alpha-value>)",
136
+ 900: "rgb(var(--color-typography-900)/<alpha-value>)",
137
+ 950: "rgb(var(--color-typography-950)/<alpha-value>)",
138
+ white: "#FFFFFF",
139
+ gray: "#D4D4D4",
140
+ black: "#181718",
141
+ },
142
+ outline: {
143
+ 0: "rgb(var(--color-outline-0)/<alpha-value>)",
144
+ 50: "rgb(var(--color-outline-50)/<alpha-value>)",
145
+ 100: "rgb(var(--color-outline-100)/<alpha-value>)",
146
+ 200: "rgb(var(--color-outline-200)/<alpha-value>)",
147
+ 300: "rgb(var(--color-outline-300)/<alpha-value>)",
148
+ 400: "rgb(var(--color-outline-400)/<alpha-value>)",
149
+ 500: "rgb(var(--color-outline-500)/<alpha-value>)",
150
+ 600: "rgb(var(--color-outline-600)/<alpha-value>)",
151
+ 700: "rgb(var(--color-outline-700)/<alpha-value>)",
152
+ 800: "rgb(var(--color-outline-800)/<alpha-value>)",
153
+ 900: "rgb(var(--color-outline-900)/<alpha-value>)",
154
+ 950: "rgb(var(--color-outline-950)/<alpha-value>)",
155
+ },
156
+ background: {
157
+ 0: "rgb(var(--color-background-0)/<alpha-value>)",
158
+ 50: "rgb(var(--color-background-50)/<alpha-value>)",
159
+ 100: "rgb(var(--color-background-100)/<alpha-value>)",
160
+ 200: "rgb(var(--color-background-200)/<alpha-value>)",
161
+ 300: "rgb(var(--color-background-300)/<alpha-value>)",
162
+ 400: "rgb(var(--color-background-400)/<alpha-value>)",
163
+ 500: "rgb(var(--color-background-500)/<alpha-value>)",
164
+ 600: "rgb(var(--color-background-600)/<alpha-value>)",
165
+ 700: "rgb(var(--color-background-700)/<alpha-value>)",
166
+ 800: "rgb(var(--color-background-800)/<alpha-value>)",
167
+ 900: "rgb(var(--color-background-900)/<alpha-value>)",
168
+ 950: "rgb(var(--color-background-950)/<alpha-value>)",
169
+ error: "rgb(var(--color-background-error)/<alpha-value>)",
170
+ warning: "rgb(var(--color-background-warning)/<alpha-value>)",
171
+ muted: "rgb(var(--color-background-muted)/<alpha-value>)",
172
+ success: "rgb(var(--color-background-success)/<alpha-value>)",
173
+ info: "rgb(var(--color-background-info)/<alpha-value>)",
174
+ light: "#FBFBFB",
175
+ dark: "#181719",
176
+ },
177
+ indicator: {
178
+ primary: "rgb(var(--color-indicator-primary)/<alpha-value>)",
179
+ info: "rgb(var(--color-indicator-info)/<alpha-value>)",
180
+ error: "rgb(var(--color-indicator-error)/<alpha-value>)",
181
+ },
182
+ },
183
+ fontFamily: {
184
+ heading: ["System", "ui-sans-serif", "system-ui", "sans-serif"],
185
+ body: ["System", "ui-sans-serif", "system-ui", "sans-serif"],
186
+ mono: ["ui-monospace", "SFMono-Regular", "monospace"],
187
+ jakarta: ["var(--font-plus-jakarta-sans)"],
188
+ roboto: ["var(--font-roboto)"],
189
+ code: ["var(--font-source-code-pro)"],
190
+ inter: ["var(--font-inter)"],
191
+ "space-mono": ["var(--font-space-mono)"],
192
+ },
193
+ fontWeight: {
194
+ extrablack: "950",
195
+ },
196
+ fontSize: {
197
+ "2xs": "10px",
198
+ },
199
+ boxShadow: {
200
+ "hard-1": "-2px 2px 8px 0px rgba(38, 38, 38, 0.20)",
201
+ "hard-2": "0px 3px 10px 0px rgba(38, 38, 38, 0.20)",
202
+ "hard-3": "2px 2px 8px 0px rgba(38, 38, 38, 0.20)",
203
+ "hard-4": "0px -3px 10px 0px rgba(38, 38, 38, 0.20)",
204
+ "hard-5": "0px 2px 10px 0px rgba(38, 38, 38, 0.10)",
205
+ "soft-1": "0px 0px 10px rgba(38, 38, 38, 0.1)",
206
+ "soft-2": "0px 0px 20px rgba(38, 38, 38, 0.2)",
207
+ "soft-3": "0px 0px 30px rgba(38, 38, 38, 0.1)",
208
+ "soft-4": "0px 0px 40px rgba(38, 38, 38, 0.1)",
209
+ },
210
+ },
211
+ },
212
+ };