@12-apps/ui 6.55.0 → 6.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (428) hide show
  1. package/NATIVE.md +5 -2
  2. package/components-catalog.md +6 -0
  3. package/components-guidelines.md +18 -2
  4. package/components.tasks.md +3 -0
  5. package/dist/_internal/components/data-display/AsyncStateContainer/AsyncStateContainer.js +4 -4
  6. package/dist/_internal/components/data-display/Avatar/Avatar.js +4 -4
  7. package/dist/_internal/components/data-display/Avatar/Avatar.view.js +2 -2
  8. package/dist/_internal/components/data-display/Badge/Badge.js +1 -1
  9. package/dist/_internal/components/data-display/Badge/Badge.styles.js +1 -1
  10. package/dist/_internal/components/data-display/Badge/BadgeContent.js +1 -1
  11. package/dist/_internal/components/data-display/Carousel/Carousel.chrome.js +1 -1
  12. package/dist/_internal/components/data-display/Carousel/Carousel.js +3 -3
  13. package/dist/_internal/components/data-display/Carousel/Carousel.parts.js +1 -1
  14. package/dist/_internal/components/data-display/Carousel/Carousel.styles.js +1 -1
  15. package/dist/_internal/components/data-display/Chart/Chart.js +4 -4
  16. package/dist/_internal/components/data-display/Chart/SpecChart.js +7 -7
  17. package/dist/_internal/components/data-display/Chart/chart-context.js +1 -1
  18. package/dist/_internal/components/data-display/Chart/chart-internals.js +1 -1
  19. package/dist/_internal/components/data-display/Chart/chart-renderers.js +3 -3
  20. package/dist/_internal/components/data-display/Chart/chart-spec.js +2 -2
  21. package/dist/_internal/components/data-display/DataGrid/DataGrid.js +2 -2
  22. package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js +48 -48
  23. package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +62 -62
  24. package/dist/_internal/components/data-display/DataViews/DeleteViewDialog.js +4 -4
  25. package/dist/_internal/components/data-display/DataViews/ManageViewsDialog.js +4 -4
  26. package/dist/_internal/components/data-display/DataViews/SaveViewModal.js +8 -8
  27. package/dist/_internal/components/data-display/DataViews/base-card.js +3 -3
  28. package/dist/_internal/components/data-display/DataViews/base-list-card-geometry.js +4 -4
  29. package/dist/_internal/components/data-display/DataViews/base-list-card-gutters.js +3 -3
  30. package/dist/_internal/components/data-display/DataViews/base-list-card-slots.js +3 -3
  31. package/dist/_internal/components/data-display/DataViews/base-list-card.js +10 -10
  32. package/dist/_internal/components/data-display/DataViews/data-views-category-pill.js +14 -14
  33. package/dist/_internal/components/data-display/DataViews/data-views-display-panel.js +1 -1
  34. package/dist/_internal/components/data-display/DataViews/data-views-filter-panel.js +20 -20
  35. package/dist/_internal/components/data-display/DataViews/data-views-grid-bodies.js +7 -7
  36. package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js +43 -43
  37. package/dist/_internal/components/data-display/DataViews/data-views-inline-bar.js +20 -20
  38. package/dist/_internal/components/data-display/DataViews/data-views-more-fields.js +17 -17
  39. package/dist/_internal/components/data-display/DataViews/data-views-more-filters.js +18 -18
  40. package/dist/_internal/components/data-display/DataViews/data-views-range-pill.js +2 -2
  41. package/dist/_internal/components/data-display/DataViews/data-views-scope-tabs.js +2 -2
  42. package/dist/_internal/components/data-display/DataViews/data-views-shell-toolbar.js +8 -8
  43. package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js +13 -13
  44. package/dist/_internal/components/data-display/DataViews/data-views-toolbar.js +7 -7
  45. package/dist/_internal/components/data-display/DataViews/list-card-rails.js +2 -2
  46. package/dist/_internal/components/data-display/DataViews/use-data-views-state.js +4 -4
  47. package/dist/_internal/components/data-display/FleetMap/FleetBody.js +14 -14
  48. package/dist/_internal/components/data-display/FleetMap/FleetCanvas.js +9 -9
  49. package/dist/_internal/components/data-display/FleetMap/FleetMap.js +16 -16
  50. package/dist/_internal/components/data-display/FleetMap/FleetRoster.js +4 -4
  51. package/dist/_internal/components/data-display/LazyImage/LazyImage.js +3 -3
  52. package/dist/_internal/components/data-display/Lightbox/Lightbox.js +5 -5
  53. package/dist/_internal/components/data-display/LoadingState/LoadingState.js +3 -3
  54. package/dist/_internal/components/data-display/MapPreview/MapLayers.js +3 -3
  55. package/dist/_internal/components/data-display/MapPreview/MapPreview.js +8 -8
  56. package/dist/_internal/components/data-display/Progress/Progress.js +2 -2
  57. package/dist/_internal/components/data-display/Sheet/Sheet.body.js +1 -1
  58. package/dist/_internal/components/data-display/Sheet/Sheet.js +5 -5
  59. package/dist/_internal/components/data-display/Sheet/Sheet.styles.js +1 -1
  60. package/dist/_internal/components/data-display/StatCard/StatCard.js +3 -3
  61. package/dist/_internal/components/data-display/Table/Table.js +3 -3
  62. package/dist/_internal/components/data-display/index.js +53 -53
  63. package/dist/_internal/components/feedback/Dialog/Dialog.js +3 -3
  64. package/dist/_internal/components/feedback/StackedModal/StackedModal.js +6 -6
  65. package/dist/_internal/components/feedback/index.js +9 -9
  66. package/dist/_internal/components/form/AddressAutocomplete/AddressAutocomplete.hooks.js +2 -2
  67. package/dist/_internal/components/form/AddressAutocomplete/AddressAutocomplete.js +8 -8
  68. package/dist/_internal/components/form/AddressAutocomplete/AddressAutocompleteField.js +2 -2
  69. package/dist/_internal/components/form/Autocomplete/Autocomplete.js +2 -2
  70. package/dist/_internal/components/form/Calendar/Calendar.hooks.js +2 -2
  71. package/dist/_internal/components/form/Calendar/Calendar.js +6 -6
  72. package/dist/_internal/components/form/Calendar/CalendarDayCell.js +2 -2
  73. package/dist/_internal/components/form/Calendar/CalendarMonth.js +3 -3
  74. package/dist/_internal/components/form/CategorySelect/CategoryPanel.js +5 -5
  75. package/dist/_internal/components/form/CategorySelect/CategoryPanelList.js +3 -3
  76. package/dist/_internal/components/form/CategorySelect/CategoryRows.js +2 -2
  77. package/dist/_internal/components/form/CategorySelect/CategorySelect.js +10 -10
  78. package/dist/_internal/components/form/Checkbox/Checkbox.js +2 -2
  79. package/dist/_internal/components/form/CodeEditor/CodeEditor.js +3 -3
  80. package/dist/_internal/components/form/Command/Command.js +1 -1
  81. package/dist/_internal/components/form/Command/Command.styles.js +1 -1
  82. package/dist/_internal/components/form/DateRangePicker/DateRangePicker.js +9 -9
  83. package/dist/_internal/components/form/Label/Label.js +1 -1
  84. package/dist/_internal/components/form/Label/Label.styles.js +1 -1
  85. package/dist/_internal/components/form/Menubar/Menubar.item.js +1 -1
  86. package/dist/_internal/components/form/Menubar/Menubar.js +3 -3
  87. package/dist/_internal/components/form/Menubar/Menubar.styles.js +1 -1
  88. package/dist/_internal/components/form/Menubar/Menubar.toolbar.js +1 -1
  89. package/dist/_internal/components/form/RichTextEditor/RichTextEditor.js +2 -2
  90. package/dist/_internal/components/form/Switch/Switch.js +4 -4
  91. package/dist/_internal/components/form/Switch/Switch.parts.js +3 -3
  92. package/dist/_internal/components/form/Switch/Switch.styles.js +2 -2
  93. package/dist/_internal/components/form/index.js +33 -33
  94. package/dist/_internal/components/form/total-form/Fields/CategoryField.js +11 -11
  95. package/dist/_internal/components/form/total-form/Fields/index.js +17 -17
  96. package/dist/_internal/components/index.js +114 -114
  97. package/dist/_internal/components/layout/Box/Box.js +1 -1
  98. package/dist/_internal/components/layout/Screen/Screen.base.js +8 -0
  99. package/dist/_internal/components/layout/Screen/Screen.base.js.map +1 -0
  100. package/dist/_internal/components/layout/Screen/Screen.js +38 -0
  101. package/dist/_internal/components/layout/Screen/Screen.js.map +1 -0
  102. package/dist/_internal/components/layout/Screen/Screen.types.js +1 -0
  103. package/dist/_internal/components/layout/Screen/Screen.types.js.map +1 -0
  104. package/dist/_internal/components/layout/SettingCard/SettingCard.js +6 -6
  105. package/dist/_internal/components/layout/SettingCard/SettingCard.parts.js +4 -4
  106. package/dist/_internal/components/layout/SettingCard/SettingCard.summary.js +5 -5
  107. package/dist/_internal/components/layout/SettingCard/SettingGrid.js +5 -5
  108. package/dist/_internal/components/layout/SettingCard/SettingGroup.js +11 -11
  109. package/dist/_internal/components/layout/SettingCard/SettingSwitch.js +10 -10
  110. package/dist/_internal/components/layout/SettingCard/SettingToggle.js +11 -11
  111. package/dist/_internal/components/layout/SettingsLayout/SettingsLayout.js +2 -2
  112. package/dist/_internal/components/layout/Skeleton/Skeleton.js +2 -2
  113. package/dist/_internal/components/layout/Stack/Stack.js +1 -1
  114. package/dist/_internal/components/layout/index.js +23 -23
  115. package/dist/_internal/components/navigation/AppHeader/AppHeader.details.js +8 -8
  116. package/dist/_internal/components/navigation/AppHeader/AppHeader.identity.js +1 -1
  117. package/dist/_internal/components/navigation/CommandPalette/CommandPalette.js +2 -2
  118. package/dist/_internal/components/navigation/SectionNav/SectionNav.bar.js +1 -1
  119. package/dist/_internal/components/navigation/SectionNav/SectionNav.js +2 -2
  120. package/dist/_internal/components/navigation/SectionNav/SectionNav.parts.js +1 -1
  121. package/dist/_internal/components/navigation/SectionNav/SectionNav.primary.js +1 -1
  122. package/dist/_internal/components/navigation/SectionNav/SectionNav.rail.js +1 -1
  123. package/dist/_internal/components/navigation/SectionNav/SectionNav.railCreate.js +1 -1
  124. package/dist/_internal/components/navigation/SectionNav/SectionNav.sheet.js +1 -1
  125. package/dist/_internal/components/navigation/SectionNav/__stories__/fixtures.js +1 -1
  126. package/dist/_internal/components/navigation/index.js +11 -11
  127. package/dist/_internal/components/utility/WorkflowStep/WorkflowStep.helpers.js +1 -1
  128. package/dist/_internal/components/utility/WorkflowStep/WorkflowStep.js +1 -1
  129. package/dist/_internal/components/utility/WorkflowStep/WorkflowStep.parts.js +1 -1
  130. package/dist/_internal/components/utility/WorkflowStep/WorkflowStepRow.js +1 -1
  131. package/dist/_internal/components/utility/index.js +1 -1
  132. package/dist/_internal/icons/Icon.js +3 -3
  133. package/dist/_internal/icons/paths.generated.js +1 -1
  134. package/dist/_internal/provider/UiProvider.js +1 -1
  135. package/dist/_internal/provider/mui-bridge.js +1 -1
  136. package/dist/_internal/provider/use-ui-theme.js +1 -1
  137. package/dist/_internal/tokens/surfaces.js +1 -1
  138. package/dist/_internal/user-avatar/user-avatar.js +5 -5
  139. package/dist/charts.js +12 -12
  140. package/dist/{chunk-KZHNJ3ZS.js → chunk-2DV64INT.js} +5 -5
  141. package/dist/{chunk-YV3WIBIO.js → chunk-2IKWHUXG.js} +2 -2
  142. package/dist/{chunk-EFLRNSE6.js → chunk-2W2MWEP2.js} +11 -11
  143. package/dist/{chunk-PLOLSGQY.js → chunk-35IEACIJ.js} +2 -2
  144. package/dist/{chunk-MMVAMUZY.js → chunk-3S44O3WI.js} +4 -4
  145. package/dist/{chunk-ANQRUO3L.js → chunk-3WIA25YQ.js} +10 -10
  146. package/dist/{chunk-KRREZNZF.js → chunk-44JLXXWQ.js} +2 -2
  147. package/dist/{chunk-EKKDZK4E.js → chunk-4JBS6NOT.js} +2 -2
  148. package/dist/{chunk-DQKMOGYZ.js → chunk-54PPITTH.js} +4 -4
  149. package/dist/{chunk-LX4GLIWE.js → chunk-573XC4HK.js} +3 -3
  150. package/dist/{chunk-N24K536I.js → chunk-5JWCNQSI.js} +4 -4
  151. package/dist/{chunk-XGNHRONE.js → chunk-5PN5MY2X.js} +4 -4
  152. package/dist/{chunk-WUVVJXUK.js → chunk-5XZEGI35.js} +3 -3
  153. package/dist/{chunk-ALREWFRX.js → chunk-6DGNMASB.js} +4 -4
  154. package/dist/{chunk-P6GIZZLJ.js → chunk-6E4XNOAC.js} +7 -7
  155. package/dist/{chunk-KEVPUBOE.js → chunk-6ZLP7BA7.js} +4 -1
  156. package/dist/chunk-6ZLP7BA7.js.map +1 -0
  157. package/dist/{chunk-5CFEXRQH.js → chunk-7M3DRP7Q.js} +8 -8
  158. package/dist/{chunk-CG5AWO24.js → chunk-7QTZJ2HY.js} +2 -2
  159. package/dist/{chunk-KRQWLYKF.js → chunk-A6EUQDRK.js} +2 -2
  160. package/dist/{chunk-AG3DY5TH.js → chunk-ADSA76T7.js} +2 -2
  161. package/dist/{chunk-T7DQ7RJU.js → chunk-AGXTIW3G.js} +2 -2
  162. package/dist/{chunk-HQIX7A5I.js → chunk-AL3Z24VG.js} +9 -9
  163. package/dist/{chunk-ZF4J3SRM.js → chunk-BQGWY577.js} +3 -3
  164. package/dist/{chunk-DYYQSC2V.js → chunk-CLC4VIOF.js} +2 -2
  165. package/dist/{chunk-Y52BXZO3.js → chunk-CZV6NVCA.js} +9 -9
  166. package/dist/{chunk-CUREVLBT.js → chunk-DSDZIBLQ.js} +3 -3
  167. package/dist/{chunk-KRLBT3IV.js → chunk-DUYPCBI2.js} +3 -3
  168. package/dist/{chunk-DOPD5J2Q.js → chunk-E2WNRYKA.js} +4 -4
  169. package/dist/{chunk-OUXJYKCL.js → chunk-ERTXRK6S.js} +7 -7
  170. package/dist/{chunk-N4BARJEQ.js → chunk-EW55ZS5W.js} +7 -7
  171. package/dist/{chunk-6PU3JYVY.js → chunk-F3AYISXT.js} +4 -4
  172. package/dist/{chunk-VEKTKCSB.js → chunk-FLJ3RIRP.js} +5 -5
  173. package/dist/{chunk-LXYV73TW.js → chunk-G5ORAVSP.js} +5 -5
  174. package/dist/{chunk-AKC5GRJF.js → chunk-G76BNXWE.js} +7 -7
  175. package/dist/{chunk-NPOQSACK.js → chunk-GDT235FP.js} +2 -2
  176. package/dist/{chunk-FTCCTQZB.js → chunk-GI24X7XA.js} +3 -3
  177. package/dist/{chunk-FQUIEXEY.js → chunk-GNBCSTXF.js} +4 -4
  178. package/dist/{chunk-JP32U64U.js → chunk-GWUJIO6Z.js} +2 -2
  179. package/dist/{chunk-NVXRV3PL.js → chunk-GYDUXL3D.js} +7 -7
  180. package/dist/{chunk-DKKINJHC.js → chunk-H4NS5MMP.js} +5 -5
  181. package/dist/{chunk-TSUXEWVX.js → chunk-HFBQCJNP.js} +2 -2
  182. package/dist/chunk-HG2YLNGJ.js +75 -0
  183. package/dist/chunk-HG2YLNGJ.js.map +1 -0
  184. package/dist/{chunk-4JZ6XDVA.js → chunk-I6ESCBY3.js} +2 -2
  185. package/dist/{chunk-2ZRZTGWP.js → chunk-ISW5K72V.js} +5 -5
  186. package/dist/{chunk-O3LX26CX.js → chunk-JC244QQF.js} +2 -2
  187. package/dist/{chunk-JF643Q7W.js → chunk-JF5LQOGB.js} +5 -5
  188. package/dist/{chunk-NT73ZLBO.js → chunk-JL77BSOL.js} +5 -5
  189. package/dist/{chunk-HNWNIBCU.js → chunk-JWXGZ4VM.js} +3 -3
  190. package/dist/{chunk-LL5KGYLG.js → chunk-KEKOPD43.js} +7 -7
  191. package/dist/{chunk-CFDWKQZT.js → chunk-KILA7LCC.js} +4 -4
  192. package/dist/{chunk-XTWOHAOT.js → chunk-KKWCAZM6.js} +5 -5
  193. package/dist/{chunk-XLRBJEYA.js → chunk-KMW7GGX6.js} +4 -4
  194. package/dist/{chunk-VCGNH23W.js → chunk-LJKWWXZD.js} +8 -8
  195. package/dist/{chunk-FXZUVZON.js → chunk-LWZ2K225.js} +6 -6
  196. package/dist/{chunk-M24EG6JC.js → chunk-MKAA3YIJ.js} +4 -4
  197. package/dist/{chunk-VSKFRS32.js → chunk-MLCY7TSO.js} +2 -2
  198. package/dist/{chunk-AZ7YT2R4.js → chunk-MLLWGHIX.js} +2 -2
  199. package/dist/{chunk-QGH2FGDD.js → chunk-MQSI57HY.js} +16 -16
  200. package/dist/{chunk-TRD26PNE.js → chunk-NXMCTYBN.js} +7 -7
  201. package/dist/{chunk-KWF7C6IZ.js → chunk-NZZ2BTIK.js} +2 -2
  202. package/dist/{chunk-XDITTQIR.js → chunk-OBKUG7BW.js} +5 -5
  203. package/dist/{chunk-SSDYEOU4.js → chunk-OBMPE6PW.js} +5 -5
  204. package/dist/{chunk-SNFULDT7.js → chunk-PIIPEXRM.js} +2 -2
  205. package/dist/{chunk-M5GJYVDM.js → chunk-Q5G2EC24.js} +8 -8
  206. package/dist/chunk-QYCKZWBU.js +7 -0
  207. package/dist/chunk-QYCKZWBU.js.map +1 -0
  208. package/dist/{chunk-GOWBYHYW.js → chunk-R6SBP5M5.js} +4 -4
  209. package/dist/{chunk-AYRMZC5F.js → chunk-RBHBJDOZ.js} +4 -4
  210. package/dist/{chunk-RPKUZDRY.js → chunk-SE5WHKCB.js} +6 -6
  211. package/dist/{chunk-YUPUJZ2X.js → chunk-SIWXMNQT.js} +4 -4
  212. package/dist/{chunk-U2TC4DID.js → chunk-SJTQW6JK.js} +2 -2
  213. package/dist/{chunk-NMXTZSDE.js → chunk-T2S7NIUG.js} +3 -3
  214. package/dist/{chunk-V7APSQB4.js → chunk-TWWA7QPA.js} +7 -7
  215. package/dist/{chunk-RHCRHZ6D.js → chunk-TZ23DNKY.js} +9 -3
  216. package/dist/{chunk-RHCRHZ6D.js.map → chunk-TZ23DNKY.js.map} +1 -1
  217. package/dist/{chunk-YXE4FISF.js → chunk-ULTQIVF3.js} +5 -5
  218. package/dist/{chunk-PALISWDH.js → chunk-UNJMMLO7.js} +8 -8
  219. package/dist/{chunk-XBXJKYUN.js → chunk-UPAFHAF4.js} +4 -4
  220. package/dist/{chunk-OKBEWR6L.js → chunk-WSUHTLOA.js} +6 -6
  221. package/dist/{chunk-GMH4TYPP.js → chunk-XM2YEXGO.js} +9 -9
  222. package/dist/{chunk-R53ZOW4B.js → chunk-XP522FFM.js} +3 -3
  223. package/dist/{chunk-NRHQJEHB.js → chunk-XTHDWW4M.js} +5 -5
  224. package/dist/{chunk-ZI3AJEZS.js → chunk-Y2HCYT5W.js} +2 -2
  225. package/dist/{chunk-5GXLWNQ7.js → chunk-Y4T33THY.js} +4 -4
  226. package/dist/{chunk-TK5LNXMB.js → chunk-YCYGUTQX.js} +9 -9
  227. package/dist/{chunk-ANVIO75O.js → chunk-YRXFJIR5.js} +4 -4
  228. package/dist/{chunk-5WJFCQFN.js → chunk-YXIVQFNW.js} +4 -4
  229. package/dist/{chunk-J6A4ZQWD.js → chunk-ZJC5COCE.js} +4 -4
  230. package/dist/{chunk-WC3W36AM.js → chunk-ZOUWHGV3.js} +4 -4
  231. package/dist/data-display/AsyncStateContainer.js +4 -4
  232. package/dist/data-display/Avatar.js +4 -4
  233. package/dist/data-display/Badge.js +1 -1
  234. package/dist/data-display/CardKit.js +7 -7
  235. package/dist/data-display/Carousel.js +3 -3
  236. package/dist/data-display/Chart.js +12 -12
  237. package/dist/data-display/DataGrid.js +2 -2
  238. package/dist/data-display/DataViews.js +80 -80
  239. package/dist/data-display/FleetMap.js +16 -16
  240. package/dist/data-display/LazyImage.js +3 -3
  241. package/dist/data-display/Lightbox.js +5 -5
  242. package/dist/data-display/LoadingState.js +3 -3
  243. package/dist/data-display/MapPreview.js +8 -8
  244. package/dist/data-display/Progress.js +2 -2
  245. package/dist/data-display/Sheet.js +5 -5
  246. package/dist/data-display/StatCard.js +3 -3
  247. package/dist/data-display/Table.js +3 -3
  248. package/dist/en-US.js +14 -14
  249. package/dist/feedback/Dialog.js +3 -3
  250. package/dist/feedback/StackedModal.js +6 -6
  251. package/dist/form/AddressAutocomplete.js +8 -8
  252. package/dist/form/Autocomplete.js +2 -2
  253. package/dist/form/Calendar.js +6 -6
  254. package/dist/form/CategorySelect.js +10 -10
  255. package/dist/form/Checkbox.js +2 -2
  256. package/dist/form/CodeEditor.js +3 -3
  257. package/dist/form/Command.js +1 -1
  258. package/dist/form/DateRangePicker.js +9 -9
  259. package/dist/form/Label.js +1 -1
  260. package/dist/form/Menubar.js +3 -3
  261. package/dist/form/RichTextEditor.js +2 -2
  262. package/dist/form/Switch.js +4 -4
  263. package/dist/form/total-form.js +24 -24
  264. package/dist/icons.js +3 -3
  265. package/dist/layout/Box.js +1 -1
  266. package/dist/layout/ContentToolbar.js +7 -7
  267. package/dist/layout/Screen.js +38 -0
  268. package/dist/layout/Screen.js.map +1 -0
  269. package/dist/layout/SettingCard.js +14 -14
  270. package/dist/layout/SettingsLayout.js +2 -2
  271. package/dist/layout/Skeleton.js +2 -2
  272. package/dist/layout/Stack.js +1 -1
  273. package/dist/locales.js +17 -17
  274. package/dist/native/chunks/chunk-AAY5TJ6W.js +27 -0
  275. package/dist/native/chunks/chunk-AAY5TJ6W.js.map +1 -0
  276. package/dist/native/chunks/{chunk-F4NDP3G5.js → chunk-AOXH3Z2S.js} +2 -21
  277. package/dist/native/chunks/chunk-AOXH3Z2S.js.map +1 -0
  278. package/dist/native/chunks/{chunk-4JAP6O2Y.js → chunk-EZO2KJF7.js} +4 -1
  279. package/dist/native/chunks/chunk-EZO2KJF7.js.map +1 -0
  280. package/dist/native/chunks/{chunk-RJOHCM2O.js → chunk-QGTZGL7P.js} +2 -2
  281. package/dist/native/data-display/Alert.js +1 -1
  282. package/dist/native/data-display/Avatar.js +1 -1
  283. package/dist/native/data-display/Badge.js +1 -1
  284. package/dist/native/data-display/Chip.js +1 -1
  285. package/dist/native/data-display/EmptyState.js +2 -2
  286. package/dist/native/data-display/ErrorState.js +1 -1
  287. package/dist/native/data-display/FleetMap.js +2 -2
  288. package/dist/native/feedback/Dialog.js +1 -1
  289. package/dist/native/form/Checkbox.js +1 -1
  290. package/dist/native/form/Select.js +1 -1
  291. package/dist/native/icons.js +1 -1
  292. package/dist/native/layout/Box.js +4 -2
  293. package/dist/native/layout/Screen.js +78 -0
  294. package/dist/native/layout/Screen.js.map +1 -0
  295. package/dist/native/layout/Stack.js +2 -1
  296. package/dist/native/layout/Stack.js.map +1 -1
  297. package/dist/navigation/AppHeader.js +8 -8
  298. package/dist/navigation/CommandPalette.js +2 -2
  299. package/dist/navigation/SectionNav.js +2 -2
  300. package/dist/provider.js +1 -1
  301. package/dist/pt-BR.js +5 -5
  302. package/dist/tokens.js +1 -1
  303. package/dist/types/components/layout/Screen/Screen.base.d.ts +16 -0
  304. package/dist/types/components/layout/Screen/Screen.base.d.ts.map +1 -0
  305. package/dist/types/components/layout/Screen/Screen.d.ts +7 -0
  306. package/dist/types/components/layout/Screen/Screen.d.ts.map +1 -0
  307. package/dist/types/components/layout/Screen/Screen.types.d.ts +9 -0
  308. package/dist/types/components/layout/Screen/Screen.types.d.ts.map +1 -0
  309. package/dist/types/components/layout/Screen/index.d.ts +3 -0
  310. package/dist/types/components/layout/Screen/index.d.ts.map +1 -0
  311. package/dist/types/icons/paths.generated.d.ts +3 -0
  312. package/dist/types/icons/paths.generated.d.ts.map +1 -1
  313. package/dist/types/tokens/surfaces.d.ts +4 -0
  314. package/dist/types/tokens/surfaces.d.ts.map +1 -1
  315. package/dist/types-native/components/layout/Screen/Screen.base.d.ts +16 -0
  316. package/dist/types-native/components/layout/Screen/Screen.base.d.ts.map +1 -0
  317. package/dist/types-native/components/layout/Screen/Screen.native.d.ts +7 -0
  318. package/dist/types-native/components/layout/Screen/Screen.native.d.ts.map +1 -0
  319. package/dist/types-native/components/layout/Screen/Screen.types.native.d.ts +9 -0
  320. package/dist/types-native/components/layout/Screen/Screen.types.native.d.ts.map +1 -0
  321. package/dist/types-native/components/layout/Screen/index.native.d.ts +3 -0
  322. package/dist/types-native/components/layout/Screen/index.native.d.ts.map +1 -0
  323. package/dist/types-native/icons/paths.generated.d.ts +3 -0
  324. package/dist/types-native/icons/paths.generated.d.ts.map +1 -1
  325. package/dist/user-avatar.js +5 -5
  326. package/dist/utility/WorkflowStep.js +1 -1
  327. package/package.json +16 -3
  328. package/src/components/layout/Screen/NATIVE-NOTES.md +2 -0
  329. package/src/components/layout/Screen/Screen.base.ts +20 -0
  330. package/src/components/layout/Screen/Screen.md +71 -0
  331. package/src/components/layout/Screen/Screen.native.tsx +56 -0
  332. package/src/components/layout/Screen/Screen.tsx +41 -0
  333. package/src/components/layout/Screen/Screen.types.native.ts +13 -0
  334. package/src/components/layout/Screen/Screen.types.ts +10 -0
  335. package/src/components/layout/Screen/index.native.ts +2 -0
  336. package/src/components/layout/Screen/index.ts +2 -0
  337. package/src/components/layout/Screen/tests.md +64 -0
  338. package/src/components/layout/Screen/track.md +26 -0
  339. package/src/icons/glyphs.json +3 -0
  340. package/src/icons/paths.generated.ts +3 -0
  341. package/src/tokens/surfaces.ts +12 -2
  342. package/dist/chunk-KEVPUBOE.js.map +0 -1
  343. package/dist/native/chunks/chunk-4JAP6O2Y.js.map +0 -1
  344. package/dist/native/chunks/chunk-F4NDP3G5.js.map +0 -1
  345. /package/dist/{chunk-KZHNJ3ZS.js.map → chunk-2DV64INT.js.map} +0 -0
  346. /package/dist/{chunk-YV3WIBIO.js.map → chunk-2IKWHUXG.js.map} +0 -0
  347. /package/dist/{chunk-EFLRNSE6.js.map → chunk-2W2MWEP2.js.map} +0 -0
  348. /package/dist/{chunk-PLOLSGQY.js.map → chunk-35IEACIJ.js.map} +0 -0
  349. /package/dist/{chunk-MMVAMUZY.js.map → chunk-3S44O3WI.js.map} +0 -0
  350. /package/dist/{chunk-ANQRUO3L.js.map → chunk-3WIA25YQ.js.map} +0 -0
  351. /package/dist/{chunk-KRREZNZF.js.map → chunk-44JLXXWQ.js.map} +0 -0
  352. /package/dist/{chunk-EKKDZK4E.js.map → chunk-4JBS6NOT.js.map} +0 -0
  353. /package/dist/{chunk-DQKMOGYZ.js.map → chunk-54PPITTH.js.map} +0 -0
  354. /package/dist/{chunk-LX4GLIWE.js.map → chunk-573XC4HK.js.map} +0 -0
  355. /package/dist/{chunk-N24K536I.js.map → chunk-5JWCNQSI.js.map} +0 -0
  356. /package/dist/{chunk-XGNHRONE.js.map → chunk-5PN5MY2X.js.map} +0 -0
  357. /package/dist/{chunk-WUVVJXUK.js.map → chunk-5XZEGI35.js.map} +0 -0
  358. /package/dist/{chunk-ALREWFRX.js.map → chunk-6DGNMASB.js.map} +0 -0
  359. /package/dist/{chunk-P6GIZZLJ.js.map → chunk-6E4XNOAC.js.map} +0 -0
  360. /package/dist/{chunk-5CFEXRQH.js.map → chunk-7M3DRP7Q.js.map} +0 -0
  361. /package/dist/{chunk-CG5AWO24.js.map → chunk-7QTZJ2HY.js.map} +0 -0
  362. /package/dist/{chunk-KRQWLYKF.js.map → chunk-A6EUQDRK.js.map} +0 -0
  363. /package/dist/{chunk-AG3DY5TH.js.map → chunk-ADSA76T7.js.map} +0 -0
  364. /package/dist/{chunk-T7DQ7RJU.js.map → chunk-AGXTIW3G.js.map} +0 -0
  365. /package/dist/{chunk-HQIX7A5I.js.map → chunk-AL3Z24VG.js.map} +0 -0
  366. /package/dist/{chunk-ZF4J3SRM.js.map → chunk-BQGWY577.js.map} +0 -0
  367. /package/dist/{chunk-DYYQSC2V.js.map → chunk-CLC4VIOF.js.map} +0 -0
  368. /package/dist/{chunk-Y52BXZO3.js.map → chunk-CZV6NVCA.js.map} +0 -0
  369. /package/dist/{chunk-CUREVLBT.js.map → chunk-DSDZIBLQ.js.map} +0 -0
  370. /package/dist/{chunk-KRLBT3IV.js.map → chunk-DUYPCBI2.js.map} +0 -0
  371. /package/dist/{chunk-DOPD5J2Q.js.map → chunk-E2WNRYKA.js.map} +0 -0
  372. /package/dist/{chunk-OUXJYKCL.js.map → chunk-ERTXRK6S.js.map} +0 -0
  373. /package/dist/{chunk-N4BARJEQ.js.map → chunk-EW55ZS5W.js.map} +0 -0
  374. /package/dist/{chunk-6PU3JYVY.js.map → chunk-F3AYISXT.js.map} +0 -0
  375. /package/dist/{chunk-VEKTKCSB.js.map → chunk-FLJ3RIRP.js.map} +0 -0
  376. /package/dist/{chunk-LXYV73TW.js.map → chunk-G5ORAVSP.js.map} +0 -0
  377. /package/dist/{chunk-AKC5GRJF.js.map → chunk-G76BNXWE.js.map} +0 -0
  378. /package/dist/{chunk-NPOQSACK.js.map → chunk-GDT235FP.js.map} +0 -0
  379. /package/dist/{chunk-FTCCTQZB.js.map → chunk-GI24X7XA.js.map} +0 -0
  380. /package/dist/{chunk-FQUIEXEY.js.map → chunk-GNBCSTXF.js.map} +0 -0
  381. /package/dist/{chunk-JP32U64U.js.map → chunk-GWUJIO6Z.js.map} +0 -0
  382. /package/dist/{chunk-NVXRV3PL.js.map → chunk-GYDUXL3D.js.map} +0 -0
  383. /package/dist/{chunk-DKKINJHC.js.map → chunk-H4NS5MMP.js.map} +0 -0
  384. /package/dist/{chunk-TSUXEWVX.js.map → chunk-HFBQCJNP.js.map} +0 -0
  385. /package/dist/{chunk-4JZ6XDVA.js.map → chunk-I6ESCBY3.js.map} +0 -0
  386. /package/dist/{chunk-2ZRZTGWP.js.map → chunk-ISW5K72V.js.map} +0 -0
  387. /package/dist/{chunk-O3LX26CX.js.map → chunk-JC244QQF.js.map} +0 -0
  388. /package/dist/{chunk-JF643Q7W.js.map → chunk-JF5LQOGB.js.map} +0 -0
  389. /package/dist/{chunk-NT73ZLBO.js.map → chunk-JL77BSOL.js.map} +0 -0
  390. /package/dist/{chunk-HNWNIBCU.js.map → chunk-JWXGZ4VM.js.map} +0 -0
  391. /package/dist/{chunk-LL5KGYLG.js.map → chunk-KEKOPD43.js.map} +0 -0
  392. /package/dist/{chunk-CFDWKQZT.js.map → chunk-KILA7LCC.js.map} +0 -0
  393. /package/dist/{chunk-XTWOHAOT.js.map → chunk-KKWCAZM6.js.map} +0 -0
  394. /package/dist/{chunk-XLRBJEYA.js.map → chunk-KMW7GGX6.js.map} +0 -0
  395. /package/dist/{chunk-VCGNH23W.js.map → chunk-LJKWWXZD.js.map} +0 -0
  396. /package/dist/{chunk-FXZUVZON.js.map → chunk-LWZ2K225.js.map} +0 -0
  397. /package/dist/{chunk-M24EG6JC.js.map → chunk-MKAA3YIJ.js.map} +0 -0
  398. /package/dist/{chunk-VSKFRS32.js.map → chunk-MLCY7TSO.js.map} +0 -0
  399. /package/dist/{chunk-AZ7YT2R4.js.map → chunk-MLLWGHIX.js.map} +0 -0
  400. /package/dist/{chunk-QGH2FGDD.js.map → chunk-MQSI57HY.js.map} +0 -0
  401. /package/dist/{chunk-TRD26PNE.js.map → chunk-NXMCTYBN.js.map} +0 -0
  402. /package/dist/{chunk-KWF7C6IZ.js.map → chunk-NZZ2BTIK.js.map} +0 -0
  403. /package/dist/{chunk-XDITTQIR.js.map → chunk-OBKUG7BW.js.map} +0 -0
  404. /package/dist/{chunk-SSDYEOU4.js.map → chunk-OBMPE6PW.js.map} +0 -0
  405. /package/dist/{chunk-SNFULDT7.js.map → chunk-PIIPEXRM.js.map} +0 -0
  406. /package/dist/{chunk-M5GJYVDM.js.map → chunk-Q5G2EC24.js.map} +0 -0
  407. /package/dist/{chunk-GOWBYHYW.js.map → chunk-R6SBP5M5.js.map} +0 -0
  408. /package/dist/{chunk-AYRMZC5F.js.map → chunk-RBHBJDOZ.js.map} +0 -0
  409. /package/dist/{chunk-RPKUZDRY.js.map → chunk-SE5WHKCB.js.map} +0 -0
  410. /package/dist/{chunk-YUPUJZ2X.js.map → chunk-SIWXMNQT.js.map} +0 -0
  411. /package/dist/{chunk-U2TC4DID.js.map → chunk-SJTQW6JK.js.map} +0 -0
  412. /package/dist/{chunk-NMXTZSDE.js.map → chunk-T2S7NIUG.js.map} +0 -0
  413. /package/dist/{chunk-V7APSQB4.js.map → chunk-TWWA7QPA.js.map} +0 -0
  414. /package/dist/{chunk-YXE4FISF.js.map → chunk-ULTQIVF3.js.map} +0 -0
  415. /package/dist/{chunk-PALISWDH.js.map → chunk-UNJMMLO7.js.map} +0 -0
  416. /package/dist/{chunk-XBXJKYUN.js.map → chunk-UPAFHAF4.js.map} +0 -0
  417. /package/dist/{chunk-OKBEWR6L.js.map → chunk-WSUHTLOA.js.map} +0 -0
  418. /package/dist/{chunk-GMH4TYPP.js.map → chunk-XM2YEXGO.js.map} +0 -0
  419. /package/dist/{chunk-R53ZOW4B.js.map → chunk-XP522FFM.js.map} +0 -0
  420. /package/dist/{chunk-NRHQJEHB.js.map → chunk-XTHDWW4M.js.map} +0 -0
  421. /package/dist/{chunk-ZI3AJEZS.js.map → chunk-Y2HCYT5W.js.map} +0 -0
  422. /package/dist/{chunk-5GXLWNQ7.js.map → chunk-Y4T33THY.js.map} +0 -0
  423. /package/dist/{chunk-TK5LNXMB.js.map → chunk-YCYGUTQX.js.map} +0 -0
  424. /package/dist/{chunk-ANVIO75O.js.map → chunk-YRXFJIR5.js.map} +0 -0
  425. /package/dist/{chunk-5WJFCQFN.js.map → chunk-YXIVQFNW.js.map} +0 -0
  426. /package/dist/{chunk-J6A4ZQWD.js.map → chunk-ZJC5COCE.js.map} +0 -0
  427. /package/dist/{chunk-WC3W36AM.js.map → chunk-ZOUWHGV3.js.map} +0 -0
  428. /package/dist/native/chunks/{chunk-RJOHCM2O.js.map → chunk-QGTZGL7P.js.map} +0 -0
@@ -1,13 +1,13 @@
1
1
  import {
2
2
  UserAvatar,
3
3
  UserMenu
4
- } from "./chunk-4JZ6XDVA.js";
4
+ } from "./chunk-I6ESCBY3.js";
5
5
  import "./chunk-UDQSIRAP.js";
6
- import "./chunk-AKC5GRJF.js";
7
- import "./chunk-NVXRV3PL.js";
8
- import "./chunk-MTEQEPNY.js";
9
- import "./chunk-6ZZGK5DT.js";
6
+ import "./chunk-G76BNXWE.js";
10
7
  import "./chunk-3ZVUNSFF.js";
8
+ import "./chunk-GYDUXL3D.js";
9
+ import "./chunk-6ZZGK5DT.js";
10
+ import "./chunk-MTEQEPNY.js";
11
11
  import "./chunk-VUHLNYAE.js";
12
12
  import "./chunk-2GSIEDGN.js";
13
13
  import "./chunk-J2QIICWP.js";
@@ -10,7 +10,7 @@ import "../chunk-BRHRK7BK.js";
10
10
  import "../chunk-25MSGLNU.js";
11
11
  import "../chunk-GAXHYRX6.js";
12
12
  import "../chunk-NP6SHLQ3.js";
13
- import "../chunk-RHCRHZ6D.js";
13
+ import "../chunk-TZ23DNKY.js";
14
14
  import "../chunk-7ZPUN7TV.js";
15
15
  import "../chunk-PT6TCWIW.js";
16
16
  import "../chunk-RGVNXES5.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@12-apps/ui",
3
- "version": "6.55.0",
3
+ "version": "6.56.0",
4
4
  "license": "MIT",
5
5
  "packageManager": "pnpm@10.34.5",
6
6
  "type": "module",
@@ -707,6 +707,14 @@
707
707
  "./locales": {
708
708
  "types": "./dist/types/locales.d.ts",
709
709
  "default": "./dist/locales.js"
710
+ },
711
+ "./layout/Screen": {
712
+ "react-native": {
713
+ "types": "./dist/types-native/components/layout/Screen/index.native.d.ts",
714
+ "default": "./dist/native/layout/Screen.js"
715
+ },
716
+ "types": "./dist/types/components/layout/Screen/index.d.ts",
717
+ "default": "./dist/layout/Screen.js"
710
718
  }
711
719
  },
712
720
  "typesVersions": {
@@ -779,7 +787,8 @@
779
787
  "react": "^18.0.0 || ^19.0.0",
780
788
  "react-dom": "^18.0.0 || ^19.0.0",
781
789
  "react-native": ">=0.79.0",
782
- "react-native-svg": ">=15.0.0"
790
+ "react-native-svg": ">=15.0.0",
791
+ "react-native-safe-area-context": ">=5.0.0"
783
792
  },
784
793
  "dependencies": {
785
794
  "@12-apps/forms-core": "^1.21.0",
@@ -834,7 +843,8 @@
834
843
  "typescript": "^5.8.2",
835
844
  "vite": "^6.4.1",
836
845
  "vite-plugin-istanbul": "^7.2.1",
837
- "vitest": "^3.2.4"
846
+ "vitest": "^3.2.4",
847
+ "react-native-safe-area-context": "5.7.0"
838
848
  },
839
849
  "publishConfig": {
840
850
  "registry": "https://registry.npmjs.org",
@@ -868,6 +878,9 @@
868
878
  },
869
879
  "react-native-svg": {
870
880
  "optional": true
881
+ },
882
+ "react-native-safe-area-context": {
883
+ "optional": true
871
884
  }
872
885
  }
873
886
  }
@@ -0,0 +1,2 @@
1
+ - Keyboard geometry uses React Native KeyboardAvoidingView; react-native-web unit/story lanes verify its wiring, not a real Android/iOS keyboard. Device keyboard/rotation QA remains explicit.
2
+ - Web safe-area values come from CSS environment variables; native values come from the existing navigator or an internal safe-area provider. Browser keyboard resizing remains browser-managed.
@@ -0,0 +1,20 @@
1
+ import type { BoxBaseProps } from '../Box/Box.base';
2
+
3
+ /** Physical screen edges, independent of a native dependency. */
4
+ export type ScreenEdge = 'top' | 'right' | 'bottom' | 'left';
5
+ export const SCREEN_EDGES: readonly ScreenEdge[] = ['top', 'right', 'bottom', 'left'];
6
+
7
+ /** Padding and gap apply to the content, inside the selected safe-area edges. */
8
+ export interface ScreenBaseProps extends Pick<
9
+ BoxBaseProps,
10
+ 'children' | 'p' | 'px' | 'py' | 'pt' | 'pr' | 'pb' | 'pl' | 'gap' | 'bg' | 'testID' | 'dataTestId'
11
+ > {
12
+ /** Vertical scrolling; turn off when a child owns scrolling. Default true. */
13
+ scroll?: boolean;
14
+ /** Omit bottom when a navigator's tab bar already owns that inset. */
15
+ safeAreaEdges?: readonly ScreenEdge[];
16
+ /** Lift the native viewport above the soft keyboard. Default true. */
17
+ keyboardAvoiding?: boolean;
18
+ /** Native distance from the window top to the screen's parent, in dp. */
19
+ keyboardVerticalOffset?: number;
20
+ }
@@ -0,0 +1,71 @@
1
+ # Screen
2
+
3
+ `@12-apps/ui/layout/Screen` is a bounded page viewport on web, Android and iOS.
4
+ It combines safe-area edges, vertical scrolling and native keyboard avoidance.
5
+ It renders existing Box/Stack/form components without consumer imports from a
6
+ visual platform library. It is for ordinary screens, not virtualized lists.
7
+
8
+ ```tsx
9
+ import { Screen } from '@12-apps/ui/layout/Screen';
10
+ import { Text } from '@12-apps/ui/typography/Text';
11
+
12
+ <Screen p={2} gap={2} safeAreaEdges={['top', 'left', 'right']}>
13
+ <Text>Content above a navigator-owned bottom tab bar</Text>
14
+ </Screen>
15
+ ```
16
+
17
+ ## Props
18
+
19
+ - `children`: screen content
20
+ - `scroll` (true): a vertical scrolling viewport; use false if a child owns scrolling
21
+ - `safeAreaEdges` (all four): physical edges; use an empty array when an ancestor
22
+ already owns every inset. Exclude bottom when a tab bar owns that edge
23
+ - `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl`, `gap`: content spacing in theme units,
24
+ inside the safe area; side overrides axis, axis overrides shorthand
25
+ - `bg` (`default`): the same surface/palette role as Box
26
+ - `keyboardAvoiding` (true): native keyboard lift; disable if a parent owns it
27
+ - `keyboardVerticalOffset` (0): native distance from the window top to the
28
+ screen's parent, in dp; set for a non-overlay navigation header
29
+ - `testID` / `dataTestId`: outer screen id; scroll viewport also has `<id>-viewport`
30
+ - Native: View accessibility props, `style`, `contentContainerStyle`,
31
+ `scrollViewProps` for scroll callbacks and indicators
32
+ - Web: div accessibility props, `sx`, `contentSx`, `style`
33
+ - Ref: native outer View / web outer div
34
+
35
+ ## Native setup
36
+
37
+ Install the optional peer `react-native-safe-area-context` (5+) using the version
38
+ supported by your Expo/RN app. A web-only consumer does not need this peer. Screen
39
+ reuses the navigator's safe-area context. Without one it creates a provider
40
+ outside the scroll viewport. Do not wrap Screen in another safe-area view;
41
+ select the edges the screen actually owns instead.
42
+
43
+ The safe-area view wraps React Native's KeyboardAvoidingView, which uses padding
44
+ on iOS and height on Android. Its measured viewport already excludes the bottom
45
+ safe area, so the home-indicator inset is not added again above the keyboard.
46
+ ScrollView automatic keyboard and content insets are off so those owners do not
47
+ also apply the same lift/insets. Handled child taps remain usable with the
48
+ keyboard open; dragging dismisses it. `scrollViewProps` can change tap/dismiss
49
+ policy, but cannot override the viewport geometry or automatic inset ownership.
50
+
51
+ ## Layout and accessibility
52
+
53
+ The parent must give Screen a bounded height (a navigator does this). On the web,
54
+ the ancestor chain must carry a definite height/flex size; Screen grows within it.
55
+ Content has a minimum viewport height, so short screens fill the available area
56
+ and long screens scroll. No app-specific padding, colors, header or footer are
57
+ invented. Use a meaningful accessibility label where the screen needs one;
58
+ children retain their own focus and accessibility semantics.
59
+
60
+ The web uses CSS `env(safe-area-inset-*)`; set viewport-fit=cover when deploying
61
+ edge-to-edge. Browser keyboard/visual-viewport behavior belongs to the browser;
62
+ the native keyboard props are accepted but not forwarded to the DOM.
63
+
64
+ ## Verification boundary
65
+
66
+ Shared Storybook tests prove bounded scrolling and text entry on both browser
67
+ renderers. Native unit tests exercise safe-area/keyboard/scroll ownership and
68
+ rerenders, but react-native-web does not simulate a device keyboard. Device QA
69
+ must cover both OSes, a notched screen, bottom tabs, keyboard show/hide/resize,
70
+ last-field reachability, rotation and Android back dismissal before claiming
71
+ that those device behaviors have been observed.
@@ -0,0 +1,56 @@
1
+ import * as React from 'react';
2
+ import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native';
3
+ import { SafeAreaInsetsContext, SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
4
+
5
+ import { SCREEN_EDGES } from './Screen.base';
6
+ import type { ScreenProps } from './Screen.types.native';
7
+ import { resolveBoxLayout, splitBoxProps } from '../Box/box-layout';
8
+ import { resolveTestId } from '../../../platform/test-id';
9
+ import { useUiTheme } from '../../../provider/use-ui-theme.native';
10
+
11
+ const styles = StyleSheet.create({ fill: { flex: 1 }, content: { flexGrow: 1 } });
12
+
13
+ function keyboardBehavior(enabled: boolean): 'padding' | 'height' | undefined {
14
+ if (!enabled) return undefined;
15
+ return Platform.OS === 'ios' ? 'padding' : 'height';
16
+ }
17
+
18
+ /** Reuse a navigator's context, or own one outside the scrolling view. */
19
+ function ScreenBoundary({ children }: { children: React.ReactNode }): React.JSX.Element {
20
+ const insets = React.useContext(SafeAreaInsetsContext);
21
+ return insets === null
22
+ ? <SafeAreaProvider style={styles.fill}>{children}</SafeAreaProvider>
23
+ : <>{children}</>;
24
+ }
25
+
26
+ export const Screen = React.forwardRef<View, ScreenProps>(({
27
+ children, scroll = true, safeAreaEdges = SCREEN_EDGES,
28
+ keyboardAvoiding = true, keyboardVerticalOffset = 0, bg = 'default',
29
+ style, contentContainerStyle, scrollViewProps, ...props
30
+ }, ref) => {
31
+ const theme = useUiTheme();
32
+ const { layout, rest } = splitBoxProps(props);
33
+ const testID = resolveTestId(layout);
34
+ const contentStyle = [styles.content, resolveBoxLayout({ ...layout, direction: 'column' }, theme), contentContainerStyle];
35
+ return (
36
+ <ScreenBoundary>
37
+ <View ref={ref} testID={testID} {...rest} style={[styles.fill, resolveBoxLayout({ bg }, theme), style]}>
38
+ <SafeAreaView edges={safeAreaEdges} style={styles.fill}>
39
+ <KeyboardAvoidingView style={styles.fill} enabled={keyboardAvoiding}
40
+ behavior={keyboardBehavior(keyboardAvoiding)} keyboardVerticalOffset={keyboardVerticalOffset}>
41
+ {scroll ? (
42
+ <ScrollView keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag" {...scrollViewProps}
43
+ testID={scrollViewProps?.testID ?? (testID ? `${testID}-viewport` : undefined)}
44
+ style={styles.fill} contentContainerStyle={contentStyle}
45
+ horizontal={false} automaticallyAdjustKeyboardInsets={false}
46
+ automaticallyAdjustContentInsets={false} contentInsetAdjustmentBehavior="never">
47
+ {children}
48
+ </ScrollView>
49
+ ) : <View style={[styles.fill, contentStyle]}>{children}</View>}
50
+ </KeyboardAvoidingView>
51
+ </SafeAreaView>
52
+ </View>
53
+ </ScreenBoundary>
54
+ );
55
+ });
56
+ Screen.displayName = 'Screen';
@@ -0,0 +1,41 @@
1
+ import MuiBox from '@mui/material/Box/index.js';
2
+ import * as React from 'react';
3
+
4
+ import { SCREEN_EDGES } from './Screen.base';
5
+ import type { ScreenProps } from './Screen.types';
6
+ import { Box } from '../Box/Box';
7
+ import { splitBoxProps } from '../Box/box-layout';
8
+ import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
9
+
10
+ function sxEntries(sx: ScreenProps['sx']) {
11
+ if (sx === undefined) return [];
12
+ return Array.isArray(sx) ? sx : [sx];
13
+ }
14
+
15
+ /** A bounded page viewport; browser keyboards remain the browser's responsibility. */
16
+ export const Screen = React.forwardRef<HTMLDivElement, ScreenProps>(({
17
+ children, scroll = true, safeAreaEdges = SCREEN_EDGES,
18
+ keyboardAvoiding: _keyboardAvoiding = true, keyboardVerticalOffset: _keyboardVerticalOffset = 0,
19
+ bg = 'default', sx, contentSx, ...props
20
+ }, ref) => {
21
+ const { layout, rest } = splitBoxProps(props);
22
+ const testID = resolveTestId(layout);
23
+ const safeArea = Object.fromEntries(SCREEN_EDGES.map((edge) => [
24
+ `padding${edge[0]!.toUpperCase()}${edge.slice(1)}`,
25
+ safeAreaEdges.includes(edge) ? `env(safe-area-inset-${edge}, 0px)` : 0,
26
+ ]));
27
+ return (
28
+ <Box ref={ref} bg={bg} dataTestId={testID} {...rest}
29
+ sx={[{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, minWidth: 0, overflow: 'hidden', ...safeArea },
30
+ ...sxEntries(sx)]}>
31
+ <MuiBox data-testid={testID ? `${testID}-viewport` : undefined}
32
+ sx={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, overflowY: scroll ? 'auto' : 'hidden' }}>
33
+ <Box {...withoutTestIdProps(layout)} direction="column"
34
+ sx={[scroll ? { flexGrow: 1, flexShrink: 0 } : { flex: 1, minHeight: 0, minWidth: 0 }, ...sxEntries(contentSx)]}>
35
+ {children}
36
+ </Box>
37
+ </MuiBox>
38
+ </Box>
39
+ );
40
+ });
41
+ Screen.displayName = 'Screen';
@@ -0,0 +1,13 @@
1
+ import type { ScrollViewProps, StyleProp, ViewProps, ViewStyle } from 'react-native';
2
+
3
+ import type { ScreenBaseProps } from './Screen.base';
4
+
5
+ export type { ScreenBaseProps, ScreenEdge } from './Screen.base';
6
+ export type ScreenProps = ScreenBaseProps & Omit<ViewProps, keyof ScreenBaseProps> & {
7
+ contentContainerStyle?: StyleProp<ViewStyle>;
8
+ /** Scroll events/indicators; Screen owns orientation, size and keyboard insets. */
9
+ scrollViewProps?: Omit<ScrollViewProps,
10
+ 'children' | 'style' | 'contentContainerStyle' | 'horizontal' | 'scrollEnabled' |
11
+ 'automaticallyAdjustKeyboardInsets' | 'automaticallyAdjustContentInsets' | 'contentInsetAdjustmentBehavior'
12
+ >;
13
+ };
@@ -0,0 +1,10 @@
1
+ import type { SxProps, Theme } from '@mui/material/styles/index.js';
2
+ import type * as React from 'react';
3
+
4
+ import type { ScreenBaseProps } from './Screen.base';
5
+
6
+ export type { ScreenBaseProps, ScreenEdge } from './Screen.base';
7
+ export type ScreenProps = ScreenBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ScreenBaseProps> & {
8
+ sx?: SxProps<Theme>;
9
+ contentSx?: SxProps<Theme>;
10
+ };
@@ -0,0 +1,2 @@
1
+ export { Screen } from './Screen.native';
2
+ export type { ScreenProps, ScreenBaseProps, ScreenEdge } from './Screen.types.native';
@@ -0,0 +1,2 @@
1
+ export { Screen } from './Screen';
2
+ export type { ScreenProps, ScreenBaseProps, ScreenEdge } from './Screen.types';
@@ -0,0 +1,64 @@
1
+ # Screen test status
2
+
3
+ ## Passed locally
4
+
5
+ - Package build: all 147 web exports and 28 native exports, declarations and export checks (35.4 s)
6
+ - Package check-types: web, native source and native test programs
7
+ - Package lint: zero lint errors; existing ESLintEnvWarning notices in Dialog/Toast stories
8
+ - Native parity and icon generation: 28/147 subpaths, 625 shared stories, 46 glyphs
9
+ - Web unit suite: 188 files, 2,388 tests, zero skipped (121.3 s)
10
+ - Native unit suite: 29 files, 369 tests, zero skipped (16.3 s)
11
+ - Focused Screen/icon tests: 12 web and 15 native cases
12
+ - Full-source consumer candidate: 84 cases across 10 native suites, zero skipped,
13
+ including theme propagation under Android and iOS configurations; typecheck passed
14
+
15
+ ## Coverage
16
+
17
+ Shared stories: Default, LongContent, TabBarOwnsBottom, ChildOwnsScroll, Empty,
18
+ KeyboardForm. Shared play tests: BoundedOverflow, InputRemainsInteractive,
19
+ EmptyScreen, ChildViewportStaysBounded.
20
+
21
+ Positive: theme spacing/color, root accessibility/ref, selected safe-area edges,
22
+ keyboard offsets, native scroll callbacks, existing-provider reuse and unseeded
23
+ provider fallback. Negative/repeated: disable scrolling/keyboard lift, zero
24
+ edges, repeated policy changes, avoid duplicate automatic insets, and prevent
25
+ native props leaking to the DOM. Browser geometry, final hosted CI are tracked on PR #736. Final-source unit/type checks and
26
+ `pnpm quality` passed at 0fee5e6; the keyboard-disable negative control failed
27
+ exactly 2 of 7 tests, and the unchanged positive source passed all 369 native tests.
28
+
29
+ Device keyboard/rotation/notch QA has not run; no device was available. Neither
30
+ react-native-web nor mocked platform tests constitute an observed device keyboard.
31
+
32
+ ## Failures and recovery
33
+
34
+ - The default package-store path was not writable; explicit workspace paths fixed it
35
+ - Temporary storage filled during initial setup. Only task-generated caches were removed
36
+ - Two pinned-pnpm dependency resolution/download attempts ended with exit 137.
37
+ The environment's available pnpm 11.19.0 bootstrapped the unchanged frozen
38
+ lockfile in 31.3 s; verification commands use repository-pinned pnpm 10.34.5
39
+ - First native focused run used an unsupported Vitest spy helper; using Vitest's
40
+ getter spy fixed both failing platform cases
41
+ - Adding Screen required the intentional public-export count assertion to move
42
+ from 146 to 147; the full web suite then passed
43
+ - Aggregate complexity flagged the initial render functions; extracting small
44
+ style/keyboard helpers preserves behavior and brings them under the limit
45
+ - A first experimental consumer tarball overlaid only Screen/icons on an older
46
+ published build. This duplicated UiThemeContext and failed dark-theme propagation.
47
+ It was rejected. Rebuilding every entry together fixed the candidate and passed
48
+ the consumer's regression. Release artifacts must always use the full build
49
+
50
+ ## Hosted verification (2026-09-30 17:30 BRT)
51
+
52
+ Run https://github.com/12-apps/shared-packages/actions/runs/36772172767 passed
53
+ Build, Lint, Type Check, Unit Tests, Static Gates (including knip), web Storybook,
54
+ Consumer Verification and Native Harness. Every dispatched job used ubuntu-latest
55
+ in the GitHub Actions runner group. The native Storybook lane caught four new
56
+ play tests querying before the unseeded safe-area provider's initial effect.
57
+ The tests now await the actual elements with findByTestId; no assertion is removed
58
+ and runtime code is unchanged. The other 630 native story cases passed (two
59
+ pre-existing web-only cases were skipped). Final retry and release status live at
60
+ https://github.com/12-apps/shared-packages/pull/736.
61
+
62
+ Local native Storybook build passed; browser execution was blocked by the
63
+ execution environment's Chromium Unix-socket restriction, including the supported
64
+ escalation attempt. Hosted browser evidence is authoritative for this lane.
@@ -0,0 +1,26 @@
1
+ # Screen
2
+
3
+ A cross-platform bounded screen with safe-area edges, scrolling and keyboard lift.
4
+ See Screen.md for every prop and tests.md for the evidence and failures.
5
+
6
+ ## Lint / Type Errors
7
+ Package lint and all three check-types programs pass. The guidelines mention
8
+ `check:component`, but that command/script is absent; current package scripts apply.
9
+
10
+ ## Testing Scenarios
11
+ Shared play tests cover real overflow, child-owned scrolling, form interaction
12
+ and empty content. Unit tests cover inset ownership and repeated native policy
13
+ changes. Device keyboard/notch/rotation QA is not claimed.
14
+
15
+ ## Current
16
+ 2026-09-30 17:30 BRT: Source review addressed safe-area/keyboard nesting,
17
+ child-owned viewport sizing, Android avoidance disabling and stale initial inset
18
+ metrics on remount. The optional native peer does not affect web-only consumers.
19
+ Screen and three generated tab glyphs are additive; existing component contracts
20
+ are unchanged. Refreshed onto main dd971d29 after the concurrent color-role merge.
21
+
22
+ Full build, final-source package suites/types, lint, parity and aggregate quality
23
+ passed locally. Source/packaging review approved 0fee5e6. Hosted web/native harness
24
+ checks passed; native play tests now await safe-area initialization. Final hosted
25
+ retry and release status are recorded on PR #736. Normal
26
+ reviewed CI/CD publishes after merge; no manual package version or publish.
@@ -22,6 +22,9 @@
22
22
  "ExpandLess",
23
23
  "ExpandMore",
24
24
  "FilterList",
25
+ "FitnessCenter",
26
+ "History",
27
+ "Home",
25
28
  "IndeterminateCheckBox",
26
29
  "Info",
27
30
  "InfoOutlined",
@@ -30,6 +30,9 @@ export const ICON_PATHS = {
30
30
  ExpandLess: ["m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"],
31
31
  ExpandMore: ["M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"],
32
32
  FilterList: ["M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"],
33
+ FitnessCenter: ["M20.57 14.86 22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z"],
34
+ History: ["M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9m-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8z"],
35
+ Home: ["M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"],
33
36
  IndeterminateCheckBox: ["M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-2 10H7v-2h10z"],
34
37
  Info: ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"],
35
38
  InfoOutlined: ["M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"],
@@ -100,9 +100,19 @@ export function surfaces(theme: Theme): UiSurfaces {
100
100
  * Opaque on purpose. A translucent `alpha(main, 0.08)` is a different colour
101
101
  * on every surface it lands on, and its contrast with the signal's own text
102
102
  * cannot be known in advance; a composited value is the same colour anywhere.
103
+ *
104
+ * A palette MUI accepts but cannot decompose — a named colour (`white`), a
105
+ * `var(--…)`, a `color(display-p3 …)` — gets the same mix from the browser,
106
+ * as a CSS `color-mix()`, rather than throwing at render.
103
107
  */
104
108
  export function softSignal(theme: Theme, signal: SoftSignal): string {
105
109
  const stated = theme.uiSoftSignal?.[signal];
106
- if (stated) return stated;
107
- return blend(theme.palette.background.paper, theme.palette[signal].main, SOFT_SIGNAL_OPACITY);
110
+ if (stated !== undefined && stated !== '') return stated;
111
+ const paper = theme.palette.background.paper;
112
+ const main = theme.palette[signal].main;
113
+ try {
114
+ return blend(paper, main, SOFT_SIGNAL_OPACITY);
115
+ } catch {
116
+ return `color-mix(in srgb, ${main} ${SOFT_SIGNAL_OPACITY * 100}%, ${paper})`;
117
+ }
108
118
  }
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/icons/paths.generated.ts"],"sourcesContent":["// GENERATED by scripts/generate-icon-paths.mjs from src/icons/glyphs.json.\n// Do not edit: run `pnpm icons:generate`; `pnpm icons:check` fails CI on drift.\n//\n// Each entry is the `d` of every <path> in the matching @mui/icons-material\n// module, in a 24x24 viewBox — the SAME geometry the web renders through\n// SvgIcon, so the native Icon draws the identical glyph.\n\n/** Path data per glyph, in a 0 0 24 24 viewBox. */\nexport const ICON_PATHS = {\n Add: [\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z\"],\n ArrowBack: [\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z\"],\n ArrowDownward: [\"m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z\"],\n ArrowDropDown: [\"m7 10 5 5 5-5z\"],\n ArrowForward: [\"m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"],\n ArrowUpward: [\"m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z\"],\n BrokenImage: [\"M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2m-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99 4-4 4 4z\"],\n Cancel: [\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z\"],\n Check: [\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"],\n CheckBox: [\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2m-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z\"],\n CheckBoxOutlineBlank: [\"M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2\"],\n CheckCircle: [\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z\"],\n ChevronLeft: [\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"],\n ChevronRight: [\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"],\n Close: [\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"],\n ContentCopy: [\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z\"],\n Delete: [\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z\"],\n Edit: [\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z\"],\n Error: [\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z\"],\n ErrorOutline: [\"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8\"],\n ExpandLess: [\"m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z\"],\n ExpandMore: [\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\"],\n FilterList: [\"M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z\"],\n IndeterminateCheckBox: [\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-2 10H7v-2h10z\"],\n Info: [\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z\"],\n InfoOutlined: [\"M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8\"],\n KeyboardArrowDown: [\"M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z\"],\n KeyboardArrowUp: [\"M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z\"],\n Menu: [\"M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z\"],\n MoreHoriz: [\"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2\"],\n MoreVert: [\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2\"],\n NavigateBefore: [\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"],\n NavigateNext: [\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"],\n Person: [\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4\"],\n Refresh: [\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z\"],\n Remove: [\"M19 13H5v-2h14z\"],\n Save: [\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3m3-10H5V5h10z\"],\n Search: [\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14\"],\n Settings: [\"M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6\"],\n Visibility: [\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3\"],\n VisibilityOff: [\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z\"],\n Warning: [\"M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z\"],\n WarningAmber: [\"M12 5.99 19.53 19H4.47zM12 2 1 21h22z\",\"M13 16h-2v2h2zm0-6h-2v5h2z\"],\n} as const;\n\nexport type IconName = keyof typeof ICON_PATHS;\n\nexport const ICON_NAMES = Object.keys(ICON_PATHS) as readonly IconName[];\n"],"mappings":";AAQO,IAAM,aAAa;AAAA,EACxB,KAAK,CAAC,mCAAmC;AAAA,EACzC,WAAW,CAAC,2DAA2D;AAAA,EACvE,eAAe,CAAC,2DAA2D;AAAA,EAC3E,eAAe,CAAC,gBAAgB;AAAA,EAChC,cAAc,CAAC,0DAA0D;AAAA,EACzE,aAAa,CAAC,yDAAyD;AAAA,EACvE,aAAa,CAAC,qJAAqJ;AAAA,EACnK,QAAQ,CAAC,uKAAuK;AAAA,EAChL,OAAO,CAAC,mDAAmD;AAAA,EAC3D,UAAU,CAAC,8HAA8H;AAAA,EACzI,sBAAsB,CAAC,yFAAyF;AAAA,EAChH,aAAa,CAAC,gHAAgH;AAAA,EAC9H,aAAa,CAAC,+CAA+C;AAAA,EAC7D,cAAc,CAAC,gDAAgD;AAAA,EAC/D,OAAO,CAAC,uGAAuG;AAAA,EAC/G,aAAa,CAAC,2HAA2H;AAAA,EACzI,QAAQ,CAAC,0EAA0E;AAAA,EACnF,MAAM,CAAC,kIAAkI;AAAA,EACzI,OAAO,CAAC,6FAA6F;AAAA,EACrG,cAAc,CAAC,uKAAuK;AAAA,EACtL,YAAY,CAAC,+CAA+C;AAAA,EAC5D,YAAY,CAAC,8CAA8C;AAAA,EAC3D,YAAY,CAAC,0CAA0C;AAAA,EACvD,uBAAuB,CAAC,4FAA4F;AAAA,EACpH,MAAM,CAAC,6FAA6F;AAAA,EACpG,cAAc,CAAC,oJAAoJ;AAAA,EACnK,mBAAmB,CAAC,+CAA+C;AAAA,EACnE,iBAAiB,CAAC,gDAAgD;AAAA,EAClE,MAAM,CAAC,yCAAyC;AAAA,EAChD,WAAW,CAAC,kJAAkJ;AAAA,EAC9J,UAAU,CAAC,gJAAgJ;AAAA,EAC3J,gBAAgB,CAAC,+CAA+C;AAAA,EAChE,cAAc,CAAC,gDAAgD;AAAA,EAC/D,QAAQ,CAAC,6GAA6G;AAAA,EACtH,SAAS,CAAC,iMAAiM;AAAA,EAC3M,QAAQ,CAAC,iBAAiB;AAAA,EAC1B,MAAM,CAAC,wIAAwI;AAAA,EAC/I,QAAQ,CAAC,mOAAmO;AAAA,EAC5O,UAAU,CAAC,irBAAirB;AAAA,EAC5rB,YAAY,CAAC,gNAAgN;AAAA,EAC7N,eAAe,CAAC,0eAA0e;AAAA,EAC1f,SAAS,CAAC,2CAA2C;AAAA,EACrD,cAAc,CAAC,yCAAwC,4BAA4B;AACrF;AAIO,IAAM,aAAa,OAAO,KAAK,UAAU;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/icons/Icon.types.ts","../../../src/icons/paths.generated.ts","../../../src/icons/Icon.native.tsx","../../../src/icons/icon-color.ts"],"sourcesContent":["import type { IconName } from './paths.generated';\nimport type { ColorValue, SizeValue } from '../tokens/vocabulary';\n\nexport type { IconName };\n\n/**\n * The glyph sizes, in px. `md` is MUI's `SvgIcon` default (24) and `sm` its\n * `small` (20); the rest continue the house scale in 4px steps either side.\n */\nexport const ICON_SIZES: Record<SizeValue, number> = {\n xs: 16,\n sm: 20,\n md: 24,\n lg: 32,\n xl: 40,\n};\n\nexport interface IconBaseProps {\n /** Which glyph. The list is `src/icons/glyphs.json`; both renderers draw the same paths. */\n name: IconName;\n /** A step of the house scale, or an exact px size. */\n size?: SizeValue | number;\n /**\n * A house colour, `inherit` (the surrounding text's colour on the web, the\n * theme's primary text on native, which has no `currentColor`), or any CSS\n * colour string.\n */\n color?: ColorValue | 'inherit' | string;\n /**\n * The name a screen reader gives the glyph. Omit for a decorative icon: it\n * is then hidden from assistive technology on both renderers.\n */\n label?: string;\n testID?: string;\n dataTestId?: string;\n}\n\n/** The px size for either spelling of `size`. */\nexport const iconSize = (size: SizeValue | number | undefined): number =>\n typeof size === 'number' ? size : ICON_SIZES[size ?? 'md'];\n","// GENERATED by scripts/generate-icon-paths.mjs from src/icons/glyphs.json.\n// Do not edit: run `pnpm icons:generate`; `pnpm icons:check` fails CI on drift.\n//\n// Each entry is the `d` of every <path> in the matching @mui/icons-material\n// module, in a 24x24 viewBox — the SAME geometry the web renders through\n// SvgIcon, so the native Icon draws the identical glyph.\n\n/** Path data per glyph, in a 0 0 24 24 viewBox. */\nexport const ICON_PATHS = {\n Add: [\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z\"],\n ArrowBack: [\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z\"],\n ArrowDownward: [\"m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z\"],\n ArrowDropDown: [\"m7 10 5 5 5-5z\"],\n ArrowForward: [\"m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"],\n ArrowUpward: [\"m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z\"],\n BrokenImage: [\"M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2m-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99 4-4 4 4z\"],\n Cancel: [\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z\"],\n Check: [\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"],\n CheckBox: [\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2m-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z\"],\n CheckBoxOutlineBlank: [\"M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2\"],\n CheckCircle: [\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z\"],\n ChevronLeft: [\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"],\n ChevronRight: [\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"],\n Close: [\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"],\n ContentCopy: [\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z\"],\n Delete: [\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z\"],\n Edit: [\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z\"],\n Error: [\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z\"],\n ErrorOutline: [\"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8\"],\n ExpandLess: [\"m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z\"],\n ExpandMore: [\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\"],\n FilterList: [\"M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z\"],\n IndeterminateCheckBox: [\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-2 10H7v-2h10z\"],\n Info: [\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z\"],\n InfoOutlined: [\"M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8\"],\n KeyboardArrowDown: [\"M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z\"],\n KeyboardArrowUp: [\"M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z\"],\n Menu: [\"M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z\"],\n MoreHoriz: [\"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2\"],\n MoreVert: [\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2\"],\n NavigateBefore: [\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"],\n NavigateNext: [\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"],\n Person: [\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4\"],\n Refresh: [\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z\"],\n Remove: [\"M19 13H5v-2h14z\"],\n Save: [\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3m3-10H5V5h10z\"],\n Search: [\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14\"],\n Settings: [\"M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6\"],\n Visibility: [\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3\"],\n VisibilityOff: [\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z\"],\n Warning: [\"M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z\"],\n WarningAmber: [\"M12 5.99 19.53 19H4.47zM12 2 1 21h22z\",\"M13 16h-2v2h2zm0-6h-2v5h2z\"],\n} as const;\n\nexport type IconName = keyof typeof ICON_PATHS;\n\nexport const ICON_NAMES = Object.keys(ICON_PATHS) as readonly IconName[];\n","import * as React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport Svg, { Path } from 'react-native-svg';\n\nimport { iconFill } from './icon-color';\nimport { iconSize, type IconBaseProps } from './Icon.types';\nimport { ICON_PATHS } from './paths.generated';\nimport { resolveTestId } from '../platform/test-id';\nimport { useUiTheme } from '../provider/use-ui-theme.native';\n\nexport interface IconProps extends IconBaseProps {\n style?: StyleProp<ViewStyle>;\n}\n\n/**\n * The native `Icon`: `react-native-svg` drawing the same generated path the web\n * `SvgIcon` draws, in the same 24-unit box, at the same px size.\n */\nexport function Icon({ name, size, color, label, style, ...rest }: IconProps): React.JSX.Element {\n const theme = useUiTheme();\n const px = iconSize(size);\n const fill = iconFill(theme, color, theme.palette.text.primary);\n const testId = resolveTestId(rest, `icon-${name}`);\n\n return (\n <Svg\n width={px}\n height={px}\n viewBox=\"0 0 24 24\"\n fill={fill}\n style={style}\n testID={testId}\n role=\"img\"\n aria-label={label}\n aria-hidden={!label}\n >\n {ICON_PATHS[name].map((d) => (\n <Path key={d} d={d} fill={fill} />\n ))}\n </Svg>\n );\n}\n\nIcon.displayName = 'Icon';\n","import { COLOR_VALUES, type ColorValue } from '../tokens/vocabulary';\nimport type { UiTheme } from '../tokens/theme';\n\nconst isColorValue = (color: string): color is ColorValue =>\n (COLOR_VALUES as readonly string[]).includes(color);\n\n/**\n * The fill for an icon's `color` prop, on either renderer.\n *\n * A house colour resolves to the palette slot's `main`; `inherit` is the\n * caller's problem (the web passes `currentColor`, native the text colour); any\n * other string is taken as a CSS colour and passed through.\n */\nexport function iconFill(theme: UiTheme, color: string | undefined, inherit: string): string {\n if (color === undefined || color === 'inherit') return inherit;\n if (isColorValue(color)) {\n return color === 'neutral' ? theme.palette.text.secondary : theme.palette[color].main;\n }\n return color;\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/layout/Box/Box.base.ts","../../../src/components/layout/Box/box-layout.ts","../../../src/components/layout/Box/Box.native.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport type { UiPaletteKey, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE LAYOUT PRIMITIVE BOTH RENDERERS SHARE.\n *\n * Half of every screen in the origin apps is `@12-apps/ui/mui/Box` with an `sx`\n * — raw MUI, which no native renderer can ever answer to. This `Box` is the\n * one a screen meant for both platforms writes instead: a fixed set of layout\n * props on the spacing scale, resolved by `box-layout.ts` into the same\n * numbers on each side. `p={2}` is 16px on the web and 16dp on native, because\n * both are `theme.spacing(2)`.\n *\n * Spacing props are in SPACING UNITS, exactly as MUI's own `Box` reads them.\n */\nexport type BoxDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\nexport type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type BoxJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\nexport type BoxBackground = 'default' | 'paper' | 'transparent' | UiPaletteKey;\nexport type BoxRadius = keyof UiTheme['radius'];\n/** What both renderers accept as a size: px, a percentage, or `auto`. */\nexport type BoxDimension = number | 'auto' | `${number}%`;\n\nexport interface BoxSpacingProps {\n p?: number;\n px?: number;\n py?: number;\n pt?: number;\n pr?: number;\n pb?: number;\n pl?: number;\n m?: number;\n mx?: number;\n my?: number;\n mt?: number;\n mr?: number;\n mb?: number;\n ml?: number;\n /** Between children. Setting it makes the box a flex container. */\n gap?: number;\n}\n\nexport interface BoxBaseProps extends BoxSpacingProps {\n children?: React.ReactNode;\n /** Setting any of these four makes the box a flex container. */\n direction?: BoxDirection;\n align?: BoxAlign;\n justify?: BoxJustify;\n wrap?: boolean;\n flex?: number;\n /** A surface, `transparent`, or a palette slot's main colour. */\n bg?: BoxBackground;\n radius?: BoxRadius;\n /** A 1px border in the theme's divider colour. */\n bordered?: boolean;\n width?: BoxDimension;\n height?: BoxDimension;\n testID?: string;\n dataTestId?: string;\n}\n\n/** Every prop {@link BoxBaseProps} owns, so a renderer can split them from its own. */\nexport const BOX_BASE_KEYS = [\n 'p', 'px', 'py', 'pt', 'pr', 'pb', 'pl',\n 'm', 'mx', 'my', 'mt', 'mr', 'mb', 'ml',\n 'gap', 'direction', 'align', 'justify', 'wrap', 'flex',\n 'bg', 'radius', 'bordered', 'width', 'height', 'testID', 'dataTestId',\n] as const satisfies readonly (keyof Omit<BoxBaseProps, 'children'>)[];\n","import { BOX_BASE_KEYS, type BoxAlign, type BoxBaseProps, type BoxDimension, type BoxJustify } from './Box.base';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/**\n * The resolved style, in React Native's property names.\n *\n * They are also valid CSS-in-JS names, and every number is px on the web and\n * dp on native, so ONE resolver feeds both `Box.tsx` (into `sx`) and\n * `Box.native.tsx` (into `style`). That is the alignment guarantee: there is no\n * second table of numbers for the native side to drift from.\n */\nexport interface BoxLayout {\n display?: 'flex';\n flexDirection?: BoxBaseProps['direction'];\n alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';\n flexWrap?: 'wrap';\n flex?: number;\n gap?: number;\n paddingTop?: number;\n paddingRight?: number;\n paddingBottom?: number;\n paddingLeft?: number;\n marginTop?: number;\n marginRight?: number;\n marginBottom?: number;\n marginLeft?: number;\n backgroundColor?: string;\n borderRadius?: number;\n borderWidth?: number;\n borderStyle?: 'solid';\n borderColor?: string;\n width?: BoxDimension;\n height?: BoxDimension;\n}\n\nconst ALIGN: Record<BoxAlign, NonNullable<BoxLayout['alignItems']>> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n};\n\nconst JUSTIFY: Record<BoxJustify, NonNullable<BoxLayout['justifyContent']>> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n between: 'space-between',\n around: 'space-around',\n evenly: 'space-evenly',\n};\n\nfunction background(theme: UiTheme, bg: NonNullable<BoxBaseProps['bg']>): string {\n if (bg === 'transparent') return 'transparent';\n if (bg === 'default' || bg === 'paper') return theme.palette.background[bg];\n return theme.palette[bg].main;\n}\n\ntype SpacingKey = keyof Pick<\n BoxLayout,\n | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'\n | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'\n>;\n\n/**\n * Each side reads the most specific prop that is set: the side, then its axis,\n * then the shorthand — the precedence MUI's `Box` gives `pt`/`py`/`p`.\n */\nconst SIDES: ReadonlyArray<readonly [SpacingKey, ReadonlyArray<keyof BoxBaseProps>]> = [\n ['paddingTop', ['pt', 'py', 'p']],\n ['paddingRight', ['pr', 'px', 'p']],\n ['paddingBottom', ['pb', 'py', 'p']],\n ['paddingLeft', ['pl', 'px', 'p']],\n ['marginTop', ['mt', 'my', 'm']],\n ['marginRight', ['mr', 'mx', 'm']],\n ['marginBottom', ['mb', 'my', 'm']],\n ['marginLeft', ['ml', 'mx', 'm']],\n];\n\nfunction spacingLayout(props: BoxBaseProps, theme: UiTheme): BoxLayout {\n const layout: BoxLayout = {};\n for (const [key, sources] of SIDES) {\n const units = sources.map((source) => props[source]).find((value) => value !== undefined);\n if (typeof units === 'number') layout[key] = theme.spacing(units);\n }\n return layout;\n}\n\n/** A flex container whenever any flex prop is set; a plain box otherwise. */\nfunction flexLayout(props: BoxBaseProps, theme: UiTheme): BoxLayout {\n const layout: BoxLayout = {};\n const isFlex =\n [props.direction, props.align, props.justify, props.gap].some((value) => value !== undefined) ||\n props.wrap === true;\n if (!isFlex) return layout;\n\n layout.display = 'flex';\n layout.flexDirection = props.direction ?? 'column';\n if (props.gap !== undefined) layout.gap = theme.spacing(props.gap);\n if (props.align !== undefined) layout.alignItems = ALIGN[props.align];\n if (props.justify !== undefined) layout.justifyContent = JUSTIFY[props.justify];\n if (props.wrap) layout.flexWrap = 'wrap';\n return layout;\n}\n\nfunction surfaceLayout(props: BoxBaseProps, theme: UiTheme): BoxLayout {\n const layout: BoxLayout = {};\n if (props.flex !== undefined) layout.flex = props.flex;\n if (props.bg !== undefined) layout.backgroundColor = background(theme, props.bg);\n if (props.radius !== undefined) layout.borderRadius = theme.radius[props.radius];\n if (props.bordered) {\n // `borderStyle` spelled out: CSS defaults it to `none`, under which a\n // border-width computes to 0 and nothing paints. React Native's default is\n // `solid`, which is how a box can pass natively and vanish on the web.\n layout.borderWidth = 1;\n layout.borderStyle = 'solid';\n layout.borderColor = theme.palette.divider;\n }\n if (props.width !== undefined) layout.width = props.width;\n if (props.height !== undefined) layout.height = props.height;\n return layout;\n}\n\n/** The style for a box's neutral props. Unset props produce no key at all. */\nexport function resolveBoxLayout(props: BoxBaseProps, theme: UiTheme): BoxLayout {\n return { ...spacingLayout(props, theme), ...flexLayout(props, theme), ...surfaceLayout(props, theme) };\n}\n\n/** The neutral props on one side, everything else — the renderer's own — on the other. */\nexport function splitBoxProps<P extends BoxBaseProps>(\n props: P,\n): { layout: BoxBaseProps; rest: Omit<P, (typeof BOX_BASE_KEYS)[number]> } {\n const layout: Record<string, unknown> = {};\n const rest: Record<string, unknown> = {};\n const own = new Set<string>([...BOX_BASE_KEYS, 'data-testid']);\n for (const [key, value] of Object.entries(props)) {\n (own.has(key) ? layout : rest)[key] = value;\n }\n return {\n layout: layout as BoxBaseProps,\n rest: rest as Omit<P, (typeof BOX_BASE_KEYS)[number]>,\n };\n}\n","import * as React from 'react';\nimport { View } from 'react-native';\n\nimport { resolveBoxLayout, splitBoxProps } from './box-layout';\nimport type { BoxProps } from './Box.types.native';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\n/** The native `Box`: a `View` with the same resolved numbers the web `Box` puts in `sx`. */\nexport const Box = React.forwardRef<View, BoxProps>(({ children, style, ...props }, ref) => {\n const theme = useUiTheme();\n const { layout, rest } = splitBoxProps(props);\n const resolved = resolveBoxLayout(layout, theme);\n\n return (\n <View ref={ref} style={[resolved, style]} testID={resolveTestId(layout)} {...rest}>\n {children}\n </View>\n );\n});\n\nBox.displayName = 'Box';\n"],"mappings":"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","names":[]}