@ankhorage/zora 2.5.1 → 2.5.3

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 (534) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +3545 -1
  3. package/dist/components/action-sheet/ActionSheet.d.ts +5 -0
  4. package/dist/components/action-sheet/ActionSheet.d.ts.map +1 -1
  5. package/dist/components/action-sheet/ActionSheet.js +5 -0
  6. package/dist/components/action-sheet/ActionSheet.js.map +1 -1
  7. package/dist/components/action-sheet/ActionSheetItem.d.ts +5 -0
  8. package/dist/components/action-sheet/ActionSheetItem.d.ts.map +1 -1
  9. package/dist/components/action-sheet/ActionSheetItem.js +5 -0
  10. package/dist/components/action-sheet/ActionSheetItem.js.map +1 -1
  11. package/dist/components/app-bar/AppBar.d.ts +5 -0
  12. package/dist/components/app-bar/AppBar.d.ts.map +1 -1
  13. package/dist/components/app-bar/AppBar.js +5 -0
  14. package/dist/components/app-bar/AppBar.js.map +1 -1
  15. package/dist/components/avatar/Avatar.d.ts +5 -0
  16. package/dist/components/avatar/Avatar.d.ts.map +1 -1
  17. package/dist/components/avatar/Avatar.js +5 -0
  18. package/dist/components/avatar/Avatar.js.map +1 -1
  19. package/dist/components/avatar-group/AvatarGroup.d.ts +5 -0
  20. package/dist/components/avatar-group/AvatarGroup.d.ts.map +1 -1
  21. package/dist/components/avatar-group/AvatarGroup.js +5 -0
  22. package/dist/components/avatar-group/AvatarGroup.js.map +1 -1
  23. package/dist/components/badge/Badge.d.ts +5 -0
  24. package/dist/components/badge/Badge.d.ts.map +1 -1
  25. package/dist/components/badge/Badge.js +5 -0
  26. package/dist/components/badge/Badge.js.map +1 -1
  27. package/dist/components/breadcrumbs/Breadcrumbs.d.ts +5 -0
  28. package/dist/components/breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  29. package/dist/components/breadcrumbs/Breadcrumbs.js +5 -0
  30. package/dist/components/breadcrumbs/Breadcrumbs.js.map +1 -1
  31. package/dist/components/button/Button.d.ts +12 -0
  32. package/dist/components/button/Button.d.ts.map +1 -1
  33. package/dist/components/button/Button.js +12 -0
  34. package/dist/components/button/Button.js.map +1 -1
  35. package/dist/components/button-group/ButtonGroup.d.ts +5 -0
  36. package/dist/components/button-group/ButtonGroup.d.ts.map +1 -1
  37. package/dist/components/button-group/ButtonGroup.js +5 -0
  38. package/dist/components/button-group/ButtonGroup.js.map +1 -1
  39. package/dist/components/card/Card.d.ts +12 -0
  40. package/dist/components/card/Card.d.ts.map +1 -1
  41. package/dist/components/card/Card.js +12 -0
  42. package/dist/components/card/Card.js.map +1 -1
  43. package/dist/components/checkbox/Checkbox.d.ts +5 -0
  44. package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
  45. package/dist/components/checkbox/Checkbox.js +5 -0
  46. package/dist/components/checkbox/Checkbox.js.map +1 -1
  47. package/dist/components/checkbox/CheckboxGroup.d.ts +5 -0
  48. package/dist/components/checkbox/CheckboxGroup.d.ts.map +1 -1
  49. package/dist/components/checkbox/CheckboxGroup.js +5 -0
  50. package/dist/components/checkbox/CheckboxGroup.js.map +1 -1
  51. package/dist/components/chip/Chip.d.ts +5 -0
  52. package/dist/components/chip/Chip.d.ts.map +1 -1
  53. package/dist/components/chip/Chip.js +5 -0
  54. package/dist/components/chip/Chip.js.map +1 -1
  55. package/dist/components/chip-group/ChipGroup.d.ts +5 -0
  56. package/dist/components/chip-group/ChipGroup.d.ts.map +1 -1
  57. package/dist/components/chip-group/ChipGroup.js +5 -0
  58. package/dist/components/chip-group/ChipGroup.js.map +1 -1
  59. package/dist/components/data-table/DataTable.d.ts +5 -0
  60. package/dist/components/data-table/DataTable.d.ts.map +1 -1
  61. package/dist/components/data-table/DataTable.js +5 -0
  62. package/dist/components/data-table/DataTable.js.map +1 -1
  63. package/dist/components/date-picker/DatePicker.d.ts +5 -0
  64. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  65. package/dist/components/date-picker/DatePicker.js +5 -0
  66. package/dist/components/date-picker/DatePicker.js.map +1 -1
  67. package/dist/components/drawer/Drawer.d.ts +5 -0
  68. package/dist/components/drawer/Drawer.d.ts.map +1 -1
  69. package/dist/components/drawer/Drawer.js +5 -0
  70. package/dist/components/drawer/Drawer.js.map +1 -1
  71. package/dist/components/form/Form.d.ts +5 -0
  72. package/dist/components/form/Form.d.ts.map +1 -1
  73. package/dist/components/form/Form.js +5 -0
  74. package/dist/components/form/Form.js.map +1 -1
  75. package/dist/components/form/FormActions.d.ts +5 -0
  76. package/dist/components/form/FormActions.d.ts.map +1 -1
  77. package/dist/components/form/FormActions.js +5 -0
  78. package/dist/components/form/FormActions.js.map +1 -1
  79. package/dist/components/form/FormError.d.ts +5 -0
  80. package/dist/components/form/FormError.d.ts.map +1 -1
  81. package/dist/components/form/FormError.js +5 -0
  82. package/dist/components/form/FormError.js.map +1 -1
  83. package/dist/components/form/FormField.d.ts +5 -0
  84. package/dist/components/form/FormField.d.ts.map +1 -1
  85. package/dist/components/form/FormField.js +5 -0
  86. package/dist/components/form/FormField.js.map +1 -1
  87. package/dist/components/form/index.d.ts +1 -1
  88. package/dist/components/form/index.d.ts.map +1 -1
  89. package/dist/components/form/index.js.map +1 -1
  90. package/dist/components/form/useFormController.d.ts.map +1 -1
  91. package/dist/components/form/useFormController.js.map +1 -1
  92. package/dist/components/heading/Heading.d.ts +12 -0
  93. package/dist/components/heading/Heading.d.ts.map +1 -1
  94. package/dist/components/heading/Heading.js +12 -0
  95. package/dist/components/heading/Heading.js.map +1 -1
  96. package/dist/components/icon/Icon.d.ts +5 -0
  97. package/dist/components/icon/Icon.d.ts.map +1 -1
  98. package/dist/components/icon/Icon.js +5 -0
  99. package/dist/components/icon/Icon.js.map +1 -1
  100. package/dist/components/icon-button/IconButton.d.ts +5 -0
  101. package/dist/components/icon-button/IconButton.d.ts.map +1 -1
  102. package/dist/components/icon-button/IconButton.js +5 -0
  103. package/dist/components/icon-button/IconButton.js.map +1 -1
  104. package/dist/components/image/Image.d.ts +5 -0
  105. package/dist/components/image/Image.d.ts.map +1 -1
  106. package/dist/components/image/Image.js +5 -0
  107. package/dist/components/image/Image.js.map +1 -1
  108. package/dist/components/input/Input.d.ts +12 -0
  109. package/dist/components/input/Input.d.ts.map +1 -1
  110. package/dist/components/input/Input.js +12 -0
  111. package/dist/components/input/Input.js.map +1 -1
  112. package/dist/components/media-card/MediaCard.d.ts +5 -0
  113. package/dist/components/media-card/MediaCard.d.ts.map +1 -1
  114. package/dist/components/media-card/MediaCard.js +5 -0
  115. package/dist/components/media-card/MediaCard.js.map +1 -1
  116. package/dist/components/menu/DropdownMenu.d.ts +5 -0
  117. package/dist/components/menu/DropdownMenu.d.ts.map +1 -1
  118. package/dist/components/menu/DropdownMenu.js +5 -0
  119. package/dist/components/menu/DropdownMenu.js.map +1 -1
  120. package/dist/components/menu/Menu.d.ts +5 -0
  121. package/dist/components/menu/Menu.d.ts.map +1 -1
  122. package/dist/components/menu/Menu.js +5 -0
  123. package/dist/components/menu/Menu.js.map +1 -1
  124. package/dist/components/metric-card/MetricCard.d.ts +5 -0
  125. package/dist/components/metric-card/MetricCard.d.ts.map +1 -1
  126. package/dist/components/metric-card/MetricCard.js +5 -0
  127. package/dist/components/metric-card/MetricCard.js.map +1 -1
  128. package/dist/components/modal/Modal.d.ts +5 -0
  129. package/dist/components/modal/Modal.d.ts.map +1 -1
  130. package/dist/components/modal/Modal.js +5 -0
  131. package/dist/components/modal/Modal.js.map +1 -1
  132. package/dist/components/navigation-item/NavigationItem.d.ts +5 -0
  133. package/dist/components/navigation-item/NavigationItem.d.ts.map +1 -1
  134. package/dist/components/navigation-item/NavigationItem.js +5 -0
  135. package/dist/components/navigation-item/NavigationItem.js.map +1 -1
  136. package/dist/components/navigation-list/NavigationList.d.ts +5 -0
  137. package/dist/components/navigation-list/NavigationList.d.ts.map +1 -1
  138. package/dist/components/navigation-list/NavigationList.js +5 -0
  139. package/dist/components/navigation-list/NavigationList.js.map +1 -1
  140. package/dist/components/pagination/Pagination.d.ts +5 -0
  141. package/dist/components/pagination/Pagination.d.ts.map +1 -1
  142. package/dist/components/pagination/Pagination.js +5 -0
  143. package/dist/components/pagination/Pagination.js.map +1 -1
  144. package/dist/components/progress/Progress.d.ts +5 -0
  145. package/dist/components/progress/Progress.d.ts.map +1 -1
  146. package/dist/components/progress/Progress.js +5 -0
  147. package/dist/components/progress/Progress.js.map +1 -1
  148. package/dist/components/radio/Radio.d.ts +5 -0
  149. package/dist/components/radio/Radio.d.ts.map +1 -1
  150. package/dist/components/radio/Radio.js +5 -0
  151. package/dist/components/radio/Radio.js.map +1 -1
  152. package/dist/components/radio/RadioGroup.d.ts +5 -0
  153. package/dist/components/radio/RadioGroup.d.ts.map +1 -1
  154. package/dist/components/radio/RadioGroup.js +5 -0
  155. package/dist/components/radio/RadioGroup.js.map +1 -1
  156. package/dist/components/rating/Rating.d.ts +5 -0
  157. package/dist/components/rating/Rating.d.ts.map +1 -1
  158. package/dist/components/rating/Rating.js +5 -0
  159. package/dist/components/rating/Rating.js.map +1 -1
  160. package/dist/components/search-bar/SearchBar.d.ts +5 -0
  161. package/dist/components/search-bar/SearchBar.d.ts.map +1 -1
  162. package/dist/components/search-bar/SearchBar.js +5 -0
  163. package/dist/components/search-bar/SearchBar.js.map +1 -1
  164. package/dist/components/select/Select.d.ts +5 -0
  165. package/dist/components/select/Select.d.ts.map +1 -1
  166. package/dist/components/select/Select.js +5 -0
  167. package/dist/components/select/Select.js.map +1 -1
  168. package/dist/components/skeleton/Skeleton.d.ts +5 -0
  169. package/dist/components/skeleton/Skeleton.d.ts.map +1 -1
  170. package/dist/components/skeleton/Skeleton.js +5 -0
  171. package/dist/components/skeleton/Skeleton.js.map +1 -1
  172. package/dist/components/skeleton/SkeletonCard.d.ts +5 -0
  173. package/dist/components/skeleton/SkeletonCard.d.ts.map +1 -1
  174. package/dist/components/skeleton/SkeletonCard.js +5 -0
  175. package/dist/components/skeleton/SkeletonCard.js.map +1 -1
  176. package/dist/components/skeleton/SkeletonList.d.ts +5 -0
  177. package/dist/components/skeleton/SkeletonList.d.ts.map +1 -1
  178. package/dist/components/skeleton/SkeletonList.js +5 -0
  179. package/dist/components/skeleton/SkeletonList.js.map +1 -1
  180. package/dist/components/skeleton/SkeletonText.d.ts +5 -0
  181. package/dist/components/skeleton/SkeletonText.d.ts.map +1 -1
  182. package/dist/components/skeleton/SkeletonText.js +5 -0
  183. package/dist/components/skeleton/SkeletonText.js.map +1 -1
  184. package/dist/components/tabs/Tabs.d.ts +5 -0
  185. package/dist/components/tabs/Tabs.d.ts.map +1 -1
  186. package/dist/components/tabs/Tabs.js +5 -0
  187. package/dist/components/tabs/Tabs.js.map +1 -1
  188. package/dist/components/text/Text.d.ts +12 -0
  189. package/dist/components/text/Text.d.ts.map +1 -1
  190. package/dist/components/text/Text.js +12 -0
  191. package/dist/components/text/Text.js.map +1 -1
  192. package/dist/components/textarea/Textarea.d.ts +5 -0
  193. package/dist/components/textarea/Textarea.d.ts.map +1 -1
  194. package/dist/components/textarea/Textarea.js +5 -0
  195. package/dist/components/textarea/Textarea.js.map +1 -1
  196. package/dist/components/time-picker/TimePicker.d.ts +5 -0
  197. package/dist/components/time-picker/TimePicker.d.ts.map +1 -1
  198. package/dist/components/time-picker/TimePicker.js +5 -0
  199. package/dist/components/time-picker/TimePicker.js.map +1 -1
  200. package/dist/components/toast/Toast.d.ts +5 -0
  201. package/dist/components/toast/Toast.d.ts.map +1 -1
  202. package/dist/components/toast/Toast.js +5 -0
  203. package/dist/components/toast/Toast.js.map +1 -1
  204. package/dist/components/toast/ToastProvider.d.ts +5 -0
  205. package/dist/components/toast/ToastProvider.d.ts.map +1 -1
  206. package/dist/components/toast/ToastProvider.js +5 -0
  207. package/dist/components/toast/ToastProvider.js.map +1 -1
  208. package/dist/components/toolbar/Toolbar.d.ts +5 -0
  209. package/dist/components/toolbar/Toolbar.d.ts.map +1 -1
  210. package/dist/components/toolbar/Toolbar.js +5 -0
  211. package/dist/components/toolbar/Toolbar.js.map +1 -1
  212. package/dist/components/toolbar/ToolbarAction.d.ts +5 -0
  213. package/dist/components/toolbar/ToolbarAction.d.ts.map +1 -1
  214. package/dist/components/toolbar/ToolbarAction.js +5 -0
  215. package/dist/components/toolbar/ToolbarAction.js.map +1 -1
  216. package/dist/foundation/Box.d.ts +5 -0
  217. package/dist/foundation/Box.d.ts.map +1 -1
  218. package/dist/foundation/Box.js +5 -0
  219. package/dist/foundation/Box.js.map +1 -1
  220. package/dist/foundation/Center.d.ts +5 -0
  221. package/dist/foundation/Center.d.ts.map +1 -1
  222. package/dist/foundation/Center.js +5 -0
  223. package/dist/foundation/Center.js.map +1 -1
  224. package/dist/foundation/Container.d.ts +5 -0
  225. package/dist/foundation/Container.d.ts.map +1 -1
  226. package/dist/foundation/Container.js +5 -0
  227. package/dist/foundation/Container.js.map +1 -1
  228. package/dist/foundation/Divider.d.ts +5 -0
  229. package/dist/foundation/Divider.d.ts.map +1 -1
  230. package/dist/foundation/Divider.js +5 -0
  231. package/dist/foundation/Divider.js.map +1 -1
  232. package/dist/foundation/Grid.d.ts +5 -0
  233. package/dist/foundation/Grid.d.ts.map +1 -1
  234. package/dist/foundation/Grid.js +5 -0
  235. package/dist/foundation/Grid.js.map +1 -1
  236. package/dist/foundation/Inline.d.ts +5 -0
  237. package/dist/foundation/Inline.d.ts.map +1 -1
  238. package/dist/foundation/Inline.js +5 -0
  239. package/dist/foundation/Inline.js.map +1 -1
  240. package/dist/foundation/Show.d.ts +5 -0
  241. package/dist/foundation/Show.d.ts.map +1 -1
  242. package/dist/foundation/Show.js +5 -0
  243. package/dist/foundation/Show.js.map +1 -1
  244. package/dist/foundation/Spacer.d.ts +5 -0
  245. package/dist/foundation/Spacer.d.ts.map +1 -1
  246. package/dist/foundation/Spacer.js +5 -0
  247. package/dist/foundation/Spacer.js.map +1 -1
  248. package/dist/foundation/Stack.d.ts +5 -0
  249. package/dist/foundation/Stack.d.ts.map +1 -1
  250. package/dist/foundation/Stack.js +5 -0
  251. package/dist/foundation/Stack.js.map +1 -1
  252. package/dist/foundation/Surface.d.ts +5 -0
  253. package/dist/foundation/Surface.d.ts.map +1 -1
  254. package/dist/foundation/Surface.js +5 -0
  255. package/dist/foundation/Surface.js.map +1 -1
  256. package/dist/index.d.ts +1 -1
  257. package/dist/index.d.ts.map +1 -1
  258. package/dist/index.js.map +1 -1
  259. package/dist/layout/app-shell/AppShell.d.ts +12 -0
  260. package/dist/layout/app-shell/AppShell.d.ts.map +1 -1
  261. package/dist/layout/app-shell/AppShell.js +12 -0
  262. package/dist/layout/app-shell/AppShell.js.map +1 -1
  263. package/dist/layout/screen/Screen.d.ts +5 -0
  264. package/dist/layout/screen/Screen.d.ts.map +1 -1
  265. package/dist/layout/screen/Screen.js +5 -0
  266. package/dist/layout/screen/Screen.js.map +1 -1
  267. package/dist/layout/screen-section/ScreenSection.d.ts +5 -0
  268. package/dist/layout/screen-section/ScreenSection.d.ts.map +1 -1
  269. package/dist/layout/screen-section/ScreenSection.js +5 -0
  270. package/dist/layout/screen-section/ScreenSection.js.map +1 -1
  271. package/dist/layout/settings-layout/SettingsLayout.d.ts +5 -0
  272. package/dist/layout/settings-layout/SettingsLayout.d.ts.map +1 -1
  273. package/dist/layout/settings-layout/SettingsLayout.js +5 -0
  274. package/dist/layout/settings-layout/SettingsLayout.js.map +1 -1
  275. package/dist/layout/sidebar-layout/SidebarLayout.d.ts +5 -0
  276. package/dist/layout/sidebar-layout/SidebarLayout.d.ts.map +1 -1
  277. package/dist/layout/sidebar-layout/SidebarLayout.js +5 -0
  278. package/dist/layout/sidebar-layout/SidebarLayout.js.map +1 -1
  279. package/dist/layout/topbar-layout/TopbarLayout.d.ts +5 -0
  280. package/dist/layout/topbar-layout/TopbarLayout.d.ts.map +1 -1
  281. package/dist/layout/topbar-layout/TopbarLayout.js +5 -0
  282. package/dist/layout/topbar-layout/TopbarLayout.js.map +1 -1
  283. package/dist/patterns/auth/ForgotPasswordForm.d.ts +5 -0
  284. package/dist/patterns/auth/ForgotPasswordForm.d.ts.map +1 -1
  285. package/dist/patterns/auth/ForgotPasswordForm.js +5 -0
  286. package/dist/patterns/auth/ForgotPasswordForm.js.map +1 -1
  287. package/dist/patterns/auth/OtpForm.d.ts +5 -0
  288. package/dist/patterns/auth/OtpForm.d.ts.map +1 -1
  289. package/dist/patterns/auth/OtpForm.js +5 -0
  290. package/dist/patterns/auth/OtpForm.js.map +1 -1
  291. package/dist/patterns/auth/SignInForm.d.ts +5 -0
  292. package/dist/patterns/auth/SignInForm.d.ts.map +1 -1
  293. package/dist/patterns/auth/SignInForm.js +5 -0
  294. package/dist/patterns/auth/SignInForm.js.map +1 -1
  295. package/dist/patterns/auth/SignUpForm.d.ts +5 -0
  296. package/dist/patterns/auth/SignUpForm.d.ts.map +1 -1
  297. package/dist/patterns/auth/SignUpForm.js +5 -0
  298. package/dist/patterns/auth/SignUpForm.js.map +1 -1
  299. package/dist/patterns/chat-list-item/ChatListItem.d.ts +5 -0
  300. package/dist/patterns/chat-list-item/ChatListItem.d.ts.map +1 -1
  301. package/dist/patterns/chat-list-item/ChatListItem.js +5 -0
  302. package/dist/patterns/chat-list-item/ChatListItem.js.map +1 -1
  303. package/dist/patterns/collection-editor/CollectionEditor.d.ts +5 -0
  304. package/dist/patterns/collection-editor/CollectionEditor.d.ts.map +1 -1
  305. package/dist/patterns/collection-editor/CollectionEditor.js +5 -0
  306. package/dist/patterns/collection-editor/CollectionEditor.js.map +1 -1
  307. package/dist/patterns/confirm-dialog/ConfirmDialog.d.ts +5 -0
  308. package/dist/patterns/confirm-dialog/ConfirmDialog.d.ts.map +1 -1
  309. package/dist/patterns/confirm-dialog/ConfirmDialog.js +5 -0
  310. package/dist/patterns/confirm-dialog/ConfirmDialog.js.map +1 -1
  311. package/dist/patterns/disclosure-section/DisclosureSection.d.ts +5 -0
  312. package/dist/patterns/disclosure-section/DisclosureSection.d.ts.map +1 -1
  313. package/dist/patterns/disclosure-section/DisclosureSection.js +5 -0
  314. package/dist/patterns/disclosure-section/DisclosureSection.js.map +1 -1
  315. package/dist/patterns/empty-state/EmptyState.d.ts +12 -0
  316. package/dist/patterns/empty-state/EmptyState.d.ts.map +1 -1
  317. package/dist/patterns/empty-state/EmptyState.js +12 -0
  318. package/dist/patterns/empty-state/EmptyState.js.map +1 -1
  319. package/dist/patterns/filter-bar/FilterBar.d.ts +5 -0
  320. package/dist/patterns/filter-bar/FilterBar.d.ts.map +1 -1
  321. package/dist/patterns/filter-bar/FilterBar.js +5 -0
  322. package/dist/patterns/filter-bar/FilterBar.js.map +1 -1
  323. package/dist/patterns/hero/Hero.d.ts +5 -0
  324. package/dist/patterns/hero/Hero.d.ts.map +1 -1
  325. package/dist/patterns/hero/Hero.js +5 -0
  326. package/dist/patterns/hero/Hero.js.map +1 -1
  327. package/dist/patterns/image-preview/ImagePreview.d.ts +5 -0
  328. package/dist/patterns/image-preview/ImagePreview.d.ts.map +1 -1
  329. package/dist/patterns/image-preview/ImagePreview.js +5 -0
  330. package/dist/patterns/image-preview/ImagePreview.js.map +1 -1
  331. package/dist/patterns/image-upload-field/ImageUploadField.d.ts +5 -0
  332. package/dist/patterns/image-upload-field/ImageUploadField.d.ts.map +1 -1
  333. package/dist/patterns/image-upload-field/ImageUploadField.js +5 -0
  334. package/dist/patterns/image-upload-field/ImageUploadField.js.map +1 -1
  335. package/dist/patterns/inspector-field/InspectorField.d.ts +5 -0
  336. package/dist/patterns/inspector-field/InspectorField.d.ts.map +1 -1
  337. package/dist/patterns/inspector-field/InspectorField.js +5 -0
  338. package/dist/patterns/inspector-field/InspectorField.js.map +1 -1
  339. package/dist/patterns/list/List.d.ts +5 -0
  340. package/dist/patterns/list/List.d.ts.map +1 -1
  341. package/dist/patterns/list/List.js +5 -0
  342. package/dist/patterns/list/List.js.map +1 -1
  343. package/dist/patterns/list/ListRow.d.ts +5 -0
  344. package/dist/patterns/list/ListRow.d.ts.map +1 -1
  345. package/dist/patterns/list/ListRow.js +5 -0
  346. package/dist/patterns/list/ListRow.js.map +1 -1
  347. package/dist/patterns/list/ListSection.d.ts +5 -0
  348. package/dist/patterns/list/ListSection.d.ts.map +1 -1
  349. package/dist/patterns/list/ListSection.js +5 -0
  350. package/dist/patterns/list/ListSection.js.map +1 -1
  351. package/dist/patterns/message-bubble/MessageBubble.d.ts +5 -0
  352. package/dist/patterns/message-bubble/MessageBubble.d.ts.map +1 -1
  353. package/dist/patterns/message-bubble/MessageBubble.js +5 -0
  354. package/dist/patterns/message-bubble/MessageBubble.js.map +1 -1
  355. package/dist/patterns/notice/Notice.d.ts +5 -0
  356. package/dist/patterns/notice/Notice.d.ts.map +1 -1
  357. package/dist/patterns/notice/Notice.js +5 -0
  358. package/dist/patterns/notice/Notice.js.map +1 -1
  359. package/dist/patterns/panel/Panel.d.ts +5 -0
  360. package/dist/patterns/panel/Panel.d.ts.map +1 -1
  361. package/dist/patterns/panel/Panel.js +5 -0
  362. package/dist/patterns/panel/Panel.js.map +1 -1
  363. package/dist/patterns/post-card/PostCard.d.ts +5 -0
  364. package/dist/patterns/post-card/PostCard.d.ts.map +1 -1
  365. package/dist/patterns/post-card/PostCard.js +5 -0
  366. package/dist/patterns/post-card/PostCard.js.map +1 -1
  367. package/dist/patterns/responsive-panel/ResponsivePanel.d.ts +12 -0
  368. package/dist/patterns/responsive-panel/ResponsivePanel.d.ts.map +1 -1
  369. package/dist/patterns/responsive-panel/ResponsivePanel.js +12 -0
  370. package/dist/patterns/responsive-panel/ResponsivePanel.js.map +1 -1
  371. package/dist/patterns/section-header/SectionHeader.d.ts +5 -0
  372. package/dist/patterns/section-header/SectionHeader.d.ts.map +1 -1
  373. package/dist/patterns/section-header/SectionHeader.js +5 -0
  374. package/dist/patterns/section-header/SectionHeader.js.map +1 -1
  375. package/dist/patterns/selection/SelectableItem.d.ts +5 -0
  376. package/dist/patterns/selection/SelectableItem.d.ts.map +1 -1
  377. package/dist/patterns/selection/SelectableItem.js +5 -0
  378. package/dist/patterns/selection/SelectableItem.js.map +1 -1
  379. package/dist/patterns/selection/SelectionProvider.d.ts +10 -0
  380. package/dist/patterns/selection/SelectionProvider.d.ts.map +1 -1
  381. package/dist/patterns/selection/SelectionProvider.js +10 -0
  382. package/dist/patterns/selection/SelectionProvider.js.map +1 -1
  383. package/dist/patterns/settings-row/SettingsRow.d.ts +5 -0
  384. package/dist/patterns/settings-row/SettingsRow.d.ts.map +1 -1
  385. package/dist/patterns/settings-row/SettingsRow.js +5 -0
  386. package/dist/patterns/settings-row/SettingsRow.js.map +1 -1
  387. package/dist/patterns/switch-field/SwitchField.d.ts +5 -0
  388. package/dist/patterns/switch-field/SwitchField.d.ts.map +1 -1
  389. package/dist/patterns/switch-field/SwitchField.js +5 -0
  390. package/dist/patterns/switch-field/SwitchField.js.map +1 -1
  391. package/dist/patterns/theme-composer/ThemeComposer.d.ts +5 -0
  392. package/dist/patterns/theme-composer/ThemeComposer.d.ts.map +1 -1
  393. package/dist/patterns/theme-composer/ThemeComposer.js +5 -0
  394. package/dist/patterns/theme-composer/ThemeComposer.js.map +1 -1
  395. package/dist/patterns/tile-grid/PaletteItem.d.ts +5 -0
  396. package/dist/patterns/tile-grid/PaletteItem.d.ts.map +1 -1
  397. package/dist/patterns/tile-grid/PaletteItem.js +5 -0
  398. package/dist/patterns/tile-grid/PaletteItem.js.map +1 -1
  399. package/dist/patterns/tile-grid/TileGrid.d.ts +5 -0
  400. package/dist/patterns/tile-grid/TileGrid.d.ts.map +1 -1
  401. package/dist/patterns/tile-grid/TileGrid.js +5 -0
  402. package/dist/patterns/tile-grid/TileGrid.js.map +1 -1
  403. package/dist/patterns/timeline/Timeline.d.ts +5 -0
  404. package/dist/patterns/timeline/Timeline.d.ts.map +1 -1
  405. package/dist/patterns/timeline/Timeline.js +5 -0
  406. package/dist/patterns/timeline/Timeline.js.map +1 -1
  407. package/dist/patterns/tree-view/TreeItem.d.ts +5 -0
  408. package/dist/patterns/tree-view/TreeItem.d.ts.map +1 -1
  409. package/dist/patterns/tree-view/TreeItem.js +5 -0
  410. package/dist/patterns/tree-view/TreeItem.js.map +1 -1
  411. package/dist/patterns/tree-view/TreeView.d.ts +5 -0
  412. package/dist/patterns/tree-view/TreeView.d.ts.map +1 -1
  413. package/dist/patterns/tree-view/TreeView.js +5 -0
  414. package/dist/patterns/tree-view/TreeView.js.map +1 -1
  415. package/dist/patterns/zora-drawer-content/ZoraDrawerContent.d.ts +5 -0
  416. package/dist/patterns/zora-drawer-content/ZoraDrawerContent.d.ts.map +1 -1
  417. package/dist/patterns/zora-drawer-content/ZoraDrawerContent.js +5 -0
  418. package/dist/patterns/zora-drawer-content/ZoraDrawerContent.js.map +1 -1
  419. package/dist/patterns/zora-tab-bar/ZoraTabBar.d.ts +5 -0
  420. package/dist/patterns/zora-tab-bar/ZoraTabBar.d.ts.map +1 -1
  421. package/dist/patterns/zora-tab-bar/ZoraTabBar.js +5 -0
  422. package/dist/patterns/zora-tab-bar/ZoraTabBar.js.map +1 -1
  423. package/dist/theme/ZoraProvider.d.ts +12 -0
  424. package/dist/theme/ZoraProvider.d.ts.map +1 -1
  425. package/dist/theme/ZoraProvider.js +12 -0
  426. package/dist/theme/ZoraProvider.js.map +1 -1
  427. package/package.json +1 -1
  428. package/src/components/action-sheet/ActionSheet.tsx +5 -0
  429. package/src/components/action-sheet/ActionSheetItem.tsx +5 -0
  430. package/src/components/app-bar/AppBar.tsx +5 -0
  431. package/src/components/avatar/Avatar.tsx +5 -0
  432. package/src/components/avatar-group/AvatarGroup.tsx +5 -0
  433. package/src/components/badge/Badge.tsx +5 -0
  434. package/src/components/breadcrumbs/Breadcrumbs.tsx +5 -0
  435. package/src/components/button/Button.tsx +12 -0
  436. package/src/components/button-group/ButtonGroup.tsx +5 -0
  437. package/src/components/card/Card.tsx +12 -0
  438. package/src/components/checkbox/Checkbox.tsx +5 -0
  439. package/src/components/checkbox/CheckboxGroup.tsx +5 -0
  440. package/src/components/chip/Chip.tsx +5 -0
  441. package/src/components/chip-group/ChipGroup.tsx +5 -0
  442. package/src/components/data-table/DataTable.tsx +5 -0
  443. package/src/components/date-picker/DatePicker.tsx +5 -0
  444. package/src/components/drawer/Drawer.tsx +5 -0
  445. package/src/components/form/Form.tsx +5 -0
  446. package/src/components/form/FormActions.tsx +5 -0
  447. package/src/components/form/FormError.tsx +5 -0
  448. package/src/components/form/FormField.tsx +5 -0
  449. package/src/components/form/index.ts +0 -1
  450. package/src/components/form/useFormController.ts +3 -2
  451. package/src/components/heading/Heading.tsx +12 -0
  452. package/src/components/icon/Icon.tsx +5 -0
  453. package/src/components/icon-button/IconButton.tsx +5 -0
  454. package/src/components/image/Image.tsx +5 -0
  455. package/src/components/input/Input.tsx +12 -0
  456. package/src/components/media-card/MediaCard.tsx +5 -0
  457. package/src/components/menu/DropdownMenu.tsx +5 -0
  458. package/src/components/menu/Menu.tsx +5 -0
  459. package/src/components/metric-card/MetricCard.tsx +5 -0
  460. package/src/components/modal/Modal.tsx +5 -0
  461. package/src/components/navigation-item/NavigationItem.tsx +5 -0
  462. package/src/components/navigation-list/NavigationList.tsx +5 -0
  463. package/src/components/pagination/Pagination.tsx +5 -0
  464. package/src/components/progress/Progress.tsx +5 -0
  465. package/src/components/radio/Radio.tsx +5 -0
  466. package/src/components/radio/RadioGroup.tsx +5 -0
  467. package/src/components/rating/Rating.tsx +5 -0
  468. package/src/components/search-bar/SearchBar.tsx +5 -0
  469. package/src/components/select/Select.tsx +5 -0
  470. package/src/components/skeleton/Skeleton.tsx +5 -0
  471. package/src/components/skeleton/SkeletonCard.tsx +5 -0
  472. package/src/components/skeleton/SkeletonList.tsx +5 -0
  473. package/src/components/skeleton/SkeletonText.tsx +5 -0
  474. package/src/components/tabs/Tabs.tsx +5 -0
  475. package/src/components/text/Text.tsx +12 -0
  476. package/src/components/textarea/Textarea.tsx +5 -0
  477. package/src/components/time-picker/TimePicker.tsx +5 -0
  478. package/src/components/toast/Toast.tsx +5 -0
  479. package/src/components/toast/ToastProvider.tsx +5 -0
  480. package/src/components/toolbar/Toolbar.tsx +5 -0
  481. package/src/components/toolbar/ToolbarAction.tsx +5 -0
  482. package/src/foundation/Box.tsx +5 -0
  483. package/src/foundation/Center.tsx +5 -0
  484. package/src/foundation/Container.tsx +5 -0
  485. package/src/foundation/Divider.tsx +5 -0
  486. package/src/foundation/Grid.tsx +5 -0
  487. package/src/foundation/Inline.tsx +5 -0
  488. package/src/foundation/Show.tsx +5 -0
  489. package/src/foundation/Spacer.tsx +5 -0
  490. package/src/foundation/Stack.tsx +5 -0
  491. package/src/foundation/Surface.tsx +5 -0
  492. package/src/index.ts +0 -1
  493. package/src/layout/app-shell/AppShell.tsx +12 -0
  494. package/src/layout/screen/Screen.tsx +5 -0
  495. package/src/layout/screen-section/ScreenSection.tsx +5 -0
  496. package/src/layout/settings-layout/SettingsLayout.tsx +5 -0
  497. package/src/layout/sidebar-layout/SidebarLayout.tsx +5 -0
  498. package/src/layout/topbar-layout/TopbarLayout.tsx +5 -0
  499. package/src/patterns/auth/ForgotPasswordForm.tsx +5 -0
  500. package/src/patterns/auth/OtpForm.tsx +5 -0
  501. package/src/patterns/auth/SignInForm.tsx +5 -0
  502. package/src/patterns/auth/SignUpForm.tsx +5 -0
  503. package/src/patterns/chat-list-item/ChatListItem.tsx +5 -0
  504. package/src/patterns/collection-editor/CollectionEditor.tsx +5 -0
  505. package/src/patterns/confirm-dialog/ConfirmDialog.tsx +5 -0
  506. package/src/patterns/disclosure-section/DisclosureSection.tsx +5 -0
  507. package/src/patterns/empty-state/EmptyState.tsx +12 -0
  508. package/src/patterns/filter-bar/FilterBar.tsx +5 -0
  509. package/src/patterns/hero/Hero.tsx +5 -0
  510. package/src/patterns/image-preview/ImagePreview.tsx +5 -0
  511. package/src/patterns/image-upload-field/ImageUploadField.tsx +5 -0
  512. package/src/patterns/inspector-field/InspectorField.tsx +5 -0
  513. package/src/patterns/list/List.tsx +5 -0
  514. package/src/patterns/list/ListRow.tsx +5 -0
  515. package/src/patterns/list/ListSection.tsx +5 -0
  516. package/src/patterns/message-bubble/MessageBubble.tsx +5 -0
  517. package/src/patterns/notice/Notice.tsx +5 -0
  518. package/src/patterns/panel/Panel.tsx +5 -0
  519. package/src/patterns/post-card/PostCard.tsx +5 -0
  520. package/src/patterns/responsive-panel/ResponsivePanel.tsx +12 -0
  521. package/src/patterns/section-header/SectionHeader.tsx +5 -0
  522. package/src/patterns/selection/SelectableItem.tsx +5 -0
  523. package/src/patterns/selection/SelectionProvider.tsx +10 -0
  524. package/src/patterns/settings-row/SettingsRow.tsx +5 -0
  525. package/src/patterns/switch-field/SwitchField.tsx +5 -0
  526. package/src/patterns/theme-composer/ThemeComposer.tsx +5 -0
  527. package/src/patterns/tile-grid/PaletteItem.tsx +5 -0
  528. package/src/patterns/tile-grid/TileGrid.tsx +5 -0
  529. package/src/patterns/timeline/Timeline.tsx +5 -0
  530. package/src/patterns/tree-view/TreeItem.tsx +5 -0
  531. package/src/patterns/tree-view/TreeView.tsx +5 -0
  532. package/src/patterns/zora-drawer-content/ZoraDrawerContent.tsx +5 -0
  533. package/src/patterns/zora-tab-bar/ZoraTabBar.tsx +5 -0
  534. package/src/theme/ZoraProvider.tsx +12 -0
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  # @ankhorage/zora
5
5
 
6
- ![license: MIT](././paradox/badges/license.svg) ![npm: v2.4.8](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
6
+ ![license: MIT](././paradox/badges/license.svg) ![npm: v2.5.2](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
7
7
 
8
8
  ZORA — an opinionated UI kit for React Native + Web built on top of @ankhorage/surface.
9
9
 
@@ -1315,6 +1315,7 @@ graph TD
1315
1315
  package__ankhorage_zora -.-> module_src_patterns_responsive_panel_ResponsivePanel_tsx
1316
1316
  module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_components_drawer_index_ts
1317
1317
  module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_components_modal_index_ts
1318
+ module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_internal_recipes_ts
1318
1319
  module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_patterns_panel_index_ts
1319
1320
  module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_patterns_responsive_panel_types_ts
1320
1321
  module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_theme_withZoraThemeScope_tsx
@@ -1544,3 +1545,3546 @@ graph TD
1544
1545
  ```
1545
1546
 
1546
1547
  </details>
1548
+
1549
+ ## Public API
1550
+
1551
+ ### Components
1552
+
1553
+ <details>
1554
+ <summary>ActionSheet</summary>
1555
+
1556
+ Presents a modal bottom sheet with a list of actions.
1557
+
1558
+ <details>
1559
+ <summary>Props</summary>
1560
+
1561
+ | Prop | Type | Required | Default | Description |
1562
+ | --------------- | ---------------------------- | -------- | ------- | ----------- |
1563
+ | cancelLabel | `React.ReactNode` | no | — | |
1564
+ | children | `React.ReactNode` | no | — | |
1565
+ | closeOnBackdrop | `boolean \| undefined` | no | — | |
1566
+ | description | `React.ReactNode` | no | — | |
1567
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1568
+ | onDismiss | `(() => void) \| undefined` | no | — | |
1569
+ | testID | `string \| undefined` | no | — | |
1570
+ | themeId | `string \| undefined` | no | — | |
1571
+ | title | `React.ReactNode` | no | — | |
1572
+ | visible | `boolean` | yes | — | |
1573
+
1574
+ </details>
1575
+
1576
+ </details>
1577
+
1578
+ <details>
1579
+ <summary>ActionSheetItem</summary>
1580
+
1581
+ Renders a single selectable action row within an `ActionSheet`.
1582
+
1583
+ <details>
1584
+ <summary>Props</summary>
1585
+
1586
+ | Prop | Type | Required | Default | Description |
1587
+ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
1588
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
1589
+ | description | `React.ReactNode` | no | — | |
1590
+ | disabled | `boolean \| undefined` | no | — | |
1591
+ | icon | `ButtonIconSpec \| undefined` | no | — | |
1592
+ | label | `React.ReactNode` | yes | — | |
1593
+ | leading | `React.ReactNode` | no | — | |
1594
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1595
+ | onPress | `(() => void) \| undefined` | no | — | |
1596
+ | selected | `boolean \| undefined` | no | — | |
1597
+ | testID | `string \| undefined` | no | — | |
1598
+ | themeId | `string \| undefined` | no | — | |
1599
+ | trailing | `React.ReactNode` | no | — | |
1600
+
1601
+ </details>
1602
+
1603
+ </details>
1604
+
1605
+ <details>
1606
+ <summary>AppBar</summary>
1607
+
1608
+ Renders a top app bar with title/subtitle and optional leading/trailing actions.
1609
+
1610
+ <details>
1611
+ <summary>Props</summary>
1612
+
1613
+ | Prop | Type | Required | Default | Description |
1614
+ | ----------- | ----------------------------------- | -------- | ------- | ----------- |
1615
+ | actions | `React.ReactNode` | no | — | |
1616
+ | appMode | `AppBarMode \| undefined` | no | — | |
1617
+ | children | `React.ReactNode` | no | — | |
1618
+ | divider | `boolean \| undefined` | no | — | |
1619
+ | leading | `React.ReactNode` | no | — | |
1620
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1621
+ | overflow | `AppBarOverflowAction \| undefined` | no | — | |
1622
+ | safeAreaTop | `boolean \| undefined` | no | — | |
1623
+ | subtitle | `React.ReactNode` | no | — | |
1624
+ | testID | `string \| undefined` | no | — | |
1625
+ | themeId | `string \| undefined` | no | — | |
1626
+ | title | `React.ReactNode` | no | — | |
1627
+
1628
+ </details>
1629
+
1630
+ </details>
1631
+
1632
+ <details>
1633
+ <summary>Avatar</summary>
1634
+
1635
+ Displays a user or entity avatar with image support and initials fallback.
1636
+
1637
+ <details>
1638
+ <summary>Props</summary>
1639
+
1640
+ | Prop | Type | Required | Default | Description |
1641
+ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
1642
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
1643
+ | iconFallback | `ButtonIconSpec \| undefined` | no | — | |
1644
+ | initials | `string \| undefined` | no | — | |
1645
+ | label | `string \| undefined` | no | — | |
1646
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1647
+ | name | `string \| undefined` | no | — | |
1648
+ | shape | `AvatarShape \| undefined` | no | — | |
1649
+ | size | `AvatarSize \| undefined` | no | — | |
1650
+ | source | `ImageSourcePropType \| undefined` | no | — | |
1651
+ | testID | `string \| undefined` | no | — | |
1652
+ | themeId | `string \| undefined` | no | — | |
1653
+
1654
+ </details>
1655
+
1656
+ </details>
1657
+
1658
+ <details>
1659
+ <summary>AvatarGroup</summary>
1660
+
1661
+ Renders a compact group of avatars with optional overflow handling.
1662
+
1663
+ <details>
1664
+ <summary>Props</summary>
1665
+
1666
+ | Prop | Type | Required | Default | Description |
1667
+ | ------------- | -------------------------------------------------- | -------- | ------- | ----------- |
1668
+ | items | `readonly AvatarGroupItem[]` | yes | — | |
1669
+ | max | `number \| undefined` | no | — | |
1670
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1671
+ | overflowLabel | `((overflowCount: number) => string) \| undefined` | no | — | |
1672
+ | shape | `AvatarShape \| undefined` | no | — | |
1673
+ | size | `AvatarSize \| undefined` | no | — | |
1674
+ | testID | `string \| undefined` | no | — | |
1675
+ | themeId | `string \| undefined` | no | — | |
1676
+
1677
+ </details>
1678
+
1679
+ </details>
1680
+
1681
+ <details>
1682
+ <summary>Badge</summary>
1683
+
1684
+ Shows a small status, label, or count indicator.
1685
+
1686
+ <details>
1687
+ <summary>Props</summary>
1688
+
1689
+ | Prop | Type | Required | Default | Description |
1690
+ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
1691
+ | children | `React.ReactNode` | no | — | |
1692
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
1693
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1694
+ | size | `ZoraControlSize \| undefined` | no | — | |
1695
+ | testID | `string \| undefined` | no | — | |
1696
+ | themeId | `string \| undefined` | no | — | |
1697
+ | variant | `ZoraBadgeVariant \| undefined` | no | — | |
1698
+
1699
+ </details>
1700
+
1701
+ </details>
1702
+
1703
+ <details>
1704
+ <summary>Breadcrumbs</summary>
1705
+
1706
+ Renders a breadcrumb trail for hierarchical navigation.
1707
+
1708
+ <details>
1709
+ <summary>Props</summary>
1710
+
1711
+ | Prop | Type | Required | Default | Description |
1712
+ | --------- | ---------------------------- | -------- | ------- | ----------- |
1713
+ | compact | `boolean \| undefined` | no | — | |
1714
+ | disabled | `boolean \| undefined` | no | — | |
1715
+ | items | `readonly BreadcrumbItem[]` | yes | — | |
1716
+ | maxItems | `number \| undefined` | no | — | |
1717
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1718
+ | separator | `React.ReactNode` | no | — | |
1719
+ | testID | `string \| undefined` | no | — | |
1720
+ | themeId | `string \| undefined` | no | — | |
1721
+
1722
+ </details>
1723
+
1724
+ </details>
1725
+
1726
+ <details>
1727
+ <summary>Button</summary>
1728
+
1729
+ Theme-aware action control for primary, secondary, destructive, and neutral actions.
1730
+
1731
+ Use `Button` for explicit user actions that should follow ZORA's semantic color,
1732
+ variant, and size recipes across React Native and React Native Web.
1733
+
1734
+ #### Basic action
1735
+
1736
+ ```tsx
1737
+ <Button color="primary" variant="solid" onPress={save}>
1738
+ Save
1739
+ </Button>
1740
+ ```
1741
+
1742
+ <details>
1743
+ <summary>Props</summary>
1744
+
1745
+ | Prop | Type | Required | Default | Description |
1746
+ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
1747
+ | accessibilityRole | `AccessibilityRole \| undefined` | no | — | |
1748
+ | accessibilityState | `AccessibilityState \| undefined` | no | — | |
1749
+ | accessible | `boolean \| undefined` | no | — | |
1750
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
1751
+ | bg | `Responsive<ColorValue> \| undefined` | no | — | |
1752
+ | borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
1753
+ | borderWidth | `Responsive<number> \| undefined` | no | — | |
1754
+ | bottom | `Responsive<number> \| undefined` | no | — | |
1755
+ | children | `React.ReactNode` | no | — | |
1756
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
1757
+ | disabled | `boolean \| undefined` | no | — | |
1758
+ | flex | `Responsive<number> \| undefined` | no | — | |
1759
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
1760
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
1761
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
1762
+ | fullWidth | `boolean \| undefined` | no | — | |
1763
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
1764
+ | leadingIcon | `ButtonIconSpec \| undefined` | no | — | |
1765
+ | left | `Responsive<number> \| undefined` | no | — | |
1766
+ | loading | `boolean \| undefined` | no | — | |
1767
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
1768
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
1769
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
1770
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
1771
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
1772
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
1773
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
1774
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1775
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
1776
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
1777
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
1778
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
1779
+ | onLongPress | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
1780
+ | onPress | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
1781
+ | opacity | `Responsive<number> \| undefined` | no | — | |
1782
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
1783
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
1784
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
1785
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
1786
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
1787
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
1788
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
1789
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
1790
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
1791
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
1792
+ | right | `Responsive<number> \| undefined` | no | — | |
1793
+ | size | `ZoraControlSize \| undefined` | no | — | |
1794
+ | testID | `string \| undefined` | no | — | |
1795
+ | themeId | `string \| undefined` | no | — | |
1796
+ | top | `Responsive<number> \| undefined` | no | — | |
1797
+ | trailingIcon | `ButtonIconSpec \| undefined` | no | — | |
1798
+ | variant | `ZoraButtonVariant \| undefined` | no | — | |
1799
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
1800
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
1801
+
1802
+ </details>
1803
+
1804
+ </details>
1805
+
1806
+ <details>
1807
+ <summary>ButtonGroup</summary>
1808
+
1809
+ Groups multiple `Button` elements with consistent spacing and alignment.
1810
+
1811
+ <details>
1812
+ <summary>Props</summary>
1813
+
1814
+ | Prop | Type | Required | Default | Description |
1815
+ | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
1816
+ | align | `ButtonGroupAlign \| undefined` | no | — | |
1817
+ | children | `React.ReactNode` | no | — | |
1818
+ | gap | `import("/Users/a_rtiphishl_e/git/zora/node_modules/@ankhorage/surface/dist/index").Responsive<import("/Users/a_rtiphishl_e/git/zora/node_modules/@ankhorage/surface/dist/layout/helpers").SpaceValue> \| undefined` | no | — | |
1819
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1820
+ | orientation | `ButtonGroupOrientation \| undefined` | no | — | |
1821
+ | reverse | `boolean \| undefined` | no | — | |
1822
+ | testID | `string \| undefined` | no | — | |
1823
+ | themeId | `string \| undefined` | no | — | |
1824
+
1825
+ </details>
1826
+
1827
+ </details>
1828
+
1829
+ <details>
1830
+ <summary>Card</summary>
1831
+
1832
+ Structured content container with built-in heading, description, actions, and footer slots.
1833
+
1834
+ Use `Card` for reusable content blocks that should inherit ZORA spacing,
1835
+ radius, tone, and responsive header layout without hand-assembling primitives.
1836
+
1837
+ #### Content card
1838
+
1839
+ ```tsx
1840
+ <Card title="Project" description="Latest activity">
1841
+ ...
1842
+ </Card>
1843
+ ```
1844
+
1845
+ <details>
1846
+ <summary>Props</summary>
1847
+
1848
+ | Prop | Type | Required | Default | Description |
1849
+ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
1850
+ | accessibilityLabel | `string \| undefined` | no | — | |
1851
+ | accessibilityRole | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityRole \| undefined` | no | — | |
1852
+ | accessibilityState | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityState \| undefined` | no | — | |
1853
+ | accessible | `boolean \| undefined` | no | — | |
1854
+ | actions | `React.ReactNode` | no | — | |
1855
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
1856
+ | bottom | `Responsive<number> \| undefined` | no | — | |
1857
+ | children | `React.ReactNode` | no | — | |
1858
+ | compact | `boolean \| undefined` | no | — | |
1859
+ | description | `React.ReactNode` | no | — | |
1860
+ | disabled | `boolean \| undefined` | no | — | |
1861
+ | eyebrow | `React.ReactNode` | no | — | |
1862
+ | flex | `Responsive<number> \| undefined` | no | — | |
1863
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
1864
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
1865
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
1866
+ | footer | `React.ReactNode` | no | — | |
1867
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
1868
+ | left | `Responsive<number> \| undefined` | no | — | |
1869
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
1870
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
1871
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
1872
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
1873
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
1874
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
1875
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
1876
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1877
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
1878
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
1879
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
1880
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
1881
+ | onPress | `(() => void) \| undefined` | no | — | |
1882
+ | opacity | `Responsive<number> \| undefined` | no | — | |
1883
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
1884
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
1885
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
1886
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
1887
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
1888
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
1889
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
1890
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
1891
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
1892
+ | right | `Responsive<number> \| undefined` | no | — | |
1893
+ | style | `StyleProp<ViewStyle>` | no | — | |
1894
+ | testID | `string \| undefined` | no | — | |
1895
+ | themeId | `string \| undefined` | no | — | |
1896
+ | title | `React.ReactNode` | no | — | |
1897
+ | tone | `ZoraCardTone \| undefined` | no | — | |
1898
+ | top | `Responsive<number> \| undefined` | no | — | |
1899
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
1900
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
1901
+
1902
+ </details>
1903
+
1904
+ </details>
1905
+
1906
+ <details>
1907
+ <summary>Checkbox</summary>
1908
+
1909
+ Binary selection control for toggling a value on or off.
1910
+
1911
+ <details>
1912
+ <summary>Props</summary>
1913
+
1914
+ | Prop | Type | Required | Default | Description |
1915
+ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
1916
+ | accessibilityLabel | `string \| undefined` | no | — | |
1917
+ | accessible | `boolean \| undefined` | no | — | |
1918
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
1919
+ | bg | `Responsive<ColorValue> \| undefined` | no | — | |
1920
+ | borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
1921
+ | borderWidth | `Responsive<number> \| undefined` | no | — | |
1922
+ | bottom | `Responsive<number> \| undefined` | no | — | |
1923
+ | checked | `boolean \| undefined` | no | — | |
1924
+ | children | `React.ReactNode` | no | — | |
1925
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
1926
+ | defaultChecked | `boolean \| undefined` | no | — | |
1927
+ | disabled | `boolean \| undefined` | no | — | |
1928
+ | flex | `Responsive<number> \| undefined` | no | — | |
1929
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
1930
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
1931
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
1932
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
1933
+ | invalid | `boolean \| undefined` | no | — | |
1934
+ | left | `Responsive<number> \| undefined` | no | — | |
1935
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
1936
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
1937
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
1938
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
1939
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
1940
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
1941
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
1942
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1943
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
1944
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
1945
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
1946
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
1947
+ | onCheckedChange | `((checked: boolean) => void) \| undefined` | no | — | |
1948
+ | onLongPress | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
1949
+ | opacity | `Responsive<number> \| undefined` | no | — | |
1950
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
1951
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
1952
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
1953
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
1954
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
1955
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
1956
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
1957
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
1958
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
1959
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
1960
+ | readOnly | `boolean \| undefined` | no | — | |
1961
+ | right | `Responsive<number> \| undefined` | no | — | |
1962
+ | size | `ControlSize \| undefined` | no | — | |
1963
+ | testID | `string \| undefined` | no | — | |
1964
+ | themeId | `string \| undefined` | no | — | |
1965
+ | top | `Responsive<number> \| undefined` | no | — | |
1966
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
1967
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
1968
+
1969
+ </details>
1970
+
1971
+ </details>
1972
+
1973
+ <details>
1974
+ <summary>CheckboxGroup</summary>
1975
+
1976
+ Renders a group of checkboxes for multi-select values.
1977
+
1978
+ <details>
1979
+ <summary>Props</summary>
1980
+
1981
+ | Prop | Type | Required | Default | Description |
1982
+ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
1983
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
1984
+ | disabled | `boolean \| undefined` | no | — | |
1985
+ | gap | `"xs" \| "s" \| "m" \| "l" \| undefined` | no | — | |
1986
+ | invalid | `boolean \| undefined` | no | — | |
1987
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
1988
+ | onValueChange | `(value: TValue[]) => void` | yes | — | |
1989
+ | options | `readonly CheckboxGroupOption<TValue>[]` | yes | — | |
1990
+ | orientation | `"horizontal" \| "vertical" \| undefined` | no | — | |
1991
+ | readOnly | `boolean \| undefined` | no | — | |
1992
+ | size | `ControlSize \| undefined` | no | — | |
1993
+ | testID | `string \| undefined` | no | — | |
1994
+ | themeId | `string \| undefined` | no | — | |
1995
+ | value | `readonly TValue[]` | yes | — | |
1996
+
1997
+ </details>
1998
+
1999
+ </details>
2000
+
2001
+ <details>
2002
+ <summary>Chip</summary>
2003
+
2004
+ Compact pill-like control for filters, tags, and quick selections.
2005
+
2006
+ <details>
2007
+ <summary>Props</summary>
2008
+
2009
+ | Prop | Type | Required | Default | Description |
2010
+ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2011
+ | children | `React.ReactNode` | yes | — | |
2012
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
2013
+ | disabled | `boolean \| undefined` | no | — | |
2014
+ | icon | `ButtonIconSpec \| undefined` | no | — | |
2015
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2016
+ | onPress | `(() => void) \| undefined` | no | — | |
2017
+ | selected | `boolean \| undefined` | no | — | |
2018
+ | size | `ZoraControlSize \| undefined` | no | — | |
2019
+ | testID | `string \| undefined` | no | — | |
2020
+ | themeId | `string \| undefined` | no | — | |
2021
+
2022
+ </details>
2023
+
2024
+ </details>
2025
+
2026
+ <details>
2027
+ <summary>ChipGroup</summary>
2028
+
2029
+ Renders a row or wrap layout of `Chip` items.
2030
+
2031
+ <details>
2032
+ <summary>Props</summary>
2033
+
2034
+ | Prop | Type | Required | Default | Description |
2035
+ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2036
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
2037
+ | disabled | `boolean \| undefined` | no | — | |
2038
+ | items | `readonly ChipGroupItem<TValue>[]` | yes | — | |
2039
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2040
+ | multiple | `boolean \| undefined` | no | — | |
2041
+ | onValueChange | `((value: TValue) => void) \| ((value: TValue[]) => void)` | yes | — | |
2042
+ | size | `ZoraControlSize \| undefined` | no | — | |
2043
+ | testID | `string \| undefined` | no | — | |
2044
+ | themeId | `string \| undefined` | no | — | |
2045
+ | value | `TValue \| readonly TValue[]` | yes | — | |
2046
+ | wrap | `boolean \| undefined` | no | — | |
2047
+
2048
+ </details>
2049
+
2050
+ </details>
2051
+
2052
+ <details>
2053
+ <summary>DataTable</summary>
2054
+
2055
+ Displays structured tabular data with responsive desktop/mobile layouts.
2056
+
2057
+ <details>
2058
+ <summary>Props</summary>
2059
+
2060
+ | Prop | Type | Required | Default | Description |
2061
+ | ---------------- | ---------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2062
+ | columns | `readonly DataTableColumn<TRow>[]` | yes | — | |
2063
+ | density | `DataTableDensity \| undefined` | no | — | |
2064
+ | emptyDescription | `React.ReactNode` | no | — | |
2065
+ | emptyTitle | `React.ReactNode` | no | — | |
2066
+ | loading | `boolean \| undefined` | no | — | |
2067
+ | loadingRows | `number \| undefined` | no | — | |
2068
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2069
+ | onSortChange | `((sort: DataTableSortState) => void) \| undefined` | no | — | |
2070
+ | rowActions | `((row: TRow, index: number) => readonly DataTableRowAction<TRow>[]) \| undefined` | no | — | |
2071
+ | rowId | `(row: TRow, index: number) => string` | yes | — | |
2072
+ | rows | `readonly TRow[]` | yes | — | |
2073
+ | sort | `DataTableSortState \| undefined` | no | — | |
2074
+ | testID | `string \| undefined` | no | — | |
2075
+ | themeId | `string \| undefined` | no | — | |
2076
+
2077
+ </details>
2078
+
2079
+ </details>
2080
+
2081
+ <details>
2082
+ <summary>DatePicker</summary>
2083
+
2084
+ Date input control with calendar selection and formatted display value.
2085
+
2086
+ <details>
2087
+ <summary>Props</summary>
2088
+
2089
+ | Prop | Type | Required | Default | Description |
2090
+ | ------------- | ------------------------------------------------- | -------- | ------- | ----------- |
2091
+ | description | `React.ReactNode` | no | — | |
2092
+ | disabled | `boolean \| undefined` | no | — | |
2093
+ | error | `React.ReactNode` | no | — | |
2094
+ | formatDate | `((value: Date) => React.ReactNode) \| undefined` | no | — | |
2095
+ | label | `React.ReactNode` | no | — | |
2096
+ | maxDate | `Date \| undefined` | no | — | |
2097
+ | minDate | `Date \| undefined` | no | — | |
2098
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2099
+ | onValueChange | `((value: DatePickerValue) => void) \| undefined` | no | — | |
2100
+ | placeholder | `React.ReactNode` | no | — | |
2101
+ | required | `boolean \| undefined` | no | — | |
2102
+ | testID | `string \| undefined` | no | — | |
2103
+ | themeId | `string \| undefined` | no | — | |
2104
+ | value | `DatePickerValue` | yes | — | |
2105
+
2106
+ </details>
2107
+
2108
+ </details>
2109
+
2110
+ <details>
2111
+ <summary>Drawer</summary>
2112
+
2113
+ Side panel overlay for navigation, settings, and secondary content.
2114
+
2115
+ <details>
2116
+ <summary>Props</summary>
2117
+
2118
+ | Prop | Type | Required | Default | Description |
2119
+ | --------------- | -------------------------------- | -------- | ------- | ----------- |
2120
+ | children | `React.ReactNode` | no | — | |
2121
+ | closeOnBackdrop | `boolean \| undefined` | no | — | |
2122
+ | description | `React.ReactNode` | no | — | |
2123
+ | footer | `React.ReactNode` | no | — | |
2124
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2125
+ | onDismiss | `(() => void) \| undefined` | no | — | |
2126
+ | position | `"left" \| "right" \| undefined` | no | — | |
2127
+ | testID | `string \| undefined` | no | — | |
2128
+ | themeId | `string \| undefined` | no | — | |
2129
+ | title | `React.ReactNode` | no | — | |
2130
+ | visible | `boolean` | yes | — | |
2131
+
2132
+ </details>
2133
+
2134
+ </details>
2135
+
2136
+ <details>
2137
+ <summary>DropdownMenu</summary>
2138
+
2139
+ ```ts
2140
+ DropdownMenu(props: import("/Users/a_rtiphishl_e/git/zora/src/index").MenuProps) => React.JSX.Element
2141
+ ```
2142
+
2143
+ Convenience wrapper for rendering a `Menu` as a dropdown.
2144
+
2145
+ Related types: `MenuProps`
2146
+
2147
+ <details>
2148
+ <summary>Props</summary>
2149
+
2150
+ | Prop | Type | Required | Default | Description |
2151
+ | ------------- | ------------------------------ | -------- | ------- | ----------- |
2152
+ | actions | `readonly MenuAction[]` | yes | — | |
2153
+ | closeOnSelect | `boolean \| undefined` | no | — | |
2154
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2155
+ | onDismiss | `() => void \| undefined` | no | — | |
2156
+ | testID | `string \| undefined` | no | — | |
2157
+ | themeId | `ZoraThemeId \| undefined` | no | — | |
2158
+ | trigger | `React.ReactNode \| undefined` | no | — | |
2159
+
2160
+ </details>
2161
+
2162
+ </details>
2163
+
2164
+ <details>
2165
+ <summary>Form</summary>
2166
+
2167
+ Composes fields and actions into a validated form layout.
2168
+
2169
+ <details>
2170
+ <summary>Props</summary>
2171
+
2172
+ | Prop | Type | Required | Default | Description |
2173
+ | ---------------- | ------------------------------------------------------ | -------- | ------- | ----------- |
2174
+ | actions | `React.ReactNode` | no | — | |
2175
+ | disabled | `boolean \| undefined` | no | — | |
2176
+ | error | `React.ReactNode` | no | — | |
2177
+ | errors | `Partial<Record<TName, React.ReactNode>> \| undefined` | no | — | |
2178
+ | fields | `readonly FormFieldConfig<TName>[]` | yes | — | |
2179
+ | footer | `React.ReactNode` | no | — | |
2180
+ | loading | `boolean \| undefined` | no | — | |
2181
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2182
+ | onChange | `(values: FormValues<TName>) => void` | yes | — | |
2183
+ | onSubmit | `(values: FormValues<TName>) => void \| Promise<void>` | yes | — | |
2184
+ | submitLabel | `React.ReactNode` | no | — | |
2185
+ | testID | `string \| undefined` | no | — | |
2186
+ | themeId | `string \| undefined` | no | — | |
2187
+ | validateOnChange | `boolean \| undefined` | no | — | |
2188
+ | values | `FormValues<TName>` | yes | — | |
2189
+
2190
+ </details>
2191
+
2192
+ </details>
2193
+
2194
+ <details>
2195
+ <summary>FormActions</summary>
2196
+
2197
+ Standard submit/action area for forms.
2198
+
2199
+ <details>
2200
+ <summary>Props</summary>
2201
+
2202
+ | Prop | Type | Required | Default | Description |
2203
+ | ----------- | ---------------------------- | -------- | ------- | ----------- |
2204
+ | children | `React.ReactNode` | no | — | |
2205
+ | disabled | `boolean \| undefined` | no | — | |
2206
+ | loading | `boolean \| undefined` | no | — | |
2207
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2208
+ | onSubmit | `(() => void) \| undefined` | no | — | |
2209
+ | submitLabel | `React.ReactNode` | no | — | |
2210
+ | testID | `string \| undefined` | no | — | |
2211
+ | themeId | `string \| undefined` | no | — | |
2212
+
2213
+ </details>
2214
+
2215
+ </details>
2216
+
2217
+ <details>
2218
+ <summary>FormError</summary>
2219
+
2220
+ Displays a form-level validation or submission error message.
2221
+
2222
+ <details>
2223
+ <summary>Props</summary>
2224
+
2225
+ | Prop | Type | Required | Default | Description |
2226
+ | ------- | ---------------------------- | -------- | ------- | ----------- |
2227
+ | error | `React.ReactNode` | no | — | |
2228
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2229
+ | testID | `string \| undefined` | no | — | |
2230
+ | themeId | `string \| undefined` | no | — | |
2231
+
2232
+ </details>
2233
+
2234
+ </details>
2235
+
2236
+ <details>
2237
+ <summary>FormField</summary>
2238
+
2239
+ Connects a controlled form value to a labeled input field with error handling.
2240
+
2241
+ <details>
2242
+ <summary>Props</summary>
2243
+
2244
+ | Prop | Type | Required | Default | Description |
2245
+ | -------- | ---------------------------- | -------- | ------- | ----------- |
2246
+ | disabled | `boolean \| undefined` | no | — | |
2247
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2248
+ | testID | `string \| undefined` | no | — | |
2249
+ | themeId | `string \| undefined` | no | — | |
2250
+
2251
+ </details>
2252
+
2253
+ </details>
2254
+
2255
+ <details>
2256
+ <summary>Heading</summary>
2257
+
2258
+ Structured title primitive for accessible page, section, and card headings.
2259
+
2260
+ `Heading` gives consumers a ZORA-owned title API with semantic levels,
2261
+ responsive sizes, and theme-aware emphasis while preserving header semantics.
2262
+
2263
+ #### Section title
2264
+
2265
+ ```tsx
2266
+ <Heading level={2} size="xl">
2267
+ Account settings
2268
+ </Heading>
2269
+ ```
2270
+
2271
+ <details>
2272
+ <summary>Props</summary>
2273
+
2274
+ | Prop | Type | Required | Default | Description |
2275
+ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2276
+ | accessibilityHint | `string \| undefined` | no | — | |
2277
+ | accessibilityLabel | `string \| undefined` | no | — | |
2278
+ | accessibilityRole | `AccessibilityRole \| undefined` | no | — | |
2279
+ | align | `Responsive<HeadingAlign> \| undefined` | no | — | |
2280
+ | children | `React.ReactNode` | no | — | |
2281
+ | color | `Responsive<"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger"> \| undefined` | no | — | |
2282
+ | ellipsizeMode | `"head" \| "middle" \| "tail" \| "clip" \| undefined` | no | — | |
2283
+ | emphasis | `Responsive<"default" \| "subtle" \| "muted" \| "inverse"> \| undefined` | no | — | |
2284
+ | i18nKey | `string \| undefined` | no | — | |
2285
+ | italic | `boolean \| undefined` | no | — | |
2286
+ | level | `HeadingLevel \| undefined` | no | — | |
2287
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2288
+ | nativeID | `string \| undefined` | no | — | |
2289
+ | numberOfLines | `number \| undefined` | no | — | |
2290
+ | selectable | `boolean \| undefined` | no | — | |
2291
+ | size | `Responsive<HeadingSize> \| undefined` | no | — | |
2292
+ | testID | `string \| undefined` | no | — | |
2293
+ | text | `string \| undefined` | no | — | |
2294
+ | themeId | `string \| undefined` | no | — | |
2295
+ | weight | `Responsive<HeadingWeight> \| undefined` | no | — | |
2296
+
2297
+ </details>
2298
+
2299
+ </details>
2300
+
2301
+ <details>
2302
+ <summary>Icon</summary>
2303
+
2304
+ Renders an icon from a configured icon provider with theme-aware defaults.
2305
+
2306
+ <details>
2307
+ <summary>Props</summary>
2308
+
2309
+ | Prop | Type | Required | Default | Description |
2310
+ | -------- | ------------------------------- | -------- | ------- | ----------- |
2311
+ | color | `string \| number \| undefined` | no | — | |
2312
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2313
+ | name | `string` | yes | — | |
2314
+ | provider | `string \| undefined` | no | — | |
2315
+ | size | `string \| number \| undefined` | no | — | |
2316
+ | style | `StyleProp<TextStyle>` | no | — | |
2317
+ | testID | `string \| undefined` | no | — | |
2318
+ | themeId | `string \| undefined` | no | — | |
2319
+
2320
+ </details>
2321
+
2322
+ </details>
2323
+
2324
+ <details>
2325
+ <summary>IconButton</summary>
2326
+
2327
+ Icon-only button for compact actions; requires an accessible `label`.
2328
+
2329
+ <details>
2330
+ <summary>Props</summary>
2331
+
2332
+ | Prop | Type | Required | Default | Description |
2333
+ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2334
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
2335
+ | disabled | `boolean \| undefined` | no | — | |
2336
+ | icon | `ButtonIconSpec` | yes | — | |
2337
+ | label | `string` | yes | — | |
2338
+ | loading | `boolean \| undefined` | no | — | |
2339
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2340
+ | onPress | `(() => void) \| undefined` | no | — | |
2341
+ | size | `ZoraControlSize \| undefined` | no | — | |
2342
+ | testID | `string \| undefined` | no | — | |
2343
+ | themeId | `string \| undefined` | no | — | |
2344
+ | variant | `ZoraButtonVariant \| undefined` | no | — | |
2345
+
2346
+ </details>
2347
+
2348
+ </details>
2349
+
2350
+ <details>
2351
+ <summary>Image</summary>
2352
+
2353
+ Displays an image with cross-platform source and fit handling.
2354
+
2355
+ <details>
2356
+ <summary>Props</summary>
2357
+
2358
+ | Prop | Type | Required | Default | Description |
2359
+ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2360
+ | accessibilityLabel | `string \| undefined` | no | — | |
2361
+ | alt | `string \| undefined` | no | — | |
2362
+ | aspectRatio | `number \| undefined` | no | — | |
2363
+ | fallbackSource | `SurfaceImageSource \| null \| undefined` | no | — | |
2364
+ | fit | `ImageResizeMode \| undefined` | no | — | |
2365
+ | height | `string \| number \| undefined` | no | — | |
2366
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2367
+ | onError | `((error: import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").ImageErrorEvent) => void) \| undefined` | no | — | |
2368
+ | radius | `number \| "s" \| "m" \| "l" \| "none" \| "full" \| undefined` | no | — | |
2369
+ | resizeMode | `ImageResizeMode \| undefined` | no | — | |
2370
+ | source | `SurfaceImageSource \| null \| undefined` | no | — | |
2371
+ | style | `StyleProp<ImageStyle>` | no | — | |
2372
+ | testID | `string \| undefined` | no | — | |
2373
+ | themeId | `string \| undefined` | no | — | |
2374
+ | width | `string \| number \| undefined` | no | — | |
2375
+
2376
+ </details>
2377
+
2378
+ </details>
2379
+
2380
+ <details>
2381
+ <summary>Input</summary>
2382
+
2383
+ Theme-aware text input with semantic sizing and optional leading/trailing icon slots.
2384
+
2385
+ Use `Input` for single-line form controls that need ZORA styling, disabled/read-only
2386
+ handling, and accessible trailing actions without dropping into Surface directly.
2387
+
2388
+ #### Search input
2389
+
2390
+ ```tsx
2391
+ <Input placeholder="Search" leadingIcon={{ name: 'search-outline' }} />
2392
+ ```
2393
+
2394
+ <details>
2395
+ <summary>Props</summary>
2396
+
2397
+ | Prop | Type | Required | Default | Description |
2398
+ | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2399
+ | accessibilityActions | `readonly Readonly<{ name: AccessibilityActionName \| string; label?: string \| undefined; }>[] \| undefined` | no | — | |
2400
+ | accessibilityElementsHidden | `boolean \| undefined` | no | — | |
2401
+ | accessibilityHint | `string \| undefined` | no | — | |
2402
+ | accessibilityIgnoresInvertColors | `boolean \| undefined` | no | — | |
2403
+ | accessibilityLabel | `string \| undefined` | no | — | |
2404
+ | accessibilityLabelledBy | `string \| string[] \| undefined` | no | — | |
2405
+ | accessibilityLanguage | `string \| undefined` | no | — | |
2406
+ | accessibilityLargeContentTitle | `string \| undefined` | no | — | |
2407
+ | accessibilityLiveRegion | `"none" \| "polite" \| "assertive" \| undefined` | no | — | |
2408
+ | accessibilityRespondsToUserInteraction | `boolean \| undefined` | no | — | |
2409
+ | accessibilityRole | `AccessibilityRole \| undefined` | no | — | |
2410
+ | accessibilityShowsLargeContentViewer | `boolean \| undefined` | no | — | |
2411
+ | accessibilityState | `AccessibilityState \| undefined` | no | — | |
2412
+ | accessibilityValue | `AccessibilityValue \| undefined` | no | — | |
2413
+ | accessibilityViewIsModal | `boolean \| undefined` | no | — | |
2414
+ | accessible | `boolean \| undefined` | no | — | |
2415
+ | allowFontScaling | `boolean \| undefined` | no | — | |
2416
+ | aria-busy | `boolean \| undefined` | no | — | |
2417
+ | aria-checked | `boolean \| "mixed" \| undefined` | no | — | |
2418
+ | aria-disabled | `boolean \| undefined` | no | — | |
2419
+ | aria-expanded | `boolean \| undefined` | no | — | |
2420
+ | aria-hidden | `boolean \| undefined` | no | — | |
2421
+ | aria-label | `string \| undefined` | no | — | |
2422
+ | aria-labelledby | `string \| undefined` | no | — | |
2423
+ | aria-live | `"off" \| "polite" \| "assertive" \| undefined` | no | — | |
2424
+ | aria-modal | `boolean \| undefined` | no | — | |
2425
+ | aria-selected | `boolean \| undefined` | no | — | |
2426
+ | aria-valuemax | `number \| undefined` | no | — | |
2427
+ | aria-valuemin | `number \| undefined` | no | — | |
2428
+ | aria-valuenow | `number \| undefined` | no | — | |
2429
+ | aria-valuetext | `string \| undefined` | no | — | |
2430
+ | autoCapitalize | `"none" \| "sentences" \| "words" \| "characters" \| undefined` | no | — | |
2431
+ | autoComplete | `"email" \| "password" \| "tel" \| "url" \| "additional-name" \| "address-line1" \| "address-line2" \| "birthdate-day" \| "birthdate-full" \| "birthdate-month" \| "birthdate-year" \| "cc-csc" \| "cc-exp" \| "cc-exp-day" \| "cc-exp-month" \| "cc-exp-year" \| "cc-number" \| "cc-name" \| "cc-given-name" \| "cc-middle-name" \| "cc-family-name" \| "cc-type" \| "country" \| "current-password" \| "family-name" \| "gender" \| "given-name" \| "honorific-prefix" \| "honorific-suffix" \| "name" \| "name-family" \| "name-given" \| "name-middle" \| "name-middle-initial" \| "name-prefix" \| "name-suffix" \| "new-password" \| "nickname" \| "one-time-code" \| "organization" \| "organization-title" \| "password-new" \| "postal-address" \| "postal-address-country" \| "postal-address-extended" \| "postal-address-extended-postal-code" \| "postal-address-locality" \| "postal-address-region" \| "postal-code" \| "street-address" \| "sms-otp" \| "tel-country-code" \| "tel-national" \| "tel-device" \| "username" \| "username-new" \| "off" \| undefined` | no | — | |
2432
+ | autoCorrect | `boolean \| undefined` | no | — | |
2433
+ | autoFocus | `boolean \| undefined` | no | — | |
2434
+ | blurOnSubmit | `boolean \| undefined` | no | — | |
2435
+ | caretHidden | `boolean \| undefined` | no | — | |
2436
+ | children | `React.ReactNode` | no | — | |
2437
+ | clearButtonMode | `"never" \| "while-editing" \| "unless-editing" \| "always" \| undefined` | no | — | |
2438
+ | clearTextOnFocus | `boolean \| undefined` | no | — | |
2439
+ | collapsable | `boolean \| undefined` | no | — | |
2440
+ | collapsableChildren | `boolean \| undefined` | no | — | |
2441
+ | contextMenuHidden | `boolean \| undefined` | no | — | |
2442
+ | cursorColor | `ColorValue \| null \| undefined` | no | — | |
2443
+ | dataDetectorTypes | `DataDetectorTypes \| DataDetectorTypes[] \| undefined` | no | — | |
2444
+ | defaultValue | `string \| undefined` | no | — | |
2445
+ | disabled | `boolean \| undefined` | no | — | |
2446
+ | disableFullscreenUI | `boolean \| undefined` | no | — | |
2447
+ | disableKeyboardShortcuts | `boolean \| undefined` | no | — | |
2448
+ | enablesReturnKeyAutomatically | `boolean \| undefined` | no | — | |
2449
+ | enterKeyHint | `EnterKeyHintTypeOptions \| undefined` | no | — | |
2450
+ | focusable | `boolean \| undefined` | no | — | |
2451
+ | hasTVPreferredFocus | `boolean \| undefined` | no | — | |
2452
+ | hitSlop | `number \| Insets \| null \| undefined` | no | — | |
2453
+ | id | `string \| undefined` | no | — | |
2454
+ | importantForAccessibility | `"auto" \| "yes" \| "no" \| "no-hide-descendants" \| undefined` | no | — | |
2455
+ | importantForAutofill | `"auto" \| "yes" \| "no" \| "noExcludeDescendants" \| "yesExcludeDescendants" \| undefined` | no | — | |
2456
+ | inlineImageLeft | `string \| undefined` | no | — | |
2457
+ | inlineImagePadding | `number \| undefined` | no | — | |
2458
+ | inputAccessoryViewButtonLabel | `string \| undefined` | no | — | |
2459
+ | inputAccessoryViewID | `string \| undefined` | no | — | |
2460
+ | inputMode | `InputModeOptions \| undefined` | no | — | |
2461
+ | invalid | `boolean \| undefined` | no | — | |
2462
+ | isTVSelectable | `boolean \| undefined` | no | — | |
2463
+ | keyboardAppearance | `"light" \| "dark" \| "default" \| undefined` | no | — | |
2464
+ | keyboardType | `KeyboardTypeOptions \| undefined` | no | — | |
2465
+ | leadingIcon | `Surface.ButtonIconSpec \| undefined` | no | — | |
2466
+ | lineBreakModeIOS | `"head" \| "middle" \| "tail" \| "clip" \| "wordWrapping" \| "char" \| undefined` | no | — | |
2467
+ | lineBreakStrategyIOS | `"none" \| "standard" \| "hangul-word" \| "push-out" \| undefined` | no | — | |
2468
+ | maxFontSizeMultiplier | `number \| null \| undefined` | no | — | |
2469
+ | maxLength | `number \| undefined` | no | — | |
2470
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2471
+ | multiline | `boolean \| undefined` | no | — | |
2472
+ | nativeID | `string \| undefined` | no | — | |
2473
+ | needsOffscreenAlphaCompositing | `boolean \| undefined` | no | — | |
2474
+ | numberOfLines | `number \| undefined` | no | — | |
2475
+ | onAccessibilityAction | `((event: AccessibilityActionEvent) => void) \| undefined` | no | — | |
2476
+ | onAccessibilityEscape | `(() => void) \| undefined` | no | — | |
2477
+ | onAccessibilityTap | `(() => void) \| undefined` | no | — | |
2478
+ | onBlur | `((e: BlurEvent) => void) \| undefined` | no | — | |
2479
+ | onChange | `((e: TextInputChangeEvent) => void) \| undefined` | no | — | |
2480
+ | onChangeText | `((text: string) => void) \| undefined` | no | — | |
2481
+ | onContentSizeChange | `((e: TextInputContentSizeChangeEvent) => void) \| undefined` | no | — | |
2482
+ | onEndEditing | `((e: TextInputEndEditingEvent) => void) \| undefined` | no | — | |
2483
+ | onFocus | `((e: FocusEvent) => void) \| undefined` | no | — | |
2484
+ | onKeyPress | `((e: TextInputKeyPressEvent) => void) \| undefined` | no | — | |
2485
+ | onLayout | `((event: LayoutChangeEvent) => void) \| undefined` | no | — | |
2486
+ | onMagicTap | `(() => void) \| undefined` | no | — | |
2487
+ | onMoveShouldSetResponder | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
2488
+ | onMoveShouldSetResponderCapture | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
2489
+ | onPointerCancel | `((event: PointerEvent) => void) \| undefined` | no | — | |
2490
+ | onPointerCancelCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
2491
+ | onPointerDown | `((event: PointerEvent) => void) \| undefined` | no | — | |
2492
+ | onPointerDownCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
2493
+ | onPointerEnter | `((event: PointerEvent) => void) \| undefined` | no | — | |
2494
+ | onPointerEnterCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
2495
+ | onPointerLeave | `((event: PointerEvent) => void) \| undefined` | no | — | |
2496
+ | onPointerLeaveCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
2497
+ | onPointerMove | `((event: PointerEvent) => void) \| undefined` | no | — | |
2498
+ | onPointerMoveCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
2499
+ | onPointerUp | `((event: PointerEvent) => void) \| undefined` | no | — | |
2500
+ | onPointerUpCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
2501
+ | onPress | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void) \| undefined` | no | — | |
2502
+ | onPressIn | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void) \| undefined` | no | — | |
2503
+ | onPressOut | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void) \| undefined` | no | — | |
2504
+ | onResponderEnd | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2505
+ | onResponderGrant | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2506
+ | onResponderMove | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2507
+ | onResponderReject | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2508
+ | onResponderRelease | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2509
+ | onResponderStart | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2510
+ | onResponderTerminate | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2511
+ | onResponderTerminationRequest | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
2512
+ | onScroll | `((e: TextInputScrollEvent) => void) \| undefined` | no | — | |
2513
+ | onSelectionChange | `((e: TextInputSelectionChangeEvent) => void) \| undefined` | no | — | |
2514
+ | onStartShouldSetResponder | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
2515
+ | onStartShouldSetResponderCapture | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
2516
+ | onSubmitEditing | `((e: TextInputSubmitEditingEvent) => void) \| undefined` | no | — | |
2517
+ | onTouchCancel | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2518
+ | onTouchEnd | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2519
+ | onTouchEndCapture | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2520
+ | onTouchMove | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2521
+ | onTouchStart | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2522
+ | passwordRules | `string \| null \| undefined` | no | — | |
2523
+ | placeholder | `string \| undefined` | no | — | |
2524
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
2525
+ | readOnly | `boolean \| undefined` | no | — | |
2526
+ | rejectResponderTermination | `boolean \| null \| undefined` | no | — | |
2527
+ | removeClippedSubviews | `boolean \| undefined` | no | — | |
2528
+ | renderToHardwareTextureAndroid | `boolean \| undefined` | no | — | |
2529
+ | returnKeyLabel | `string \| undefined` | no | — | |
2530
+ | returnKeyType | `ReturnKeyTypeOptions \| undefined` | no | — | |
2531
+ | role | `Role \| undefined` | no | — | |
2532
+ | screenReaderFocusable | `boolean \| undefined` | no | — | |
2533
+ | scrollEnabled | `boolean \| undefined` | no | — | |
2534
+ | secureTextEntry | `boolean \| undefined` | no | — | |
2535
+ | selection | `{ start: number; end?: number \| undefined; } \| undefined` | no | — | |
2536
+ | selectionColor | `ColorValue \| undefined` | no | — | |
2537
+ | selectionHandleColor | `ColorValue \| null \| undefined` | no | — | |
2538
+ | selectionState | `DocumentSelectionState \| undefined` | no | — | |
2539
+ | selectTextOnFocus | `boolean \| undefined` | no | — | |
2540
+ | shouldRasterizeIOS | `boolean \| undefined` | no | — | |
2541
+ | showSoftInputOnFocus | `boolean \| undefined` | no | — | |
2542
+ | size | `ZoraControlSize \| undefined` | no | — | |
2543
+ | smartInsertDelete | `boolean \| undefined` | no | — | |
2544
+ | spellCheck | `boolean \| undefined` | no | — | |
2545
+ | style | `StyleProp<TextStyle>` | no | — | |
2546
+ | submitBehavior | `SubmitBehavior \| undefined` | no | — | |
2547
+ | tabIndex | `0 \| -1 \| undefined` | no | — | |
2548
+ | testID | `string \| undefined` | no | — | |
2549
+ | textAlign | `"left" \| "right" \| "center" \| undefined` | no | — | |
2550
+ | textAlignVertical | `"top" \| "bottom" \| "auto" \| "center" \| undefined` | no | — | |
2551
+ | textBreakStrategy | `"simple" \| "highQuality" \| "balanced" \| undefined` | no | — | |
2552
+ | textContentType | `"none" \| "password" \| "name" \| "nickname" \| "username" \| "URL" \| "addressCity" \| "addressCityAndState" \| "addressState" \| "countryName" \| "creditCardNumber" \| "creditCardExpiration" \| "creditCardExpirationMonth" \| "creditCardExpirationYear" \| "creditCardSecurityCode" \| "creditCardType" \| "creditCardName" \| "creditCardGivenName" \| "creditCardMiddleName" \| "creditCardFamilyName" \| "emailAddress" \| "familyName" \| "fullStreetAddress" \| "givenName" \| "jobTitle" \| "location" \| "middleName" \| "namePrefix" \| "nameSuffix" \| "organizationName" \| "postalCode" \| "streetAddressLine1" \| "streetAddressLine2" \| "sublocality" \| "telephoneNumber" \| "newPassword" \| "oneTimeCode" \| "birthdate" \| "birthdateDay" \| "birthdateMonth" \| "birthdateYear" \| "cellularEID" \| "cellularIMEI" \| "dateTime" \| "flightNumber" \| "shipmentTrackingNumber" \| undefined` | no | — | |
2553
+ | themeId | `string \| undefined` | no | — | |
2554
+ | trailingAction | `InputTrailingAction \| undefined` | no | — | |
2555
+ | trailingIcon | `Surface.ButtonIconSpec \| undefined` | no | — | |
2556
+ | tvParallaxMagnification | `number \| undefined` | no | — | |
2557
+ | tvParallaxShiftDistanceX | `number \| undefined` | no | — | |
2558
+ | tvParallaxShiftDistanceY | `number \| undefined` | no | — | |
2559
+ | tvParallaxTiltAngle | `number \| undefined` | no | — | |
2560
+ | underlineColorAndroid | `ColorValue \| undefined` | no | — | |
2561
+ | value | `string \| undefined` | no | — | |
2562
+ | verticalAlign | `"top" \| "bottom" \| "auto" \| "middle" \| undefined` | no | — | |
2563
+
2564
+ </details>
2565
+
2566
+ </details>
2567
+
2568
+ <details>
2569
+ <summary>MediaCard</summary>
2570
+
2571
+ Card layout with an optional media/header region and structured content slots.
2572
+
2573
+ <details>
2574
+ <summary>Props</summary>
2575
+
2576
+ | Prop | Type | Required | Default | Description |
2577
+ | ---------------- | ---------------------------------- | -------- | ------- | ----------- |
2578
+ | actions | `React.ReactNode` | no | — | |
2579
+ | badges | `React.ReactNode` | no | — | |
2580
+ | children | `React.ReactNode` | no | — | |
2581
+ | compact | `boolean \| undefined` | no | — | |
2582
+ | description | `React.ReactNode` | no | — | |
2583
+ | eyebrow | `React.ReactNode` | no | — | |
2584
+ | footer | `React.ReactNode` | no | — | |
2585
+ | image | `React.ReactNode` | no | — | |
2586
+ | imageAspectRatio | `number \| undefined` | no | — | |
2587
+ | imageLabel | `string \| undefined` | no | — | |
2588
+ | imageSource | `ImageSourcePropType \| undefined` | no | — | |
2589
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2590
+ | onPress | `(() => void) \| undefined` | no | — | |
2591
+ | testID | `string \| undefined` | no | — | |
2592
+ | themeId | `string \| undefined` | no | — | |
2593
+ | title | `React.ReactNode` | yes | — | |
2594
+ | tone | `ZoraCardTone \| undefined` | no | — | |
2595
+
2596
+ </details>
2597
+
2598
+ </details>
2599
+
2600
+ <details>
2601
+ <summary>Menu</summary>
2602
+
2603
+ Presents a list of actions as a menu with optional icons and intent styling.
2604
+
2605
+ <details>
2606
+ <summary>Props</summary>
2607
+
2608
+ | Prop | Type | Required | Default | Description |
2609
+ | ------------- | ---------------------------- | -------- | ------- | ----------- |
2610
+ | actions | `readonly MenuAction[]` | yes | — | |
2611
+ | closeOnSelect | `boolean \| undefined` | no | — | |
2612
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2613
+ | onDismiss | `(() => void) \| undefined` | no | — | |
2614
+ | testID | `string \| undefined` | no | — | |
2615
+ | themeId | `string \| undefined` | no | — | |
2616
+ | trigger | `React.ReactNode` | no | — | |
2617
+
2618
+ </details>
2619
+
2620
+ </details>
2621
+
2622
+ <details>
2623
+ <summary>MetricCard</summary>
2624
+
2625
+ Highlights a key metric with label, value, and optional trend/actions.
2626
+
2627
+ <details>
2628
+ <summary>Props</summary>
2629
+
2630
+ | Prop | Type | Required | Default | Description |
2631
+ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2632
+ | actions | `React.ReactNode` | no | — | |
2633
+ | compact | `boolean \| undefined` | no | — | |
2634
+ | delta | `React.ReactNode` | no | — | |
2635
+ | deltaColor | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
2636
+ | description | `React.ReactNode` | no | — | |
2637
+ | icon | `ButtonIconSpec \| undefined` | no | — | |
2638
+ | label | `React.ReactNode` | yes | — | |
2639
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2640
+ | onPress | `(() => void) \| undefined` | no | — | |
2641
+ | testID | `string \| undefined` | no | — | |
2642
+ | themeId | `string \| undefined` | no | — | |
2643
+ | tone | `ZoraCardTone \| undefined` | no | — | |
2644
+ | value | `React.ReactNode` | yes | — | |
2645
+
2646
+ </details>
2647
+
2648
+ </details>
2649
+
2650
+ <details>
2651
+ <summary>Modal</summary>
2652
+
2653
+ Modal dialog surface with header/content/footer slots.
2654
+
2655
+ <details>
2656
+ <summary>Props</summary>
2657
+
2658
+ | Prop | Type | Required | Default | Description |
2659
+ | --------------- | ------------------------------- | -------- | ------- | ----------- |
2660
+ | children | `React.ReactNode` | no | — | |
2661
+ | closeOnBackdrop | `boolean \| undefined` | no | — | |
2662
+ | description | `React.ReactNode` | no | — | |
2663
+ | footer | `React.ReactNode` | no | — | |
2664
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2665
+ | onDismiss | `(() => void) \| undefined` | no | — | |
2666
+ | testID | `string \| undefined` | no | — | |
2667
+ | themeId | `string \| undefined` | no | — | |
2668
+ | title | `React.ReactNode` | no | — | |
2669
+ | visible | `boolean` | yes | — | |
2670
+ | width | `ZoraContentWidth \| undefined` | no | — | |
2671
+
2672
+ </details>
2673
+
2674
+ </details>
2675
+
2676
+ <details>
2677
+ <summary>NavigationItem</summary>
2678
+
2679
+ Renders a single navigation entry with active/disabled state support.
2680
+
2681
+ <details>
2682
+ <summary>Props</summary>
2683
+
2684
+ | Prop | Type | Required | Default | Description |
2685
+ | -------- | ------------------------------------------ | -------- | ------- | ----------- |
2686
+ | active | `boolean \| undefined` | no | — | |
2687
+ | compact | `boolean \| undefined` | no | — | |
2688
+ | metadata | `ZoraNavigationRouteMetadata \| undefined` | no | — | |
2689
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2690
+ | onPress | `(() => void) \| undefined` | no | — | |
2691
+ | route | `ZoraNavigationRouteState` | yes | — | |
2692
+ | testID | `string \| undefined` | no | — | |
2693
+ | themeId | `string \| undefined` | no | — | |
2694
+
2695
+ </details>
2696
+
2697
+ </details>
2698
+
2699
+ <details>
2700
+ <summary>NavigationList</summary>
2701
+
2702
+ Renders a navigation list from route metadata with active state mapping.
2703
+
2704
+ <details>
2705
+ <summary>Props</summary>
2706
+
2707
+ | Prop | Type | Required | Default | Description |
2708
+ | -------------- | ------------------------------------------------------------------- | -------- | ------- | ----------- |
2709
+ | activeRouteKey | `string \| undefined` | no | — | |
2710
+ | compact | `boolean \| undefined` | no | — | |
2711
+ | footer | `React.ReactNode` | no | — | |
2712
+ | header | `React.ReactNode` | no | — | |
2713
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2714
+ | onRoutePress | `((route: ZoraNavigationRouteState) => void) \| undefined` | no | — | |
2715
+ | orientation | `"horizontal" \| "vertical" \| undefined` | no | — | |
2716
+ | routeMap | `Partial<Record<string, ZoraNavigationRouteMetadata>> \| undefined` | no | — | |
2717
+ | routes | `readonly ZoraNavigationRouteState[]` | yes | — | |
2718
+ | testID | `string \| undefined` | no | — | |
2719
+ | themeId | `string \| undefined` | no | — | |
2720
+
2721
+ </details>
2722
+
2723
+ </details>
2724
+
2725
+ <details>
2726
+ <summary>Pagination</summary>
2727
+
2728
+ Pagination control for navigating between pages of results.
2729
+
2730
+ <details>
2731
+ <summary>Props</summary>
2732
+
2733
+ | Prop | Type | Required | Default | Description |
2734
+ | ------------- | --------------------------------------- | -------- | ------- | ----------- |
2735
+ | boundaryCount | `number \| undefined` | no | — | |
2736
+ | compact | `boolean \| undefined` | no | — | |
2737
+ | disabled | `boolean \| undefined` | no | — | |
2738
+ | firstLabel | `React.ReactNode` | no | — | |
2739
+ | lastLabel | `React.ReactNode` | no | — | |
2740
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2741
+ | nextLabel | `React.ReactNode` | no | — | |
2742
+ | onPageChange | `((page: number) => void) \| undefined` | no | — | |
2743
+ | page | `number` | yes | — | |
2744
+ | pageCount | `number` | yes | — | |
2745
+ | previousLabel | `React.ReactNode` | no | — | |
2746
+ | showFirstLast | `boolean \| undefined` | no | — | |
2747
+ | siblingCount | `number \| undefined` | no | — | |
2748
+ | testID | `string \| undefined` | no | — | |
2749
+ | themeId | `string \| undefined` | no | — | |
2750
+
2751
+ </details>
2752
+
2753
+ </details>
2754
+
2755
+ <details>
2756
+ <summary>Progress</summary>
2757
+
2758
+ Progress indicator for determinate and indeterminate loading states.
2759
+
2760
+ <details>
2761
+ <summary>Props</summary>
2762
+
2763
+ | Prop | Type | Required | Default | Description |
2764
+ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2765
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
2766
+ | max | `number \| undefined` | no | — | |
2767
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2768
+ | size | `ZoraControlSize \| undefined` | no | — | |
2769
+ | testID | `string \| undefined` | no | — | |
2770
+ | themeId | `string \| undefined` | no | — | |
2771
+ | value | `number` | yes | — | |
2772
+
2773
+ </details>
2774
+
2775
+ </details>
2776
+
2777
+ <details>
2778
+ <summary>Radio</summary>
2779
+
2780
+ Single-choice selection control used within a radio group.
2781
+
2782
+ <details>
2783
+ <summary>Props</summary>
2784
+
2785
+ | Prop | Type | Required | Default | Description |
2786
+ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2787
+ | accessibilityLabel | `string \| undefined` | no | — | |
2788
+ | accessible | `boolean \| undefined` | no | — | |
2789
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
2790
+ | bg | `Responsive<ColorValue> \| undefined` | no | — | |
2791
+ | borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
2792
+ | borderWidth | `Responsive<number> \| undefined` | no | — | |
2793
+ | bottom | `Responsive<number> \| undefined` | no | — | |
2794
+ | checked | `boolean \| undefined` | no | — | |
2795
+ | children | `React.ReactNode` | no | — | |
2796
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
2797
+ | defaultChecked | `boolean \| undefined` | no | — | |
2798
+ | disabled | `boolean \| undefined` | no | — | |
2799
+ | flex | `Responsive<number> \| undefined` | no | — | |
2800
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
2801
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
2802
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
2803
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
2804
+ | invalid | `boolean \| undefined` | no | — | |
2805
+ | left | `Responsive<number> \| undefined` | no | — | |
2806
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
2807
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
2808
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
2809
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
2810
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
2811
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
2812
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
2813
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2814
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
2815
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
2816
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
2817
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
2818
+ | onCheckedChange | `((checked: boolean) => void) \| undefined` | no | — | |
2819
+ | onLongPress | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
2820
+ | opacity | `Responsive<number> \| undefined` | no | — | |
2821
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
2822
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
2823
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
2824
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
2825
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
2826
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
2827
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
2828
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
2829
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
2830
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
2831
+ | readOnly | `boolean \| undefined` | no | — | |
2832
+ | right | `Responsive<number> \| undefined` | no | — | |
2833
+ | size | `ControlSize \| undefined` | no | — | |
2834
+ | testID | `string \| undefined` | no | — | |
2835
+ | themeId | `string \| undefined` | no | — | |
2836
+ | top | `Responsive<number> \| undefined` | no | — | |
2837
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
2838
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
2839
+
2840
+ </details>
2841
+
2842
+ </details>
2843
+
2844
+ <details>
2845
+ <summary>RadioGroup</summary>
2846
+
2847
+ Renders a group of radio options for selecting a single value.
2848
+
2849
+ <details>
2850
+ <summary>Props</summary>
2851
+
2852
+ | Prop | Type | Required | Default | Description |
2853
+ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2854
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
2855
+ | disabled | `boolean \| undefined` | no | — | |
2856
+ | gap | `"xs" \| "s" \| "m" \| "l" \| undefined` | no | — | |
2857
+ | invalid | `boolean \| undefined` | no | — | |
2858
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2859
+ | onValueChange | `(value: TValue) => void` | yes | — | |
2860
+ | options | `readonly RadioGroupOption<TValue>[]` | yes | — | |
2861
+ | orientation | `"horizontal" \| "vertical" \| undefined` | no | — | |
2862
+ | readOnly | `boolean \| undefined` | no | — | |
2863
+ | size | `ControlSize \| undefined` | no | — | |
2864
+ | testID | `string \| undefined` | no | — | |
2865
+ | themeId | `string \| undefined` | no | — | |
2866
+ | value | `TValue` | yes | — | |
2867
+
2868
+ </details>
2869
+
2870
+ </details>
2871
+
2872
+ <details>
2873
+ <summary>Rating</summary>
2874
+
2875
+ Displays a star-based rating value with optional half steps.
2876
+
2877
+ <details>
2878
+ <summary>Props</summary>
2879
+
2880
+ | Prop | Type | Required | Default | Description |
2881
+ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2882
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
2883
+ | max | `number \| undefined` | no | — | |
2884
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2885
+ | size | `ZoraControlSize \| undefined` | no | — | |
2886
+ | testID | `string \| undefined` | no | — | |
2887
+ | themeId | `string \| undefined` | no | — | |
2888
+ | value | `number` | yes | — | |
2889
+
2890
+ </details>
2891
+
2892
+ </details>
2893
+
2894
+ <details>
2895
+ <summary>SearchBar</summary>
2896
+
2897
+ Search input with leading icon and optional trailing action.
2898
+
2899
+ <details>
2900
+ <summary>Props</summary>
2901
+
2902
+ | Prop | Type | Required | Default | Description |
2903
+ | ------------- | ---------------------------------------- | -------- | ------- | ----------- |
2904
+ | clearable | `boolean \| undefined` | no | — | |
2905
+ | disabled | `boolean \| undefined` | no | — | |
2906
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2907
+ | onClear | `(() => void) \| undefined` | no | — | |
2908
+ | onSubmit | `((value: string) => void) \| undefined` | no | — | |
2909
+ | onValueChange | `(value: string) => void` | yes | — | |
2910
+ | placeholder | `string \| undefined` | no | — | |
2911
+ | readOnly | `boolean \| undefined` | no | — | |
2912
+ | size | `ZoraControlSize \| undefined` | no | — | |
2913
+ | testID | `string \| undefined` | no | — | |
2914
+ | themeId | `string \| undefined` | no | — | |
2915
+ | value | `string` | yes | — | |
2916
+
2917
+ </details>
2918
+
2919
+ </details>
2920
+
2921
+ <details>
2922
+ <summary>Select</summary>
2923
+
2924
+ Select control for choosing a value from a list of options.
2925
+
2926
+ <details>
2927
+ <summary>Props</summary>
2928
+
2929
+ | Prop | Type | Required | Default | Description |
2930
+ | ------------- | --------------------------------- | -------- | ------- | ----------- |
2931
+ | disabled | `boolean \| undefined` | no | — | |
2932
+ | invalid | `boolean \| undefined` | no | — | |
2933
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2934
+ | onValueChange | `(value: TValue) => void` | yes | — | |
2935
+ | options | `readonly SelectOption<TValue>[]` | yes | — | |
2936
+ | testID | `string \| undefined` | no | — | |
2937
+ | themeId | `string \| undefined` | no | — | |
2938
+ | value | `TValue` | yes | — | |
2939
+
2940
+ </details>
2941
+
2942
+ </details>
2943
+
2944
+ <details>
2945
+ <summary>Skeleton</summary>
2946
+
2947
+ Generic skeleton placeholder for loading states.
2948
+
2949
+ <details>
2950
+ <summary>Props</summary>
2951
+
2952
+ | Prop | Type | Required | Default | Description |
2953
+ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
2954
+ | height | `import("/Users/a_rtiphishl_e/git/zora/node_modules/@ankhorage/surface/dist/index").Responsive<string \| number> \| undefined` | no | — | |
2955
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2956
+ | radius | `import("/Users/a_rtiphishl_e/git/zora/node_modules/@ankhorage/surface/dist/index").Responsive<number \| "s" \| "m" \| "l" \| "none" \| "full"> \| undefined` | no | — | |
2957
+ | testID | `string \| undefined` | no | — | |
2958
+ | themeId | `string \| undefined` | no | — | |
2959
+ | width | `import("/Users/a_rtiphishl_e/git/zora/node_modules/@ankhorage/surface/dist/index").Responsive<string \| number> \| undefined` | no | — | |
2960
+
2961
+ </details>
2962
+
2963
+ </details>
2964
+
2965
+ <details>
2966
+ <summary>SkeletonCard</summary>
2967
+
2968
+ Skeleton placeholder that matches the structure of a `Card`.
2969
+
2970
+ <details>
2971
+ <summary>Props</summary>
2972
+
2973
+ | Prop | Type | Required | Default | Description |
2974
+ | ------- | ---------------------------- | -------- | ------- | ----------- |
2975
+ | actions | `boolean \| undefined` | no | — | |
2976
+ | compact | `boolean \| undefined` | no | — | |
2977
+ | lines | `number \| undefined` | no | — | |
2978
+ | media | `boolean \| undefined` | no | — | |
2979
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
2980
+ | testID | `string \| undefined` | no | — | |
2981
+ | themeId | `string \| undefined` | no | — | |
2982
+
2983
+ </details>
2984
+
2985
+ </details>
2986
+
2987
+ <details>
2988
+ <summary>SkeletonList</summary>
2989
+
2990
+ Skeleton placeholder list for loading states in list views.
2991
+
2992
+ <details>
2993
+ <summary>Props</summary>
2994
+
2995
+ | Prop | Type | Required | Default | Description |
2996
+ | ------- | ---------------------------------- | -------- | ------- | ----------- |
2997
+ | avatar | `boolean \| undefined` | no | — | |
2998
+ | compact | `boolean \| undefined` | no | — | |
2999
+ | lines | `number \| undefined` | no | — | |
3000
+ | media | `boolean \| undefined` | no | — | |
3001
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3002
+ | rows | `number \| undefined` | no | — | |
3003
+ | testID | `string \| undefined` | no | — | |
3004
+ | themeId | `string \| undefined` | no | — | |
3005
+ | variant | `SkeletonListVariant \| undefined` | no | — | |
3006
+
3007
+ </details>
3008
+
3009
+ </details>
3010
+
3011
+ <details>
3012
+ <summary>SkeletonText</summary>
3013
+
3014
+ Multi-line skeleton placeholder for text content.
3015
+
3016
+ <details>
3017
+ <summary>Props</summary>
3018
+
3019
+ | Prop | Type | Required | Default | Description |
3020
+ | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
3021
+ | gap | `import("/Users/a_rtiphishl_e/git/zora/node_modules/@ankhorage/surface/dist/index").Responsive<import("/Users/a_rtiphishl_e/git/zora/node_modules/@ankhorage/surface/dist/layout/helpers").SpaceValue> \| undefined` | no | — | |
3022
+ | lastLineWidth | `import("/Users/a_rtiphishl_e/git/zora/node_modules/@ankhorage/surface/dist/index").Responsive<string \| number> \| undefined` | no | — | |
3023
+ | lineHeight | `number \| undefined` | no | — | |
3024
+ | lines | `number \| undefined` | no | — | |
3025
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3026
+ | testID | `string \| undefined` | no | — | |
3027
+ | themeId | `string \| undefined` | no | — | |
3028
+ | width | `import("/Users/a_rtiphishl_e/git/zora/node_modules/@ankhorage/surface/dist/index").Responsive<string \| number> \| undefined` | no | — | |
3029
+
3030
+ </details>
3031
+
3032
+ </details>
3033
+
3034
+ <details>
3035
+ <summary>Tabs</summary>
3036
+
3037
+ Tab navigation for switching between views or content sections.
3038
+
3039
+ <details>
3040
+ <summary>Props</summary>
3041
+
3042
+ | Prop | Type | Required | Default | Description |
3043
+ | ------------- | ------------------------------ | -------- | ------- | ----------- |
3044
+ | disabled | `boolean \| undefined` | no | — | |
3045
+ | items | `readonly TabItem<TValue>[]` | yes | — | |
3046
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3047
+ | onValueChange | `(value: TValue) => void` | yes | — | |
3048
+ | size | `ZoraControlSize \| undefined` | no | — | |
3049
+ | testID | `string \| undefined` | no | — | |
3050
+ | themeId | `string \| undefined` | no | — | |
3051
+ | value | `TValue` | yes | — | |
3052
+ | variant | `TabsVariant \| undefined` | no | — | |
3053
+
3054
+ </details>
3055
+
3056
+ </details>
3057
+
3058
+ <details>
3059
+ <summary>Text</summary>
3060
+
3061
+ Structured copy primitive for theme-aware app text.
3062
+
3063
+ `Text` owns normal body, caption, label, code, and supporting-copy variants so
3064
+ consumers do not need to import lower-level Surface typography directly.
3065
+
3066
+ #### Muted supporting copy
3067
+
3068
+ ```tsx
3069
+ <Text variant="bodySmall" emphasis="muted">
3070
+ Updated just now
3071
+ </Text>
3072
+ ```
3073
+
3074
+ <details>
3075
+ <summary>Props</summary>
3076
+
3077
+ | Prop | Type | Required | Default | Description |
3078
+ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
3079
+ | accessibilityHint | `string \| undefined` | no | — | |
3080
+ | accessibilityLabel | `string \| undefined` | no | — | |
3081
+ | accessibilityRole | `AccessibilityRole \| undefined` | no | — | |
3082
+ | align | `Responsive<TextAlign> \| undefined` | no | — | |
3083
+ | children | `React.ReactNode` | no | — | |
3084
+ | color | `Responsive<"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger"> \| undefined` | no | — | |
3085
+ | ellipsizeMode | `"head" \| "middle" \| "tail" \| "clip" \| undefined` | no | — | |
3086
+ | emphasis | `Responsive<"default" \| "subtle" \| "muted" \| "inverse"> \| undefined` | no | — | |
3087
+ | i18nKey | `string \| undefined` | no | — | |
3088
+ | italic | `boolean \| undefined` | no | — | |
3089
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3090
+ | nativeID | `string \| undefined` | no | — | |
3091
+ | numberOfLines | `number \| undefined` | no | — | |
3092
+ | selectable | `boolean \| undefined` | no | — | |
3093
+ | testID | `string \| undefined` | no | — | |
3094
+ | text | `string \| undefined` | no | — | |
3095
+ | themeId | `string \| undefined` | no | — | |
3096
+ | variant | `Responsive<TextVariant> \| undefined` | no | — | |
3097
+ | weight | `Responsive<TextWeight> \| undefined` | no | — | |
3098
+
3099
+ </details>
3100
+
3101
+ </details>
3102
+
3103
+ <details>
3104
+ <summary>Textarea</summary>
3105
+
3106
+ Multi-line text input with consistent ZORA field styling.
3107
+
3108
+ <details>
3109
+ <summary>Props</summary>
3110
+
3111
+ | Prop | Type | Required | Default | Description |
3112
+ | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
3113
+ | accessibilityActions | `readonly Readonly<{ name: AccessibilityActionName \| string; label?: string \| undefined; }>[] \| undefined` | no | — | |
3114
+ | accessibilityElementsHidden | `boolean \| undefined` | no | — | |
3115
+ | accessibilityHint | `string \| undefined` | no | — | |
3116
+ | accessibilityIgnoresInvertColors | `boolean \| undefined` | no | — | |
3117
+ | accessibilityLabel | `string \| undefined` | no | — | |
3118
+ | accessibilityLabelledBy | `string \| string[] \| undefined` | no | — | |
3119
+ | accessibilityLanguage | `string \| undefined` | no | — | |
3120
+ | accessibilityLargeContentTitle | `string \| undefined` | no | — | |
3121
+ | accessibilityLiveRegion | `"none" \| "polite" \| "assertive" \| undefined` | no | — | |
3122
+ | accessibilityRespondsToUserInteraction | `boolean \| undefined` | no | — | |
3123
+ | accessibilityRole | `AccessibilityRole \| undefined` | no | — | |
3124
+ | accessibilityShowsLargeContentViewer | `boolean \| undefined` | no | — | |
3125
+ | accessibilityState | `AccessibilityState \| undefined` | no | — | |
3126
+ | accessibilityValue | `AccessibilityValue \| undefined` | no | — | |
3127
+ | accessibilityViewIsModal | `boolean \| undefined` | no | — | |
3128
+ | accessible | `boolean \| undefined` | no | — | |
3129
+ | allowFontScaling | `boolean \| undefined` | no | — | |
3130
+ | aria-busy | `boolean \| undefined` | no | — | |
3131
+ | aria-checked | `boolean \| "mixed" \| undefined` | no | — | |
3132
+ | aria-disabled | `boolean \| undefined` | no | — | |
3133
+ | aria-expanded | `boolean \| undefined` | no | — | |
3134
+ | aria-hidden | `boolean \| undefined` | no | — | |
3135
+ | aria-label | `string \| undefined` | no | — | |
3136
+ | aria-labelledby | `string \| undefined` | no | — | |
3137
+ | aria-live | `"off" \| "polite" \| "assertive" \| undefined` | no | — | |
3138
+ | aria-modal | `boolean \| undefined` | no | — | |
3139
+ | aria-selected | `boolean \| undefined` | no | — | |
3140
+ | aria-valuemax | `number \| undefined` | no | — | |
3141
+ | aria-valuemin | `number \| undefined` | no | — | |
3142
+ | aria-valuenow | `number \| undefined` | no | — | |
3143
+ | aria-valuetext | `string \| undefined` | no | — | |
3144
+ | autoCapitalize | `"none" \| "sentences" \| "words" \| "characters" \| undefined` | no | — | |
3145
+ | autoComplete | `"email" \| "password" \| "tel" \| "url" \| "additional-name" \| "address-line1" \| "address-line2" \| "birthdate-day" \| "birthdate-full" \| "birthdate-month" \| "birthdate-year" \| "cc-csc" \| "cc-exp" \| "cc-exp-day" \| "cc-exp-month" \| "cc-exp-year" \| "cc-number" \| "cc-name" \| "cc-given-name" \| "cc-middle-name" \| "cc-family-name" \| "cc-type" \| "country" \| "current-password" \| "family-name" \| "gender" \| "given-name" \| "honorific-prefix" \| "honorific-suffix" \| "name" \| "name-family" \| "name-given" \| "name-middle" \| "name-middle-initial" \| "name-prefix" \| "name-suffix" \| "new-password" \| "nickname" \| "one-time-code" \| "organization" \| "organization-title" \| "password-new" \| "postal-address" \| "postal-address-country" \| "postal-address-extended" \| "postal-address-extended-postal-code" \| "postal-address-locality" \| "postal-address-region" \| "postal-code" \| "street-address" \| "sms-otp" \| "tel-country-code" \| "tel-national" \| "tel-device" \| "username" \| "username-new" \| "off" \| undefined` | no | — | |
3146
+ | autoCorrect | `boolean \| undefined` | no | — | |
3147
+ | autoFocus | `boolean \| undefined` | no | — | |
3148
+ | blurOnSubmit | `boolean \| undefined` | no | — | |
3149
+ | caretHidden | `boolean \| undefined` | no | — | |
3150
+ | children | `React.ReactNode` | no | — | |
3151
+ | clearButtonMode | `"never" \| "while-editing" \| "unless-editing" \| "always" \| undefined` | no | — | |
3152
+ | clearTextOnFocus | `boolean \| undefined` | no | — | |
3153
+ | collapsable | `boolean \| undefined` | no | — | |
3154
+ | collapsableChildren | `boolean \| undefined` | no | — | |
3155
+ | contextMenuHidden | `boolean \| undefined` | no | — | |
3156
+ | cursorColor | `ColorValue \| null \| undefined` | no | — | |
3157
+ | dataDetectorTypes | `DataDetectorTypes \| DataDetectorTypes[] \| undefined` | no | — | |
3158
+ | defaultValue | `string \| undefined` | no | — | |
3159
+ | disabled | `boolean \| undefined` | no | — | |
3160
+ | disableFullscreenUI | `boolean \| undefined` | no | — | |
3161
+ | disableKeyboardShortcuts | `boolean \| undefined` | no | — | |
3162
+ | enablesReturnKeyAutomatically | `boolean \| undefined` | no | — | |
3163
+ | enterKeyHint | `EnterKeyHintTypeOptions \| undefined` | no | — | |
3164
+ | focusable | `boolean \| undefined` | no | — | |
3165
+ | hasTVPreferredFocus | `boolean \| undefined` | no | — | |
3166
+ | hitSlop | `number \| Insets \| null \| undefined` | no | — | |
3167
+ | id | `string \| undefined` | no | — | |
3168
+ | importantForAccessibility | `"auto" \| "yes" \| "no" \| "no-hide-descendants" \| undefined` | no | — | |
3169
+ | importantForAutofill | `"auto" \| "yes" \| "no" \| "noExcludeDescendants" \| "yesExcludeDescendants" \| undefined` | no | — | |
3170
+ | inlineImageLeft | `string \| undefined` | no | — | |
3171
+ | inlineImagePadding | `number \| undefined` | no | — | |
3172
+ | inputAccessoryViewButtonLabel | `string \| undefined` | no | — | |
3173
+ | inputAccessoryViewID | `string \| undefined` | no | — | |
3174
+ | inputMode | `InputModeOptions \| undefined` | no | — | |
3175
+ | invalid | `boolean \| undefined` | no | — | |
3176
+ | isTVSelectable | `boolean \| undefined` | no | — | |
3177
+ | keyboardAppearance | `"light" \| "dark" \| "default" \| undefined` | no | — | |
3178
+ | keyboardType | `KeyboardTypeOptions \| undefined` | no | — | |
3179
+ | leadingIcon | `Surface.ButtonIconSpec \| undefined` | no | — | |
3180
+ | lineBreakModeIOS | `"head" \| "middle" \| "tail" \| "clip" \| "wordWrapping" \| "char" \| undefined` | no | — | |
3181
+ | lineBreakStrategyIOS | `"none" \| "standard" \| "hangul-word" \| "push-out" \| undefined` | no | — | |
3182
+ | maxFontSizeMultiplier | `number \| null \| undefined` | no | — | |
3183
+ | maxLength | `number \| undefined` | no | — | |
3184
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3185
+ | nativeID | `string \| undefined` | no | — | |
3186
+ | needsOffscreenAlphaCompositing | `boolean \| undefined` | no | — | |
3187
+ | numberOfLines | `number \| undefined` | no | — | |
3188
+ | onAccessibilityAction | `((event: AccessibilityActionEvent) => void) \| undefined` | no | — | |
3189
+ | onAccessibilityEscape | `(() => void) \| undefined` | no | — | |
3190
+ | onAccessibilityTap | `(() => void) \| undefined` | no | — | |
3191
+ | onBlur | `((e: BlurEvent) => void) \| undefined` | no | — | |
3192
+ | onChange | `((e: TextInputChangeEvent) => void) \| undefined` | no | — | |
3193
+ | onChangeText | `((text: string) => void) \| undefined` | no | — | |
3194
+ | onContentSizeChange | `((e: TextInputContentSizeChangeEvent) => void) \| undefined` | no | — | |
3195
+ | onEndEditing | `((e: TextInputEndEditingEvent) => void) \| undefined` | no | — | |
3196
+ | onFocus | `((e: FocusEvent) => void) \| undefined` | no | — | |
3197
+ | onKeyPress | `((e: TextInputKeyPressEvent) => void) \| undefined` | no | — | |
3198
+ | onLayout | `((event: LayoutChangeEvent) => void) \| undefined` | no | — | |
3199
+ | onMagicTap | `(() => void) \| undefined` | no | — | |
3200
+ | onMoveShouldSetResponder | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
3201
+ | onMoveShouldSetResponderCapture | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
3202
+ | onPointerCancel | `((event: PointerEvent) => void) \| undefined` | no | — | |
3203
+ | onPointerCancelCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
3204
+ | onPointerDown | `((event: PointerEvent) => void) \| undefined` | no | — | |
3205
+ | onPointerDownCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
3206
+ | onPointerEnter | `((event: PointerEvent) => void) \| undefined` | no | — | |
3207
+ | onPointerEnterCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
3208
+ | onPointerLeave | `((event: PointerEvent) => void) \| undefined` | no | — | |
3209
+ | onPointerLeaveCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
3210
+ | onPointerMove | `((event: PointerEvent) => void) \| undefined` | no | — | |
3211
+ | onPointerMoveCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
3212
+ | onPointerUp | `((event: PointerEvent) => void) \| undefined` | no | — | |
3213
+ | onPointerUpCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
3214
+ | onPress | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void) \| undefined` | no | — | |
3215
+ | onPressIn | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void) \| undefined` | no | — | |
3216
+ | onPressOut | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void) \| undefined` | no | — | |
3217
+ | onResponderEnd | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3218
+ | onResponderGrant | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3219
+ | onResponderMove | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3220
+ | onResponderReject | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3221
+ | onResponderRelease | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3222
+ | onResponderStart | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3223
+ | onResponderTerminate | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3224
+ | onResponderTerminationRequest | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
3225
+ | onScroll | `((e: TextInputScrollEvent) => void) \| undefined` | no | — | |
3226
+ | onSelectionChange | `((e: TextInputSelectionChangeEvent) => void) \| undefined` | no | — | |
3227
+ | onStartShouldSetResponder | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
3228
+ | onStartShouldSetResponderCapture | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
3229
+ | onSubmitEditing | `((e: TextInputSubmitEditingEvent) => void) \| undefined` | no | — | |
3230
+ | onTouchCancel | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3231
+ | onTouchEnd | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3232
+ | onTouchEndCapture | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3233
+ | onTouchMove | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3234
+ | onTouchStart | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
3235
+ | passwordRules | `string \| null \| undefined` | no | — | |
3236
+ | placeholder | `string \| undefined` | no | — | |
3237
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
3238
+ | readOnly | `boolean \| undefined` | no | — | |
3239
+ | rejectResponderTermination | `boolean \| null \| undefined` | no | — | |
3240
+ | removeClippedSubviews | `boolean \| undefined` | no | — | |
3241
+ | renderToHardwareTextureAndroid | `boolean \| undefined` | no | — | |
3242
+ | returnKeyLabel | `string \| undefined` | no | — | |
3243
+ | returnKeyType | `ReturnKeyTypeOptions \| undefined` | no | — | |
3244
+ | role | `Role \| undefined` | no | — | |
3245
+ | rows | `number \| undefined` | no | — | |
3246
+ | screenReaderFocusable | `boolean \| undefined` | no | — | |
3247
+ | scrollEnabled | `boolean \| undefined` | no | — | |
3248
+ | secureTextEntry | `boolean \| undefined` | no | — | |
3249
+ | selection | `{ start: number; end?: number \| undefined; } \| undefined` | no | — | |
3250
+ | selectionColor | `ColorValue \| undefined` | no | — | |
3251
+ | selectionHandleColor | `ColorValue \| null \| undefined` | no | — | |
3252
+ | selectionState | `DocumentSelectionState \| undefined` | no | — | |
3253
+ | selectTextOnFocus | `boolean \| undefined` | no | — | |
3254
+ | shouldRasterizeIOS | `boolean \| undefined` | no | — | |
3255
+ | showSoftInputOnFocus | `boolean \| undefined` | no | — | |
3256
+ | size | `ZoraControlSize \| undefined` | no | — | |
3257
+ | smartInsertDelete | `boolean \| undefined` | no | — | |
3258
+ | spellCheck | `boolean \| undefined` | no | — | |
3259
+ | style | `StyleProp<TextStyle>` | no | — | |
3260
+ | submitBehavior | `SubmitBehavior \| undefined` | no | — | |
3261
+ | tabIndex | `0 \| -1 \| undefined` | no | — | |
3262
+ | testID | `string \| undefined` | no | — | |
3263
+ | textAlign | `"left" \| "right" \| "center" \| undefined` | no | — | |
3264
+ | textAlignVertical | `"top" \| "bottom" \| "auto" \| "center" \| undefined` | no | — | |
3265
+ | textBreakStrategy | `"simple" \| "highQuality" \| "balanced" \| undefined` | no | — | |
3266
+ | textContentType | `"none" \| "password" \| "name" \| "nickname" \| "username" \| "URL" \| "addressCity" \| "addressCityAndState" \| "addressState" \| "countryName" \| "creditCardNumber" \| "creditCardExpiration" \| "creditCardExpirationMonth" \| "creditCardExpirationYear" \| "creditCardSecurityCode" \| "creditCardType" \| "creditCardName" \| "creditCardGivenName" \| "creditCardMiddleName" \| "creditCardFamilyName" \| "emailAddress" \| "familyName" \| "fullStreetAddress" \| "givenName" \| "jobTitle" \| "location" \| "middleName" \| "namePrefix" \| "nameSuffix" \| "organizationName" \| "postalCode" \| "streetAddressLine1" \| "streetAddressLine2" \| "sublocality" \| "telephoneNumber" \| "newPassword" \| "oneTimeCode" \| "birthdate" \| "birthdateDay" \| "birthdateMonth" \| "birthdateYear" \| "cellularEID" \| "cellularIMEI" \| "dateTime" \| "flightNumber" \| "shipmentTrackingNumber" \| undefined` | no | — | |
3267
+ | themeId | `string \| undefined` | no | — | |
3268
+ | trailingIcon | `Surface.ButtonIconSpec \| undefined` | no | — | |
3269
+ | tvParallaxMagnification | `number \| undefined` | no | — | |
3270
+ | tvParallaxShiftDistanceX | `number \| undefined` | no | — | |
3271
+ | tvParallaxShiftDistanceY | `number \| undefined` | no | — | |
3272
+ | tvParallaxTiltAngle | `number \| undefined` | no | — | |
3273
+ | underlineColorAndroid | `ColorValue \| undefined` | no | — | |
3274
+ | value | `string \| undefined` | no | — | |
3275
+ | verticalAlign | `"top" \| "bottom" \| "auto" \| "middle" \| undefined` | no | — | |
3276
+
3277
+ </details>
3278
+
3279
+ </details>
3280
+
3281
+ <details>
3282
+ <summary>TimePicker</summary>
3283
+
3284
+ Time input control with wheel selection and formatted display value.
3285
+
3286
+ <details>
3287
+ <summary>Props</summary>
3288
+
3289
+ | Prop | Type | Required | Default | Description |
3290
+ | ------------- | --------------------------------------------------- | -------- | ------- | ----------- |
3291
+ | description | `React.ReactNode` | no | — | |
3292
+ | disabled | `boolean \| undefined` | no | — | |
3293
+ | error | `React.ReactNode` | no | — | |
3294
+ | formatTime | `((value: string) => React.ReactNode) \| undefined` | no | — | |
3295
+ | label | `React.ReactNode` | no | — | |
3296
+ | maxTime | `string \| undefined` | no | — | |
3297
+ | minTime | `string \| undefined` | no | — | |
3298
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3299
+ | onValueChange | `((value: TimePickerValue) => void) \| undefined` | no | — | |
3300
+ | placeholder | `React.ReactNode` | no | — | |
3301
+ | required | `boolean \| undefined` | no | — | |
3302
+ | stepMinutes | `number \| undefined` | no | — | |
3303
+ | testID | `string \| undefined` | no | — | |
3304
+ | themeId | `string \| undefined` | no | — | |
3305
+ | value | `TimePickerValue` | yes | — | |
3306
+
3307
+ </details>
3308
+
3309
+ </details>
3310
+
3311
+ <details>
3312
+ <summary>Toast</summary>
3313
+
3314
+ Renders a toast notification message.
3315
+
3316
+ <details>
3317
+ <summary>Props</summary>
3318
+
3319
+ | Prop | Type | Required | Default | Description |
3320
+ | ----------- | ---------------------------- | -------- | ------- | ----------- |
3321
+ | description | `React.ReactNode` | no | — | |
3322
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3323
+ | onDismiss | `(() => void) \| undefined` | no | — | |
3324
+ | status | `ToastStatus \| undefined` | no | — | |
3325
+ | testID | `string \| undefined` | no | — | |
3326
+ | themeId | `string \| undefined` | no | — | |
3327
+ | title | `React.ReactNode` | no | — | |
3328
+
3329
+ </details>
3330
+
3331
+ </details>
3332
+
3333
+ <details>
3334
+ <summary>ToastProvider</summary>
3335
+
3336
+ ```ts
3337
+ ToastProvider({ children, defaultDuration }: ToastProviderProps) => React.JSX.Element
3338
+ ```
3339
+
3340
+ Provides toast state and rendering context for `useToast` and `Toast`.
3341
+
3342
+ Related types: `ToastProviderProps`
3343
+
3344
+ <details>
3345
+ <summary>Props</summary>
3346
+
3347
+ | Prop | Type | Required | Default | Description |
3348
+ | --------------- | ------------------------------ | -------- | ------- | ----------- |
3349
+ | children | `React.ReactNode \| undefined` | no | — | |
3350
+ | defaultDuration | `number \| undefined` | no | — | |
3351
+
3352
+ </details>
3353
+
3354
+ </details>
3355
+
3356
+ <details>
3357
+ <summary>Toolbar</summary>
3358
+
3359
+ Horizontal toolbar surface for grouping actions and controls.
3360
+
3361
+ <details>
3362
+ <summary>Props</summary>
3363
+
3364
+ | Prop | Type | Required | Default | Description |
3365
+ | -------- | ------------------------------ | -------- | ------- | ----------- |
3366
+ | children | `React.ReactNode` | no | — | |
3367
+ | compact | `boolean \| undefined` | no | — | |
3368
+ | floating | `boolean \| undefined` | no | — | |
3369
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3370
+ | position | `ToolbarPosition \| undefined` | no | — | |
3371
+ | testID | `string \| undefined` | no | — | |
3372
+ | themeId | `string \| undefined` | no | — | |
3373
+
3374
+ </details>
3375
+
3376
+ </details>
3377
+
3378
+ <details>
3379
+ <summary>ToolbarAction</summary>
3380
+
3381
+ Convenience icon action for toolbars with active state styling.
3382
+
3383
+ <details>
3384
+ <summary>Props</summary>
3385
+
3386
+ | Prop | Type | Required | Default | Description |
3387
+ | -------- | ---------------------------- | -------- | ------- | ----------- |
3388
+ | active | `boolean \| undefined` | no | — | |
3389
+ | disabled | `boolean \| undefined` | no | — | |
3390
+ | icon | `ButtonIconSpec` | yes | — | |
3391
+ | label | `string` | yes | — | |
3392
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3393
+ | onPress | `(() => void) \| undefined` | no | — | |
3394
+ | testID | `string \| undefined` | no | — | |
3395
+ | themeId | `string \| undefined` | no | — | |
3396
+
3397
+ </details>
3398
+
3399
+ </details>
3400
+
3401
+ ### Patterns
3402
+
3403
+ <details>
3404
+ <summary>ChatListItem</summary>
3405
+
3406
+ Chat-style list row with avatar, title, preview text, and unread indicators.
3407
+
3408
+ <details>
3409
+ <summary>Props</summary>
3410
+
3411
+ | Prop | Type | Required | Default | Description |
3412
+ | ------------------ | ----------------------------- | -------- | ------- | ----------- |
3413
+ | accessibilityLabel | `string \| undefined` | no | — | |
3414
+ | avatar | `ChatListAvatar \| undefined` | no | — | |
3415
+ | compact | `boolean \| undefined` | no | — | |
3416
+ | disabled | `boolean \| undefined` | no | — | |
3417
+ | leading | `React.ReactNode` | no | — | |
3418
+ | meta | `React.ReactNode` | no | — | |
3419
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3420
+ | onPress | `(() => void) \| undefined` | no | — | |
3421
+ | preview | `React.ReactNode` | no | — | |
3422
+ | selected | `boolean \| undefined` | no | — | |
3423
+ | testID | `string \| undefined` | no | — | |
3424
+ | themeId | `string \| undefined` | no | — | |
3425
+ | timestamp | `React.ReactNode` | no | — | |
3426
+ | title | `React.ReactNode` | yes | — | |
3427
+ | trailing | `React.ReactNode` | no | — | |
3428
+ | unread | `boolean \| undefined` | no | — | |
3429
+ | unreadCount | `React.ReactNode` | no | — | |
3430
+
3431
+ </details>
3432
+
3433
+ </details>
3434
+
3435
+ <details>
3436
+ <summary>CollectionEditor</summary>
3437
+
3438
+ Editor pattern for adding, removing, and reordering a collection of items.
3439
+
3440
+ <details>
3441
+ <summary>Props</summary>
3442
+
3443
+ | Prop | Type | Required | Default | Description |
3444
+ | ----------- | -------------------------------------------------------------------- | -------- | ------- | ----------- |
3445
+ | addLabel | `React.ReactNode` | no | — | |
3446
+ | description | `React.ReactNode` | no | — | |
3447
+ | disabled | `boolean \| undefined` | no | — | |
3448
+ | emptyLabel | `React.ReactNode` | no | — | |
3449
+ | items | `readonly TItem[]` | yes | — | |
3450
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3451
+ | onAdd | `(() => void) \| undefined` | no | — | |
3452
+ | onMove | `((from: number, to: number) => void) \| undefined` | no | — | |
3453
+ | onRemove | `((index: number) => void) \| undefined` | no | — | |
3454
+ | renderItem | `(props: CollectionEditorRenderItemProps<TItem>) => React.ReactNode` | yes | — | |
3455
+ | testID | `string \| undefined` | no | — | |
3456
+ | themeId | `string \| undefined` | no | — | |
3457
+ | title | `React.ReactNode` | no | — | |
3458
+
3459
+ </details>
3460
+
3461
+ </details>
3462
+
3463
+ <details>
3464
+ <summary>ConfirmDialog</summary>
3465
+
3466
+ Confirmation dialog pattern with cancel/confirm actions.
3467
+
3468
+ <details>
3469
+ <summary>Props</summary>
3470
+
3471
+ | Prop | Type | Required | Default | Description |
3472
+ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
3473
+ | busy | `boolean \| undefined` | no | — | |
3474
+ | cancelLabel | `React.ReactNode` | no | — | |
3475
+ | children | `React.ReactNode` | no | — | |
3476
+ | closeOnBackdrop | `boolean \| undefined` | no | — | |
3477
+ | confirmColor | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
3478
+ | confirmLabel | `React.ReactNode` | no | — | |
3479
+ | confirmVariant | `ZoraButtonVariant \| undefined` | no | — | |
3480
+ | description | `React.ReactNode` | no | — | |
3481
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3482
+ | onCancel | `(() => void) \| undefined` | no | — | |
3483
+ | onConfirm | `(() => void) \| undefined` | no | — | |
3484
+ | testID | `string \| undefined` | no | — | |
3485
+ | themeId | `string \| undefined` | no | — | |
3486
+ | title | `React.ReactNode` | yes | — | |
3487
+ | visible | `boolean` | yes | — | |
3488
+
3489
+ </details>
3490
+
3491
+ </details>
3492
+
3493
+ <details>
3494
+ <summary>DisclosureSection</summary>
3495
+
3496
+ Expandable section pattern with a summary header and collapsible content.
3497
+
3498
+ <details>
3499
+ <summary>Props</summary>
3500
+
3501
+ | Prop | Type | Required | Default | Description |
3502
+ | ------------ | ---------------------------------------- | -------- | ------- | ----------- |
3503
+ | actions | `ReactNode` | no | — | |
3504
+ | children | `ReactNode` | no | — | |
3505
+ | defaultOpen | `boolean \| undefined` | no | — | |
3506
+ | description | `ReactNode` | no | — | |
3507
+ | disabled | `boolean \| undefined` | no | — | |
3508
+ | icon | `ButtonIconSpec \| undefined` | no | — | |
3509
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3510
+ | onOpenChange | `((open: boolean) => void) \| undefined` | no | — | |
3511
+ | open | `boolean \| undefined` | no | — | |
3512
+ | testID | `string \| undefined` | no | — | |
3513
+ | themeId | `string \| undefined` | no | — | |
3514
+ | title | `ReactNode` | yes | — | |
3515
+
3516
+ </details>
3517
+
3518
+ </details>
3519
+
3520
+ <details>
3521
+ <summary>EmptyState</summary>
3522
+
3523
+ Reusable fallback state for empty lists, missing data, or first-run experiences.
3524
+
3525
+ `EmptyState` combines concise copy with optional primary and secondary actions
3526
+ so apps can guide users without custom card and button wiring.
3527
+
3528
+ #### Empty project list
3529
+
3530
+ ```tsx
3531
+ <EmptyState title="No projects yet" primaryAction={{ label: 'Create project', onPress }} />
3532
+ ```
3533
+
3534
+ <details>
3535
+ <summary>Props</summary>
3536
+
3537
+ | Prop | Type | Required | Default | Description |
3538
+ | --------------- | ------------------------------- | -------- | ------- | ----------- |
3539
+ | description | `React.ReactNode` | no | — | |
3540
+ | eyebrow | `React.ReactNode` | no | — | |
3541
+ | footer | `React.ReactNode` | no | — | |
3542
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3543
+ | primaryAction | `EmptyStateAction \| undefined` | no | — | |
3544
+ | secondaryAction | `EmptyStateAction \| undefined` | no | — | |
3545
+ | testID | `string \| undefined` | no | — | |
3546
+ | themeId | `string \| undefined` | no | — | |
3547
+ | title | `React.ReactNode` | yes | — | |
3548
+
3549
+ </details>
3550
+
3551
+ </details>
3552
+
3553
+ <details>
3554
+ <summary>FilterBar</summary>
3555
+
3556
+ Horizontal filter/action bar layout with leading/trailing slots.
3557
+
3558
+ <details>
3559
+ <summary>Props</summary>
3560
+
3561
+ | Prop | Type | Required | Default | Description |
3562
+ | -------- | ---------------------------- | -------- | ------- | ----------- |
3563
+ | children | `React.ReactNode` | yes | — | |
3564
+ | leading | `React.ReactNode` | no | — | |
3565
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3566
+ | testID | `string \| undefined` | no | — | |
3567
+ | themeId | `string \| undefined` | no | — | |
3568
+ | trailing | `React.ReactNode` | no | — | |
3569
+ | wrap | `boolean \| undefined` | no | — | |
3570
+
3571
+ </details>
3572
+
3573
+ </details>
3574
+
3575
+ <details>
3576
+ <summary>ForgotPasswordForm</summary>
3577
+
3578
+ Password reset form pattern with validation and submit actions.
3579
+
3580
+ <details>
3581
+ <summary>Props</summary>
3582
+
3583
+ | Prop | Type | Required | Default | Description |
3584
+ | --------------- | ------------------------------------------------------------- | -------- | ------- | ----------- |
3585
+ | disabled | `boolean \| undefined` | no | — | |
3586
+ | error | `React.ReactNode` | no | — | |
3587
+ | identifierLabel | `React.ReactNode` | no | — | |
3588
+ | identifiers | `readonly AuthIdentifierKind[] \| undefined` | no | — | |
3589
+ | loading | `boolean \| undefined` | no | — | |
3590
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3591
+ | onSignIn | `(() => void \| Promise<void>) \| undefined` | no | — | |
3592
+ | onSubmit | `(values: ForgotPasswordFormValues) => void \| Promise<void>` | yes | — | |
3593
+ | signInLabel | `React.ReactNode` | no | — | |
3594
+ | submitLabel | `React.ReactNode` | no | — | |
3595
+ | testID | `string \| undefined` | no | — | |
3596
+ | themeId | `string \| undefined` | no | — | |
3597
+
3598
+ </details>
3599
+
3600
+ </details>
3601
+
3602
+ <details>
3603
+ <summary>Hero</summary>
3604
+
3605
+ Hero section pattern for prominent page introductions with actions.
3606
+
3607
+ <details>
3608
+ <summary>Props</summary>
3609
+
3610
+ | Prop | Type | Required | Default | Description |
3611
+ | --------------- | ---------------------------- | -------- | ------- | ----------- |
3612
+ | align | `HeroAlign \| undefined` | no | — | |
3613
+ | compact | `boolean \| undefined` | no | — | |
3614
+ | description | `React.ReactNode` | no | — | |
3615
+ | eyebrow | `React.ReactNode` | no | — | |
3616
+ | footer | `React.ReactNode` | no | — | |
3617
+ | layout | `HeroLayout \| undefined` | no | — | |
3618
+ | media | `React.ReactNode` | no | — | |
3619
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3620
+ | primaryAction | `HeroAction \| undefined` | no | — | |
3621
+ | secondaryAction | `HeroAction \| undefined` | no | — | |
3622
+ | testID | `string \| undefined` | no | — | |
3623
+ | themeId | `string \| undefined` | no | — | |
3624
+ | title | `React.ReactNode` | yes | — | |
3625
+ | tone | `HeroTone \| undefined` | no | — | |
3626
+
3627
+ </details>
3628
+
3629
+ </details>
3630
+
3631
+ <details>
3632
+ <summary>ImagePreview</summary>
3633
+
3634
+ Preview pattern for showing an image with optional metadata and actions.
3635
+
3636
+ <details>
3637
+ <summary>Props</summary>
3638
+
3639
+ | Prop | Type | Required | Default | Description |
3640
+ | ---------------- | ------------------------------------------------------------------------------------------------------------ | -------- | ------- | ----------- |
3641
+ | aspectRatio | `number \| undefined` | no | — | |
3642
+ | asset | `ZoraImageAsset \| null \| undefined` | no | — | |
3643
+ | emptyDescription | `React.ReactNode` | no | — | |
3644
+ | emptyTitle | `React.ReactNode` | no | — | |
3645
+ | fit | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").ImageResizeMode \| undefined` | no | — | |
3646
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3647
+ | testID | `string \| undefined` | no | — | |
3648
+ | themeId | `string \| undefined` | no | — | |
3649
+
3650
+ </details>
3651
+
3652
+ </details>
3653
+
3654
+ <details>
3655
+ <summary>ImageUploadField</summary>
3656
+
3657
+ Form field pattern for picking, previewing, and uploading an image.
3658
+
3659
+ <details>
3660
+ <summary>Props</summary>
3661
+
3662
+ | Prop | Type | Required | Default | Description |
3663
+ | ------------------ | ---------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
3664
+ | accept | `string \| undefined` | no | — | |
3665
+ | aspectRatio | `number \| undefined` | no | — | |
3666
+ | description | `React.ReactNode` | no | — | |
3667
+ | disabled | `boolean \| undefined` | no | — | |
3668
+ | errorText | `React.ReactNode` | no | — | |
3669
+ | helperText | `React.ReactNode` | no | — | |
3670
+ | label | `React.ReactNode` | yes | — | |
3671
+ | maxSizeBytes | `number \| undefined` | no | — | |
3672
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3673
+ | onChange | `(next: ZoraImageAsset \| null) => void` | yes | — | |
3674
+ | onPick | `() => Promise<ZoraPickedImage \| null>` | yes | — | |
3675
+ | onRemove | `((current: ZoraImageAsset) => void \| Promise<void>) \| undefined` | no | — | |
3676
+ | onUpload | `((picked: ZoraPickedImage, context: ImageUploadProgressContext) => Promise<ZoraImageAsset>) \| undefined` | no | — | |
3677
+ | previewDescription | `React.ReactNode` | no | — | |
3678
+ | previewTitle | `React.ReactNode` | no | — | |
3679
+ | readOnly | `boolean \| undefined` | no | — | |
3680
+ | required | `boolean \| undefined` | no | — | |
3681
+ | testID | `string \| undefined` | no | — | |
3682
+ | themeId | `string \| undefined` | no | — | |
3683
+ | validatePicked | `((picked: ZoraPickedImage) => string \| undefined) \| undefined` | no | — | |
3684
+ | value | `ZoraImageAsset \| null` | yes | — | |
3685
+
3686
+ </details>
3687
+
3688
+ </details>
3689
+
3690
+ <details>
3691
+ <summary>InspectorField</summary>
3692
+
3693
+ Inspector row pattern with label, description, and control slot.
3694
+
3695
+ <details>
3696
+ <summary>Props</summary>
3697
+
3698
+ | Prop | Type | Required | Default | Description |
3699
+ | ----------- | ---------------------------- | -------- | ------- | ----------- |
3700
+ | children | `ReactNode` | no | — | |
3701
+ | control | `ReactNode` | no | — | |
3702
+ | description | `ReactNode` | no | — | |
3703
+ | disabled | `boolean \| undefined` | no | — | |
3704
+ | errorText | `ReactNode` | no | — | |
3705
+ | helperText | `ReactNode` | no | — | |
3706
+ | invalid | `boolean \| undefined` | no | — | |
3707
+ | label | `ReactNode` | yes | — | |
3708
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3709
+ | readOnly | `boolean \| undefined` | no | — | |
3710
+ | required | `boolean \| undefined` | no | — | |
3711
+ | testID | `string \| undefined` | no | — | |
3712
+ | themeId | `string \| undefined` | no | — | |
3713
+
3714
+ </details>
3715
+
3716
+ </details>
3717
+
3718
+ <details>
3719
+ <summary>List</summary>
3720
+
3721
+ List container pattern for composing `ListRow` and `ListSection`.
3722
+
3723
+ <details>
3724
+ <summary>Props</summary>
3725
+
3726
+ | Prop | Type | Required | Default | Description |
3727
+ | ------- | ---------------------------- | -------- | ------- | ----------- |
3728
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3729
+ | testID | `string \| undefined` | no | — | |
3730
+ | themeId | `string \| undefined` | no | — | |
3731
+
3732
+ </details>
3733
+
3734
+ </details>
3735
+
3736
+ <details>
3737
+ <summary>ListRow</summary>
3738
+
3739
+ Row pattern for lists with leading/trailing slots and optional press behavior.
3740
+
3741
+ <details>
3742
+ <summary>Props</summary>
3743
+
3744
+ | Prop | Type | Required | Default | Description |
3745
+ | ----------- | ----------------------------- | -------- | ------- | ----------- |
3746
+ | action | `React.ReactNode` | no | — | |
3747
+ | compact | `boolean \| undefined` | no | — | |
3748
+ | description | `React.ReactNode` | no | — | |
3749
+ | disabled | `boolean \| undefined` | no | — | |
3750
+ | leading | `React.ReactNode` | no | — | |
3751
+ | meta | `React.ReactNode` | no | — | |
3752
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3753
+ | onPress | `(() => void) \| undefined` | no | — | |
3754
+ | selected | `boolean \| undefined` | no | — | |
3755
+ | testID | `string \| undefined` | no | — | |
3756
+ | themeId | `string \| undefined` | no | — | |
3757
+ | title | `React.ReactNode` | yes | — | |
3758
+ | trailing | `React.ReactNode` | no | — | |
3759
+ | variant | `ListRowVariant \| undefined` | no | — | |
3760
+
3761
+ </details>
3762
+
3763
+ </details>
3764
+
3765
+ <details>
3766
+ <summary>ListSection</summary>
3767
+
3768
+ Section wrapper for lists with optional title and description.
3769
+
3770
+ <details>
3771
+ <summary>Props</summary>
3772
+
3773
+ | Prop | Type | Required | Default | Description |
3774
+ | ----------- | ---------------------------- | -------- | ------- | ----------- |
3775
+ | actions | `React.ReactNode` | no | — | |
3776
+ | description | `React.ReactNode` | no | — | |
3777
+ | eyebrow | `React.ReactNode` | no | — | |
3778
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3779
+ | testID | `string \| undefined` | no | — | |
3780
+ | themeId | `string \| undefined` | no | — | |
3781
+ | title | `React.ReactNode` | no | — | |
3782
+
3783
+ </details>
3784
+
3785
+ </details>
3786
+
3787
+ <details>
3788
+ <summary>MessageBubble</summary>
3789
+
3790
+ Message bubble pattern for chat UIs with direction and status styling.
3791
+
3792
+ <details>
3793
+ <summary>Props</summary>
3794
+
3795
+ | Prop | Type | Required | Default | Description |
3796
+ | ------------------ | ------------------------------------- | -------- | ------- | ----------- |
3797
+ | accessibilityLabel | `string \| undefined` | no | — | |
3798
+ | author | `MessageBubbleAuthor \| undefined` | no | — | |
3799
+ | children | `React.ReactNode` | no | — | |
3800
+ | compact | `boolean \| undefined` | no | — | |
3801
+ | direction | `MessageBubbleDirection \| undefined` | no | — | |
3802
+ | disabled | `boolean \| undefined` | no | — | |
3803
+ | footer | `React.ReactNode` | no | — | |
3804
+ | leading | `React.ReactNode` | no | — | |
3805
+ | meta | `React.ReactNode` | no | — | |
3806
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3807
+ | onPress | `(() => void) \| undefined` | no | — | |
3808
+ | selected | `boolean \| undefined` | no | — | |
3809
+ | status | `MessageBubbleStatusContent` | no | — | |
3810
+ | testID | `string \| undefined` | no | — | |
3811
+ | text | `React.ReactNode` | no | — | |
3812
+ | themeId | `string \| undefined` | no | — | |
3813
+ | timestamp | `React.ReactNode` | no | — | |
3814
+ | trailing | `React.ReactNode` | no | — | |
3815
+
3816
+ </details>
3817
+
3818
+ </details>
3819
+
3820
+ <details>
3821
+ <summary>Notice</summary>
3822
+
3823
+ Notice pattern for inline feedback with tone, title, and actions.
3824
+
3825
+ <details>
3826
+ <summary>Props</summary>
3827
+
3828
+ | Prop | Type | Required | Default | Description |
3829
+ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
3830
+ | actions | `React.ReactNode` | no | — | |
3831
+ | children | `React.ReactNode` | no | — | |
3832
+ | color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
3833
+ | description | `React.ReactNode` | no | — | |
3834
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3835
+ | testID | `string \| undefined` | no | — | |
3836
+ | themeId | `string \| undefined` | no | — | |
3837
+ | title | `React.ReactNode` | yes | — | |
3838
+
3839
+ </details>
3840
+
3841
+ </details>
3842
+
3843
+ <details>
3844
+ <summary>OtpForm</summary>
3845
+
3846
+ One-time passcode form pattern with digit input and submit actions.
3847
+
3848
+ <details>
3849
+ <summary>Props</summary>
3850
+
3851
+ | Prop | Type | Required | Default | Description |
3852
+ | -------------- | -------------------------------------------------- | -------- | ------- | ----------- |
3853
+ | disabled | `boolean \| undefined` | no | — | |
3854
+ | error | `React.ReactNode` | no | — | |
3855
+ | length | `number \| undefined` | no | — | |
3856
+ | loading | `boolean \| undefined` | no | — | |
3857
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3858
+ | onResend | `(() => void \| Promise<void>) \| undefined` | no | — | |
3859
+ | onSubmit | `(values: OtpFormValues) => void \| Promise<void>` | yes | — | |
3860
+ | otpLabel | `React.ReactNode` | no | — | |
3861
+ | resendDisabled | `boolean \| undefined` | no | — | |
3862
+ | resendLabel | `React.ReactNode` | no | — | |
3863
+ | resendLoading | `boolean \| undefined` | no | — | |
3864
+ | submitLabel | `React.ReactNode` | no | — | |
3865
+ | testID | `string \| undefined` | no | — | |
3866
+ | themeId | `string \| undefined` | no | — | |
3867
+
3868
+ </details>
3869
+
3870
+ </details>
3871
+
3872
+ <details>
3873
+ <summary>PaletteItem</summary>
3874
+
3875
+ Tile item pattern for palettes and option grids.
3876
+
3877
+ <details>
3878
+ <summary>Props</summary>
3879
+
3880
+ | Prop | Type | Required | Default | Description |
3881
+ | ----------- | ----------------------------- | -------- | ------- | ----------- |
3882
+ | badge | `ReactNode` | no | — | |
3883
+ | description | `ReactNode` | no | — | |
3884
+ | disabled | `boolean \| undefined` | no | — | |
3885
+ | icon | `ButtonIconSpec \| undefined` | no | — | |
3886
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3887
+ | onPress | `(() => void) \| undefined` | no | — | |
3888
+ | selected | `boolean \| undefined` | no | — | |
3889
+ | testID | `string \| undefined` | no | — | |
3890
+ | themeId | `string \| undefined` | no | — | |
3891
+ | title | `ReactNode` | yes | — | |
3892
+
3893
+ </details>
3894
+
3895
+ </details>
3896
+
3897
+ <details>
3898
+ <summary>Panel</summary>
3899
+
3900
+ Semantic wrapper around `Card` for panel-style page sections.
3901
+
3902
+ <details>
3903
+ <summary>Props</summary>
3904
+
3905
+ | Prop | Type | Required | Default | Description |
3906
+ | ----------- | ---------------------------- | -------- | ------- | ----------- |
3907
+ | actions | `React.ReactNode` | no | — | |
3908
+ | children | `React.ReactNode` | no | — | |
3909
+ | compact | `boolean \| undefined` | no | — | |
3910
+ | description | `React.ReactNode` | no | — | |
3911
+ | eyebrow | `React.ReactNode` | no | — | |
3912
+ | footer | `React.ReactNode` | no | — | |
3913
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3914
+ | testID | `string \| undefined` | no | — | |
3915
+ | themeId | `string \| undefined` | no | — | |
3916
+ | title | `React.ReactNode` | no | — | |
3917
+ | tone | `ZoraCardTone \| undefined` | no | — | |
3918
+
3919
+ </details>
3920
+
3921
+ </details>
3922
+
3923
+ <details>
3924
+ <summary>PostCard</summary>
3925
+
3926
+ Social-style post card pattern with author, content, media, and actions.
3927
+
3928
+ <details>
3929
+ <summary>Props</summary>
3930
+
3931
+ | Prop | Type | Required | Default | Description |
3932
+ | ------------ | -------------------------------------------------------- | -------- | ------- | ----------- |
3933
+ | actions | `readonly PostAction[] \| undefined` | no | — | |
3934
+ | author | `PostAuthor` | yes | — | |
3935
+ | children | `React.ReactNode` | no | — | |
3936
+ | comments | `readonly PostCommentPreview[] \| undefined` | no | — | |
3937
+ | compact | `boolean \| undefined` | no | — | |
3938
+ | footer | `React.ReactNode` | no | — | |
3939
+ | headerAction | `React.ReactNode` | no | — | |
3940
+ | media | `PostCardMedia \| readonly PostCardMedia[] \| undefined` | no | — | |
3941
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3942
+ | onPress | `(() => void) \| undefined` | no | — | |
3943
+ | testID | `string \| undefined` | no | — | |
3944
+ | text | `React.ReactNode` | no | — | |
3945
+ | themeId | `string \| undefined` | no | — | |
3946
+ | tone | `ZoraCardTone \| undefined` | no | — | |
3947
+
3948
+ </details>
3949
+
3950
+ </details>
3951
+
3952
+ <details>
3953
+ <summary>ResponsivePanel</summary>
3954
+
3955
+ Adaptive secondary surface that can render as an inline panel, drawer, or modal.
3956
+
3957
+ Use `ResponsivePanel` for tool panes and admin/detail flows that need the same
3958
+ content to work across compact mobile screens and wider desktop layouts.
3959
+
3960
+ #### Scrollable wide panel
3961
+
3962
+ ```tsx
3963
+ <ResponsivePanel open title="APIs" size="wide" scroll="content">
3964
+ ...
3965
+ </ResponsivePanel>
3966
+ ```
3967
+
3968
+ <details>
3969
+ <summary>Props</summary>
3970
+
3971
+ | Prop | Type | Required | Default | Description |
3972
+ | ------------ | ----------------------------------------- | -------- | ------- | ----------- |
3973
+ | actions | `React.ReactNode` | no | — | |
3974
+ | children | `React.ReactNode` | no | — | |
3975
+ | compact | `boolean \| undefined` | no | — | |
3976
+ | description | `React.ReactNode` | no | — | |
3977
+ | desktopMode | `ResponsivePanelDesktopMode \| undefined` | no | — | |
3978
+ | footer | `React.ReactNode` | no | — | |
3979
+ | mobileMode | `ResponsivePanelMobileMode \| undefined` | no | — | |
3980
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
3981
+ | onOpenChange | `(open: boolean) => void` | yes | — | |
3982
+ | open | `boolean` | yes | — | |
3983
+ | scroll | `ResponsivePanelScroll \| undefined` | no | — | |
3984
+ | side | `ResponsivePanelSide \| undefined` | no | — | |
3985
+ | size | `ResponsivePanelSize \| undefined` | no | — | |
3986
+ | testID | `string \| undefined` | no | — | |
3987
+ | themeId | `string \| undefined` | no | — | |
3988
+ | title | `React.ReactNode` | no | — | |
3989
+
3990
+ </details>
3991
+
3992
+ </details>
3993
+
3994
+ <details>
3995
+ <summary>SectionHeader</summary>
3996
+
3997
+ Section heading pattern with optional description and action slot.
3998
+
3999
+ <details>
4000
+ <summary>Props</summary>
4001
+
4002
+ | Prop | Type | Required | Default | Description |
4003
+ | ----------- | ---------------------------- | -------- | ------- | ----------- |
4004
+ | actions | `React.ReactNode` | no | — | |
4005
+ | description | `React.ReactNode` | no | — | |
4006
+ | eyebrow | `React.ReactNode` | no | — | |
4007
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4008
+ | testID | `string \| undefined` | no | — | |
4009
+ | themeId | `string \| undefined` | no | — | |
4010
+ | title | `React.ReactNode` | yes | — | |
4011
+
4012
+ </details>
4013
+
4014
+ </details>
4015
+
4016
+ <details>
4017
+ <summary>SelectableItem</summary>
4018
+
4019
+ ```ts
4020
+ SelectableItem({ id, trigger, disabled = false, children }: SelectableItemProps) => React.JSX.Element
4021
+ ```
4022
+
4023
+ Adds selection behavior to arbitrary child content via render props.
4024
+
4025
+ Related types: `SelectableItemProps`
4026
+
4027
+ <details>
4028
+ <summary>Props</summary>
4029
+
4030
+ | Prop | Type | Required | Default | Description |
4031
+ | -------- | ----------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4032
+ | children | `React.ReactNode \| ((state: SelectableItemState) => React.ReactNode) \| undefined` | no | — | |
4033
+ | disabled | `boolean \| undefined` | no | `false` | |
4034
+ | id | `string` | yes | — | |
4035
+ | trigger | `SelectionTrigger \| undefined` | no | — | |
4036
+
4037
+ </details>
4038
+
4039
+ </details>
4040
+
4041
+ <details>
4042
+ <summary>SelectionProvider</summary>
4043
+
4044
+ ```ts
4045
+ SelectionProvider({
4046
+ children,
4047
+ selectedIds,
4048
+ defaultSelectedIds,
4049
+ mode,
4050
+ disabled,
4051
+ onSelectionChange,
4052
+ }: SelectionProviderProps) => React.JSX.Element
4053
+ ```
4054
+
4055
+ Provides selection state for building selectable lists and grids.
4056
+
4057
+ Related types: `SelectionProviderProps`
4058
+
4059
+ <details>
4060
+ <summary>Props</summary>
4061
+
4062
+ | Prop | Type | Required | Default | Description |
4063
+ | ------------------ | ----------------------------------------------- | -------- | ------- | ----------- |
4064
+ | children | `React.ReactNode \| undefined` | no | — | |
4065
+ | defaultSelectedIds | `readonly string[] \| undefined` | no | — | |
4066
+ | disabled | `boolean \| undefined` | no | — | |
4067
+ | mode | `SelectionMode \| undefined` | no | — | |
4068
+ | onSelectionChange | `(ids: readonly string[]) => void \| undefined` | no | — | |
4069
+ | selectedIds | `readonly string[] \| undefined` | no | — | |
4070
+
4071
+ </details>
4072
+
4073
+ </details>
4074
+
4075
+ <details>
4076
+ <summary>SettingsRow</summary>
4077
+
4078
+ Settings row pattern with title, description/meta, and optional trailing content.
4079
+
4080
+ <details>
4081
+ <summary>Props</summary>
4082
+
4083
+ | Prop | Type | Required | Default | Description |
4084
+ | ----------- | ---------------------------- | -------- | ------- | ----------- |
4085
+ | control | `React.ReactNode` | no | — | |
4086
+ | description | `React.ReactNode` | no | — | |
4087
+ | disabled | `boolean \| undefined` | no | — | |
4088
+ | meta | `React.ReactNode` | no | — | |
4089
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4090
+ | onPress | `(() => void) \| undefined` | no | — | |
4091
+ | testID | `string \| undefined` | no | — | |
4092
+ | themeId | `string \| undefined` | no | — | |
4093
+ | title | `React.ReactNode` | yes | — | |
4094
+
4095
+ </details>
4096
+
4097
+ </details>
4098
+
4099
+ <details>
4100
+ <summary>SignInForm</summary>
4101
+
4102
+ Sign-in form pattern with identifier and password fields.
4103
+
4104
+ <details>
4105
+ <summary>Props</summary>
4106
+
4107
+ | Prop | Type | Required | Default | Description |
4108
+ | ------------------- | ----------------------------------------------------- | -------- | ------- | ----------- |
4109
+ | disabled | `boolean \| undefined` | no | — | |
4110
+ | error | `React.ReactNode` | no | — | |
4111
+ | forgotPasswordLabel | `React.ReactNode` | no | — | |
4112
+ | identifierLabel | `React.ReactNode` | no | — | |
4113
+ | identifiers | `readonly AuthIdentifierKind[] \| undefined` | no | — | |
4114
+ | loading | `boolean \| undefined` | no | — | |
4115
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4116
+ | onForgotPassword | `(() => void \| Promise<void>) \| undefined` | no | — | |
4117
+ | onSignUp | `(() => void \| Promise<void>) \| undefined` | no | — | |
4118
+ | onSubmit | `(values: SignInFormValues) => void \| Promise<void>` | yes | — | |
4119
+ | secretLabel | `React.ReactNode` | no | — | |
4120
+ | signUpLabel | `React.ReactNode` | no | — | |
4121
+ | submitLabel | `React.ReactNode` | no | — | |
4122
+ | testID | `string \| undefined` | no | — | |
4123
+ | themeId | `string \| undefined` | no | — | |
4124
+
4125
+ </details>
4126
+
4127
+ </details>
4128
+
4129
+ <details>
4130
+ <summary>SignUpForm</summary>
4131
+
4132
+ Sign-up form pattern with structured fields and validation.
4133
+
4134
+ <details>
4135
+ <summary>Props</summary>
4136
+
4137
+ | Prop | Type | Required | Default | Description |
4138
+ | ----------- | ----------------------------------------------------- | -------- | ------- | ----------- |
4139
+ | disabled | `boolean \| undefined` | no | — | |
4140
+ | error | `React.ReactNode` | no | — | |
4141
+ | fields | `readonly SignUpFormField[] \| undefined` | no | — | |
4142
+ | loading | `boolean \| undefined` | no | — | |
4143
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4144
+ | onSignIn | `(() => void \| Promise<void>) \| undefined` | no | — | |
4145
+ | onSubmit | `(values: SignUpFormValues) => void \| Promise<void>` | yes | — | |
4146
+ | signInLabel | `React.ReactNode` | no | — | |
4147
+ | submitLabel | `React.ReactNode` | no | — | |
4148
+ | testID | `string \| undefined` | no | — | |
4149
+ | themeId | `string \| undefined` | no | — | |
4150
+
4151
+ </details>
4152
+
4153
+ </details>
4154
+
4155
+ <details>
4156
+ <summary>SwitchField</summary>
4157
+
4158
+ Labeled switch field pattern built on `SettingsRow`.
4159
+
4160
+ <details>
4161
+ <summary>Props</summary>
4162
+
4163
+ | Prop | Type | Required | Default | Description |
4164
+ | ------------- | ---------------------------- | -------- | ------- | ----------- |
4165
+ | description | `ReactNode` | no | — | |
4166
+ | disabled | `boolean \| undefined` | no | — | |
4167
+ | label | `ReactNode` | yes | — | |
4168
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4169
+ | onValueChange | `(value: boolean) => void` | yes | — | |
4170
+ | testID | `string \| undefined` | no | — | |
4171
+ | themeId | `string \| undefined` | no | — | |
4172
+ | value | `boolean` | yes | — | |
4173
+
4174
+ </details>
4175
+
4176
+ </details>
4177
+
4178
+ <details>
4179
+ <summary>ThemeComposer</summary>
4180
+
4181
+ UI for composing and applying a theme via structured controls.
4182
+
4183
+ <details>
4184
+ <summary>Props</summary>
4185
+
4186
+ | Prop | Type | Required | Default | Description |
4187
+ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4188
+ | appCategories | `readonly ("books_reading" \| "business_productivity" \| "developer_tools" \| "education_learning" \| "entertainment_media" \| "finance_money" \| "food_drink" \| "games" \| "graphics_design" \| "health_fitness" \| "kids_family" \| "lifestyle" \| "medical" \| "music_audio" \| "navigation_travel" \| "news_magazines" \| "photo_video" \| "reference" \| "shopping_commerce" \| "social_community" \| "sports" \| "utilities_tools" \| "weather")[] \| undefined` | no | — | |
4189
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4190
+ | onChange | `(theme: ZoraTheme) => void` | yes | — | |
4191
+ | onModeChange | `((mode: ZoraThemeMode) => void) \| undefined` | no | — | |
4192
+ | onSubmit | `((theme: ZoraTheme) => void) \| undefined` | no | — | |
4193
+ | testID | `string \| undefined` | no | — | |
4194
+ | themeId | `string \| undefined` | no | — | |
4195
+ | value | `ZoraTheme` | yes | — | |
4196
+
4197
+ </details>
4198
+
4199
+ </details>
4200
+
4201
+ <details>
4202
+ <summary>TileGrid</summary>
4203
+
4204
+ Responsive grid layout for arranging tile content.
4205
+
4206
+ <details>
4207
+ <summary>Props</summary>
4208
+
4209
+ | Prop | Type | Required | Default | Description |
4210
+ | -------- | ------------------------------------- | -------- | ------- | ----------- |
4211
+ | children | `ReactNode` | no | — | |
4212
+ | columns | `number \| "responsive" \| undefined` | no | — | |
4213
+ | compact | `boolean \| undefined` | no | — | |
4214
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4215
+ | testID | `string \| undefined` | no | — | |
4216
+ | themeId | `string \| undefined` | no | — | |
4217
+
4218
+ </details>
4219
+
4220
+ </details>
4221
+
4222
+ <details>
4223
+ <summary>Timeline</summary>
4224
+
4225
+ Timeline pattern for displaying a sequence of events.
4226
+
4227
+ <details>
4228
+ <summary>Props</summary>
4229
+
4230
+ | Prop | Type | Required | Default | Description |
4231
+ | ------- | ---------------------------- | -------- | ------- | ----------- |
4232
+ | compact | `boolean \| undefined` | no | — | |
4233
+ | items | `readonly TimelineItem[]` | yes | — | |
4234
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4235
+ | testID | `string \| undefined` | no | — | |
4236
+ | themeId | `string \| undefined` | no | — | |
4237
+
4238
+ </details>
4239
+
4240
+ </details>
4241
+
4242
+ <details>
4243
+ <summary>TreeItem</summary>
4244
+
4245
+ Single tree node row used within `TreeView`.
4246
+
4247
+ <details>
4248
+ <summary>Props</summary>
4249
+
4250
+ | Prop | Type | Required | Default | Description |
4251
+ | -------------- | --------------------------------------------------------------------- | -------- | ------- | ----------- |
4252
+ | depth | `number` | yes | — | |
4253
+ | expandedIds | `readonly TId[]` | yes | — | |
4254
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4255
+ | node | `TreeItemNode<TId>` | yes | — | |
4256
+ | onSelect | `((id: TId) => void) \| undefined` | no | — | |
4257
+ | onToggleExpand | `(id: TId) => void` | yes | — | |
4258
+ | renderItem | `((props: TreeItemRenderProps<TId>) => React.ReactNode) \| undefined` | no | — | |
4259
+ | selectedId | `TId \| undefined` | no | — | |
4260
+ | testID | `string \| undefined` | no | — | |
4261
+ | themeId | `string \| undefined` | no | — | |
4262
+
4263
+ </details>
4264
+
4265
+ </details>
4266
+
4267
+ <details>
4268
+ <summary>TreeView</summary>
4269
+
4270
+ Tree view pattern for hierarchical navigation and expandable lists.
4271
+
4272
+ <details>
4273
+ <summary>Props</summary>
4274
+
4275
+ | Prop | Type | Required | Default | Description |
4276
+ | ------------------ | --------------------------------------------------------------- | -------- | ------- | ----------- |
4277
+ | defaultExpandedIds | `readonly TId[] \| undefined` | no | — | |
4278
+ | expandedIds | `readonly TId[] \| undefined` | no | — | |
4279
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4280
+ | nodes | `readonly TreeItemNode<TId>[]` | yes | — | |
4281
+ | onExpandedChange | `((ids: readonly TId[]) => void) \| undefined` | no | — | |
4282
+ | onSelect | `((id: TId) => void) \| undefined` | no | — | |
4283
+ | renderItem | `((props: TreeItemRenderProps<TId>) => ReactNode) \| undefined` | no | — | |
4284
+ | selectedId | `TId \| undefined` | no | — | |
4285
+ | testID | `string \| undefined` | no | — | |
4286
+ | themeId | `string \| undefined` | no | — | |
4287
+
4288
+ </details>
4289
+
4290
+ </details>
4291
+
4292
+ <details>
4293
+ <summary>useSelection</summary>
4294
+
4295
+ ```ts
4296
+ useSelection() => UseSelectionResult
4297
+ ```
4298
+
4299
+ Accesses selection state provided by `SelectionProvider`.
4300
+
4301
+ Module: `src/patterns/selection/SelectionProvider.tsx`
4302
+ Source: `src/patterns/selection/SelectionProvider.tsx:26:1`
4303
+ Related symbols: `UseSelectionResult`
4304
+
4305
+ </details>
4306
+
4307
+ <details>
4308
+ <summary>ZoraDrawerContent</summary>
4309
+
4310
+ Standard drawer content pattern for ZORA navigation lists.
4311
+
4312
+ <details>
4313
+ <summary>Props</summary>
4314
+
4315
+ | Prop | Type | Required | Default | Description |
4316
+ | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4317
+ | compact | `boolean \| undefined` | no | — | |
4318
+ | descriptors | `Readonly<Record<string, import("/Users/a_rtiphishl_e/git/zora/src/internal/resolveZoraNavigationItems").ZoraNavigationDescriptor \| undefined>> \| undefined` | no | — | |
4319
+ | footer | `React.ReactNode` | no | — | |
4320
+ | header | `React.ReactNode` | no | — | |
4321
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4322
+ | navigation | `ZoraDrawerNavigation` | yes | — | |
4323
+ | routeMap | `Partial<Record<string, import("/Users/a_rtiphishl_e/git/zora/src/index").ZoraNavigationRouteMetadata>> \| undefined` | no | — | |
4324
+ | state | `ZoraNavigationState` | yes | — | |
4325
+ | testID | `string \| undefined` | no | — | |
4326
+ | themeId | `string \| undefined` | no | — | |
4327
+
4328
+ </details>
4329
+
4330
+ </details>
4331
+
4332
+ <details>
4333
+ <summary>ZoraTabBar</summary>
4334
+
4335
+ Bottom tab bar pattern with badge support and active state styling.
4336
+
4337
+ <details>
4338
+ <summary>Props</summary>
4339
+
4340
+ | Prop | Type | Required | Default | Description |
4341
+ | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4342
+ | chrome | `"none" \| "raised" \| undefined` | no | — | |
4343
+ | compact | `boolean \| undefined` | no | — | |
4344
+ | descriptors | `Readonly<Record<string, import("/Users/a_rtiphishl_e/git/zora/src/internal/resolveZoraNavigationItems").ZoraNavigationDescriptor \| undefined>> \| undefined` | no | — | |
4345
+ | insets | `{ top?: number; bottom?: number; left?: number; right?: number; } \| undefined` | no | — | |
4346
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4347
+ | navigation | `ZoraTabBarNavigation` | yes | — | |
4348
+ | routeMap | `Partial<Record<string, import("/Users/a_rtiphishl_e/git/zora/src/index").ZoraNavigationRouteMetadata>> \| undefined` | no | — | |
4349
+ | state | `ZoraNavigationState` | yes | — | |
4350
+ | testID | `string \| undefined` | no | — | |
4351
+ | themeId | `string \| undefined` | no | — | |
4352
+
4353
+ </details>
4354
+
4355
+ </details>
4356
+
4357
+ ### Layout
4358
+
4359
+ <details>
4360
+ <summary>AppShell</summary>
4361
+
4362
+ Root application shell with stable header, content, footer, and overlay slots.
4363
+
4364
+ `AppShell` provides the top-level layout frame for cross-platform apps while
4365
+ leaving navigation, toolbars, and overlays composable through explicit slots.
4366
+
4367
+ #### App frame
4368
+
4369
+ ```tsx
4370
+ <AppShell header={<AppBar title="Dashboard" />}>...</AppShell>
4371
+ ```
4372
+
4373
+ <details>
4374
+ <summary>Props</summary>
4375
+
4376
+ | Prop | Type | Required | Default | Description |
4377
+ | -------- | ---------------------------- | -------- | ------- | ----------- |
4378
+ | children | `React.ReactNode` | no | — | |
4379
+ | footer | `React.ReactNode` | no | — | |
4380
+ | header | `React.ReactNode` | no | — | |
4381
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4382
+ | overlay | `React.ReactNode` | no | — | |
4383
+ | testID | `string \| undefined` | no | — | |
4384
+ | themeId | `string \| undefined` | no | — | |
4385
+
4386
+ </details>
4387
+
4388
+ </details>
4389
+
4390
+ <details>
4391
+ <summary>Screen</summary>
4392
+
4393
+ Page-level container with standard background and optional scroll behavior.
4394
+
4395
+ <details>
4396
+ <summary>Props</summary>
4397
+
4398
+ | Prop | Type | Required | Default | Description |
4399
+ | -------- | ------------------------------- | -------- | ------- | ----------- |
4400
+ | children | `React.ReactNode` | no | — | |
4401
+ | footer | `React.ReactNode` | no | — | |
4402
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4403
+ | scroll | `boolean \| undefined` | no | — | |
4404
+ | testID | `string \| undefined` | no | — | |
4405
+ | themeId | `string \| undefined` | no | — | |
4406
+ | width | `ZoraContentWidth \| undefined` | no | — | |
4407
+
4408
+ </details>
4409
+
4410
+ </details>
4411
+
4412
+ <details>
4413
+ <summary>ScreenSection</summary>
4414
+
4415
+ Screen section layout with optional title, description, and actions.
4416
+
4417
+ <details>
4418
+ <summary>Props</summary>
4419
+
4420
+ | Prop | Type | Required | Default | Description |
4421
+ | ----------- | ---------------------------- | -------- | ------- | ----------- |
4422
+ | actions | `React.ReactNode` | no | — | |
4423
+ | children | `React.ReactNode` | no | — | |
4424
+ | description | `React.ReactNode` | no | — | |
4425
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4426
+ | testID | `string \| undefined` | no | — | |
4427
+ | themeId | `string \| undefined` | no | — | |
4428
+ | title | `React.ReactNode` | no | — | |
4429
+
4430
+ </details>
4431
+
4432
+ </details>
4433
+
4434
+ <details>
4435
+ <summary>SettingsLayout</summary>
4436
+
4437
+ Settings page layout with app bar, sidebar, and scrollable content area.
4438
+
4439
+ <details>
4440
+ <summary>Props</summary>
4441
+
4442
+ | Prop | Type | Required | Default | Description |
4443
+ | ----------- | ---------------------------- | -------- | ------- | ----------- |
4444
+ | actions | `React.ReactNode` | no | — | |
4445
+ | children | `React.ReactNode` | no | — | |
4446
+ | description | `React.ReactNode` | no | — | |
4447
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4448
+ | sidebar | `React.ReactNode` | yes | — | |
4449
+ | testID | `string \| undefined` | no | — | |
4450
+ | themeId | `string \| undefined` | no | — | |
4451
+ | title | `React.ReactNode` | no | — | |
4452
+
4453
+ </details>
4454
+
4455
+ </details>
4456
+
4457
+ <details>
4458
+ <summary>SidebarLayout</summary>
4459
+
4460
+ Responsive layout with a sidebar and main content area (and optional aside).
4461
+
4462
+ <details>
4463
+ <summary>Props</summary>
4464
+
4465
+ | Prop | Type | Required | Default | Description |
4466
+ | ------------ | ---------------------------- | -------- | ------- | ----------- |
4467
+ | aside | `React.ReactNode` | no | — | |
4468
+ | asideWidth | `number \| undefined` | no | — | |
4469
+ | children | `React.ReactNode` | no | — | |
4470
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4471
+ | sidebar | `React.ReactNode` | yes | — | |
4472
+ | sidebarWidth | `number \| undefined` | no | — | |
4473
+ | testID | `string \| undefined` | no | — | |
4474
+ | themeId | `string \| undefined` | no | — | |
4475
+
4476
+ </details>
4477
+
4478
+ </details>
4479
+
4480
+ <details>
4481
+ <summary>TopbarLayout</summary>
4482
+
4483
+ Layout that composes a top bar with optional sidebar and content.
4484
+
4485
+ <details>
4486
+ <summary>Props</summary>
4487
+
4488
+ | Prop | Type | Required | Default | Description |
4489
+ | -------- | ---------------------------- | -------- | ------- | ----------- |
4490
+ | children | `React.ReactNode` | no | — | |
4491
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4492
+ | sidebar | `React.ReactNode` | no | — | |
4493
+ | testID | `string \| undefined` | no | — | |
4494
+ | themeId | `string \| undefined` | no | — | |
4495
+ | topbar | `React.ReactNode` | yes | — | |
4496
+
4497
+ </details>
4498
+
4499
+ </details>
4500
+
4501
+ ### Utilities
4502
+
4503
+ <details>
4504
+ <summary>Box</summary>
4505
+
4506
+ Base layout primitive for themed spacing, color, border, flex, and responsive props.
4507
+
4508
+ <details>
4509
+ <summary>Props</summary>
4510
+
4511
+ | Prop | Type | Required | Default | Description |
4512
+ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4513
+ | accessibilityLabel | `string \| undefined` | no | — | |
4514
+ | accessibilityRole | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityRole \| undefined` | no | — | |
4515
+ | accessibilityState | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityState \| undefined` | no | — | |
4516
+ | accessible | `boolean \| undefined` | no | — | |
4517
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
4518
+ | bg | `Responsive<ColorValue> \| undefined` | no | — | |
4519
+ | borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
4520
+ | borderWidth | `Responsive<number> \| undefined` | no | — | |
4521
+ | bottom | `Responsive<number> \| undefined` | no | — | |
4522
+ | children | `React.ReactNode` | no | — | |
4523
+ | flex | `Responsive<number> \| undefined` | no | — | |
4524
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
4525
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
4526
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
4527
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
4528
+ | left | `Responsive<number> \| undefined` | no | — | |
4529
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
4530
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
4531
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
4532
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
4533
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
4534
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
4535
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
4536
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4537
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
4538
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
4539
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
4540
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
4541
+ | opacity | `Responsive<number> \| undefined` | no | — | |
4542
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
4543
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
4544
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
4545
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
4546
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
4547
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
4548
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
4549
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
4550
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
4551
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
4552
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
4553
+ | right | `Responsive<number> \| undefined` | no | — | |
4554
+ | style | `StyleProp<ViewStyle>` | no | — | |
4555
+ | testID | `string \| undefined` | no | — | |
4556
+ | themeId | `string \| undefined` | no | — | |
4557
+ | top | `Responsive<number> \| undefined` | no | — | |
4558
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
4559
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
4560
+
4561
+ </details>
4562
+
4563
+ </details>
4564
+
4565
+ <details>
4566
+ <summary>Center</summary>
4567
+
4568
+ Centers children horizontally and vertically within the available space.
4569
+
4570
+ <details>
4571
+ <summary>Props</summary>
4572
+
4573
+ | Prop | Type | Required | Default | Description |
4574
+ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4575
+ | accessibilityLabel | `string \| undefined` | no | — | |
4576
+ | accessibilityRole | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityRole \| undefined` | no | — | |
4577
+ | accessibilityState | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityState \| undefined` | no | — | |
4578
+ | accessible | `boolean \| undefined` | no | — | |
4579
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
4580
+ | axis | `"horizontal" \| "vertical" \| "both" \| undefined` | no | — | |
4581
+ | bg | `Responsive<ColorValue> \| undefined` | no | — | |
4582
+ | borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
4583
+ | borderWidth | `Responsive<number> \| undefined` | no | — | |
4584
+ | bottom | `Responsive<number> \| undefined` | no | — | |
4585
+ | children | `React.ReactNode` | no | — | |
4586
+ | flex | `Responsive<number> \| undefined` | no | — | |
4587
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
4588
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
4589
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
4590
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
4591
+ | left | `Responsive<number> \| undefined` | no | — | |
4592
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
4593
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
4594
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
4595
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
4596
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
4597
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
4598
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
4599
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4600
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
4601
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
4602
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
4603
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
4604
+ | opacity | `Responsive<number> \| undefined` | no | — | |
4605
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
4606
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
4607
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
4608
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
4609
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
4610
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
4611
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
4612
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
4613
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
4614
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
4615
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
4616
+ | right | `Responsive<number> \| undefined` | no | — | |
4617
+ | style | `StyleProp<ViewStyle>` | no | — | |
4618
+ | testID | `string \| undefined` | no | — | |
4619
+ | themeId | `string \| undefined` | no | — | |
4620
+ | top | `Responsive<number> \| undefined` | no | — | |
4621
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
4622
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
4623
+
4624
+ </details>
4625
+
4626
+ </details>
4627
+
4628
+ <details>
4629
+ <summary>Container</summary>
4630
+
4631
+ Constrains page content to semantic widths with responsive padding.
4632
+
4633
+ <details>
4634
+ <summary>Props</summary>
4635
+
4636
+ | Prop | Type | Required | Default | Description |
4637
+ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4638
+ | accessibilityLabel | `string \| undefined` | no | — | |
4639
+ | accessibilityRole | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityRole \| undefined` | no | — | |
4640
+ | accessibilityState | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityState \| undefined` | no | — | |
4641
+ | accessible | `boolean \| undefined` | no | — | |
4642
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
4643
+ | bg | `Responsive<ColorValue> \| undefined` | no | — | |
4644
+ | borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
4645
+ | borderWidth | `Responsive<number> \| undefined` | no | — | |
4646
+ | bottom | `Responsive<number> \| undefined` | no | — | |
4647
+ | children | `React.ReactNode` | no | — | |
4648
+ | flex | `Responsive<number> \| undefined` | no | — | |
4649
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
4650
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
4651
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
4652
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
4653
+ | left | `Responsive<number> \| undefined` | no | — | |
4654
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
4655
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
4656
+ | maxWidth | `Responsive<number> \| undefined` | no | — | |
4657
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
4658
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
4659
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
4660
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
4661
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4662
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
4663
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
4664
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
4665
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
4666
+ | opacity | `Responsive<number> \| undefined` | no | — | |
4667
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
4668
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
4669
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
4670
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
4671
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
4672
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
4673
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
4674
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
4675
+ | px | `Responsive<string \| number> \| undefined` | no | — | |
4676
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
4677
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
4678
+ | right | `Responsive<number> \| undefined` | no | — | |
4679
+ | style | `StyleProp<ViewStyle>` | no | — | |
4680
+ | testID | `string \| undefined` | no | — | |
4681
+ | themeId | `string \| undefined` | no | — | |
4682
+ | top | `Responsive<number> \| undefined` | no | — | |
4683
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
4684
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
4685
+
4686
+ </details>
4687
+
4688
+ </details>
4689
+
4690
+ <details>
4691
+ <summary>Divider</summary>
4692
+
4693
+ Renders a themed visual separator between content sections.
4694
+
4695
+ <details>
4696
+ <summary>Props</summary>
4697
+
4698
+ | Prop | Type | Required | Default | Description |
4699
+ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4700
+ | accessibilityLabel | `string \| undefined` | no | — | |
4701
+ | accessibilityRole | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityRole \| undefined` | no | — | |
4702
+ | accessibilityState | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityState \| undefined` | no | — | |
4703
+ | accessible | `boolean \| undefined` | no | — | |
4704
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
4705
+ | borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
4706
+ | borderWidth | `Responsive<number> \| undefined` | no | — | |
4707
+ | bottom | `Responsive<number> \| undefined` | no | — | |
4708
+ | children | `React.ReactNode` | no | — | |
4709
+ | color | `ColorValue \| undefined` | no | — | |
4710
+ | flex | `Responsive<number> \| undefined` | no | — | |
4711
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
4712
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
4713
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
4714
+ | left | `Responsive<number> \| undefined` | no | — | |
4715
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
4716
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
4717
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
4718
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
4719
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
4720
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
4721
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
4722
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4723
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
4724
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
4725
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
4726
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
4727
+ | opacity | `Responsive<number> \| undefined` | no | — | |
4728
+ | orientation | `"horizontal" \| "vertical" \| undefined` | no | — | |
4729
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
4730
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
4731
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
4732
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
4733
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
4734
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
4735
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
4736
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
4737
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
4738
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
4739
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
4740
+ | right | `Responsive<number> \| undefined` | no | — | |
4741
+ | style | `StyleProp<ViewStyle>` | no | — | |
4742
+ | testID | `string \| undefined` | no | — | |
4743
+ | themeId | `string \| undefined` | no | — | |
4744
+ | thickness | `number \| undefined` | no | — | |
4745
+ | top | `Responsive<number> \| undefined` | no | — | |
4746
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
4747
+
4748
+ </details>
4749
+
4750
+ </details>
4751
+
4752
+ <details>
4753
+ <summary>Grid</summary>
4754
+
4755
+ Creates responsive grid layouts for cards, tiles, and dashboard content.
4756
+
4757
+ <details>
4758
+ <summary>Props</summary>
4759
+
4760
+ | Prop | Type | Required | Default | Description |
4761
+ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4762
+ | accessibilityLabel | `string \| undefined` | no | — | |
4763
+ | accessibilityRole | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityRole \| undefined` | no | — | |
4764
+ | accessibilityState | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityState \| undefined` | no | — | |
4765
+ | accessible | `boolean \| undefined` | no | — | |
4766
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
4767
+ | bg | `Responsive<ColorValue> \| undefined` | no | — | |
4768
+ | borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
4769
+ | borderWidth | `Responsive<number> \| undefined` | no | — | |
4770
+ | bottom | `Responsive<number> \| undefined` | no | — | |
4771
+ | children | `React.ReactNode` | no | — | |
4772
+ | colGap | `Responsive<SpaceValue> \| undefined` | no | — | |
4773
+ | cols | `Responsive<number>` | yes | — | |
4774
+ | flex | `Responsive<number> \| undefined` | no | — | |
4775
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
4776
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
4777
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
4778
+ | gap | `Responsive<SpaceValue> \| undefined` | no | — | |
4779
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
4780
+ | left | `Responsive<number> \| undefined` | no | — | |
4781
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
4782
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
4783
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
4784
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
4785
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
4786
+ | minItemWidth | `Responsive<number> \| undefined` | no | — | |
4787
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
4788
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
4789
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4790
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
4791
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
4792
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
4793
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
4794
+ | opacity | `Responsive<number> \| undefined` | no | — | |
4795
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
4796
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
4797
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
4798
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
4799
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
4800
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
4801
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
4802
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
4803
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
4804
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
4805
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
4806
+ | right | `Responsive<number> \| undefined` | no | — | |
4807
+ | rowGap | `Responsive<SpaceValue> \| undefined` | no | — | |
4808
+ | style | `StyleProp<ViewStyle>` | no | — | |
4809
+ | testID | `string \| undefined` | no | — | |
4810
+ | themeId | `string \| undefined` | no | — | |
4811
+ | top | `Responsive<number> \| undefined` | no | — | |
4812
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
4813
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
4814
+
4815
+ </details>
4816
+
4817
+ </details>
4818
+
4819
+ <details>
4820
+ <summary>Inline</summary>
4821
+
4822
+ Arranges children inline with spacing and wrapping behavior.
4823
+
4824
+ <details>
4825
+ <summary>Props</summary>
4826
+
4827
+ | Prop | Type | Required | Default | Description |
4828
+ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4829
+ | accessibilityLabel | `string \| undefined` | no | — | |
4830
+ | accessibilityRole | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityRole \| undefined` | no | — | |
4831
+ | accessibilityState | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityState \| undefined` | no | — | |
4832
+ | accessible | `boolean \| undefined` | no | — | |
4833
+ | align | `Responsive<"flex-start" \| "flex-end" \| "center" \| "stretch" \| "baseline"> \| undefined` | no | — | |
4834
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
4835
+ | bg | `Responsive<ColorValue> \| undefined` | no | — | |
4836
+ | borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
4837
+ | borderWidth | `Responsive<number> \| undefined` | no | — | |
4838
+ | bottom | `Responsive<number> \| undefined` | no | — | |
4839
+ | children | `React.ReactNode` | no | — | |
4840
+ | flex | `Responsive<number> \| undefined` | no | — | |
4841
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
4842
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
4843
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
4844
+ | gap | `Responsive<SpaceValue> \| undefined` | no | — | |
4845
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
4846
+ | justify | `Responsive<"flex-start" \| "flex-end" \| "center" \| "space-between" \| "space-around" \| "space-evenly"> \| undefined` | no | — | |
4847
+ | left | `Responsive<number> \| undefined` | no | — | |
4848
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
4849
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
4850
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
4851
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
4852
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
4853
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
4854
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
4855
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4856
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
4857
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
4858
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
4859
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
4860
+ | opacity | `Responsive<number> \| undefined` | no | — | |
4861
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
4862
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
4863
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
4864
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
4865
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
4866
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
4867
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
4868
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
4869
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
4870
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
4871
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
4872
+ | right | `Responsive<number> \| undefined` | no | — | |
4873
+ | style | `StyleProp<ViewStyle>` | no | — | |
4874
+ | testID | `string \| undefined` | no | — | |
4875
+ | themeId | `string \| undefined` | no | — | |
4876
+ | top | `Responsive<number> \| undefined` | no | — | |
4877
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
4878
+ | wrap | `Responsive<"wrap" \| "nowrap"> \| undefined` | no | — | |
4879
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
4880
+
4881
+ </details>
4882
+
4883
+ </details>
4884
+
4885
+ <details>
4886
+ <summary>Show</summary>
4887
+
4888
+ Conditionally renders children for responsive display and breakpoint-based visibility.
4889
+
4890
+ <details>
4891
+ <summary>Props</summary>
4892
+
4893
+ | Prop | Type | Required | Default | Description |
4894
+ | -------- | ---------------------------- | -------- | ------- | ----------- |
4895
+ | children | `React.ReactNode` | yes | — | |
4896
+ | fallback | `React.ReactNode` | no | — | |
4897
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4898
+ | testID | `string \| undefined` | no | — | |
4899
+ | themeId | `string \| undefined` | no | — | |
4900
+ | when | `Responsive<boolean>` | yes | — | |
4901
+
4902
+ </details>
4903
+
4904
+ </details>
4905
+
4906
+ <details>
4907
+ <summary>Spacer</summary>
4908
+
4909
+ Adds flexible or fixed empty space in layout compositions.
4910
+
4911
+ <details>
4912
+ <summary>Props</summary>
4913
+
4914
+ | Prop | Type | Required | Default | Description |
4915
+ | ------- | --------------------------------------------------- | -------- | ------- | ----------- |
4916
+ | axis | `"horizontal" \| "vertical" \| "both" \| undefined` | no | — | |
4917
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4918
+ | size | `SpaceValue \| undefined` | no | — | |
4919
+ | testID | `string \| undefined` | no | — | |
4920
+ | themeId | `string \| undefined` | no | — | |
4921
+
4922
+ </details>
4923
+
4924
+ </details>
4925
+
4926
+ <details>
4927
+ <summary>Stack</summary>
4928
+
4929
+ Arranges layout items in one direction with theme spacing.
4930
+
4931
+ <details>
4932
+ <summary>Props</summary>
4933
+
4934
+ | Prop | Type | Required | Default | Description |
4935
+ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
4936
+ | accessibilityLabel | `string \| undefined` | no | — | |
4937
+ | accessibilityRole | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityRole \| undefined` | no | — | |
4938
+ | accessibilityState | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityState \| undefined` | no | — | |
4939
+ | accessible | `boolean \| undefined` | no | — | |
4940
+ | align | `Responsive<"flex-start" \| "flex-end" \| "center" \| "stretch" \| "baseline"> \| undefined` | no | — | |
4941
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
4942
+ | bg | `Responsive<ColorValue> \| undefined` | no | — | |
4943
+ | borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
4944
+ | borderWidth | `Responsive<number> \| undefined` | no | — | |
4945
+ | bottom | `Responsive<number> \| undefined` | no | — | |
4946
+ | children | `React.ReactNode` | no | — | |
4947
+ | direction | `Responsive<"row" \| "column"> \| undefined` | no | — | |
4948
+ | flex | `Responsive<number> \| undefined` | no | — | |
4949
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
4950
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
4951
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
4952
+ | gap | `Responsive<SpaceValue> \| undefined` | no | — | |
4953
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
4954
+ | justify | `Responsive<"flex-start" \| "flex-end" \| "center" \| "space-between" \| "space-around" \| "space-evenly"> \| undefined` | no | — | |
4955
+ | left | `Responsive<number> \| undefined` | no | — | |
4956
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
4957
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
4958
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
4959
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
4960
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
4961
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
4962
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
4963
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
4964
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
4965
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
4966
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
4967
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
4968
+ | opacity | `Responsive<number> \| undefined` | no | — | |
4969
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
4970
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
4971
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
4972
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
4973
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
4974
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
4975
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
4976
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
4977
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
4978
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
4979
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
4980
+ | right | `Responsive<number> \| undefined` | no | — | |
4981
+ | style | `StyleProp<ViewStyle>` | no | — | |
4982
+ | testID | `string \| undefined` | no | — | |
4983
+ | themeId | `string \| undefined` | no | — | |
4984
+ | top | `Responsive<number> \| undefined` | no | — | |
4985
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
4986
+ | wrap | `Responsive<"wrap" \| "nowrap"> \| undefined` | no | — | |
4987
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
4988
+
4989
+ </details>
4990
+
4991
+ </details>
4992
+
4993
+ <details>
4994
+ <summary>Surface</summary>
4995
+
4996
+ Provides a semantic themed region for elevated, subtle, or bordered content.
4997
+
4998
+ <details>
4999
+ <summary>Props</summary>
5000
+
5001
+ | Prop | Type | Required | Default | Description |
5002
+ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
5003
+ | accessibilityLabel | `string \| undefined` | no | — | |
5004
+ | accessibilityRole | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityRole \| undefined` | no | — | |
5005
+ | accessibilityState | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityState \| undefined` | no | — | |
5006
+ | accessible | `boolean \| undefined` | no | — | |
5007
+ | alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
5008
+ | bottom | `Responsive<number> \| undefined` | no | — | |
5009
+ | children | `React.ReactNode` | no | — | |
5010
+ | flex | `Responsive<number> \| undefined` | no | — | |
5011
+ | flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
5012
+ | flexGrow | `Responsive<number> \| undefined` | no | — | |
5013
+ | flexShrink | `Responsive<number> \| undefined` | no | — | |
5014
+ | height | `Responsive<string \| number> \| undefined` | no | — | |
5015
+ | left | `Responsive<number> \| undefined` | no | — | |
5016
+ | m | `Responsive<SpaceValue> \| undefined` | no | — | |
5017
+ | maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
5018
+ | maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
5019
+ | mb | `Responsive<SpaceValue> \| undefined` | no | — | |
5020
+ | minHeight | `Responsive<string \| number> \| undefined` | no | — | |
5021
+ | minWidth | `Responsive<string \| number> \| undefined` | no | — | |
5022
+ | ml | `Responsive<SpaceValue> \| undefined` | no | — | |
5023
+ | mode | `ZoraThemeMode \| undefined` | no | — | |
5024
+ | mr | `Responsive<SpaceValue> \| undefined` | no | — | |
5025
+ | mt | `Responsive<SpaceValue> \| undefined` | no | — | |
5026
+ | mx | `Responsive<SpaceValue> \| undefined` | no | — | |
5027
+ | my | `Responsive<SpaceValue> \| undefined` | no | — | |
5028
+ | opacity | `Responsive<number> \| undefined` | no | — | |
5029
+ | overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
5030
+ | p | `Responsive<SpaceValue> \| undefined` | no | — | |
5031
+ | pb | `Responsive<SpaceValue> \| undefined` | no | — | |
5032
+ | pl | `Responsive<SpaceValue> \| undefined` | no | — | |
5033
+ | pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
5034
+ | position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
5035
+ | pr | `Responsive<SpaceValue> \| undefined` | no | — | |
5036
+ | pt | `Responsive<SpaceValue> \| undefined` | no | — | |
5037
+ | px | `Responsive<SpaceValue> \| undefined` | no | — | |
5038
+ | py | `Responsive<SpaceValue> \| undefined` | no | — | |
5039
+ | radius | `Responsive<RadiusValue> \| undefined` | no | — | |
5040
+ | right | `Responsive<number> \| undefined` | no | — | |
5041
+ | style | `StyleProp<ViewStyle>` | no | — | |
5042
+ | testID | `string \| undefined` | no | — | |
5043
+ | themeId | `string \| undefined` | no | — | |
5044
+ | top | `Responsive<number> \| undefined` | no | — | |
5045
+ | variant | `SurfaceVariant \| undefined` | no | — | |
5046
+ | width | `Responsive<string \| number> \| undefined` | no | — | |
5047
+ | zIndex | `Responsive<number> \| undefined` | no | — | |
5048
+
5049
+ </details>
5050
+
5051
+ </details>
5052
+
5053
+ <details>
5054
+ <summary>ZoraProvider</summary>
5055
+
5056
+ ```ts
5057
+ ZoraProvider({
5058
+ children,
5059
+ theme = zoraDefaultTheme,
5060
+ initialMode = 'light',
5061
+ }: ZoraProviderProps) => React.JSX.Element
5062
+ ```
5063
+
5064
+ Installs the ZORA theme runtime and underlying Surface theme provider.
5065
+
5066
+ Wrap an app with `ZoraProvider` once near the root so components, patterns,
5067
+ layouts, and theme hooks resolve the same design tokens and color mode.
5068
+
5069
+ #### App provider
5070
+
5071
+ ```tsx
5072
+ <ZoraProvider initialMode="light">
5073
+ <App />
5074
+ </ZoraProvider>
5075
+ ```
5076
+
5077
+ Related types: `ZoraProviderProps`
5078
+
5079
+ <details>
5080
+ <summary>Props</summary>
5081
+
5082
+ | Prop | Type | Required | Default | Description |
5083
+ | ----------- | ------------------------------ | -------- | ------------------ | ----------- |
5084
+ | children | `React.ReactNode \| undefined` | no | — | |
5085
+ | initialMode | `ZoraThemeMode \| undefined` | no | `'light'` | |
5086
+ | theme | `ZoraTheme \| undefined` | no | `zoraDefaultTheme` | |
5087
+
5088
+ </details>
5089
+
5090
+ </details>