@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,112 +1,112 @@
1
- import { tv } from 'tailwind-variants';
2
-
3
- export const alertStyle = tv({
4
- base: 'flex-row items-start rounded-lg px-4 py-3 gap-3',
5
- variants: {
6
- status: {
7
- info: '',
8
- success: '',
9
- warning: '',
10
- error: '',
11
- },
12
- variant: {
13
- solid: '',
14
- subtle: '',
15
- outline: 'bg-transparent border',
16
- },
17
- },
18
- compoundVariants: [
19
- // solid
20
- { status: 'info', variant: 'solid', class: 'bg-info-500' },
21
- { status: 'success', variant: 'solid', class: 'bg-success-500' },
22
- { status: 'warning', variant: 'solid', class: 'bg-warning-500' },
23
- { status: 'error', variant: 'solid', class: 'bg-error-500' },
24
- // subtle
25
- { status: 'info', variant: 'subtle', class: 'bg-info-50' },
26
- { status: 'success', variant: 'subtle', class: 'bg-success-50' },
27
- { status: 'warning', variant: 'subtle', class: 'bg-warning-50' },
28
- { status: 'error', variant: 'subtle', class: 'bg-error-50' },
29
- // outline
30
- { status: 'info', variant: 'outline', class: 'border-info-500' },
31
- { status: 'success', variant: 'outline', class: 'border-success-500' },
32
- { status: 'warning', variant: 'outline', class: 'border-warning-500' },
33
- { status: 'error', variant: 'outline', class: 'border-error-500' },
34
- ],
35
- defaultVariants: {
36
- status: 'info',
37
- variant: 'subtle',
38
- },
39
- });
40
-
41
- export const alertIconStyle = tv({
42
- base: 'h-5 w-5 mt-0.5',
43
- variants: {
44
- status: {
45
- info: '',
46
- success: '',
47
- warning: '',
48
- error: '',
49
- },
50
- variant: {
51
- solid: 'text-typography-0',
52
- subtle: '',
53
- outline: '',
54
- },
55
- },
56
- compoundVariants: [
57
- { status: 'info', variant: 'subtle', class: 'text-info-600' },
58
- { status: 'success', variant: 'subtle', class: 'text-success-600' },
59
- { status: 'warning', variant: 'subtle', class: 'text-warning-600' },
60
- { status: 'error', variant: 'subtle', class: 'text-error-600' },
61
- { status: 'info', variant: 'outline', class: 'text-info-600' },
62
- { status: 'success', variant: 'outline', class: 'text-success-600' },
63
- { status: 'warning', variant: 'outline', class: 'text-warning-600' },
64
- { status: 'error', variant: 'outline', class: 'text-error-600' },
65
- ],
66
- defaultVariants: {
67
- status: 'info',
68
- variant: 'subtle',
69
- },
70
- });
71
-
72
- export const alertBodyStyle = tv({
73
- base: 'flex-1 gap-1',
74
- });
75
-
76
- export const alertTextStyle = tv({
77
- base: 'text-sm',
78
- variants: {
79
- status: {
80
- info: '',
81
- success: '',
82
- warning: '',
83
- error: '',
84
- },
85
- variant: {
86
- solid: 'text-typography-0',
87
- subtle: '',
88
- outline: '',
89
- },
90
- isBold: {
91
- true: 'font-semibold',
92
- },
93
- },
94
- compoundVariants: [
95
- { status: 'info', variant: 'subtle', class: 'text-info-900' },
96
- { status: 'success', variant: 'subtle', class: 'text-success-900' },
97
- { status: 'warning', variant: 'subtle', class: 'text-warning-900' },
98
- { status: 'error', variant: 'subtle', class: 'text-error-900' },
99
- { status: 'info', variant: 'outline', class: 'text-info-900' },
100
- { status: 'success', variant: 'outline', class: 'text-success-900' },
101
- { status: 'warning', variant: 'outline', class: 'text-warning-900' },
102
- { status: 'error', variant: 'outline', class: 'text-error-900' },
103
- ],
104
- defaultVariants: {
105
- status: 'info',
106
- variant: 'subtle',
107
- },
108
- });
109
-
110
- export const alertCloseButtonStyle = tv({
111
- base: 'p-1 rounded active:opacity-70',
112
- });
1
+ import { tv } from 'tailwind-variants';
2
+
3
+ export const alertStyle = tv({
4
+ base: 'flex-row items-start rounded-lg px-4 py-3 gap-3',
5
+ variants: {
6
+ status: {
7
+ info: '',
8
+ success: '',
9
+ warning: '',
10
+ error: '',
11
+ },
12
+ variant: {
13
+ solid: '',
14
+ subtle: '',
15
+ outline: 'bg-transparent border',
16
+ },
17
+ },
18
+ compoundVariants: [
19
+ // solid
20
+ { status: 'info', variant: 'solid', class: 'bg-info-500' },
21
+ { status: 'success', variant: 'solid', class: 'bg-success-500' },
22
+ { status: 'warning', variant: 'solid', class: 'bg-warning-500' },
23
+ { status: 'error', variant: 'solid', class: 'bg-error-500' },
24
+ // subtle
25
+ { status: 'info', variant: 'subtle', class: 'bg-info-50' },
26
+ { status: 'success', variant: 'subtle', class: 'bg-success-50' },
27
+ { status: 'warning', variant: 'subtle', class: 'bg-warning-50' },
28
+ { status: 'error', variant: 'subtle', class: 'bg-error-50' },
29
+ // outline
30
+ { status: 'info', variant: 'outline', class: 'border-info-500' },
31
+ { status: 'success', variant: 'outline', class: 'border-success-500' },
32
+ { status: 'warning', variant: 'outline', class: 'border-warning-500' },
33
+ { status: 'error', variant: 'outline', class: 'border-error-500' },
34
+ ],
35
+ defaultVariants: {
36
+ status: 'info',
37
+ variant: 'subtle',
38
+ },
39
+ });
40
+
41
+ export const alertIconStyle = tv({
42
+ base: 'h-5 w-5 mt-0.5',
43
+ variants: {
44
+ status: {
45
+ info: '',
46
+ success: '',
47
+ warning: '',
48
+ error: '',
49
+ },
50
+ variant: {
51
+ solid: 'text-typography-0',
52
+ subtle: '',
53
+ outline: '',
54
+ },
55
+ },
56
+ compoundVariants: [
57
+ { status: 'info', variant: 'subtle', class: 'text-info-600' },
58
+ { status: 'success', variant: 'subtle', class: 'text-success-600' },
59
+ { status: 'warning', variant: 'subtle', class: 'text-warning-600' },
60
+ { status: 'error', variant: 'subtle', class: 'text-error-600' },
61
+ { status: 'info', variant: 'outline', class: 'text-info-600' },
62
+ { status: 'success', variant: 'outline', class: 'text-success-600' },
63
+ { status: 'warning', variant: 'outline', class: 'text-warning-600' },
64
+ { status: 'error', variant: 'outline', class: 'text-error-600' },
65
+ ],
66
+ defaultVariants: {
67
+ status: 'info',
68
+ variant: 'subtle',
69
+ },
70
+ });
71
+
72
+ export const alertBodyStyle = tv({
73
+ base: 'flex-1 gap-1',
74
+ });
75
+
76
+ export const alertTextStyle = tv({
77
+ base: 'text-sm',
78
+ variants: {
79
+ status: {
80
+ info: '',
81
+ success: '',
82
+ warning: '',
83
+ error: '',
84
+ },
85
+ variant: {
86
+ solid: 'text-typography-0',
87
+ subtle: '',
88
+ outline: '',
89
+ },
90
+ isBold: {
91
+ true: 'font-semibold',
92
+ },
93
+ },
94
+ compoundVariants: [
95
+ { status: 'info', variant: 'subtle', class: 'text-info-900' },
96
+ { status: 'success', variant: 'subtle', class: 'text-success-900' },
97
+ { status: 'warning', variant: 'subtle', class: 'text-warning-900' },
98
+ { status: 'error', variant: 'subtle', class: 'text-error-900' },
99
+ { status: 'info', variant: 'outline', class: 'text-info-900' },
100
+ { status: 'success', variant: 'outline', class: 'text-success-900' },
101
+ { status: 'warning', variant: 'outline', class: 'text-warning-900' },
102
+ { status: 'error', variant: 'outline', class: 'text-error-900' },
103
+ ],
104
+ defaultVariants: {
105
+ status: 'info',
106
+ variant: 'subtle',
107
+ },
108
+ });
109
+
110
+ export const alertCloseButtonStyle = tv({
111
+ base: 'p-1 rounded active:opacity-70',
112
+ });
@@ -1,36 +1,36 @@
1
- import type { View, Text as RNText, Pressable } from 'react-native';
2
-
3
- export type AlertStatus = 'info' | 'success' | 'warning' | 'error';
4
- export type AlertVariant = 'solid' | 'subtle' | 'outline';
5
-
6
- export interface AlertContextValue {
7
- status: AlertStatus;
8
- variant: AlertVariant;
9
- }
10
-
11
- export interface AlertProps
12
- extends React.ComponentPropsWithoutRef<typeof View> {
13
- className?: string;
14
- status?: AlertStatus;
15
- variant?: AlertVariant;
16
- }
17
-
18
- export interface AlertIconProps {
19
- as?: React.ElementType;
20
- className?: string;
21
- }
22
-
23
- export interface AlertBodyProps
24
- extends React.ComponentPropsWithoutRef<typeof View> {
25
- className?: string;
26
- }
27
-
28
- export interface AlertTextProps
29
- extends React.ComponentPropsWithoutRef<typeof RNText> {
30
- className?: string;
31
- }
32
-
33
- export interface AlertCloseButtonProps
34
- extends React.ComponentPropsWithoutRef<typeof Pressable> {
35
- className?: string;
36
- }
1
+ import type { View, Text as RNText, Pressable } from 'react-native';
2
+
3
+ export type AlertStatus = 'info' | 'success' | 'warning' | 'error';
4
+ export type AlertVariant = 'solid' | 'subtle' | 'outline';
5
+
6
+ export interface AlertContextValue {
7
+ status: AlertStatus;
8
+ variant: AlertVariant;
9
+ }
10
+
11
+ export interface AlertProps
12
+ extends React.ComponentPropsWithoutRef<typeof View> {
13
+ className?: string;
14
+ status?: AlertStatus;
15
+ variant?: AlertVariant;
16
+ }
17
+
18
+ export interface AlertIconProps {
19
+ as?: React.ElementType;
20
+ className?: string;
21
+ }
22
+
23
+ export interface AlertBodyProps
24
+ extends React.ComponentPropsWithoutRef<typeof View> {
25
+ className?: string;
26
+ }
27
+
28
+ export interface AlertTextProps
29
+ extends React.ComponentPropsWithoutRef<typeof RNText> {
30
+ className?: string;
31
+ }
32
+
33
+ export interface AlertCloseButtonProps
34
+ extends React.ComponentPropsWithoutRef<typeof Pressable> {
35
+ className?: string;
36
+ }
@@ -1,54 +1,54 @@
1
- import React from 'react';
2
- import { View, Pressable, Modal } from 'react-native';
3
- import { createComponentContext } from '../utils/create-context';
4
- import type { AlertDialogProps, AlertDialogBackdropProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogCloseButtonProps, AlertDialogContextValue } from './types';
5
- import { alertDialogContentStyle, alertDialogBackdropStyle, alertDialogHeaderStyle, alertDialogBodyStyle, alertDialogFooterStyle, alertDialogCloseButtonStyle } from './styles';
6
-
7
- export const [AlertDialogProvider, useAlertDialogContext] =
8
- createComponentContext<AlertDialogContextValue>('AlertDialog');
9
-
10
- export const AlertDialog: React.FC<AlertDialogProps> = ({ isOpen, onClose, size = 'md', children }) => {
11
- return (
12
- <AlertDialogProvider value={{ isOpen, onClose, size }}>
13
- <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
14
- <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
15
- {children}
16
- </View>
17
- </Modal>
18
- </AlertDialogProvider>
19
- );
20
- };
21
- AlertDialog.displayName = 'AlertDialog';
22
-
23
- export const AlertDialogBackdrop = React.forwardRef<React.ElementRef<typeof Pressable>, AlertDialogBackdropProps>(({ className, ...props }, ref) => {
24
- const { onClose } = useAlertDialogContext();
25
- return <Pressable ref={ref} onPress={onClose} className={alertDialogBackdropStyle({ class: className })} {...props} />;
26
- });
27
- AlertDialogBackdrop.displayName = 'AlertDialogBackdrop';
28
-
29
- export const AlertDialogContent = React.forwardRef<React.ElementRef<typeof View>, AlertDialogContentProps>(({ className, ...props }, ref) => {
30
- const { size } = useAlertDialogContext();
31
- return <View ref={ref} className={alertDialogContentStyle({ size, class: className })} {...props} />;
32
- });
33
- AlertDialogContent.displayName = 'AlertDialogContent';
34
-
35
- export const AlertDialogHeader = React.forwardRef<React.ElementRef<typeof View>, AlertDialogHeaderProps>(({ className, ...props }, ref) => {
36
- return <View ref={ref} className={alertDialogHeaderStyle({ class: className })} {...props} />;
37
- });
38
- AlertDialogHeader.displayName = 'AlertDialogHeader';
39
-
40
- export const AlertDialogBody = React.forwardRef<React.ElementRef<typeof View>, AlertDialogBodyProps>(({ className, ...props }, ref) => {
41
- return <View ref={ref} className={alertDialogBodyStyle({ class: className })} {...props} />;
42
- });
43
- AlertDialogBody.displayName = 'AlertDialogBody';
44
-
45
- export const AlertDialogFooter = React.forwardRef<React.ElementRef<typeof View>, AlertDialogFooterProps>(({ className, ...props }, ref) => {
46
- return <View ref={ref} className={alertDialogFooterStyle({ class: className })} {...props} />;
47
- });
48
- AlertDialogFooter.displayName = 'AlertDialogFooter';
49
-
50
- export const AlertDialogCloseButton = React.forwardRef<React.ElementRef<typeof Pressable>, AlertDialogCloseButtonProps>(({ className, ...props }, ref) => {
51
- const { onClose } = useAlertDialogContext();
52
- return <Pressable ref={ref} onPress={onClose} className={alertDialogCloseButtonStyle({ class: className })} accessibilityRole="button" accessibilityLabel="Close" {...props} />;
53
- });
54
- AlertDialogCloseButton.displayName = 'AlertDialogCloseButton';
1
+ import React from 'react';
2
+ import { View, Pressable, Modal } from 'react-native';
3
+ import { createComponentContext } from '../utils/create-context';
4
+ import type { AlertDialogProps, AlertDialogBackdropProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogCloseButtonProps, AlertDialogContextValue } from './types';
5
+ import { alertDialogContentStyle, alertDialogBackdropStyle, alertDialogHeaderStyle, alertDialogBodyStyle, alertDialogFooterStyle, alertDialogCloseButtonStyle } from './styles';
6
+
7
+ export const [AlertDialogProvider, useAlertDialogContext] =
8
+ createComponentContext<AlertDialogContextValue>('AlertDialog');
9
+
10
+ export const AlertDialog: React.FC<AlertDialogProps> = ({ isOpen, onClose, size = 'md', children }) => {
11
+ return (
12
+ <AlertDialogProvider value={{ isOpen, onClose, size }}>
13
+ <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
14
+ <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
15
+ {children}
16
+ </View>
17
+ </Modal>
18
+ </AlertDialogProvider>
19
+ );
20
+ };
21
+ AlertDialog.displayName = 'AlertDialog';
22
+
23
+ export const AlertDialogBackdrop = React.forwardRef<React.ElementRef<typeof Pressable>, AlertDialogBackdropProps>(({ className, ...props }, ref) => {
24
+ const { onClose } = useAlertDialogContext();
25
+ return <Pressable ref={ref} onPress={onClose} className={alertDialogBackdropStyle({ class: className })} {...props} />;
26
+ });
27
+ AlertDialogBackdrop.displayName = 'AlertDialogBackdrop';
28
+
29
+ export const AlertDialogContent = React.forwardRef<React.ElementRef<typeof View>, AlertDialogContentProps>(({ className, ...props }, ref) => {
30
+ const { size } = useAlertDialogContext();
31
+ return <View ref={ref} className={alertDialogContentStyle({ size, class: className })} {...props} />;
32
+ });
33
+ AlertDialogContent.displayName = 'AlertDialogContent';
34
+
35
+ export const AlertDialogHeader = React.forwardRef<React.ElementRef<typeof View>, AlertDialogHeaderProps>(({ className, ...props }, ref) => {
36
+ return <View ref={ref} className={alertDialogHeaderStyle({ class: className })} {...props} />;
37
+ });
38
+ AlertDialogHeader.displayName = 'AlertDialogHeader';
39
+
40
+ export const AlertDialogBody = React.forwardRef<React.ElementRef<typeof View>, AlertDialogBodyProps>(({ className, ...props }, ref) => {
41
+ return <View ref={ref} className={alertDialogBodyStyle({ class: className })} {...props} />;
42
+ });
43
+ AlertDialogBody.displayName = 'AlertDialogBody';
44
+
45
+ export const AlertDialogFooter = React.forwardRef<React.ElementRef<typeof View>, AlertDialogFooterProps>(({ className, ...props }, ref) => {
46
+ return <View ref={ref} className={alertDialogFooterStyle({ class: className })} {...props} />;
47
+ });
48
+ AlertDialogFooter.displayName = 'AlertDialogFooter';
49
+
50
+ export const AlertDialogCloseButton = React.forwardRef<React.ElementRef<typeof Pressable>, AlertDialogCloseButtonProps>(({ className, ...props }, ref) => {
51
+ const { onClose } = useAlertDialogContext();
52
+ return <Pressable ref={ref} onPress={onClose} className={alertDialogCloseButtonStyle({ class: className })} accessibilityRole="button" accessibilityLabel="Close" {...props} />;
53
+ });
54
+ AlertDialogCloseButton.displayName = 'AlertDialogCloseButton';
@@ -1,2 +1,2 @@
1
- export { AlertDialog, AlertDialogProvider, useAlertDialogContext, AlertDialogBackdrop, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogCloseButton } from './alert-dialog';
2
- export type { AlertDialogProps, AlertDialogBackdropProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogCloseButtonProps, AlertDialogSize, AlertDialogContextValue } from './types';
1
+ export { AlertDialog, AlertDialogProvider, useAlertDialogContext, AlertDialogBackdrop, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogCloseButton } from './alert-dialog';
2
+ export type { AlertDialogProps, AlertDialogBackdropProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogCloseButtonProps, AlertDialogSize, AlertDialogContextValue } from './types';
@@ -1,40 +1,40 @@
1
- import { tv } from 'tailwind-variants';
2
-
3
- export const alertDialogContentStyle = tv({
4
- base: 'bg-background-0 rounded-xl p-6 shadow-hard-2 w-full',
5
- variants: {
6
- size: {
7
- xs: 'max-w-[280px]',
8
- sm: 'max-w-[320px]',
9
- md: 'max-w-[400px]',
10
- lg: 'max-w-[520px]',
11
- full: 'max-w-full mx-4',
12
- },
13
- },
14
- defaultVariants: { size: 'md' },
15
- });
16
-
17
- export const alertDialogBackdropStyle = tv({
18
- base: 'absolute inset-0 bg-black/50',
19
- variants: {},
20
- });
21
-
22
- export const alertDialogHeaderStyle = tv({
23
- base: 'flex-row items-center justify-between mb-2',
24
- variants: {},
25
- });
26
-
27
- export const alertDialogBodyStyle = tv({
28
- base: 'mb-4',
29
- variants: {},
30
- });
31
-
32
- export const alertDialogFooterStyle = tv({
33
- base: 'flex-row justify-end gap-3',
34
- variants: {},
35
- });
36
-
37
- export const alertDialogCloseButtonStyle = tv({
38
- base: 'p-1 rounded',
39
- variants: {},
40
- });
1
+ import { tv } from 'tailwind-variants';
2
+
3
+ export const alertDialogContentStyle = tv({
4
+ base: 'bg-background-0 rounded-xl p-6 shadow-hard-2 w-full',
5
+ variants: {
6
+ size: {
7
+ xs: 'max-w-[280px]',
8
+ sm: 'max-w-[320px]',
9
+ md: 'max-w-[400px]',
10
+ lg: 'max-w-[520px]',
11
+ full: 'max-w-full mx-4',
12
+ },
13
+ },
14
+ defaultVariants: { size: 'md' },
15
+ });
16
+
17
+ export const alertDialogBackdropStyle = tv({
18
+ base: 'absolute inset-0 bg-black/50',
19
+ variants: {},
20
+ });
21
+
22
+ export const alertDialogHeaderStyle = tv({
23
+ base: 'flex-row items-center justify-between mb-2',
24
+ variants: {},
25
+ });
26
+
27
+ export const alertDialogBodyStyle = tv({
28
+ base: 'mb-4',
29
+ variants: {},
30
+ });
31
+
32
+ export const alertDialogFooterStyle = tv({
33
+ base: 'flex-row justify-end gap-3',
34
+ variants: {},
35
+ });
36
+
37
+ export const alertDialogCloseButtonStyle = tv({
38
+ base: 'p-1 rounded',
39
+ variants: {},
40
+ });
@@ -1,40 +1,40 @@
1
- import type { View, Pressable } from 'react-native';
2
-
3
- export type AlertDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'full';
4
-
5
- export interface AlertDialogContextValue {
6
- isOpen: boolean;
7
- onClose: () => void;
8
- size: AlertDialogSize;
9
- }
10
-
11
- export interface AlertDialogProps {
12
- isOpen: boolean;
13
- onClose: () => void;
14
- size?: AlertDialogSize;
15
- children: React.ReactNode;
16
- }
17
-
18
- export interface AlertDialogBackdropProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
19
- className?: string;
20
- }
21
-
22
- export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof View> {
23
- className?: string;
24
- }
25
-
26
- export interface AlertDialogHeaderProps extends React.ComponentPropsWithoutRef<typeof View> {
27
- className?: string;
28
- }
29
-
30
- export interface AlertDialogBodyProps extends React.ComponentPropsWithoutRef<typeof View> {
31
- className?: string;
32
- }
33
-
34
- export interface AlertDialogFooterProps extends React.ComponentPropsWithoutRef<typeof View> {
35
- className?: string;
36
- }
37
-
38
- export interface AlertDialogCloseButtonProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
39
- className?: string;
40
- }
1
+ import type { View, Pressable } from 'react-native';
2
+
3
+ export type AlertDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'full';
4
+
5
+ export interface AlertDialogContextValue {
6
+ isOpen: boolean;
7
+ onClose: () => void;
8
+ size: AlertDialogSize;
9
+ }
10
+
11
+ export interface AlertDialogProps {
12
+ isOpen: boolean;
13
+ onClose: () => void;
14
+ size?: AlertDialogSize;
15
+ children: React.ReactNode;
16
+ }
17
+
18
+ export interface AlertDialogBackdropProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
19
+ className?: string;
20
+ }
21
+
22
+ export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof View> {
23
+ className?: string;
24
+ }
25
+
26
+ export interface AlertDialogHeaderProps extends React.ComponentPropsWithoutRef<typeof View> {
27
+ className?: string;
28
+ }
29
+
30
+ export interface AlertDialogBodyProps extends React.ComponentPropsWithoutRef<typeof View> {
31
+ className?: string;
32
+ }
33
+
34
+ export interface AlertDialogFooterProps extends React.ComponentPropsWithoutRef<typeof View> {
35
+ className?: string;
36
+ }
37
+
38
+ export interface AlertDialogCloseButtonProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
39
+ className?: string;
40
+ }
@@ -1,20 +1,20 @@
1
- import React from 'react';
2
- import { View } from 'react-native';
3
- import type { AspectRatioProps } from './types';
4
- import { aspectRatioStyle } from './styles';
5
-
6
- export const AspectRatio = React.forwardRef<
7
- React.ElementRef<typeof View>,
8
- AspectRatioProps
9
- >(({ className, ratio = 1, style, ...props }, ref) => {
10
- return (
11
- <View
12
- ref={ref}
13
- className={aspectRatioStyle({ class: className })}
14
- style={[{ aspectRatio: ratio }, style]}
15
- {...props}
16
- />
17
- );
18
- });
19
-
20
- AspectRatio.displayName = 'AspectRatio';
1
+ import React from 'react';
2
+ import { View } from 'react-native';
3
+ import type { AspectRatioProps } from './types';
4
+ import { aspectRatioStyle } from './styles';
5
+
6
+ export const AspectRatio = React.forwardRef<
7
+ React.ElementRef<typeof View>,
8
+ AspectRatioProps
9
+ >(({ className, ratio = 1, style, ...props }, ref) => {
10
+ return (
11
+ <View
12
+ ref={ref}
13
+ className={aspectRatioStyle({ class: className })}
14
+ style={[{ aspectRatio: ratio }, style]}
15
+ {...props}
16
+ />
17
+ );
18
+ });
19
+
20
+ AspectRatio.displayName = 'AspectRatio';
@@ -1,2 +1,2 @@
1
- export { AspectRatio } from './aspect-ratio';
2
- export type { AspectRatioProps } from './types';
1
+ export { AspectRatio } from './aspect-ratio';
2
+ export type { AspectRatioProps } from './types';
@@ -1,6 +1,6 @@
1
- import { tv } from 'tailwind-variants';
2
-
3
- export const aspectRatioStyle = tv({
4
- base: 'relative overflow-hidden',
5
- variants: {},
6
- });
1
+ import { tv } from 'tailwind-variants';
2
+
3
+ export const aspectRatioStyle = tv({
4
+ base: 'relative overflow-hidden',
5
+ variants: {},
6
+ });
@@ -1,7 +1,7 @@
1
- import type { View } from 'react-native';
2
-
3
- export interface AspectRatioProps
4
- extends React.ComponentPropsWithoutRef<typeof View> {
5
- className?: string;
6
- ratio?: number;
7
- }
1
+ import type { View } from 'react-native';
2
+
3
+ export interface AspectRatioProps
4
+ extends React.ComponentPropsWithoutRef<typeof View> {
5
+ className?: string;
6
+ ratio?: number;
7
+ }