@wireservers-ui/react-natives 1.0.0 → 1.0.1-rc1

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 (402) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +214 -98
  3. package/bin/cli.js +356 -0
  4. package/package.json +27 -48
  5. package/src/accordion/accordion-content.tsx +30 -30
  6. package/src/accordion/accordion-icon.tsx +54 -54
  7. package/src/accordion/accordion-item.tsx +37 -37
  8. package/src/accordion/accordion-title-text.tsx +24 -24
  9. package/src/accordion/accordion-trigger.tsx +38 -38
  10. package/src/accordion/accordion.tsx +91 -91
  11. package/src/accordion/index.ts +24 -24
  12. package/src/accordion/styles.ts +74 -74
  13. package/src/accordion/types.ts +56 -56
  14. package/src/actionsheet/actionsheet-backdrop.tsx +23 -23
  15. package/src/actionsheet/actionsheet-content.tsx +19 -19
  16. package/src/actionsheet/actionsheet-drag-indicator-wrapper.tsx +19 -19
  17. package/src/actionsheet/actionsheet-drag-indicator.tsx +19 -19
  18. package/src/actionsheet/actionsheet-item-text.tsx +19 -19
  19. package/src/actionsheet/actionsheet-item.tsx +20 -20
  20. package/src/actionsheet/actionsheet-scroll-view.tsx +12 -12
  21. package/src/actionsheet/actionsheet.tsx +45 -45
  22. package/src/actionsheet/index.ts +20 -20
  23. package/src/actionsheet/styles.ts +25 -25
  24. package/src/actionsheet/types.ts +49 -49
  25. package/src/alert/alert-body.tsx +19 -19
  26. package/src/alert/alert-close-button.tsx +23 -23
  27. package/src/alert/alert-icon.tsx +40 -40
  28. package/src/alert/alert-text.tsx +22 -22
  29. package/src/alert/alert.tsx +33 -33
  30. package/src/alert/index.ts +15 -15
  31. package/src/alert/styles.ts +112 -112
  32. package/src/alert/types.ts +36 -36
  33. package/src/alert-dialog/alert-dialog.tsx +54 -54
  34. package/src/alert-dialog/index.ts +2 -2
  35. package/src/alert-dialog/styles.ts +40 -40
  36. package/src/alert-dialog/types.ts +40 -40
  37. package/src/aspect-ratio/aspect-ratio.tsx +20 -20
  38. package/src/aspect-ratio/index.ts +2 -2
  39. package/src/aspect-ratio/styles.ts +6 -6
  40. package/src/aspect-ratio/types.ts +7 -7
  41. package/src/avatar/avatar-badge.tsx +22 -22
  42. package/src/avatar/avatar-fallback-text.tsx +33 -33
  43. package/src/avatar/avatar-group.tsx +53 -53
  44. package/src/avatar/avatar-image.tsx +21 -21
  45. package/src/avatar/avatar.tsx +27 -27
  46. package/src/avatar/index.ts +14 -14
  47. package/src/avatar/styles.ts +94 -94
  48. package/src/avatar/types.ts +35 -35
  49. package/src/badge/badge-icon.tsx +20 -20
  50. package/src/badge/badge-text.tsx +24 -24
  51. package/src/badge/badge.tsx +39 -39
  52. package/src/badge/index.ts +11 -11
  53. package/src/badge/styles.ts +175 -175
  54. package/src/badge/types.ts +37 -37
  55. package/src/blockquote/blockquote.tsx +21 -21
  56. package/src/blockquote/index.ts +2 -2
  57. package/src/blockquote/styles.ts +11 -11
  58. package/src/blockquote/types.ts +6 -6
  59. package/src/box/box.tsx +19 -19
  60. package/src/box/index.ts +2 -2
  61. package/src/box/styles.ts +6 -6
  62. package/src/box/types.ts +6 -6
  63. package/src/breadcrumb/breadcrumb-item.tsx +20 -20
  64. package/src/breadcrumb/breadcrumb-link.tsx +20 -20
  65. package/src/breadcrumb/breadcrumb-text.tsx +19 -19
  66. package/src/breadcrumb/breadcrumb.tsx +43 -43
  67. package/src/breadcrumb/index.ts +12 -12
  68. package/src/breadcrumb/styles.ts +36 -36
  69. package/src/breadcrumb/types.ts +33 -33
  70. package/src/button/button-group.tsx +35 -35
  71. package/src/button/button-icon.tsx +37 -37
  72. package/src/button/button-spinner.tsx +12 -12
  73. package/src/button/button-text.tsx +27 -27
  74. package/src/button/button.tsx +42 -42
  75. package/src/button/index.ts +19 -19
  76. package/src/button/styles.ts +250 -250
  77. package/src/button/types.ts +67 -67
  78. package/src/calendar/calendar-day-cell.tsx +67 -67
  79. package/src/calendar/calendar-day-view.tsx +66 -66
  80. package/src/calendar/calendar-event.tsx +59 -59
  81. package/src/calendar/calendar-header.tsx +60 -60
  82. package/src/calendar/calendar-horizontal-view.tsx +372 -372
  83. package/src/calendar/calendar-legend.tsx +41 -41
  84. package/src/calendar/calendar-month-view.tsx +47 -47
  85. package/src/calendar/calendar-vertical-view.tsx +395 -395
  86. package/src/calendar/calendar-view-switcher.tsx +65 -65
  87. package/src/calendar/calendar-week-view.tsx +52 -52
  88. package/src/calendar/calendar.tsx +74 -74
  89. package/src/calendar/index.ts +27 -27
  90. package/src/calendar/styles.ts +367 -367
  91. package/src/calendar/types.ts +101 -101
  92. package/src/calendar/use-calendar.ts +170 -170
  93. package/src/calendar/utils.ts +278 -278
  94. package/src/card/card-body.tsx +22 -22
  95. package/src/card/card-footer.tsx +19 -19
  96. package/src/card/card-header.tsx +22 -22
  97. package/src/card/card.tsx +27 -27
  98. package/src/card/index.ts +13 -13
  99. package/src/card/styles.ts +54 -54
  100. package/src/card/types.ts +31 -31
  101. package/src/carousel/carousel.tsx +436 -436
  102. package/src/carousel/index.ts +2 -2
  103. package/src/carousel/styles.ts +21 -21
  104. package/src/carousel/types.ts +41 -41
  105. package/src/center/center.tsx +19 -19
  106. package/src/center/index.ts +2 -2
  107. package/src/center/styles.ts +6 -6
  108. package/src/center/types.ts +6 -6
  109. package/src/checkbox/checkbox-group.tsx +63 -63
  110. package/src/checkbox/checkbox-icon.tsx +35 -35
  111. package/src/checkbox/checkbox-indicator.tsx +30 -30
  112. package/src/checkbox/checkbox-label.tsx +24 -24
  113. package/src/checkbox/checkbox.tsx +86 -86
  114. package/src/checkbox/index.ts +14 -14
  115. package/src/checkbox/styles.ts +69 -69
  116. package/src/checkbox/types.ts +55 -55
  117. package/src/circular-progress/circular-progress.tsx +82 -82
  118. package/src/circular-progress/index.ts +2 -2
  119. package/src/circular-progress/styles.ts +31 -31
  120. package/src/circular-progress/types.ts +18 -18
  121. package/src/code/code.tsx +36 -36
  122. package/src/code/index.ts +2 -2
  123. package/src/code/styles.ts +25 -25
  124. package/src/code/types.ts +13 -13
  125. package/src/collapsible/collapsible.tsx +58 -58
  126. package/src/collapsible/index.ts +2 -2
  127. package/src/collapsible/styles.ts +5 -5
  128. package/src/collapsible/types.ts +21 -21
  129. package/src/color-picker/color-picker-box.tsx +115 -115
  130. package/src/color-picker/color-picker-slider.tsx +98 -98
  131. package/src/color-picker/color-picker.tsx +162 -162
  132. package/src/color-picker/color-utils.ts +215 -215
  133. package/src/color-picker/index.ts +34 -34
  134. package/src/color-picker/styles.ts +32 -32
  135. package/src/color-picker/types.ts +49 -49
  136. package/src/color-picker/use-pointer-drag.ts +80 -80
  137. package/src/container/container.tsx +19 -19
  138. package/src/container/index.ts +2 -2
  139. package/src/container/styles.ts +21 -21
  140. package/src/container/types.ts +10 -10
  141. package/src/date-picker/date-picker.tsx +136 -136
  142. package/src/date-picker/index.ts +15 -15
  143. package/src/date-picker/styles.ts +18 -18
  144. package/src/date-picker/types.ts +33 -33
  145. package/src/divider/divider.tsx +21 -21
  146. package/src/divider/index.ts +2 -2
  147. package/src/divider/styles.ts +14 -14
  148. package/src/divider/types.ts +7 -7
  149. package/src/drawer/drawer-backdrop.tsx +23 -23
  150. package/src/drawer/drawer-body.tsx +19 -19
  151. package/src/drawer/drawer-close-button.tsx +29 -29
  152. package/src/drawer/drawer-content.tsx +142 -142
  153. package/src/drawer/drawer-footer.tsx +19 -19
  154. package/src/drawer/drawer-header.tsx +19 -19
  155. package/src/drawer/drawer.tsx +54 -54
  156. package/src/drawer/index.ts +22 -22
  157. package/src/drawer/styles.ts +36 -36
  158. package/src/drawer/types.ts +62 -62
  159. package/src/empty/empty.tsx +53 -53
  160. package/src/empty/index.ts +2 -2
  161. package/src/empty/styles.ts +26 -26
  162. package/src/empty/types.ts +22 -22
  163. package/src/fab/fab-icon.tsx +20 -20
  164. package/src/fab/fab-label.tsx +22 -22
  165. package/src/fab/fab.tsx +45 -45
  166. package/src/fab/index.ts +11 -11
  167. package/src/fab/styles.ts +57 -57
  168. package/src/fab/types.ts +33 -33
  169. package/src/form-control/form-control-error-icon.tsx +25 -25
  170. package/src/form-control/form-control-error-message.tsx +40 -40
  171. package/src/form-control/form-control-helper-text.tsx +25 -25
  172. package/src/form-control/form-control-label-text.tsx +25 -25
  173. package/src/form-control/form-control-label.tsx +36 -36
  174. package/src/form-control/form-control.tsx +46 -46
  175. package/src/form-control/index.ts +20 -20
  176. package/src/form-control/styles.ts +105 -105
  177. package/src/form-control/types.ts +45 -45
  178. package/src/heading/heading.tsx +21 -21
  179. package/src/heading/index.ts +2 -2
  180. package/src/heading/styles.ts +24 -24
  181. package/src/heading/types.ts +19 -19
  182. package/src/icon/icon.tsx +21 -21
  183. package/src/icon/index.ts +2 -2
  184. package/src/icon/styles.ts +18 -18
  185. package/src/icon/types.ts +8 -8
  186. package/src/icon-button/icon-button.tsx +23 -23
  187. package/src/icon-button/index.ts +2 -2
  188. package/src/icon-button/styles.ts +78 -78
  189. package/src/icon-button/types.ts +15 -15
  190. package/src/image/image.tsx +20 -20
  191. package/src/image/index.ts +2 -2
  192. package/src/image/styles.ts +28 -28
  193. package/src/image/types.ts +11 -11
  194. package/src/index.ts +1039 -1039
  195. package/src/input/index.ts +13 -13
  196. package/src/input/input-field.tsx +35 -35
  197. package/src/input/input-icon.tsx +25 -25
  198. package/src/input/input-slot.tsx +24 -24
  199. package/src/input/input.tsx +73 -73
  200. package/src/input/styles.ts +90 -90
  201. package/src/input/types.ts +39 -39
  202. package/src/kbd/index.ts +2 -2
  203. package/src/kbd/kbd.tsx +21 -21
  204. package/src/kbd/styles.ts +11 -11
  205. package/src/kbd/types.ts +7 -7
  206. package/src/link/index.ts +4 -4
  207. package/src/link/link-text.tsx +19 -19
  208. package/src/link/link.tsx +31 -31
  209. package/src/link/styles.ts +19 -19
  210. package/src/link/types.ts +13 -13
  211. package/src/list/index.ts +2 -2
  212. package/src/list/list.tsx +55 -55
  213. package/src/list/styles.ts +8 -8
  214. package/src/list/types.ts +17 -17
  215. package/src/menu/index.ts +2 -2
  216. package/src/menu/menu.tsx +99 -99
  217. package/src/menu/styles.ts +14 -14
  218. package/src/menu/types.ts +30 -30
  219. package/src/modal/index.ts +18 -18
  220. package/src/modal/modal-backdrop.tsx +23 -23
  221. package/src/modal/modal-body.tsx +19 -19
  222. package/src/modal/modal-close-button.tsx +29 -29
  223. package/src/modal/modal-content.tsx +22 -22
  224. package/src/modal/modal-footer.tsx +19 -19
  225. package/src/modal/modal-header.tsx +19 -19
  226. package/src/modal/modal.tsx +50 -50
  227. package/src/modal/styles.ts +37 -37
  228. package/src/modal/types.ts +49 -49
  229. package/src/nativewind-env.d.ts +1 -1
  230. package/src/number-input/index.ts +18 -18
  231. package/src/number-input/number-input.tsx +161 -161
  232. package/src/number-input/styles.ts +35 -35
  233. package/src/number-input/types.ts +44 -44
  234. package/src/overlay/index.ts +2 -2
  235. package/src/overlay/overlay.tsx +21 -21
  236. package/src/overlay/styles.ts +6 -6
  237. package/src/overlay/types.ts +7 -7
  238. package/src/pagination/index.ts +2 -2
  239. package/src/pagination/pagination.tsx +58 -58
  240. package/src/pagination/styles.ts +27 -27
  241. package/src/pagination/types.ts +19 -19
  242. package/src/password-input/index.ts +14 -14
  243. package/src/password-input/password-input.tsx +79 -79
  244. package/src/password-input/styles.ts +25 -25
  245. package/src/password-input/types.ts +24 -24
  246. package/src/pin-input/index.ts +12 -12
  247. package/src/pin-input/pin-input.tsx +96 -96
  248. package/src/pin-input/styles.ts +16 -16
  249. package/src/pin-input/types.ts +26 -26
  250. package/src/popover/index.ts +2 -2
  251. package/src/popover/popover.tsx +98 -98
  252. package/src/popover/styles.ts +31 -31
  253. package/src/popover/types.ts +46 -46
  254. package/src/portal/index.ts +2 -2
  255. package/src/portal/portal.tsx +8 -8
  256. package/src/portal/styles.ts +2 -2
  257. package/src/portal/types.ts +3 -3
  258. package/src/pressable/index.ts +2 -2
  259. package/src/pressable/pressable.tsx +20 -20
  260. package/src/pressable/styles.ts +10 -10
  261. package/src/pressable/types.ts +6 -6
  262. package/src/progress/index.ts +9 -9
  263. package/src/progress/progress-filled-track.tsx +26 -26
  264. package/src/progress/progress.tsx +52 -52
  265. package/src/progress/styles.ts +34 -34
  266. package/src/progress/types.ts +28 -28
  267. package/src/radio/index.ts +14 -14
  268. package/src/radio/radio-group.tsx +61 -61
  269. package/src/radio/radio-icon.tsx +24 -24
  270. package/src/radio/radio-indicator.tsx +30 -30
  271. package/src/radio/radio-label.tsx +24 -24
  272. package/src/radio/radio.tsx +68 -68
  273. package/src/radio/styles.ts +69 -69
  274. package/src/radio/types.ts +51 -51
  275. package/src/rating/index.ts +7 -7
  276. package/src/rating/rating.tsx +93 -93
  277. package/src/rating/styles.ts +13 -13
  278. package/src/rating/types.ts +29 -29
  279. package/src/search-input/index.ts +16 -16
  280. package/src/search-input/search-input.tsx +119 -119
  281. package/src/search-input/styles.ts +28 -28
  282. package/src/search-input/types.ts +31 -31
  283. package/src/segmented-control/index.ts +2 -2
  284. package/src/segmented-control/segmented-control.tsx +34 -34
  285. package/src/segmented-control/styles.ts +22 -22
  286. package/src/segmented-control/types.ts +22 -22
  287. package/src/select/index.ts +28 -28
  288. package/src/select/select-backdrop.tsx +25 -25
  289. package/src/select/select-content.tsx +49 -49
  290. package/src/select/select-drag-indicator.tsx +19 -19
  291. package/src/select/select-icon.tsx +25 -25
  292. package/src/select/select-input.tsx +32 -32
  293. package/src/select/select-item-text.tsx +30 -30
  294. package/src/select/select-item.tsx +72 -72
  295. package/src/select/select-portal.tsx +22 -22
  296. package/src/select/select-scroll-view.tsx +22 -22
  297. package/src/select/select-trigger.tsx +64 -64
  298. package/src/select/select.tsx +101 -101
  299. package/src/select/styles.ts +114 -114
  300. package/src/select/types.ts +92 -92
  301. package/src/skeleton/index.ts +2 -2
  302. package/src/skeleton/skeleton.tsx +29 -29
  303. package/src/skeleton/styles.ts +14 -14
  304. package/src/skeleton/types.ts +12 -12
  305. package/src/slider/index.ts +12 -12
  306. package/src/slider/slider-filled-track.tsx +31 -31
  307. package/src/slider/slider-thumb.tsx +52 -52
  308. package/src/slider/slider-track.tsx +154 -154
  309. package/src/slider/slider.tsx +193 -193
  310. package/src/slider/styles.ts +71 -71
  311. package/src/slider/types.ts +47 -47
  312. package/src/snackbar/index.ts +2 -2
  313. package/src/snackbar/snackbar.tsx +39 -39
  314. package/src/snackbar/styles.ts +29 -29
  315. package/src/snackbar/types.ts +21 -21
  316. package/src/spinner/index.ts +2 -2
  317. package/src/spinner/spinner.tsx +29 -29
  318. package/src/spinner/styles.ts +15 -15
  319. package/src/spinner/types.ts +10 -10
  320. package/src/stack/index.ts +2 -2
  321. package/src/stack/stack.tsx +49 -49
  322. package/src/stack/styles.ts +25 -25
  323. package/src/stack/types.ts +15 -15
  324. package/src/stat/index.ts +2 -2
  325. package/src/stat/stat.tsx +48 -48
  326. package/src/stat/styles.ts +34 -34
  327. package/src/stat/types.ts +24 -24
  328. package/src/stepper/index.ts +2 -2
  329. package/src/stepper/stepper.tsx +95 -95
  330. package/src/stepper/styles.ts +49 -49
  331. package/src/stepper/types.ts +20 -20
  332. package/src/switch/index.ts +2 -2
  333. package/src/switch/styles.ts +24 -24
  334. package/src/switch/switch.tsx +67 -67
  335. package/src/switch/types.ts +23 -23
  336. package/src/table/index.ts +2 -2
  337. package/src/table/styles.ts +12 -12
  338. package/src/table/table.tsx +52 -52
  339. package/src/table/types.ts +10 -10
  340. package/src/tabs/index.ts +18 -18
  341. package/src/tabs/styles.ts +113 -113
  342. package/src/tabs/tab-list.tsx +29 -29
  343. package/src/tabs/tab-panel.tsx +29 -29
  344. package/src/tabs/tab-panels.tsx +21 -21
  345. package/src/tabs/tab-text.tsx +26 -26
  346. package/src/tabs/tab.tsx +56 -56
  347. package/src/tabs/tabs.tsx +71 -71
  348. package/src/tabs/types.ts +53 -53
  349. package/src/tag/index.ts +14 -14
  350. package/src/tag/styles.ts +115 -115
  351. package/src/tag/tag-close-button.tsx +26 -26
  352. package/src/tag/tag-icon.tsx +20 -20
  353. package/src/tag/tag-text.tsx +22 -22
  354. package/src/tag/tag.tsx +40 -40
  355. package/src/tag/types.ts +33 -33
  356. package/src/tags-input/index.ts +18 -18
  357. package/src/tags-input/styles.ts +29 -29
  358. package/src/tags-input/tags-input.tsx +149 -149
  359. package/src/tags-input/types.ts +37 -37
  360. package/src/text/index.ts +2 -2
  361. package/src/text/styles.ts +54 -54
  362. package/src/text/text.tsx +51 -51
  363. package/src/text/types.ts +36 -36
  364. package/src/textarea/index.ts +2 -2
  365. package/src/textarea/styles.ts +37 -37
  366. package/src/textarea/textarea.tsx +68 -68
  367. package/src/textarea/types.ts +14 -14
  368. package/src/timeline/index.ts +2 -2
  369. package/src/timeline/styles.ts +57 -57
  370. package/src/timeline/timeline.tsx +52 -52
  371. package/src/timeline/types.ts +30 -30
  372. package/src/toast/index.ts +17 -17
  373. package/src/toast/styles.ts +118 -118
  374. package/src/toast/toast-description.tsx +22 -22
  375. package/src/toast/toast-provider.tsx +136 -136
  376. package/src/toast/toast-title.tsx +22 -22
  377. package/src/toast/toast.tsx +43 -43
  378. package/src/toast/types.ts +50 -50
  379. package/src/toast/use-toast.ts +7 -7
  380. package/src/toggle/index.ts +2 -2
  381. package/src/toggle/styles.ts +30 -30
  382. package/src/toggle/toggle.tsx +25 -25
  383. package/src/toggle/types.ts +15 -15
  384. package/src/toggle-group/index.ts +2 -2
  385. package/src/toggle-group/styles.ts +35 -35
  386. package/src/toggle-group/toggle-group.tsx +60 -60
  387. package/src/toggle-group/types.ts +29 -29
  388. package/src/tooltip/index.ts +11 -11
  389. package/src/tooltip/styles.ts +9 -9
  390. package/src/tooltip/tooltip-content.tsx +19 -19
  391. package/src/tooltip/tooltip-text.tsx +19 -19
  392. package/src/tooltip/tooltip.tsx +116 -116
  393. package/src/tooltip/types.ts +35 -35
  394. package/src/utils/brand.ts +5 -5
  395. package/src/utils/create-context.ts +17 -17
  396. package/src/utils/index.ts +8 -8
  397. package/src/utils/types.ts +20 -20
  398. package/src/visually-hidden/index.ts +2 -2
  399. package/src/visually-hidden/styles.ts +6 -6
  400. package/src/visually-hidden/types.ts +6 -6
  401. package/src/visually-hidden/visually-hidden.tsx +22 -22
  402. package/tailwind-preset.js +203 -203
@@ -1,6 +1,6 @@
1
- import type { View } from 'react-native';
2
-
3
- export interface BlockquoteProps
4
- extends React.ComponentPropsWithoutRef<typeof View> {
5
- className?: string;
6
- }
1
+ import type { View } from 'react-native';
2
+
3
+ export interface BlockquoteProps
4
+ extends React.ComponentPropsWithoutRef<typeof View> {
5
+ className?: string;
6
+ }
package/src/box/box.tsx CHANGED
@@ -1,19 +1,19 @@
1
- import React from 'react';
2
- import { View } from 'react-native';
3
- import type { BoxProps } from './types';
4
- import { boxStyle } from './styles';
5
-
6
- export const Box = React.forwardRef<
7
- React.ElementRef<typeof View>,
8
- BoxProps
9
- >(({ className, ...props }, ref) => {
10
- return (
11
- <View
12
- ref={ref}
13
- className={boxStyle({ class: className })}
14
- {...props}
15
- />
16
- );
17
- });
18
-
19
- Box.displayName = 'Box';
1
+ import React from 'react';
2
+ import { View } from 'react-native';
3
+ import type { BoxProps } from './types';
4
+ import { boxStyle } from './styles';
5
+
6
+ export const Box = React.forwardRef<
7
+ React.ElementRef<typeof View>,
8
+ BoxProps
9
+ >(({ className, ...props }, ref) => {
10
+ return (
11
+ <View
12
+ ref={ref}
13
+ className={boxStyle({ class: className })}
14
+ {...props}
15
+ />
16
+ );
17
+ });
18
+
19
+ Box.displayName = 'Box';
package/src/box/index.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { Box } from './box';
2
- export type { BoxProps } from './types';
1
+ export { Box } from './box';
2
+ export type { BoxProps } from './types';
package/src/box/styles.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { tv } from 'tailwind-variants';
2
-
3
- export const boxStyle = tv({
4
- base: '',
5
- variants: {},
6
- });
1
+ import { tv } from 'tailwind-variants';
2
+
3
+ export const boxStyle = tv({
4
+ base: '',
5
+ variants: {},
6
+ });
package/src/box/types.ts CHANGED
@@ -1,6 +1,6 @@
1
- import type { View } from 'react-native';
2
-
3
- export interface BoxProps
4
- extends React.ComponentPropsWithoutRef<typeof View> {
5
- className?: string;
6
- }
1
+ import type { View } from 'react-native';
2
+
3
+ export interface BoxProps
4
+ extends React.ComponentPropsWithoutRef<typeof View> {
5
+ className?: string;
6
+ }
@@ -1,20 +1,20 @@
1
- import React from 'react';
2
- import { View } from 'react-native';
3
- import type { BreadcrumbItemProps } from './types';
4
- import { breadcrumbItemStyle } from './styles';
5
-
6
- export const BreadcrumbItem = React.forwardRef<
7
- React.ElementRef<typeof View>,
8
- BreadcrumbItemProps
9
- >(({ className, isCurrent, ...props }, ref) => {
10
- return (
11
- <View
12
- ref={ref}
13
- aria-current={isCurrent ? 'page' : undefined}
14
- className={breadcrumbItemStyle({ class: className })}
15
- {...props}
16
- />
17
- );
18
- });
19
-
20
- BreadcrumbItem.displayName = 'BreadcrumbItem';
1
+ import React from 'react';
2
+ import { View } from 'react-native';
3
+ import type { BreadcrumbItemProps } from './types';
4
+ import { breadcrumbItemStyle } from './styles';
5
+
6
+ export const BreadcrumbItem = React.forwardRef<
7
+ React.ElementRef<typeof View>,
8
+ BreadcrumbItemProps
9
+ >(({ className, isCurrent, ...props }, ref) => {
10
+ return (
11
+ <View
12
+ ref={ref}
13
+ aria-current={isCurrent ? 'page' : undefined}
14
+ className={breadcrumbItemStyle({ class: className })}
15
+ {...props}
16
+ />
17
+ );
18
+ });
19
+
20
+ BreadcrumbItem.displayName = 'BreadcrumbItem';
@@ -1,20 +1,20 @@
1
- import React from 'react';
2
- import { Pressable } from 'react-native';
3
- import type { BreadcrumbLinkProps } from './types';
4
- import { breadcrumbLinkStyle } from './styles';
5
-
6
- export const BreadcrumbLink = React.forwardRef<
7
- React.ElementRef<typeof Pressable>,
8
- BreadcrumbLinkProps
9
- >(({ className, ...props }, ref) => {
10
- return (
11
- <Pressable
12
- ref={ref}
13
- role="link"
14
- className={breadcrumbLinkStyle({ class: className })}
15
- {...props}
16
- />
17
- );
18
- });
19
-
20
- BreadcrumbLink.displayName = 'BreadcrumbLink';
1
+ import React from 'react';
2
+ import { Pressable } from 'react-native';
3
+ import type { BreadcrumbLinkProps } from './types';
4
+ import { breadcrumbLinkStyle } from './styles';
5
+
6
+ export const BreadcrumbLink = React.forwardRef<
7
+ React.ElementRef<typeof Pressable>,
8
+ BreadcrumbLinkProps
9
+ >(({ className, ...props }, ref) => {
10
+ return (
11
+ <Pressable
12
+ ref={ref}
13
+ role="link"
14
+ className={breadcrumbLinkStyle({ class: className })}
15
+ {...props}
16
+ />
17
+ );
18
+ });
19
+
20
+ BreadcrumbLink.displayName = 'BreadcrumbLink';
@@ -1,19 +1,19 @@
1
- import React from 'react';
2
- import { Text } from 'react-native';
3
- import type { BreadcrumbTextProps } from './types';
4
- import { breadcrumbTextStyle } from './styles';
5
-
6
- export const BreadcrumbText = React.forwardRef<
7
- React.ElementRef<typeof Text>,
8
- BreadcrumbTextProps
9
- >(({ className, ...props }, ref) => {
10
- return (
11
- <Text
12
- ref={ref}
13
- className={breadcrumbTextStyle({ class: className })}
14
- {...props}
15
- />
16
- );
17
- });
18
-
19
- BreadcrumbText.displayName = 'BreadcrumbText';
1
+ import React from 'react';
2
+ import { Text } from 'react-native';
3
+ import type { BreadcrumbTextProps } from './types';
4
+ import { breadcrumbTextStyle } from './styles';
5
+
6
+ export const BreadcrumbText = React.forwardRef<
7
+ React.ElementRef<typeof Text>,
8
+ BreadcrumbTextProps
9
+ >(({ className, ...props }, ref) => {
10
+ return (
11
+ <Text
12
+ ref={ref}
13
+ className={breadcrumbTextStyle({ class: className })}
14
+ {...props}
15
+ />
16
+ );
17
+ });
18
+
19
+ BreadcrumbText.displayName = 'BreadcrumbText';
@@ -1,43 +1,43 @@
1
- import React from 'react';
2
- import { View, Text } from 'react-native';
3
- import { createComponentContext } from '../utils/create-context';
4
- import type { BreadcrumbProps, BreadcrumbContextValue } from './types';
5
- import { breadcrumbStyle, breadcrumbSeparatorStyle } from './styles';
6
-
7
- export const [BreadcrumbProvider, useBreadcrumbContext] =
8
- createComponentContext<BreadcrumbContextValue>('Breadcrumb');
9
-
10
- export const Breadcrumb = React.forwardRef<
11
- React.ElementRef<typeof View>,
12
- BreadcrumbProps
13
- >(({ className, separator = '/', children, ...props }, ref) => {
14
- const childArray = React.Children.toArray(children);
15
-
16
- return (
17
- <BreadcrumbProvider value={{ separator }}>
18
- <View
19
- ref={ref}
20
- role="navigation"
21
- aria-label="Breadcrumb"
22
- className={breadcrumbStyle({ class: className })}
23
- {...props}
24
- >
25
- {childArray.map((child, index) => (
26
- <React.Fragment key={index}>
27
- {child}
28
- {index < childArray.length - 1 &&
29
- (typeof separator === 'string' ? (
30
- <Text className={breadcrumbSeparatorStyle({})}>
31
- {separator}
32
- </Text>
33
- ) : (
34
- separator
35
- ))}
36
- </React.Fragment>
37
- ))}
38
- </View>
39
- </BreadcrumbProvider>
40
- );
41
- });
42
-
43
- Breadcrumb.displayName = 'Breadcrumb';
1
+ import React from 'react';
2
+ import { View, Text } from 'react-native';
3
+ import { createComponentContext } from '../utils/create-context';
4
+ import type { BreadcrumbProps, BreadcrumbContextValue } from './types';
5
+ import { breadcrumbStyle, breadcrumbSeparatorStyle } from './styles';
6
+
7
+ export const [BreadcrumbProvider, useBreadcrumbContext] =
8
+ createComponentContext<BreadcrumbContextValue>('Breadcrumb');
9
+
10
+ export const Breadcrumb = React.forwardRef<
11
+ React.ElementRef<typeof View>,
12
+ BreadcrumbProps
13
+ >(({ className, separator = '/', children, ...props }, ref) => {
14
+ const childArray = React.Children.toArray(children);
15
+
16
+ return (
17
+ <BreadcrumbProvider value={{ separator }}>
18
+ <View
19
+ ref={ref}
20
+ role="navigation"
21
+ aria-label="Breadcrumb"
22
+ className={breadcrumbStyle({ class: className })}
23
+ {...props}
24
+ >
25
+ {childArray.map((child, index) => (
26
+ <React.Fragment key={index}>
27
+ {child}
28
+ {index < childArray.length - 1 &&
29
+ (typeof separator === 'string' ? (
30
+ <Text className={breadcrumbSeparatorStyle({})}>
31
+ {separator}
32
+ </Text>
33
+ ) : (
34
+ separator
35
+ ))}
36
+ </React.Fragment>
37
+ ))}
38
+ </View>
39
+ </BreadcrumbProvider>
40
+ );
41
+ });
42
+
43
+ Breadcrumb.displayName = 'Breadcrumb';
@@ -1,12 +1,12 @@
1
- export { Breadcrumb } from './breadcrumb';
2
- export { BreadcrumbItem } from './breadcrumb-item';
3
- export { BreadcrumbLink } from './breadcrumb-link';
4
- export { BreadcrumbText } from './breadcrumb-text';
5
-
6
- export type {
7
- BreadcrumbProps,
8
- BreadcrumbItemProps,
9
- BreadcrumbLinkProps,
10
- BreadcrumbTextProps,
11
- BreadcrumbSeparatorProps,
12
- } from './types';
1
+ export { Breadcrumb } from './breadcrumb';
2
+ export { BreadcrumbItem } from './breadcrumb-item';
3
+ export { BreadcrumbLink } from './breadcrumb-link';
4
+ export { BreadcrumbText } from './breadcrumb-text';
5
+
6
+ export type {
7
+ BreadcrumbProps,
8
+ BreadcrumbItemProps,
9
+ BreadcrumbLinkProps,
10
+ BreadcrumbTextProps,
11
+ BreadcrumbSeparatorProps,
12
+ } from './types';
@@ -1,36 +1,36 @@
1
- import { tv } from 'tailwind-variants';
2
-
3
- export const breadcrumbStyle = tv({
4
- base: 'flex-row items-center flex-wrap',
5
- });
6
-
7
- export const breadcrumbItemStyle = tv({
8
- base: 'flex-row items-center',
9
- });
10
-
11
- export const breadcrumbLinkStyle = tv({
12
- base: 'active:opacity-70',
13
- variants: {
14
- isCurrent: {
15
- true: '',
16
- false: '',
17
- },
18
- },
19
- });
20
-
21
- export const breadcrumbTextStyle = tv({
22
- base: 'text-sm',
23
- variants: {
24
- isCurrent: {
25
- true: 'text-typography-900 font-semibold',
26
- false: 'text-primary-600',
27
- },
28
- },
29
- defaultVariants: {
30
- isCurrent: false,
31
- },
32
- });
33
-
34
- export const breadcrumbSeparatorStyle = tv({
35
- base: 'text-typography-400 text-sm mx-2',
36
- });
1
+ import { tv } from 'tailwind-variants';
2
+
3
+ export const breadcrumbStyle = tv({
4
+ base: 'flex-row items-center flex-wrap',
5
+ });
6
+
7
+ export const breadcrumbItemStyle = tv({
8
+ base: 'flex-row items-center',
9
+ });
10
+
11
+ export const breadcrumbLinkStyle = tv({
12
+ base: 'active:opacity-70',
13
+ variants: {
14
+ isCurrent: {
15
+ true: '',
16
+ false: '',
17
+ },
18
+ },
19
+ });
20
+
21
+ export const breadcrumbTextStyle = tv({
22
+ base: 'text-sm',
23
+ variants: {
24
+ isCurrent: {
25
+ true: 'text-typography-900 font-semibold',
26
+ false: 'text-primary-600',
27
+ },
28
+ },
29
+ defaultVariants: {
30
+ isCurrent: false,
31
+ },
32
+ });
33
+
34
+ export const breadcrumbSeparatorStyle = tv({
35
+ base: 'text-typography-400 text-sm mx-2',
36
+ });
@@ -1,33 +1,33 @@
1
- import type { View, Text as RNText, Pressable } from 'react-native';
2
-
3
- export interface BreadcrumbProps
4
- extends React.ComponentPropsWithoutRef<typeof View> {
5
- className?: string;
6
- separator?: string | React.ReactNode;
7
- }
8
-
9
- export interface BreadcrumbItemProps
10
- extends React.ComponentPropsWithoutRef<typeof View> {
11
- className?: string;
12
- isCurrent?: boolean;
13
- }
14
-
15
- export interface BreadcrumbLinkProps
16
- extends React.ComponentPropsWithoutRef<typeof Pressable> {
17
- className?: string;
18
- href?: string;
19
- }
20
-
21
- export interface BreadcrumbTextProps
22
- extends React.ComponentPropsWithoutRef<typeof RNText> {
23
- className?: string;
24
- }
25
-
26
- export interface BreadcrumbSeparatorProps
27
- extends React.ComponentPropsWithoutRef<typeof RNText> {
28
- className?: string;
29
- }
30
-
31
- export interface BreadcrumbContextValue {
32
- separator: string | React.ReactNode;
33
- }
1
+ import type { View, Text as RNText, Pressable } from 'react-native';
2
+
3
+ export interface BreadcrumbProps
4
+ extends React.ComponentPropsWithoutRef<typeof View> {
5
+ className?: string;
6
+ separator?: string | React.ReactNode;
7
+ }
8
+
9
+ export interface BreadcrumbItemProps
10
+ extends React.ComponentPropsWithoutRef<typeof View> {
11
+ className?: string;
12
+ isCurrent?: boolean;
13
+ }
14
+
15
+ export interface BreadcrumbLinkProps
16
+ extends React.ComponentPropsWithoutRef<typeof Pressable> {
17
+ className?: string;
18
+ href?: string;
19
+ }
20
+
21
+ export interface BreadcrumbTextProps
22
+ extends React.ComponentPropsWithoutRef<typeof RNText> {
23
+ className?: string;
24
+ }
25
+
26
+ export interface BreadcrumbSeparatorProps
27
+ extends React.ComponentPropsWithoutRef<typeof RNText> {
28
+ className?: string;
29
+ }
30
+
31
+ export interface BreadcrumbContextValue {
32
+ separator: string | React.ReactNode;
33
+ }
@@ -1,35 +1,35 @@
1
- import React from 'react';
2
- import { View } from 'react-native';
3
- import type { ButtonGroupProps } from './types';
4
- import { buttonGroupStyle } from './styles';
5
-
6
- export const ButtonGroup = React.forwardRef<
7
- React.ElementRef<typeof View>,
8
- ButtonGroupProps
9
- >(
10
- (
11
- {
12
- className,
13
- space = 'md',
14
- isAttached = false,
15
- flexDirection = 'column',
16
- ...props
17
- },
18
- ref,
19
- ) => {
20
- return (
21
- <View
22
- ref={ref}
23
- className={buttonGroupStyle({
24
- class: className,
25
- space,
26
- isAttached,
27
- flexDirection,
28
- })}
29
- {...props}
30
- />
31
- );
32
- },
33
- );
34
-
35
- ButtonGroup.displayName = 'ButtonGroup';
1
+ import React from 'react';
2
+ import { View } from 'react-native';
3
+ import type { ButtonGroupProps } from './types';
4
+ import { buttonGroupStyle } from './styles';
5
+
6
+ export const ButtonGroup = React.forwardRef<
7
+ React.ElementRef<typeof View>,
8
+ ButtonGroupProps
9
+ >(
10
+ (
11
+ {
12
+ className,
13
+ space = 'md',
14
+ isAttached = false,
15
+ flexDirection = 'column',
16
+ ...props
17
+ },
18
+ ref,
19
+ ) => {
20
+ return (
21
+ <View
22
+ ref={ref}
23
+ className={buttonGroupStyle({
24
+ class: className,
25
+ space,
26
+ isAttached,
27
+ flexDirection,
28
+ })}
29
+ {...props}
30
+ />
31
+ );
32
+ },
33
+ );
34
+
35
+ ButtonGroup.displayName = 'ButtonGroup';
@@ -1,37 +1,37 @@
1
- import React from 'react';
2
- import { useButtonContext } from './button';
3
- import type { ButtonIconProps } from './types';
4
- import { buttonIconStyle } from './styles';
5
-
6
- export const ButtonIcon = React.forwardRef<any, ButtonIconProps>(
7
- ({ className, as: AsComp, size, height, width, ...props }, ref) => {
8
- const parent = useButtonContext();
9
-
10
- const sizeClass =
11
- typeof size === 'number' ? undefined : (size ?? parent.size);
12
-
13
- const computedClassName = buttonIconStyle({
14
- size: sizeClass,
15
- variant: parent.variant,
16
- action: parent.action,
17
- class: className,
18
- });
19
-
20
- if (AsComp) {
21
- return (
22
- <AsComp
23
- ref={ref}
24
- className={computedClassName}
25
- size={typeof size === 'number' ? size : undefined}
26
- height={height}
27
- width={width}
28
- {...props}
29
- />
30
- );
31
- }
32
-
33
- return null;
34
- },
35
- );
36
-
37
- ButtonIcon.displayName = 'ButtonIcon';
1
+ import React from 'react';
2
+ import { useButtonContext } from './button';
3
+ import type { ButtonIconProps } from './types';
4
+ import { buttonIconStyle } from './styles';
5
+
6
+ export const ButtonIcon = React.forwardRef<any, ButtonIconProps>(
7
+ ({ className, as: AsComp, size, height, width, ...props }, ref) => {
8
+ const parent = useButtonContext();
9
+
10
+ const sizeClass =
11
+ typeof size === 'number' ? undefined : (size ?? parent.size);
12
+
13
+ const computedClassName = buttonIconStyle({
14
+ size: sizeClass,
15
+ variant: parent.variant,
16
+ action: parent.action,
17
+ class: className,
18
+ });
19
+
20
+ if (AsComp) {
21
+ return (
22
+ <AsComp
23
+ ref={ref}
24
+ className={computedClassName}
25
+ size={typeof size === 'number' ? size : undefined}
26
+ height={height}
27
+ width={width}
28
+ {...props}
29
+ />
30
+ );
31
+ }
32
+
33
+ return null;
34
+ },
35
+ );
36
+
37
+ ButtonIcon.displayName = 'ButtonIcon';
@@ -1,12 +1,12 @@
1
- import React from 'react';
2
- import { ActivityIndicator } from 'react-native';
3
- import type { ButtonSpinnerProps } from './types';
4
-
5
- export const ButtonSpinner = React.forwardRef<
6
- React.ElementRef<typeof ActivityIndicator>,
7
- ButtonSpinnerProps
8
- >((props, ref) => {
9
- return <ActivityIndicator ref={ref} aria-label="loading" {...props} />;
10
- });
11
-
12
- ButtonSpinner.displayName = 'ButtonSpinner';
1
+ import React from 'react';
2
+ import { ActivityIndicator } from 'react-native';
3
+ import type { ButtonSpinnerProps } from './types';
4
+
5
+ export const ButtonSpinner = React.forwardRef<
6
+ React.ElementRef<typeof ActivityIndicator>,
7
+ ButtonSpinnerProps
8
+ >((props, ref) => {
9
+ return <ActivityIndicator ref={ref} aria-label="loading" {...props} />;
10
+ });
11
+
12
+ ButtonSpinner.displayName = 'ButtonSpinner';