@wireservers-ui/react-natives 2.0.1 → 2.0.2-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (404) hide show
  1. package/CHANGELOG.md +87 -71
  2. package/LICENSE +21 -21
  3. package/README.md +642 -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
@@ -1,31 +1,31 @@
1
- import { tv } from 'tailwind-variants';
2
-
3
- export const circularProgressStyle = tv({
4
- base: 'items-center justify-center',
5
- variants: {
6
- size: {
7
- sm: 'h-8 w-8',
8
- md: 'h-12 w-12',
9
- lg: 'h-16 w-16',
10
- xl: 'h-24 w-24',
11
- },
12
- },
13
- defaultVariants: {
14
- size: 'md',
15
- },
16
- });
17
-
18
- export const circularProgressLabelStyle = tv({
19
- base: 'absolute font-semibold text-typography-700',
20
- variants: {
21
- size: {
22
- sm: 'text-2xs',
23
- md: 'text-xs',
24
- lg: 'text-sm',
25
- xl: 'text-lg',
26
- },
27
- },
28
- defaultVariants: {
29
- size: 'md',
30
- },
31
- });
1
+ import { tv } from 'tailwind-variants';
2
+
3
+ export const circularProgressStyle = tv({
4
+ base: 'items-center justify-center',
5
+ variants: {
6
+ size: {
7
+ sm: 'h-8 w-8',
8
+ md: 'h-12 w-12',
9
+ lg: 'h-16 w-16',
10
+ xl: 'h-24 w-24',
11
+ },
12
+ },
13
+ defaultVariants: {
14
+ size: 'md',
15
+ },
16
+ });
17
+
18
+ export const circularProgressLabelStyle = tv({
19
+ base: 'absolute font-semibold text-typography-700',
20
+ variants: {
21
+ size: {
22
+ sm: 'text-2xs',
23
+ md: 'text-xs',
24
+ lg: 'text-sm',
25
+ xl: 'text-lg',
26
+ },
27
+ },
28
+ defaultVariants: {
29
+ size: 'md',
30
+ },
31
+ });
@@ -1,18 +1,18 @@
1
- import type { View, Text as RNText } from 'react-native';
2
-
3
- export type CircularProgressSize = 'sm' | 'md' | 'lg' | 'xl';
4
-
5
- export interface CircularProgressContextValue {
6
- value: number;
7
- size: CircularProgressSize;
8
- }
9
-
10
- export interface CircularProgressProps extends React.ComponentPropsWithoutRef<typeof View> {
11
- className?: string;
12
- value?: number;
13
- size?: CircularProgressSize;
14
- }
15
-
16
- export interface CircularProgressLabelProps extends React.ComponentPropsWithoutRef<typeof RNText> {
17
- className?: string;
18
- }
1
+ import type { View, Text as RNText } from 'react-native';
2
+
3
+ export type CircularProgressSize = 'sm' | 'md' | 'lg' | 'xl';
4
+
5
+ export interface CircularProgressContextValue {
6
+ value: number;
7
+ size: CircularProgressSize;
8
+ }
9
+
10
+ export interface CircularProgressProps extends React.ComponentPropsWithoutRef<typeof View> {
11
+ className?: string;
12
+ value?: number;
13
+ size?: CircularProgressSize;
14
+ }
15
+
16
+ export interface CircularProgressLabelProps extends React.ComponentPropsWithoutRef<typeof RNText> {
17
+ className?: string;
18
+ }
package/src/code/code.tsx CHANGED
@@ -1,36 +1,36 @@
1
- import React from 'react';
2
- import { View, Text } from 'react-native';
3
- import type { CodeProps, CodeBlockProps } from './types';
4
- import { codeStyle, codeBlockStyle, codeBlockTextStyle } from './styles';
5
-
6
- export const Code = React.forwardRef<
7
- React.ElementRef<typeof Text>,
8
- CodeProps
9
- >(({ className, variant, ...props }, ref) => {
10
- return (
11
- <Text
12
- ref={ref}
13
- className={codeStyle({ variant, class: className })}
14
- {...props}
15
- />
16
- );
17
- });
18
-
19
- Code.displayName = 'Code';
20
-
21
- export const CodeBlock = React.forwardRef<
22
- React.ElementRef<typeof View>,
23
- CodeBlockProps
24
- >(({ className, children, ...props }, ref) => {
25
- return (
26
- <View ref={ref} className={codeBlockStyle({ class: className })} {...props}>
27
- {typeof children === 'string' ? (
28
- <Text className={codeBlockTextStyle({})}>{children}</Text>
29
- ) : (
30
- children
31
- )}
32
- </View>
33
- );
34
- });
35
-
36
- CodeBlock.displayName = 'CodeBlock';
1
+ import React from 'react';
2
+ import { View, Text } from 'react-native';
3
+ import type { CodeProps, CodeBlockProps } from './types';
4
+ import { codeStyle, codeBlockStyle, codeBlockTextStyle } from './styles';
5
+
6
+ export const Code = React.forwardRef<
7
+ React.ElementRef<typeof Text>,
8
+ CodeProps
9
+ >(({ className, variant, ...props }, ref) => {
10
+ return (
11
+ <Text
12
+ ref={ref}
13
+ className={codeStyle({ variant, class: className })}
14
+ {...props}
15
+ />
16
+ );
17
+ });
18
+
19
+ Code.displayName = 'Code';
20
+
21
+ export const CodeBlock = React.forwardRef<
22
+ React.ElementRef<typeof View>,
23
+ CodeBlockProps
24
+ >(({ className, children, ...props }, ref) => {
25
+ return (
26
+ <View ref={ref} className={codeBlockStyle({ class: className })} {...props}>
27
+ {typeof children === 'string' ? (
28
+ <Text className={codeBlockTextStyle({})}>{children}</Text>
29
+ ) : (
30
+ children
31
+ )}
32
+ </View>
33
+ );
34
+ });
35
+
36
+ CodeBlock.displayName = 'CodeBlock';
package/src/code/index.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { Code, CodeBlock } from './code';
2
- export type { CodeProps, CodeBlockProps, CodeVariant } from './types';
1
+ export { Code, CodeBlock } from './code';
2
+ export type { CodeProps, CodeBlockProps, CodeVariant } from './types';
@@ -1,25 +1,25 @@
1
- import { tv } from 'tailwind-variants';
2
-
3
- export const codeStyle = tv({
4
- base: 'font-mono text-sm rounded px-1 py-0.5',
5
- variants: {
6
- variant: {
7
- subtle: 'bg-background-100 text-typography-800',
8
- outline: 'border border-outline-200 text-typography-800',
9
- solid: 'bg-typography-900 text-typography-0',
10
- },
11
- },
12
- defaultVariants: {
13
- variant: 'subtle',
14
- },
15
- });
16
-
17
- export const codeBlockStyle = tv({
18
- base: 'bg-background-950 rounded-lg p-4 overflow-hidden',
19
- variants: {},
20
- });
21
-
22
- export const codeBlockTextStyle = tv({
23
- base: 'font-mono text-sm text-typography-50',
24
- variants: {},
25
- });
1
+ import { tv } from 'tailwind-variants';
2
+
3
+ export const codeStyle = tv({
4
+ base: 'font-mono text-sm rounded px-1 py-0.5',
5
+ variants: {
6
+ variant: {
7
+ subtle: 'bg-background-100 text-typography-800',
8
+ outline: 'border border-outline-200 text-typography-800',
9
+ solid: 'bg-typography-900 text-typography-0',
10
+ },
11
+ },
12
+ defaultVariants: {
13
+ variant: 'subtle',
14
+ },
15
+ });
16
+
17
+ export const codeBlockStyle = tv({
18
+ base: 'bg-background-950 rounded-lg p-4 overflow-hidden',
19
+ variants: {},
20
+ });
21
+
22
+ export const codeBlockTextStyle = tv({
23
+ base: 'font-mono text-sm text-typography-50',
24
+ variants: {},
25
+ });
package/src/code/types.ts CHANGED
@@ -1,13 +1,13 @@
1
- import type { View, Text as RNText } from 'react-native';
2
-
3
- export type CodeVariant = 'subtle' | 'outline' | 'solid';
4
-
5
- export interface CodeProps extends React.ComponentPropsWithoutRef<typeof RNText> {
6
- className?: string;
7
- variant?: CodeVariant;
8
- }
9
-
10
- export interface CodeBlockProps extends React.ComponentPropsWithoutRef<typeof View> {
11
- className?: string;
12
- children: React.ReactNode;
13
- }
1
+ import type { View, Text as RNText } from 'react-native';
2
+
3
+ export type CodeVariant = 'subtle' | 'outline' | 'solid';
4
+
5
+ export interface CodeProps extends React.ComponentPropsWithoutRef<typeof RNText> {
6
+ className?: string;
7
+ variant?: CodeVariant;
8
+ }
9
+
10
+ export interface CodeBlockProps extends React.ComponentPropsWithoutRef<typeof View> {
11
+ className?: string;
12
+ children: React.ReactNode;
13
+ }
@@ -1,58 +1,58 @@
1
- import React, { useState } from 'react';
2
- import { View, Pressable } from 'react-native';
3
- import { createComponentContext } from '../utils/create-context';
4
- import type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps, CollapsibleContextValue } from './types';
5
- import { collapsibleStyle, collapsibleTriggerStyle, collapsibleContentStyle } from './styles';
6
-
7
- export const [CollapsibleProvider, useCollapsibleContext] =
8
- createComponentContext<CollapsibleContextValue>('Collapsible');
9
-
10
- export const Collapsible = React.forwardRef<
11
- React.ElementRef<typeof View>,
12
- CollapsibleProps
13
- >(({ className, isOpen: controlledOpen, onOpenChange, defaultOpen = false, children, ...props }, ref) => {
14
- const [internalOpen, setInternalOpen] = useState(defaultOpen);
15
- const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
16
-
17
- const onToggle = () => {
18
- const next = !isOpen;
19
- setInternalOpen(next);
20
- onOpenChange?.(next);
21
- };
22
-
23
- return (
24
- <CollapsibleProvider value={{ isOpen, onToggle }}>
25
- <View ref={ref} className={collapsibleStyle({ class: className })} {...props}>
26
- {children}
27
- </View>
28
- </CollapsibleProvider>
29
- );
30
- });
31
- Collapsible.displayName = 'Collapsible';
32
-
33
- export const CollapsibleTrigger = React.forwardRef<
34
- React.ElementRef<typeof Pressable>,
35
- CollapsibleTriggerProps
36
- >(({ className, children, ...props }, ref) => {
37
- const { onToggle } = useCollapsibleContext();
38
- return (
39
- <Pressable ref={ref} onPress={onToggle} className={collapsibleTriggerStyle({ class: className })} accessibilityRole="button" {...props}>
40
- {children}
41
- </Pressable>
42
- );
43
- });
44
- CollapsibleTrigger.displayName = 'CollapsibleTrigger';
45
-
46
- export const CollapsibleContent = React.forwardRef<
47
- React.ElementRef<typeof View>,
48
- CollapsibleContentProps
49
- >(({ className, children, ...props }, ref) => {
50
- const { isOpen } = useCollapsibleContext();
51
- if (!isOpen) return null;
52
- return (
53
- <View ref={ref} className={collapsibleContentStyle({ class: className })} {...props}>
54
- {children}
55
- </View>
56
- );
57
- });
58
- CollapsibleContent.displayName = 'CollapsibleContent';
1
+ import React, { useState } from 'react';
2
+ import { View, Pressable } from 'react-native';
3
+ import { createComponentContext } from '../utils/create-context';
4
+ import type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps, CollapsibleContextValue } from './types';
5
+ import { collapsibleStyle, collapsibleTriggerStyle, collapsibleContentStyle } from './styles';
6
+
7
+ export const [CollapsibleProvider, useCollapsibleContext] =
8
+ createComponentContext<CollapsibleContextValue>('Collapsible');
9
+
10
+ export const Collapsible = React.forwardRef<
11
+ React.ElementRef<typeof View>,
12
+ CollapsibleProps
13
+ >(({ className, isOpen: controlledOpen, onOpenChange, defaultOpen = false, children, ...props }, ref) => {
14
+ const [internalOpen, setInternalOpen] = useState(defaultOpen);
15
+ const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
16
+
17
+ const onToggle = () => {
18
+ const next = !isOpen;
19
+ setInternalOpen(next);
20
+ onOpenChange?.(next);
21
+ };
22
+
23
+ return (
24
+ <CollapsibleProvider value={{ isOpen, onToggle }}>
25
+ <View ref={ref} className={collapsibleStyle({ class: className })} {...props}>
26
+ {children}
27
+ </View>
28
+ </CollapsibleProvider>
29
+ );
30
+ });
31
+ Collapsible.displayName = 'Collapsible';
32
+
33
+ export const CollapsibleTrigger = React.forwardRef<
34
+ React.ElementRef<typeof Pressable>,
35
+ CollapsibleTriggerProps
36
+ >(({ className, children, ...props }, ref) => {
37
+ const { onToggle } = useCollapsibleContext();
38
+ return (
39
+ <Pressable ref={ref} onPress={onToggle} className={collapsibleTriggerStyle({ class: className })} accessibilityRole="button" {...props}>
40
+ {children}
41
+ </Pressable>
42
+ );
43
+ });
44
+ CollapsibleTrigger.displayName = 'CollapsibleTrigger';
45
+
46
+ export const CollapsibleContent = React.forwardRef<
47
+ React.ElementRef<typeof View>,
48
+ CollapsibleContentProps
49
+ >(({ className, children, ...props }, ref) => {
50
+ const { isOpen } = useCollapsibleContext();
51
+ if (!isOpen) return null;
52
+ return (
53
+ <View ref={ref} className={collapsibleContentStyle({ class: className })} {...props}>
54
+ {children}
55
+ </View>
56
+ );
57
+ });
58
+ CollapsibleContent.displayName = 'CollapsibleContent';
@@ -1,2 +1,2 @@
1
- export { Collapsible, CollapsibleProvider, useCollapsibleContext, CollapsibleTrigger, CollapsibleContent } from './collapsible';
2
- export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps, CollapsibleContextValue } from './types';
1
+ export { Collapsible, CollapsibleProvider, useCollapsibleContext, CollapsibleTrigger, CollapsibleContent } from './collapsible';
2
+ export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps, CollapsibleContextValue } from './types';
@@ -1,5 +1,5 @@
1
- import { tv } from 'tailwind-variants';
2
-
3
- export const collapsibleStyle = tv({ base: 'w-full', variants: {} });
4
- export const collapsibleTriggerStyle = tv({ base: 'w-full', variants: {} });
5
- export const collapsibleContentStyle = tv({ base: 'overflow-hidden', variants: {} });
1
+ import { tv } from 'tailwind-variants';
2
+
3
+ export const collapsibleStyle = tv({ base: 'w-full', variants: {} });
4
+ export const collapsibleTriggerStyle = tv({ base: 'w-full', variants: {} });
5
+ export const collapsibleContentStyle = tv({ base: 'overflow-hidden', variants: {} });
@@ -1,21 +1,21 @@
1
- import type { View, Pressable } from 'react-native';
2
-
3
- export interface CollapsibleContextValue {
4
- isOpen: boolean;
5
- onToggle: () => void;
6
- }
7
-
8
- export interface CollapsibleProps extends React.ComponentPropsWithoutRef<typeof View> {
9
- className?: string;
10
- isOpen?: boolean;
11
- onOpenChange?: (open: boolean) => void;
12
- defaultOpen?: boolean;
13
- }
14
-
15
- export interface CollapsibleTriggerProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
16
- className?: string;
17
- }
18
-
19
- export interface CollapsibleContentProps extends React.ComponentPropsWithoutRef<typeof View> {
20
- className?: string;
21
- }
1
+ import type { View, Pressable } from 'react-native';
2
+
3
+ export interface CollapsibleContextValue {
4
+ isOpen: boolean;
5
+ onToggle: () => void;
6
+ }
7
+
8
+ export interface CollapsibleProps extends React.ComponentPropsWithoutRef<typeof View> {
9
+ className?: string;
10
+ isOpen?: boolean;
11
+ onOpenChange?: (open: boolean) => void;
12
+ defaultOpen?: boolean;
13
+ }
14
+
15
+ export interface CollapsibleTriggerProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
16
+ className?: string;
17
+ }
18
+
19
+ export interface CollapsibleContentProps extends React.ComponentPropsWithoutRef<typeof View> {
20
+ className?: string;
21
+ }