@korsolutions/ui 0.0.83 → 0.0.85

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 (390) hide show
  1. package/dist/module/components/alert/components/alert-description.js.map +1 -1
  2. package/dist/module/components/alert/components/alert-icon.js.map +1 -1
  3. package/dist/module/components/alert/components/alert-root.js +7 -3
  4. package/dist/module/components/alert/components/alert-root.js.map +1 -1
  5. package/dist/module/components/alert-dialog/async-alert-dialog.js.map +1 -1
  6. package/dist/module/components/alert-dialog/components/alert-dialog-root.js +7 -3
  7. package/dist/module/components/alert-dialog/components/alert-dialog-root.js.map +1 -1
  8. package/dist/module/components/avatar/components/avatar-image.js.map +1 -1
  9. package/dist/module/components/avatar/components/avatar-root.js +7 -3
  10. package/dist/module/components/avatar/components/avatar-root.js.map +1 -1
  11. package/dist/module/components/badge/badge.js +11 -4
  12. package/dist/module/components/badge/badge.js.map +1 -1
  13. package/dist/module/components/button/button.js +6 -2
  14. package/dist/module/components/button/button.js.map +1 -1
  15. package/dist/module/components/calendar/calendar/calendar-root.js +6 -2
  16. package/dist/module/components/calendar/calendar/calendar-root.js.map +1 -1
  17. package/dist/module/components/calendar/calendar/calendar-weeks.js +6 -9
  18. package/dist/module/components/calendar/calendar/calendar-weeks.js.map +1 -1
  19. package/dist/module/components/calendar/shared/calendar-context.js.map +1 -1
  20. package/dist/module/components/calendar/shared/calendar-day.js.map +1 -1
  21. package/dist/module/components/calendar/shared/calendar-header.js.map +1 -1
  22. package/dist/module/components/calendar/shared/calendar-nav-buttons.js +4 -4
  23. package/dist/module/components/calendar/shared/calendar-nav-buttons.js.map +1 -1
  24. package/dist/module/components/calendar/shared/calendar-title.js.map +1 -1
  25. package/dist/module/components/calendar/shared/calendar-week-labels.js.map +1 -1
  26. package/dist/module/components/calendar/timeline/calendar-timeline.js.map +1 -1
  27. package/dist/module/components/calendar/week-calendar/week-calendar.js +4 -4
  28. package/dist/module/components/calendar/week-calendar/week-calendar.js.map +1 -1
  29. package/dist/module/components/card/card-root.js +6 -3
  30. package/dist/module/components/card/card-root.js.map +1 -1
  31. package/dist/module/components/checkbox/components/checkbox-root.js +7 -3
  32. package/dist/module/components/checkbox/components/checkbox-root.js.map +1 -1
  33. package/dist/module/components/combobox/components/combobox-content.js.map +1 -1
  34. package/dist/module/components/combobox/components/combobox-option.js.map +1 -1
  35. package/dist/module/components/combobox/components/combobox-overlay.js.map +1 -1
  36. package/dist/module/components/combobox/components/combobox-portal.js.map +1 -1
  37. package/dist/module/components/combobox/components/combobox-root.js +7 -3
  38. package/dist/module/components/combobox/components/combobox-root.js.map +1 -1
  39. package/dist/module/components/combobox/components/combobox-trigger.js.map +1 -1
  40. package/dist/module/components/combobox/context.js.map +1 -1
  41. package/dist/module/components/empty/components/empty-root.js +6 -2
  42. package/dist/module/components/empty/components/empty-root.js.map +1 -1
  43. package/dist/module/components/field/components/field-label.js.map +1 -1
  44. package/dist/module/components/field/components/field-root.js +6 -2
  45. package/dist/module/components/field/components/field-root.js.map +1 -1
  46. package/dist/module/components/icon/icon.js.map +1 -1
  47. package/dist/module/components/icon-button/icon-button.js +7 -3
  48. package/dist/module/components/icon-button/icon-button.js.map +1 -1
  49. package/dist/module/components/index.js +1 -0
  50. package/dist/module/components/index.js.map +1 -1
  51. package/dist/module/components/input/input.js +7 -3
  52. package/dist/module/components/input/input.js.map +1 -1
  53. package/dist/module/components/input/numeric-input.js +0 -1
  54. package/dist/module/components/input/numeric-input.js.map +1 -1
  55. package/dist/module/components/menu/components/menu-checkbox-item.js.map +1 -1
  56. package/dist/module/components/menu/components/menu-item.js.map +1 -1
  57. package/dist/module/components/menu/components/menu-overlay.js.map +1 -1
  58. package/dist/module/components/menu/components/menu-radio-group.js.map +1 -1
  59. package/dist/module/components/menu/components/menu-radio-item.js.map +1 -1
  60. package/dist/module/components/menu/components/menu-root.js +6 -2
  61. package/dist/module/components/menu/components/menu-root.js.map +1 -1
  62. package/dist/module/components/menu/components/menu-selection-indicator.js +3 -3
  63. package/dist/module/components/menu/components/menu-selection-indicator.js.map +1 -1
  64. package/dist/module/components/menu/components/menu-trigger.js.map +1 -1
  65. package/dist/module/components/menu/context.js.map +1 -1
  66. package/dist/module/components/phone-input/components/country-picker.js.map +1 -1
  67. package/dist/module/components/phone-input/components/phone-input-root.js +7 -3
  68. package/dist/module/components/phone-input/components/phone-input-root.js.map +1 -1
  69. package/dist/module/components/phone-input/components/phone-input.js.map +1 -1
  70. package/dist/module/components/phone-input/context.js.map +1 -1
  71. package/dist/module/components/popover/components/popover-overlay.js.map +1 -1
  72. package/dist/module/components/popover/components/popover-root.js +6 -2
  73. package/dist/module/components/popover/components/popover-root.js.map +1 -1
  74. package/dist/module/components/popover/components/popover-trigger.js.map +1 -1
  75. package/dist/module/components/portal/portal.js.map +1 -1
  76. package/dist/module/components/progress/components/progress-indicator.js.map +1 -1
  77. package/dist/module/components/progress/components/progress-root.js +6 -3
  78. package/dist/module/components/progress/components/progress-root.js.map +1 -1
  79. package/dist/module/components/radio-group/components/radio-group-item.js.map +1 -1
  80. package/dist/module/components/radio-group/components/radio-group-root.js +7 -3
  81. package/dist/module/components/radio-group/components/radio-group-root.js.map +1 -1
  82. package/dist/module/components/select/components/select-content.js.map +1 -1
  83. package/dist/module/components/select/components/select-option.js.map +1 -1
  84. package/dist/module/components/select/components/select-overlay.js.map +1 -1
  85. package/dist/module/components/select/components/select-portal.js.map +1 -1
  86. package/dist/module/components/select/components/select-root.js +7 -4
  87. package/dist/module/components/select/components/select-root.js.map +1 -1
  88. package/dist/module/components/select/components/select-trigger.js.map +1 -1
  89. package/dist/module/components/separator/separator.js +5 -1
  90. package/dist/module/components/separator/separator.js.map +1 -1
  91. package/dist/module/components/spinner/spinner.js +7 -3
  92. package/dist/module/components/spinner/spinner.js.map +1 -1
  93. package/dist/module/components/table/context.js +12 -0
  94. package/dist/module/components/table/context.js.map +1 -0
  95. package/dist/module/components/table/index.js +17 -0
  96. package/dist/module/components/table/index.js.map +1 -0
  97. package/dist/module/components/table/table-body.js +17 -0
  98. package/dist/module/components/table/table-body.js.map +1 -0
  99. package/dist/module/components/table/table-cell.js +17 -0
  100. package/dist/module/components/table/table-cell.js.map +1 -0
  101. package/dist/module/components/table/table-head.js +17 -0
  102. package/dist/module/components/table/table-head.js.map +1 -0
  103. package/dist/module/components/table/table-header.js +17 -0
  104. package/dist/module/components/table/table-header.js.map +1 -0
  105. package/dist/module/components/table/table-root.js +27 -0
  106. package/dist/module/components/table/table-root.js.map +1 -0
  107. package/dist/module/components/table/table-row.js +17 -0
  108. package/dist/module/components/table/table-row.js.map +1 -0
  109. package/dist/module/components/table/types.js +4 -0
  110. package/dist/module/components/table/types.js.map +1 -0
  111. package/dist/module/components/table/variants/default.js +48 -0
  112. package/dist/module/components/table/variants/default.js.map +1 -0
  113. package/dist/module/components/table/variants/index.js +7 -0
  114. package/dist/module/components/table/variants/index.js.map +1 -0
  115. package/dist/module/components/tabs/components/tabs-item.js.map +1 -1
  116. package/dist/module/components/tabs/components/tabs-root.js +7 -3
  117. package/dist/module/components/tabs/components/tabs-root.js.map +1 -1
  118. package/dist/module/components/textarea/textarea.js +7 -3
  119. package/dist/module/components/textarea/textarea.js.map +1 -1
  120. package/dist/module/components/toast/components/toast-icon.js.map +1 -1
  121. package/dist/module/components/toast/components/toast-root.js +6 -2
  122. package/dist/module/components/toast/components/toast-root.js.map +1 -1
  123. package/dist/module/components/toast/manager.js +3 -3
  124. package/dist/module/components/toast/manager.js.map +1 -1
  125. package/dist/module/components/touchable/touchable.js +5 -1
  126. package/dist/module/components/touchable/touchable.js.map +1 -1
  127. package/dist/module/components/typography/variants/heading-lg.js +1 -1
  128. package/dist/module/components/typography/variants/heading-md.js +1 -1
  129. package/dist/module/hooks/use-color-scheme.js.map +1 -1
  130. package/dist/module/hooks/use-is-react-navigation-modal.js.map +1 -1
  131. package/dist/module/hooks/use-numeric-mask.js.map +1 -1
  132. package/dist/module/hooks/use-phone-mask.js.map +1 -1
  133. package/dist/module/hooks/use-relative-position.js.map +1 -1
  134. package/dist/module/hooks/use-screen-size.js.map +1 -1
  135. package/dist/module/index.js +1 -1
  136. package/dist/module/index.js.map +1 -1
  137. package/dist/module/themes/index.js +2 -2
  138. package/dist/module/themes/index.js.map +1 -1
  139. package/dist/module/themes/provider.js +5 -1
  140. package/dist/module/themes/provider.js.map +1 -1
  141. package/dist/module/themes/types.js +2 -0
  142. package/dist/module/utils/calculate-styles.js +26 -0
  143. package/dist/module/utils/calculate-styles.js.map +1 -1
  144. package/dist/module/utils/date-utils.js.map +1 -1
  145. package/dist/module/utils/input-utils.js.map +1 -1
  146. package/dist/module/utils/normalize-layout.js.map +1 -1
  147. package/dist/module/utils/use-themed-styles.js.map +1 -1
  148. package/dist/typescript/src/components/alert/components/alert-description.d.ts.map +1 -1
  149. package/dist/typescript/src/components/alert/components/alert-icon.d.ts.map +1 -1
  150. package/dist/typescript/src/components/alert/components/alert-root.d.ts +1 -1
  151. package/dist/typescript/src/components/alert/components/alert-root.d.ts.map +1 -1
  152. package/dist/typescript/src/components/alert-dialog/async-alert-dialog.d.ts.map +1 -1
  153. package/dist/typescript/src/components/alert-dialog/components/alert-dialog-root.d.ts.map +1 -1
  154. package/dist/typescript/src/components/avatar/components/avatar-image.d.ts.map +1 -1
  155. package/dist/typescript/src/components/avatar/components/avatar-root.d.ts.map +1 -1
  156. package/dist/typescript/src/components/badge/badge.d.ts.map +1 -1
  157. package/dist/typescript/src/components/button/button.d.ts +1 -1
  158. package/dist/typescript/src/components/button/button.d.ts.map +1 -1
  159. package/dist/typescript/src/components/button/types.d.ts.map +1 -1
  160. package/dist/typescript/src/components/calendar/calendar/calendar-root.d.ts.map +1 -1
  161. package/dist/typescript/src/components/calendar/calendar/calendar-weeks.d.ts.map +1 -1
  162. package/dist/typescript/src/components/calendar/index.d.ts +1 -1
  163. package/dist/typescript/src/components/calendar/index.d.ts.map +1 -1
  164. package/dist/typescript/src/components/calendar/shared/calendar-context.d.ts.map +1 -1
  165. package/dist/typescript/src/components/calendar/shared/calendar-day.d.ts.map +1 -1
  166. package/dist/typescript/src/components/calendar/shared/calendar-header.d.ts.map +1 -1
  167. package/dist/typescript/src/components/calendar/shared/calendar-nav-buttons.d.ts.map +1 -1
  168. package/dist/typescript/src/components/calendar/shared/calendar-title.d.ts.map +1 -1
  169. package/dist/typescript/src/components/calendar/shared/calendar-week-labels.d.ts.map +1 -1
  170. package/dist/typescript/src/components/calendar/shared/types.d.ts.map +1 -1
  171. package/dist/typescript/src/components/calendar/timeline/calendar-timeline.d.ts.map +1 -1
  172. package/dist/typescript/src/components/calendar/timeline/index.d.ts +1 -1
  173. package/dist/typescript/src/components/calendar/timeline/index.d.ts.map +1 -1
  174. package/dist/typescript/src/components/calendar/week-calendar/week-calendar.d.ts.map +1 -1
  175. package/dist/typescript/src/components/card/card-root.d.ts +1 -1
  176. package/dist/typescript/src/components/card/card-root.d.ts.map +1 -1
  177. package/dist/typescript/src/components/checkbox/components/checkbox-root.d.ts.map +1 -1
  178. package/dist/typescript/src/components/combobox/components/combobox-content.d.ts.map +1 -1
  179. package/dist/typescript/src/components/combobox/components/combobox-option.d.ts.map +1 -1
  180. package/dist/typescript/src/components/combobox/components/combobox-overlay.d.ts.map +1 -1
  181. package/dist/typescript/src/components/combobox/components/combobox-portal.d.ts.map +1 -1
  182. package/dist/typescript/src/components/combobox/components/combobox-root.d.ts.map +1 -1
  183. package/dist/typescript/src/components/combobox/components/combobox-trigger.d.ts.map +1 -1
  184. package/dist/typescript/src/components/combobox/context.d.ts.map +1 -1
  185. package/dist/typescript/src/components/empty/components/empty-root.d.ts.map +1 -1
  186. package/dist/typescript/src/components/field/components/field-label.d.ts.map +1 -1
  187. package/dist/typescript/src/components/field/components/field-root.d.ts.map +1 -1
  188. package/dist/typescript/src/components/icon/icon.d.ts.map +1 -1
  189. package/dist/typescript/src/components/icon-button/icon-button.d.ts.map +1 -1
  190. package/dist/typescript/src/components/index.d.ts +1 -0
  191. package/dist/typescript/src/components/index.d.ts.map +1 -1
  192. package/dist/typescript/src/components/input/input.d.ts +1 -1
  193. package/dist/typescript/src/components/input/input.d.ts.map +1 -1
  194. package/dist/typescript/src/components/input/numeric-input.d.ts +1 -1
  195. package/dist/typescript/src/components/input/numeric-input.d.ts.map +1 -1
  196. package/dist/typescript/src/components/menu/components/menu-checkbox-item.d.ts.map +1 -1
  197. package/dist/typescript/src/components/menu/components/menu-item.d.ts.map +1 -1
  198. package/dist/typescript/src/components/menu/components/menu-overlay.d.ts.map +1 -1
  199. package/dist/typescript/src/components/menu/components/menu-radio-group.d.ts.map +1 -1
  200. package/dist/typescript/src/components/menu/components/menu-radio-item.d.ts.map +1 -1
  201. package/dist/typescript/src/components/menu/components/menu-root.d.ts.map +1 -1
  202. package/dist/typescript/src/components/menu/components/menu-selection-indicator.d.ts +1 -1
  203. package/dist/typescript/src/components/menu/components/menu-selection-indicator.d.ts.map +1 -1
  204. package/dist/typescript/src/components/menu/components/menu-trigger.d.ts.map +1 -1
  205. package/dist/typescript/src/components/menu/context.d.ts.map +1 -1
  206. package/dist/typescript/src/components/menu/types.d.ts.map +1 -1
  207. package/dist/typescript/src/components/phone-input/components/country-picker.d.ts.map +1 -1
  208. package/dist/typescript/src/components/phone-input/components/phone-input-root.d.ts.map +1 -1
  209. package/dist/typescript/src/components/phone-input/components/phone-input.d.ts +1 -1
  210. package/dist/typescript/src/components/phone-input/components/phone-input.d.ts.map +1 -1
  211. package/dist/typescript/src/components/phone-input/context.d.ts.map +1 -1
  212. package/dist/typescript/src/components/phone-input/types.d.ts.map +1 -1
  213. package/dist/typescript/src/components/popover/components/popover-overlay.d.ts.map +1 -1
  214. package/dist/typescript/src/components/popover/components/popover-root.d.ts.map +1 -1
  215. package/dist/typescript/src/components/popover/components/popover-trigger.d.ts.map +1 -1
  216. package/dist/typescript/src/components/portal/portal.d.ts +2 -2
  217. package/dist/typescript/src/components/portal/portal.d.ts.map +1 -1
  218. package/dist/typescript/src/components/progress/components/progress-indicator.d.ts.map +1 -1
  219. package/dist/typescript/src/components/progress/components/progress-root.d.ts.map +1 -1
  220. package/dist/typescript/src/components/radio-group/components/radio-group-item.d.ts.map +1 -1
  221. package/dist/typescript/src/components/radio-group/components/radio-group-root.d.ts.map +1 -1
  222. package/dist/typescript/src/components/select/components/select-content.d.ts.map +1 -1
  223. package/dist/typescript/src/components/select/components/select-option.d.ts.map +1 -1
  224. package/dist/typescript/src/components/select/components/select-overlay.d.ts.map +1 -1
  225. package/dist/typescript/src/components/select/components/select-portal.d.ts.map +1 -1
  226. package/dist/typescript/src/components/select/components/select-root.d.ts.map +1 -1
  227. package/dist/typescript/src/components/select/components/select-trigger.d.ts.map +1 -1
  228. package/dist/typescript/src/components/separator/separator.d.ts.map +1 -1
  229. package/dist/typescript/src/components/spinner/spinner.d.ts.map +1 -1
  230. package/dist/typescript/src/components/table/context.d.ts +8 -0
  231. package/dist/typescript/src/components/table/context.d.ts.map +1 -0
  232. package/dist/typescript/src/components/table/index.d.ts +22 -0
  233. package/dist/typescript/src/components/table/index.d.ts.map +1 -0
  234. package/dist/typescript/src/components/table/table-body.d.ts +9 -0
  235. package/dist/typescript/src/components/table/table-body.d.ts.map +1 -0
  236. package/dist/typescript/src/components/table/table-cell.d.ts +9 -0
  237. package/dist/typescript/src/components/table/table-cell.d.ts.map +1 -0
  238. package/dist/typescript/src/components/table/table-head.d.ts +9 -0
  239. package/dist/typescript/src/components/table/table-head.d.ts.map +1 -0
  240. package/dist/typescript/src/components/table/table-header.d.ts +9 -0
  241. package/dist/typescript/src/components/table/table-header.d.ts.map +1 -0
  242. package/dist/typescript/src/components/table/table-root.d.ts +11 -0
  243. package/dist/typescript/src/components/table/table-root.d.ts.map +1 -0
  244. package/dist/typescript/src/components/table/table-row.d.ts +9 -0
  245. package/dist/typescript/src/components/table/table-row.d.ts.map +1 -0
  246. package/dist/typescript/src/components/table/types.d.ts +16 -0
  247. package/dist/typescript/src/components/table/types.d.ts.map +1 -0
  248. package/dist/typescript/src/components/table/variants/default.d.ts +3 -0
  249. package/dist/typescript/src/components/table/variants/default.d.ts.map +1 -0
  250. package/dist/typescript/src/components/table/variants/index.d.ts +5 -0
  251. package/dist/typescript/src/components/table/variants/index.d.ts.map +1 -0
  252. package/dist/typescript/src/components/tabs/components/tabs-item.d.ts.map +1 -1
  253. package/dist/typescript/src/components/tabs/components/tabs-root.d.ts.map +1 -1
  254. package/dist/typescript/src/components/textarea/textarea.d.ts.map +1 -1
  255. package/dist/typescript/src/components/toast/components/toast-icon.d.ts.map +1 -1
  256. package/dist/typescript/src/components/toast/components/toast-root.d.ts.map +1 -1
  257. package/dist/typescript/src/components/toast/manager.d.ts.map +1 -1
  258. package/dist/typescript/src/components/touchable/touchable.d.ts.map +1 -1
  259. package/dist/typescript/src/hooks/use-color-scheme.d.ts.map +1 -1
  260. package/dist/typescript/src/hooks/use-is-react-navigation-modal.d.ts.map +1 -1
  261. package/dist/typescript/src/hooks/use-numeric-mask.d.ts.map +1 -1
  262. package/dist/typescript/src/hooks/use-phone-mask.d.ts.map +1 -1
  263. package/dist/typescript/src/hooks/use-relative-position.d.ts.map +1 -1
  264. package/dist/typescript/src/hooks/use-screen-size.d.ts.map +1 -1
  265. package/dist/typescript/src/index.d.ts +3 -2
  266. package/dist/typescript/src/index.d.ts.map +1 -1
  267. package/dist/typescript/src/themes/index.d.ts +2 -2
  268. package/dist/typescript/src/themes/index.d.ts.map +1 -1
  269. package/dist/typescript/src/themes/provider.d.ts +2 -19
  270. package/dist/typescript/src/themes/provider.d.ts.map +1 -1
  271. package/dist/typescript/src/themes/types.d.ts +123 -0
  272. package/dist/typescript/src/themes/types.d.ts.map +1 -1
  273. package/dist/typescript/src/types/element.types.d.ts +2 -1
  274. package/dist/typescript/src/types/element.types.d.ts.map +1 -1
  275. package/dist/typescript/src/utils/calculate-styles.d.ts +1 -0
  276. package/dist/typescript/src/utils/calculate-styles.d.ts.map +1 -1
  277. package/dist/typescript/src/utils/date-utils.d.ts.map +1 -1
  278. package/dist/typescript/src/utils/input-utils.d.ts.map +1 -1
  279. package/dist/typescript/src/utils/normalize-layout.d.ts.map +1 -1
  280. package/dist/typescript/src/utils/use-themed-styles.d.ts.map +1 -1
  281. package/package.json +8 -7
  282. package/src/components/alert/components/alert-description.tsx +1 -3
  283. package/src/components/alert/components/alert-icon.tsx +4 -1
  284. package/src/components/alert/components/alert-root.tsx +9 -4
  285. package/src/components/alert-dialog/async-alert-dialog.tsx +6 -25
  286. package/src/components/alert-dialog/components/alert-dialog-root.tsx +8 -3
  287. package/src/components/avatar/components/avatar-image.tsx +1 -6
  288. package/src/components/avatar/components/avatar-root.tsx +8 -3
  289. package/src/components/badge/badge.tsx +10 -12
  290. package/src/components/button/button.tsx +11 -23
  291. package/src/components/button/types.ts +1 -5
  292. package/src/components/calendar/calendar/calendar-root.tsx +6 -2
  293. package/src/components/calendar/calendar/calendar-weeks.tsx +7 -13
  294. package/src/components/calendar/index.ts +1 -5
  295. package/src/components/calendar/shared/calendar-context.ts +2 -6
  296. package/src/components/calendar/shared/calendar-day.tsx +4 -12
  297. package/src/components/calendar/shared/calendar-header.tsx +1 -6
  298. package/src/components/calendar/shared/calendar-nav-buttons.tsx +9 -28
  299. package/src/components/calendar/shared/calendar-title.tsx +1 -6
  300. package/src/components/calendar/shared/calendar-week-labels.tsx +1 -7
  301. package/src/components/calendar/shared/types.ts +1 -6
  302. package/src/components/calendar/timeline/calendar-timeline.tsx +3 -9
  303. package/src/components/calendar/timeline/index.ts +1 -4
  304. package/src/components/calendar/week-calendar/week-calendar.tsx +10 -25
  305. package/src/components/card/card-root.tsx +8 -4
  306. package/src/components/checkbox/components/checkbox-root.tsx +13 -4
  307. package/src/components/combobox/components/combobox-content.tsx +2 -11
  308. package/src/components/combobox/components/combobox-option.tsx +1 -2
  309. package/src/components/combobox/components/combobox-overlay.tsx +1 -6
  310. package/src/components/combobox/components/combobox-portal.tsx +1 -3
  311. package/src/components/combobox/components/combobox-root.tsx +20 -23
  312. package/src/components/combobox/components/combobox-trigger.tsx +2 -7
  313. package/src/components/combobox/context.ts +1 -3
  314. package/src/components/empty/components/empty-root.tsx +7 -2
  315. package/src/components/field/components/field-label.tsx +3 -1
  316. package/src/components/field/components/field-root.tsx +7 -2
  317. package/src/components/icon/icon.tsx +1 -4
  318. package/src/components/icon-button/icon-button.tsx +11 -10
  319. package/src/components/index.ts +1 -0
  320. package/src/components/input/input.tsx +9 -5
  321. package/src/components/input/numeric-input.tsx +2 -9
  322. package/src/components/menu/components/menu-checkbox-item.tsx +2 -9
  323. package/src/components/menu/components/menu-item.tsx +2 -10
  324. package/src/components/menu/components/menu-overlay.tsx +1 -6
  325. package/src/components/menu/components/menu-radio-group.tsx +1 -5
  326. package/src/components/menu/components/menu-radio-item.tsx +1 -5
  327. package/src/components/menu/components/menu-root.tsx +10 -2
  328. package/src/components/menu/components/menu-selection-indicator.tsx +4 -6
  329. package/src/components/menu/components/menu-trigger.tsx +32 -34
  330. package/src/components/menu/context.ts +3 -3
  331. package/src/components/menu/types.ts +1 -5
  332. package/src/components/phone-input/components/country-picker.tsx +6 -21
  333. package/src/components/phone-input/components/phone-input-root.tsx +10 -8
  334. package/src/components/phone-input/components/phone-input.tsx +5 -20
  335. package/src/components/phone-input/context.ts +1 -3
  336. package/src/components/phone-input/types.ts +2 -6
  337. package/src/components/popover/components/popover-overlay.tsx +7 -1
  338. package/src/components/popover/components/popover-root.tsx +10 -2
  339. package/src/components/popover/components/popover-trigger.tsx +1 -4
  340. package/src/components/portal/portal.tsx +6 -26
  341. package/src/components/progress/components/progress-indicator.tsx +13 -2
  342. package/src/components/progress/components/progress-root.tsx +6 -3
  343. package/src/components/radio-group/components/radio-group-item.tsx +1 -5
  344. package/src/components/radio-group/components/radio-group-root.tsx +7 -3
  345. package/src/components/select/components/select-content.tsx +1 -5
  346. package/src/components/select/components/select-option.tsx +5 -1
  347. package/src/components/select/components/select-overlay.tsx +6 -1
  348. package/src/components/select/components/select-portal.tsx +1 -3
  349. package/src/components/select/components/select-root.tsx +7 -4
  350. package/src/components/select/components/select-trigger.tsx +3 -13
  351. package/src/components/separator/separator.tsx +5 -1
  352. package/src/components/spinner/spinner.tsx +8 -9
  353. package/src/components/table/context.ts +17 -0
  354. package/src/components/table/index.ts +23 -0
  355. package/src/components/table/table-body.tsx +20 -0
  356. package/src/components/table/table-cell.tsx +20 -0
  357. package/src/components/table/table-head.tsx +20 -0
  358. package/src/components/table/table-header.tsx +20 -0
  359. package/src/components/table/table-root.tsx +35 -0
  360. package/src/components/table/table-row.tsx +20 -0
  361. package/src/components/table/types.ts +17 -0
  362. package/src/components/table/variants/default.tsx +46 -0
  363. package/src/components/table/variants/index.ts +5 -0
  364. package/src/components/tabs/components/tabs-item.tsx +5 -25
  365. package/src/components/tabs/components/tabs-root.tsx +9 -10
  366. package/src/components/textarea/textarea.tsx +7 -3
  367. package/src/components/toast/components/toast-icon.tsx +2 -8
  368. package/src/components/toast/components/toast-root.tsx +6 -2
  369. package/src/components/toast/manager.tsx +4 -6
  370. package/src/components/touchable/touchable.tsx +7 -7
  371. package/src/components/typography/variants/heading-lg.tsx +1 -1
  372. package/src/components/typography/variants/heading-md.tsx +1 -1
  373. package/src/hooks/use-color-scheme.ts +1 -4
  374. package/src/hooks/use-currency-mask.ts +4 -4
  375. package/src/hooks/use-is-react-navigation-modal.ts +4 -13
  376. package/src/hooks/use-numeric-mask.ts +10 -5
  377. package/src/hooks/use-phone-mask.ts +6 -18
  378. package/src/hooks/use-relative-position.ts +8 -24
  379. package/src/hooks/use-screen-size.ts +8 -3
  380. package/src/index.tsx +3 -6
  381. package/src/themes/index.ts +2 -2
  382. package/src/themes/provider.tsx +8 -25
  383. package/src/themes/types.ts +125 -0
  384. package/src/types/element.types.ts +2 -7
  385. package/src/utils/calculate-styles.ts +42 -2
  386. package/src/utils/date-utils.ts +23 -3
  387. package/src/utils/input-utils.ts +1 -4
  388. package/src/utils/normalize-layout.ts +3 -1
  389. package/src/utils/use-themed-styles.ts +2 -10
  390. package/tsconfig.json +5 -15
@@ -20,16 +20,12 @@ export interface CalendarContextValue {
20
20
  styles?: BaseCalendarStyles;
21
21
  }
22
22
 
23
- export const CalendarContext = React.createContext<
24
- CalendarContextValue | undefined
25
- >(undefined);
23
+ export const CalendarContext = React.createContext<CalendarContextValue | undefined>(undefined);
26
24
 
27
25
  export const useCalendarContext = () => {
28
26
  const context = React.useContext(CalendarContext);
29
27
  if (!context) {
30
- throw new Error(
31
- "Calendar components must be used within a Calendar or WeekCalendar Root",
32
- );
28
+ throw new Error("Calendar components must be used within a Calendar or WeekCalendar Root");
33
29
  }
34
30
  return context;
35
31
  };
@@ -43,22 +43,14 @@ export function CalendarDay(props: CalendarDayProps) {
43
43
  const [isHovered, setIsHovered] = useState(false);
44
44
 
45
45
  const isDisabled = useMemo(() => {
46
- if (calendar.minDate && isDateBefore(props.date, calendar.minDate))
47
- return true;
48
- if (calendar.maxDate && isDateAfter(props.date, calendar.maxDate))
49
- return true;
46
+ if (calendar.minDate && isDateBefore(props.date, calendar.minDate)) return true;
47
+ if (calendar.maxDate && isDateAfter(props.date, calendar.maxDate)) return true;
50
48
  return false;
51
49
  }, [props.date, calendar.minDate, calendar.maxDate]);
52
50
 
53
- const isMarked =
54
- calendar.markedDates?.some((d) => isDateSameDay(d, props.date)) ?? false;
51
+ const isMarked = calendar.markedDates?.some((d) => isDateSameDay(d, props.date)) ?? false;
55
52
 
56
- const state = calculateState(
57
- props.date,
58
- calendar.value,
59
- isDisabled,
60
- isHovered,
61
- );
53
+ const state = calculateState(props.date, calendar.value, isDisabled, isHovered);
62
54
 
63
55
  const handlePress = () => {
64
56
  if (isDisabled || !calendar.onChange) return;
@@ -1,10 +1,5 @@
1
1
  import React from "react";
2
- import {
3
- View,
4
- type StyleProp,
5
- type ViewProps,
6
- type ViewStyle,
7
- } from "react-native";
2
+ import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
8
3
  import { useCalendarContext } from "./calendar-context";
9
4
 
10
5
  export interface CalendarHeaderProps extends ViewProps {
@@ -1,13 +1,6 @@
1
1
  import React, { useState } from "react";
2
- import {
3
- Pressable,
4
- StyleSheet,
5
- Text,
6
- View,
7
- type StyleProp,
8
- type ViewStyle,
9
- } from "react-native";
10
- import { useComponentsConfig } from "../../../themes";
2
+ import { Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
3
+ import { useComponentConfig } from "../../../themes/provider";
11
4
  import { useCalendarContext } from "./calendar-context";
12
5
  import type { CalendarNavButtonState } from "./types";
13
6
 
@@ -15,10 +8,7 @@ export interface CalendarNavButtonsProps {
15
8
  style?: StyleProp<ViewStyle>;
16
9
  }
17
10
 
18
- const calculateState = (
19
- isDisabled: boolean,
20
- isHovered: boolean,
21
- ): CalendarNavButtonState => {
11
+ const calculateState = (isDisabled: boolean, isHovered: boolean): CalendarNavButtonState => {
22
12
  if (isDisabled) return "disabled";
23
13
  if (isHovered) return "hovered";
24
14
  return "default";
@@ -26,11 +16,10 @@ const calculateState = (
26
16
 
27
17
  export function CalendarNavButtons(props: CalendarNavButtonsProps) {
28
18
  const { style } = props;
29
- const { goToPrev, goToNext, isPrevDisabled, isNextDisabled, styles } =
30
- useCalendarContext();
31
- const config = useComponentsConfig();
32
- const PrevIcon = config?.calendar?.prevIcon;
33
- const NextIcon = config?.calendar?.nextIcon;
19
+ const { goToPrev, goToNext, isPrevDisabled, isNextDisabled, styles } = useCalendarContext();
20
+ const config = useComponentConfig("calendar");
21
+ const PrevIcon = config?.prevIcon;
22
+ const NextIcon = config?.nextIcon;
34
23
  const [prevHovered, setPrevHovered] = useState(false);
35
24
  const [nextHovered, setNextHovered] = useState(false);
36
25
 
@@ -57,11 +46,7 @@ export function CalendarNavButtons(props: CalendarNavButtonsProps) {
57
46
  disabled={isPrevDisabled}
58
47
  style={[styles?.navButton?.default, styles?.navButton?.[prevState]]}
59
48
  >
60
- {PrevIcon ? (
61
- <PrevIcon {...prevIconProps} />
62
- ) : (
63
- <Text style={prevIconProps?.style}>‹</Text>
64
- )}
49
+ {PrevIcon ? <PrevIcon {...prevIconProps} /> : <Text style={prevIconProps?.style}>‹</Text>}
65
50
  </Pressable>
66
51
  <Pressable
67
52
  onPress={goToNext}
@@ -70,11 +55,7 @@ export function CalendarNavButtons(props: CalendarNavButtonsProps) {
70
55
  disabled={isNextDisabled}
71
56
  style={[styles?.navButton?.default, styles?.navButton?.[nextState]]}
72
57
  >
73
- {NextIcon ? (
74
- <NextIcon {...nextIconProps} />
75
- ) : (
76
- <Text style={nextIconProps?.style}>›</Text>
77
- )}
58
+ {NextIcon ? <NextIcon {...nextIconProps} /> : <Text style={nextIconProps?.style}>›</Text>}
78
59
  </Pressable>
79
60
  </View>
80
61
  );
@@ -1,10 +1,5 @@
1
1
  import React from "react";
2
- import {
3
- Text,
4
- type StyleProp,
5
- type TextProps,
6
- type TextStyle,
7
- } from "react-native";
2
+ import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
8
3
  import { formatDate } from "../../../utils/date-utils";
9
4
  import { useCalendarContext } from "./calendar-context";
10
5
 
@@ -1,11 +1,5 @@
1
1
  import React from "react";
2
- import {
3
- Text,
4
- View,
5
- type StyleProp,
6
- type TextStyle,
7
- type ViewStyle,
8
- } from "react-native";
2
+ import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
9
3
  import { useCalendarContext } from "./calendar-context";
10
4
 
11
5
  export interface CalendarWeekLabelProps {
@@ -1,12 +1,7 @@
1
1
  import type { StyleProp, TextStyle, ViewStyle } from "react-native";
2
2
  import type { IconProps } from "../../icon";
3
3
 
4
- export type CalendarDayState =
5
- | "default"
6
- | "selected"
7
- | "today"
8
- | "disabled"
9
- | "hovered";
4
+ export type CalendarDayState = "default" | "selected" | "today" | "disabled" | "hovered";
10
5
  export type CalendarNavButtonState = "default" | "disabled" | "hovered";
11
6
 
12
7
  export interface BaseCalendarStyles {
@@ -41,9 +41,7 @@ function groupOverlappingEvents<T>(
41
41
  getStart: (e: T) => Date,
42
42
  getEnd: (e: T) => Date,
43
43
  ): T[][] {
44
- const sorted = [...events].sort(
45
- (a, b) => getStart(a).getTime() - getStart(b).getTime(),
46
- );
44
+ const sorted = [...events].sort((a, b) => getStart(a).getTime() - getStart(b).getTime());
47
45
  const groups: T[][] = [];
48
46
 
49
47
  for (const event of sorted) {
@@ -116,10 +114,7 @@ export function CalendarTimeline<T>(props: CalendarTimelineProps<T>) {
116
114
  : null;
117
115
 
118
116
  return (
119
- <ScrollView
120
- style={[variantStyles.container, style]}
121
- showsVerticalScrollIndicator
122
- >
117
+ <ScrollView style={[variantStyles.container, style]} showsVerticalScrollIndicator>
123
118
  <View style={variantStyles.timeline}>
124
119
  {/* Time column */}
125
120
  <View style={variantStyles.timeColumn}>
@@ -165,8 +160,7 @@ export function CalendarTimeline<T>(props: CalendarTimelineProps<T>) {
165
160
  }
166
161
  const duration = endMinutes - startMinutes;
167
162
 
168
- const top =
169
- ((startMinutes - startHour * 60) / 60) * HOUR_HEIGHT + 1;
163
+ const top = ((startMinutes - startHour * 60) / 60) * HOUR_HEIGHT + 1;
170
164
  const height = (duration / 60) * HOUR_HEIGHT - 3;
171
165
 
172
166
  const indexInGroup = group.indexOf(event);
@@ -1,6 +1,3 @@
1
1
  export { CalendarTimeline } from "./calendar-timeline";
2
- export type {
3
- CalendarTimelineProps,
4
- TimelineEventLayout,
5
- } from "./calendar-timeline";
2
+ export type { CalendarTimelineProps, TimelineEventLayout } from "./calendar-timeline";
6
3
  export type { TimelineStyles } from "./types";
@@ -11,7 +11,7 @@ import {
11
11
  type StyleProp,
12
12
  type ViewStyle,
13
13
  } from "react-native";
14
- import { useComponentsConfig } from "../../../themes";
14
+ import { useComponentConfig } from "../../../themes/provider";
15
15
  import {
16
16
  addWeeks,
17
17
  endOfWeek,
@@ -22,10 +22,7 @@ import {
22
22
  startOfWeek,
23
23
  subWeeks,
24
24
  } from "../../../utils/date-utils";
25
- import {
26
- CalendarContext,
27
- type CalendarContextValue,
28
- } from "../shared/calendar-context";
25
+ import { CalendarContext, type CalendarContextValue } from "../shared/calendar-context";
29
26
  import { CalendarDay } from "../shared/calendar-day";
30
27
  import type { CalendarNavButtonState } from "../shared/types";
31
28
  import { WeekCalendarVariants } from "./variants";
@@ -44,10 +41,7 @@ export interface WeekCalendarProps {
44
41
  style?: StyleProp<ViewStyle>;
45
42
  }
46
43
 
47
- const calculateNavState = (
48
- isDisabled: boolean,
49
- isHovered: boolean,
50
- ): CalendarNavButtonState => {
44
+ const calculateNavState = (isDisabled: boolean, isHovered: boolean): CalendarNavButtonState => {
51
45
  if (isDisabled) return "disabled";
52
46
  if (isHovered) return "hovered";
53
47
  return "default";
@@ -65,13 +59,11 @@ export function WeekCalendar(props: WeekCalendarProps) {
65
59
  style,
66
60
  } = props;
67
61
  const styles = WeekCalendarVariants[props.variant || "default"]();
68
- const config = useComponentsConfig();
69
- const PrevIcon = config?.calendar?.prevIcon;
70
- const NextIcon = config?.calendar?.nextIcon;
62
+ const config = useComponentConfig("calendar");
63
+ const PrevIcon = config?.prevIcon;
64
+ const NextIcon = config?.nextIcon;
71
65
 
72
- const [currentWeekStart, setCurrentWeekStart] = useState<Date>(
73
- startOfWeek(defaultWeek),
74
- );
66
+ const [currentWeekStart, setCurrentWeekStart] = useState<Date>(startOfWeek(defaultWeek));
75
67
  const [containerWidth, setContainerWidth] = useState(0);
76
68
  const scrollRef = useRef<React.ComponentRef<typeof ScrollView>>(null);
77
69
  const [prevHovered, setPrevHovered] = useState(false);
@@ -169,9 +161,7 @@ export function WeekCalendar(props: WeekCalendarProps) {
169
161
  <View style={[styles.root, style]}>
170
162
  {/* Header */}
171
163
  <View style={styles.header}>
172
- <Text style={styles.headerTitle}>
173
- {formatDate(currentMonth, "MMMM yyyy")}
174
- </Text>
164
+ <Text style={styles.headerTitle}>{formatDate(currentMonth, "MMMM yyyy")}</Text>
175
165
  <View style={styles.navButtons}>
176
166
  <Pressable
177
167
  onPress={goToPrev}
@@ -233,15 +223,10 @@ export function WeekCalendar(props: WeekCalendarProps) {
233
223
  });
234
224
  }
235
225
  }}
236
- {...(Platform.OS !== "web"
237
- ? { contentOffset: { x: containerWidth, y: 0 } }
238
- : {})}
226
+ {...(Platform.OS !== "web" ? { contentOffset: { x: containerWidth, y: 0 } } : {})}
239
227
  >
240
228
  {weeks.map((weekDates, weekIndex) => (
241
- <View
242
- key={weekIndex}
243
- style={[styles.weekStrip, { width: containerWidth }]}
244
- >
229
+ <View key={weekIndex} style={[styles.weekStrip, { width: containerWidth }]}>
245
230
  {weekDates.map((date, dayIndex) => (
246
231
  <CalendarDay key={dayIndex} date={date} />
247
232
  ))}
@@ -1,7 +1,8 @@
1
- import type { PropsWithRender } from "../../types/props.types";
2
- import { calculateComposedStyles } from "../../utils/calculate-styles";
3
1
  import React from "react";
4
2
  import { type StyleProp, View, type ViewStyle } from "react-native";
3
+ import { useComponentConfig } from "../../themes/provider";
4
+ import type { PropsWithRender } from "../../types/props.types";
5
+ import { calculateComposedStyles, mergeStyles } from "../../utils/calculate-styles";
5
6
  import { CardContext } from "./context";
6
7
  import { CardVariants } from "./variants";
7
8
 
@@ -14,15 +15,18 @@ export interface CardRootProps {
14
15
 
15
16
  export function CardRoot(props: PropsWithRender<CardRootProps>) {
16
17
  const variantStyles = CardVariants[props.variant || "default"]();
18
+ const componentConfig = useComponentConfig("card");
19
+
20
+ const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
17
21
 
18
- const composedStyle = calculateComposedStyles(variantStyles, "default", "root", props.style);
22
+ const composedStyle = calculateComposedStyles(mergedStyles, "default", "root", props.style);
19
23
 
20
24
  const Component = props.render ?? View;
21
25
  return (
22
26
  <CardContext.Provider
23
27
  value={{
24
28
  state: "default",
25
- styles: variantStyles,
29
+ styles: mergedStyles,
26
30
  }}
27
31
  >
28
32
  <Component {...props} style={composedStyle} />
@@ -1,5 +1,7 @@
1
1
  import React, { useState } from "react";
2
2
  import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
3
+ import { useComponentConfig } from "../../../themes/provider";
4
+ import { mergeStyles } from "../../../utils/calculate-styles";
3
5
  import { CheckboxContext } from "../context";
4
6
  import type { CheckboxState } from "../types";
5
7
  import { CheckboxVariants } from "../variants";
@@ -13,7 +15,11 @@ export interface CheckboxRootProps extends Omit<PressableProps, "children"> {
13
15
  style?: StyleProp<ViewStyle>;
14
16
  }
15
17
 
16
- const calculateState = (value: boolean, isDisabled: boolean | undefined, isHovered: boolean): CheckboxState => {
18
+ const calculateState = (
19
+ value: boolean,
20
+ isDisabled: boolean | undefined,
21
+ isHovered: boolean,
22
+ ): CheckboxState => {
17
23
  if (isDisabled) {
18
24
  return "disabled";
19
25
  }
@@ -29,8 +35,11 @@ const calculateState = (value: boolean, isDisabled: boolean | undefined, isHover
29
35
  export function CheckboxRoot(props: CheckboxRootProps) {
30
36
  const { children, value, onChange, isDisabled, style, ...pressableProps } = props;
31
37
  const variantStyles = CheckboxVariants[props.variant || "default"]();
38
+ const componentConfig = useComponentConfig("checkbox");
32
39
  const [isHovered, setIsHovered] = useState(false);
33
40
 
41
+ const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
42
+
34
43
  const state = calculateState(value, isDisabled, isHovered);
35
44
  const handlePress = () => {
36
45
  if (!isDisabled) {
@@ -38,16 +47,16 @@ export function CheckboxRoot(props: CheckboxRootProps) {
38
47
  }
39
48
  };
40
49
 
41
- const calculatedStyle = [variantStyles.root?.default, variantStyles.root?.[state], style];
50
+ const calculatedStyle = [mergedStyles.root?.default, mergedStyles.root?.[state], style];
42
51
 
43
52
  const contextValue = React.useMemo(
44
53
  () => ({
45
54
  value,
46
55
  isDisabled,
47
56
  state,
48
- styles: variantStyles,
57
+ styles: mergedStyles,
49
58
  }),
50
- [value, isDisabled, state, variantStyles],
59
+ [value, isDisabled, state, mergedStyles],
51
60
  );
52
61
 
53
62
  return (
@@ -1,10 +1,5 @@
1
1
  import React from "react";
2
- import {
3
- ScrollView,
4
- StyleSheet,
5
- type StyleProp,
6
- type ViewStyle,
7
- } from "react-native";
2
+ import { ScrollView, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
8
3
  import { useRelativePosition } from "../../../hooks/use-relative-position";
9
4
  import { useCombobox } from "../context";
10
5
 
@@ -34,11 +29,7 @@ export function ComboboxContent(props: ComboboxContentProps) {
34
29
 
35
30
  return (
36
31
  <ScrollView
37
- style={[
38
- positionStyle,
39
- flatStyles,
40
- { width: combobox.triggerPosition.width },
41
- ]}
32
+ style={[positionStyle, flatStyles, { width: combobox.triggerPosition.width }]}
42
33
  onLayout={(e) => {
43
34
  combobox.setContentLayout(e.nativeEvent.layout);
44
35
  }}
@@ -43,8 +43,7 @@ export function ComboboxOption(props: ComboboxOptionProps) {
43
43
  <Component
44
44
  onPress={() => {
45
45
  const label =
46
- props.label ??
47
- (typeof props.children === "string" ? props.children : props.value);
46
+ props.label ?? (typeof props.children === "string" ? props.children : props.value);
48
47
  combobox.onChange?.(label);
49
48
  combobox.setIsOpen(false);
50
49
  }}
@@ -1,10 +1,5 @@
1
1
  import React from "react";
2
- import {
3
- Pressable,
4
- type StyleProp,
5
- StyleSheet,
6
- type ViewStyle,
7
- } from "react-native";
2
+ import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
8
3
  import { useCombobox } from "../context";
9
4
 
10
5
  export interface ComboboxOverlayProps {
@@ -25,9 +25,7 @@ export function ComboboxPortal(props: ComboboxPortalProps) {
25
25
 
26
26
  return (
27
27
  <Portal name="combobox-portal">
28
- <ComboboxContext.Provider value={combobox}>
29
- {props.children}
30
- </ComboboxContext.Provider>
28
+ <ComboboxContext.Provider value={combobox}>{props.children}</ComboboxContext.Provider>
31
29
  </Portal>
32
30
  );
33
31
  }
@@ -6,11 +6,9 @@ import {
6
6
  View,
7
7
  type ViewStyle,
8
8
  } from "react-native";
9
- import {
10
- DEFAULT_LAYOUT,
11
- DEFAULT_POSITION,
12
- type LayoutPosition,
13
- } from "../../../hooks";
9
+ import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks";
10
+ import { useComponentConfig } from "../../../themes/provider";
11
+ import { mergeStyles } from "../../../utils/calculate-styles";
14
12
  import { ComboboxContext } from "../context";
15
13
  import type { ComboboxState } from "../types";
16
14
  import { ComboboxVariants } from "../variants";
@@ -39,32 +37,31 @@ const calculateState = (props: ComboboxRootProps): ComboboxState => {
39
37
 
40
38
  export function ComboboxRoot(props: ComboboxRootProps) {
41
39
  const variantStyles = ComboboxVariants[props.variant ?? "default"]();
40
+ const globalStyles = useComponentConfig("combobox");
41
+ const mergedStyles = mergeStyles(variantStyles, globalStyles?.styles);
42
42
 
43
43
  const [isOpen, setIsOpen] = useState(false);
44
- const [contentLayout, setContentLayout] =
45
- useState<LayoutRectangle>(DEFAULT_LAYOUT);
46
- const [triggerPosition, setTriggerPosition] =
47
- useState<LayoutPosition>(DEFAULT_POSITION);
44
+ const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
45
+ const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
48
46
  const [inputValue, setInputValueInternal] = useState("");
49
47
 
50
48
  const onInputChangeRef = useRef(props.onInputChange);
51
49
  onInputChangeRef.current = props.onInputChange;
52
50
 
53
- const setInputValue: React.Dispatch<React.SetStateAction<string>> =
54
- useCallback((action) => {
55
- setInputValueInternal((prev) => {
56
- const next = typeof action === "function" ? action(prev) : action;
57
- if (next !== prev) {
58
- onInputChangeRef.current?.(next);
59
- }
60
- return next;
61
- });
62
- }, []);
51
+ const setInputValue: React.Dispatch<React.SetStateAction<string>> = useCallback((action) => {
52
+ setInputValueInternal((prev) => {
53
+ const next = typeof action === "function" ? action(prev) : action;
54
+ if (next !== prev) {
55
+ onInputChangeRef.current?.(next);
56
+ }
57
+ return next;
58
+ });
59
+ }, []);
63
60
 
64
61
  const state = calculateState(props);
65
62
  const composedStyles = StyleSheet.flatten([
66
- variantStyles?.root?.default,
67
- variantStyles?.root?.[state],
63
+ mergedStyles?.root?.default,
64
+ mergedStyles?.root?.[state],
68
65
  props.style,
69
66
  ]);
70
67
 
@@ -82,7 +79,7 @@ export function ComboboxRoot(props: ComboboxRootProps) {
82
79
  setInputValue,
83
80
  state,
84
81
  isDisabled: props.isDisabled ?? false,
85
- styles: variantStyles,
82
+ styles: mergedStyles,
86
83
  }),
87
84
  [
88
85
  props.value,
@@ -94,7 +91,7 @@ export function ComboboxRoot(props: ComboboxRootProps) {
94
91
  setInputValue,
95
92
  state,
96
93
  props.isDisabled,
97
- variantStyles,
94
+ mergedStyles,
98
95
  ],
99
96
  );
100
97
 
@@ -10,10 +10,7 @@ export interface ComboboxTriggerProps {
10
10
  placeholder?: string;
11
11
  }
12
12
 
13
- const calculateState = (
14
- isDisabled: boolean,
15
- isOpen: boolean,
16
- ): ComboboxTriggerState => {
13
+ const calculateState = (isDisabled: boolean, isOpen: boolean): ComboboxTriggerState => {
17
14
  if (isDisabled) return "disabled";
18
15
  if (isOpen) return "focused";
19
16
  return "default";
@@ -25,9 +22,7 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
25
22
 
26
23
  const triggerState = calculateState(combobox.isDisabled, combobox.isOpen);
27
24
 
28
- const displayValue = combobox.isOpen
29
- ? combobox.inputValue
30
- : combobox.value ?? "";
25
+ const displayValue = combobox.isOpen ? combobox.inputValue : (combobox.value ?? "");
31
26
 
32
27
  const open = () => {
33
28
  if (combobox.isDisabled) return;
@@ -23,9 +23,7 @@ export interface ComboboxContext {
23
23
  styles: ComboboxStyles;
24
24
  }
25
25
 
26
- export const ComboboxContext = createContext<ComboboxContext | undefined>(
27
- undefined,
28
- );
26
+ export const ComboboxContext = createContext<ComboboxContext | undefined>(undefined);
29
27
 
30
28
  export const useCombobox = () => {
31
29
  const context = useContext(ComboboxContext);
@@ -1,5 +1,7 @@
1
1
  import React from "react";
2
2
  import { type StyleProp, View, type ViewStyle } from "react-native";
3
+ import { useComponentConfig } from "../../../themes/provider";
4
+ import { mergeStyles } from "../../../utils/calculate-styles";
3
5
  import { EmptyContext } from "../context";
4
6
  import { EmptyVariants } from "../variants";
5
7
 
@@ -12,11 +14,14 @@ export interface EmptyRootProps {
12
14
 
13
15
  export function EmptyRoot(props: EmptyRootProps) {
14
16
  const variantStyles = EmptyVariants[props.variant || "default"]();
17
+ const componentConfig = useComponentConfig("empty");
15
18
 
16
- const composedStyles = [variantStyles.root, props.style];
19
+ const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
20
+
21
+ const composedStyles = [mergedStyles.root, props.style];
17
22
  const Component = props.render ?? View;
18
23
  return (
19
- <EmptyContext.Provider value={{ styles: variantStyles }}>
24
+ <EmptyContext.Provider value={{ styles: mergedStyles }}>
20
25
  <Component {...props} style={composedStyles} />
21
26
  </EmptyContext.Provider>
22
27
  );
@@ -16,5 +16,7 @@ export function FieldLabel(props: FieldLabelProps) {
16
16
  const field = useField();
17
17
 
18
18
  const Component = props.render ?? Text;
19
- return <Component {...props} for={props.for ?? field.id} style={[field.styles?.label, props.style]} />;
19
+ return (
20
+ <Component {...props} for={props.for ?? field.id} style={[field.styles?.label, props.style]} />
21
+ );
20
22
  }
@@ -1,5 +1,7 @@
1
1
  import React, { useId } from "react";
2
2
  import { type StyleProp, View, type ViewStyle } from "react-native";
3
+ import { useComponentConfig } from "../../../themes/provider";
4
+ import { mergeStyles } from "../../../utils/calculate-styles";
3
5
  import { FieldContext } from "../context";
4
6
  import { FieldVariants } from "../variants";
5
7
 
@@ -14,12 +16,15 @@ export interface FieldRootProps {
14
16
 
15
17
  export function FieldRoot(props: FieldRootProps) {
16
18
  const variantStyles = FieldVariants[props.variant || "default"]();
19
+ const componentConfig = useComponentConfig("field");
17
20
  const id = useId();
18
21
 
19
- const composedStyles = [variantStyles.root, props.style];
22
+ const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
23
+
24
+ const composedStyles = [mergedStyles.root, props.style];
20
25
  const Component = props.render ?? View;
21
26
  return (
22
- <FieldContext.Provider value={{ styles: variantStyles, id }}>
27
+ <FieldContext.Provider value={{ styles: mergedStyles, id }}>
23
28
  <Component {...props} style={composedStyles} />
24
29
  </FieldContext.Provider>
25
30
  );
@@ -1,8 +1,5 @@
1
1
  import React from "react";
2
- import type {
3
- PropsWithRequiredRender,
4
- SvgProps,
5
- } from "../../types/props.types";
2
+ import type { PropsWithRequiredRender, SvgProps } from "../../types/props.types";
6
3
  import { IconVariants } from "./variants";
7
4
 
8
5
  export type IconProps = SvgProps & {