@wireservers-ui/react-natives 1.0.0-rc.3 → 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 +28 -49
  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,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
+ }