@krizaka/ui 3.3.0 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (477) hide show
  1. package/dist/activity-feed.d.ts +199 -0
  2. package/dist/activity-feed.js +155 -0
  3. package/dist/activity-feed.js.map +1 -0
  4. package/dist/chat.d.ts +187 -0
  5. package/dist/chat.js +132 -0
  6. package/dist/chat.js.map +1 -0
  7. package/dist/chunk-7Z4KHPFC.js +42 -0
  8. package/dist/chunk-7Z4KHPFC.js.map +1 -0
  9. package/dist/chunk-ECSCA3CN.js +128 -0
  10. package/dist/chunk-ECSCA3CN.js.map +1 -0
  11. package/dist/chunk-F2GKFIYK.js +47 -0
  12. package/dist/chunk-F2GKFIYK.js.map +1 -0
  13. package/dist/data-table.js +84 -231
  14. package/dist/data-table.js.map +1 -1
  15. package/dist/description-list.d.ts +105 -0
  16. package/dist/description-list.js +49 -0
  17. package/dist/description-list.js.map +1 -0
  18. package/dist/index.js +13 -66
  19. package/dist/index.js.map +1 -1
  20. package/dist/kanban.d.ts +132 -0
  21. package/dist/kanban.js +187 -0
  22. package/dist/kanban.js.map +1 -0
  23. package/dist/list.d.ts +153 -0
  24. package/dist/list.js +130 -0
  25. package/dist/list.js.map +1 -0
  26. package/dist/map.d.ts +463 -0
  27. package/dist/map.js +952 -0
  28. package/dist/map.js.map +1 -0
  29. package/dist/match-dialog.d.ts +30 -0
  30. package/dist/match-dialog.js +146 -0
  31. package/dist/match-dialog.js.map +1 -0
  32. package/dist/motion.css +12 -1
  33. package/dist/native/map.d.ts +200 -0
  34. package/dist/native/map.js +673 -0
  35. package/dist/native/map.js.map +1 -0
  36. package/dist/native/media-picker.d.ts +58 -0
  37. package/dist/native/media-picker.js +63 -0
  38. package/dist/native/media-picker.js.map +1 -0
  39. package/dist/native.d.ts +952 -75
  40. package/dist/native.js +2572 -889
  41. package/dist/native.js.map +1 -1
  42. package/dist/photo-grid.d.ts +122 -0
  43. package/dist/photo-grid.js +94 -0
  44. package/dist/photo-grid.js.map +1 -0
  45. package/dist/stat.d.ts +31 -2
  46. package/dist/stat.js +21 -4
  47. package/dist/stat.js.map +1 -1
  48. package/dist/step-progress.d.ts +20 -0
  49. package/dist/step-progress.js +17 -0
  50. package/dist/step-progress.js.map +1 -0
  51. package/dist/swipe-deck.d.ts +183 -0
  52. package/dist/swipe-deck.js +144 -0
  53. package/dist/swipe-deck.js.map +1 -0
  54. package/dist/tag-selector.d.ts +26 -0
  55. package/dist/tag-selector.js +21 -0
  56. package/dist/tag-selector.js.map +1 -0
  57. package/dist/tree-view.d.ts +111 -0
  58. package/dist/tree-view.js +154 -0
  59. package/dist/tree-view.js.map +1 -0
  60. package/dist/verified-badge.d.ts +16 -0
  61. package/dist/verified-badge.js +23 -0
  62. package/dist/verified-badge.js.map +1 -0
  63. package/package.json +245 -10
  64. package/registry/achievement.json +1 -1
  65. package/registry/action-bar.json +1 -1
  66. package/registry/action-sheet.json +121 -0
  67. package/registry/activity-feed.json +468 -0
  68. package/registry/alert.json +1 -1
  69. package/registry/app-shell.json +1 -1
  70. package/registry/argument-card.json +1 -1
  71. package/registry/audio-player.json +1 -1
  72. package/registry/auth-layout.json +1 -1
  73. package/registry/avatar.json +58 -3
  74. package/registry/badge.json +1 -1
  75. package/registry/button.json +1 -1
  76. package/registry/card-grid.json +1 -1
  77. package/registry/card.json +1 -1
  78. package/registry/catalogue-page.json +1 -1
  79. package/registry/changelog-page.json +1 -1
  80. package/registry/chat.json +917 -0
  81. package/registry/checkbox.json +1 -1
  82. package/registry/chip-link.json +1 -1
  83. package/registry/chip.json +1 -1
  84. package/registry/choice-grid.json +1 -1
  85. package/registry/code-block.json +1 -1
  86. package/registry/combobox.json +1 -1
  87. package/registry/command.json +1 -1
  88. package/registry/component-page.json +1 -1
  89. package/registry/confirm-button.json +1 -1
  90. package/registry/contact-page.json +1 -1
  91. package/registry/continue-prompt.json +1 -1
  92. package/registry/countdown.json +1 -1
  93. package/registry/cta-panel.json +1 -1
  94. package/registry/dashboard-layout.json +1 -1
  95. package/registry/data-table.json +1 -1
  96. package/registry/date-picker.json +2 -2
  97. package/registry/decision-list.json +1 -1
  98. package/registry/description-list.json +232 -0
  99. package/registry/detail-layout.json +1 -1
  100. package/registry/dialog.json +1 -1
  101. package/registry/docs-article-page.json +1 -1
  102. package/registry/docs-hub-page.json +1 -1
  103. package/registry/docs-layout.json +1 -1
  104. package/registry/dropdown-menu.json +1 -1
  105. package/registry/empty-state.json +1 -1
  106. package/registry/error-page.json +1 -1
  107. package/registry/examples/action-sheet/native/video-actions.d.ts +4 -0
  108. package/registry/examples/action-sheet/native/video-actions.dark.png +0 -0
  109. package/registry/examples/action-sheet/native/video-actions.js +30 -0
  110. package/registry/examples/action-sheet/native/video-actions.light.png +0 -0
  111. package/registry/examples/action-sheet/native/video-actions.tsx +24 -0
  112. package/registry/examples/activity-feed/job-activity.d.ts +4 -0
  113. package/registry/examples/activity-feed/job-activity.js +21 -0
  114. package/registry/examples/activity-feed/job-activity.tsx +17 -0
  115. package/registry/examples/activity-feed/live.d.ts +4 -0
  116. package/registry/examples/activity-feed/live.js +23 -0
  117. package/registry/examples/activity-feed/live.tsx +24 -0
  118. package/registry/examples/activity-feed/native/notifications.d.ts +4 -0
  119. package/registry/examples/activity-feed/native/notifications.dark.png +0 -0
  120. package/registry/examples/activity-feed/native/notifications.js +18 -0
  121. package/registry/examples/activity-feed/native/notifications.light.png +0 -0
  122. package/registry/examples/activity-feed/native/notifications.tsx +18 -0
  123. package/registry/examples/activity-feed/timeline.d.ts +4 -0
  124. package/registry/examples/activity-feed/timeline.js +25 -0
  125. package/registry/examples/activity-feed/timeline.tsx +19 -0
  126. package/registry/examples/avatar/native/presence.d.ts +4 -0
  127. package/registry/examples/avatar/native/presence.dark.png +0 -0
  128. package/registry/examples/avatar/native/presence.js +18 -0
  129. package/registry/examples/avatar/native/presence.light.png +0 -0
  130. package/registry/examples/avatar/native/presence.tsx +15 -0
  131. package/registry/examples/chat/conversation.d.ts +4 -0
  132. package/registry/examples/chat/conversation.js +22 -0
  133. package/registry/examples/chat/conversation.tsx +21 -0
  134. package/registry/examples/chat/inbox.d.ts +4 -0
  135. package/registry/examples/chat/inbox.js +15 -0
  136. package/registry/examples/chat/inbox.tsx +12 -0
  137. package/registry/examples/chat/native/conversation.d.ts +4 -0
  138. package/registry/examples/chat/native/conversation.dark.png +0 -0
  139. package/registry/examples/chat/native/conversation.js +23 -0
  140. package/registry/examples/chat/native/conversation.light.png +0 -0
  141. package/registry/examples/chat/native/conversation.tsx +20 -0
  142. package/registry/examples/chat/native/inbox.d.ts +4 -0
  143. package/registry/examples/chat/native/inbox.dark.png +0 -0
  144. package/registry/examples/chat/native/inbox.js +16 -0
  145. package/registry/examples/chat/native/inbox.light.png +0 -0
  146. package/registry/examples/chat/native/inbox.tsx +13 -0
  147. package/registry/examples/description-list/job-details.d.ts +4 -0
  148. package/registry/examples/description-list/job-details.js +23 -0
  149. package/registry/examples/description-list/job-details.tsx +17 -0
  150. package/registry/examples/description-list/key-value-grid.d.ts +4 -0
  151. package/registry/examples/description-list/key-value-grid.js +22 -0
  152. package/registry/examples/description-list/key-value-grid.tsx +16 -0
  153. package/registry/examples/description-list/native/job-details.d.ts +4 -0
  154. package/registry/examples/description-list/native/job-details.dark.png +0 -0
  155. package/registry/examples/description-list/native/job-details.js +33 -0
  156. package/registry/examples/description-list/native/job-details.light.png +0 -0
  157. package/registry/examples/description-list/native/job-details.tsx +24 -0
  158. package/registry/examples/description-list/receipt.d.ts +4 -0
  159. package/registry/examples/description-list/receipt.js +23 -0
  160. package/registry/examples/description-list/receipt.tsx +17 -0
  161. package/registry/examples/fab/native/extended.d.ts +4 -0
  162. package/registry/examples/fab/native/extended.dark.png +0 -0
  163. package/registry/examples/fab/native/extended.js +18 -0
  164. package/registry/examples/fab/native/extended.light.png +0 -0
  165. package/registry/examples/fab/native/extended.tsx +23 -0
  166. package/registry/examples/header/native/large-title.d.ts +4 -0
  167. package/registry/examples/header/native/large-title.dark.png +0 -0
  168. package/registry/examples/header/native/large-title.js +23 -0
  169. package/registry/examples/header/native/large-title.light.png +0 -0
  170. package/registry/examples/header/native/large-title.tsx +31 -0
  171. package/registry/examples/image-viewer/native/gallery.d.ts +4 -0
  172. package/registry/examples/image-viewer/native/gallery.dark.png +0 -0
  173. package/registry/examples/image-viewer/native/gallery.js +22 -0
  174. package/registry/examples/image-viewer/native/gallery.light.png +0 -0
  175. package/registry/examples/image-viewer/native/gallery.tsx +21 -0
  176. package/registry/examples/kanban/moderation.d.ts +4 -0
  177. package/registry/examples/kanban/moderation.js +35 -0
  178. package/registry/examples/kanban/moderation.tsx +37 -0
  179. package/registry/examples/list/jobs.d.ts +4 -0
  180. package/registry/examples/list/jobs.js +35 -0
  181. package/registry/examples/list/jobs.tsx +33 -0
  182. package/registry/examples/list/selectable.d.ts +4 -0
  183. package/registry/examples/list/selectable.js +33 -0
  184. package/registry/examples/list/selectable.tsx +30 -0
  185. package/registry/examples/list/virtualized.d.ts +4 -0
  186. package/registry/examples/list/virtualized.js +22 -0
  187. package/registry/examples/list/virtualized.tsx +17 -0
  188. package/registry/examples/loader/native/block.d.ts +4 -0
  189. package/registry/examples/loader/native/block.dark.png +0 -0
  190. package/registry/examples/loader/native/block.js +12 -0
  191. package/registry/examples/loader/native/block.light.png +0 -0
  192. package/registry/examples/loader/native/block.tsx +11 -0
  193. package/registry/examples/loader/native/job-wait.d.ts +4 -0
  194. package/registry/examples/loader/native/job-wait.dark.png +0 -0
  195. package/registry/examples/loader/native/job-wait.js +17 -0
  196. package/registry/examples/loader/native/job-wait.light.png +0 -0
  197. package/registry/examples/loader/native/job-wait.tsx +14 -0
  198. package/registry/examples/map/cluster.d.ts +4 -0
  199. package/registry/examples/map/cluster.js +16 -0
  200. package/registry/examples/map/cluster.tsx +18 -0
  201. package/registry/examples/map/location-picker.d.ts +4 -0
  202. package/registry/examples/map/location-picker.js +24 -0
  203. package/registry/examples/map/location-picker.tsx +22 -0
  204. package/registry/examples/map/native/location-picker.d.ts +4 -0
  205. package/registry/examples/map/native/location-picker.dark.png +0 -0
  206. package/registry/examples/map/native/location-picker.js +14 -0
  207. package/registry/examples/map/native/location-picker.light.png +0 -0
  208. package/registry/examples/map/native/location-picker.tsx +13 -0
  209. package/registry/examples/map/native/places.d.ts +4 -0
  210. package/registry/examples/map/native/places.dark.png +0 -0
  211. package/registry/examples/map/native/places.js +25 -0
  212. package/registry/examples/map/native/places.light.png +0 -0
  213. package/registry/examples/map/native/places.tsx +27 -0
  214. package/registry/examples/map/places.d.ts +4 -0
  215. package/registry/examples/map/places.js +28 -0
  216. package/registry/examples/map/places.tsx +28 -0
  217. package/registry/examples/map/static.d.ts +4 -0
  218. package/registry/examples/map/static.js +22 -0
  219. package/registry/examples/map/static.tsx +18 -0
  220. package/registry/examples/match-dialog/its-a-match.d.ts +4 -0
  221. package/registry/examples/match-dialog/its-a-match.js +29 -0
  222. package/registry/examples/match-dialog/its-a-match.tsx +25 -0
  223. package/registry/examples/match-dialog/native/its-a-match.d.ts +4 -0
  224. package/registry/examples/match-dialog/native/its-a-match.dark.png +0 -0
  225. package/registry/examples/match-dialog/native/its-a-match.js +28 -0
  226. package/registry/examples/match-dialog/native/its-a-match.light.png +0 -0
  227. package/registry/examples/match-dialog/native/its-a-match.tsx +22 -0
  228. package/registry/examples/media-picker/native/story.d.ts +4 -0
  229. package/registry/examples/media-picker/native/story.dark.png +0 -0
  230. package/registry/examples/media-picker/native/story.js +30 -0
  231. package/registry/examples/media-picker/native/story.light.png +0 -0
  232. package/registry/examples/media-picker/native/story.tsx +26 -0
  233. package/registry/examples/meter/native/credits.d.ts +4 -0
  234. package/registry/examples/meter/native/credits.dark.png +0 -0
  235. package/registry/examples/meter/native/credits.js +15 -0
  236. package/registry/examples/meter/native/credits.light.png +0 -0
  237. package/registry/examples/meter/native/credits.tsx +12 -0
  238. package/registry/examples/meter/native/split-ring.d.ts +4 -0
  239. package/registry/examples/meter/native/split-ring.dark.png +0 -0
  240. package/registry/examples/meter/native/split-ring.js +24 -0
  241. package/registry/examples/meter/native/split-ring.light.png +0 -0
  242. package/registry/examples/meter/native/split-ring.tsx +19 -0
  243. package/registry/examples/number-ticker/native/balance.d.ts +4 -0
  244. package/registry/examples/number-ticker/native/balance.dark.png +0 -0
  245. package/registry/examples/number-ticker/native/balance.js +18 -0
  246. package/registry/examples/number-ticker/native/balance.light.png +0 -0
  247. package/registry/examples/number-ticker/native/balance.tsx +17 -0
  248. package/registry/examples/onboarding/native/first-launch.d.ts +4 -0
  249. package/registry/examples/onboarding/native/first-launch.dark.png +0 -0
  250. package/registry/examples/onboarding/native/first-launch.js +23 -0
  251. package/registry/examples/onboarding/native/first-launch.light.png +0 -0
  252. package/registry/examples/onboarding/native/first-launch.tsx +19 -0
  253. package/registry/examples/otp-input/native/invalid.d.ts +4 -0
  254. package/registry/examples/otp-input/native/invalid.dark.png +0 -0
  255. package/registry/examples/otp-input/native/invalid.js +15 -0
  256. package/registry/examples/otp-input/native/invalid.light.png +0 -0
  257. package/registry/examples/otp-input/native/invalid.tsx +14 -0
  258. package/registry/examples/otp-input/native/verify.d.ts +4 -0
  259. package/registry/examples/otp-input/native/verify.dark.png +0 -0
  260. package/registry/examples/otp-input/native/verify.js +17 -0
  261. package/registry/examples/otp-input/native/verify.light.png +0 -0
  262. package/registry/examples/otp-input/native/verify.tsx +14 -0
  263. package/registry/examples/permission-prompt/native/blocked.d.ts +4 -0
  264. package/registry/examples/permission-prompt/native/blocked.dark.png +0 -0
  265. package/registry/examples/permission-prompt/native/blocked.js +25 -0
  266. package/registry/examples/permission-prompt/native/blocked.light.png +0 -0
  267. package/registry/examples/permission-prompt/native/blocked.tsx +21 -0
  268. package/registry/examples/permission-prompt/native/camera.d.ts +4 -0
  269. package/registry/examples/permission-prompt/native/camera.dark.png +0 -0
  270. package/registry/examples/permission-prompt/native/camera.js +25 -0
  271. package/registry/examples/permission-prompt/native/camera.light.png +0 -0
  272. package/registry/examples/permission-prompt/native/camera.tsx +21 -0
  273. package/registry/examples/photo-grid/native/profile-photos.d.ts +4 -0
  274. package/registry/examples/photo-grid/native/profile-photos.dark.png +0 -0
  275. package/registry/examples/photo-grid/native/profile-photos.js +27 -0
  276. package/registry/examples/photo-grid/native/profile-photos.light.png +0 -0
  277. package/registry/examples/photo-grid/native/profile-photos.tsx +24 -0
  278. package/registry/examples/photo-grid/profile-photos.d.ts +4 -0
  279. package/registry/examples/photo-grid/profile-photos.js +28 -0
  280. package/registry/examples/photo-grid/profile-photos.tsx +25 -0
  281. package/registry/examples/pull-to-refresh/native/feed.d.ts +4 -0
  282. package/registry/examples/pull-to-refresh/native/feed.dark.png +0 -0
  283. package/registry/examples/pull-to-refresh/native/feed.js +14 -0
  284. package/registry/examples/pull-to-refresh/native/feed.light.png +0 -0
  285. package/registry/examples/pull-to-refresh/native/feed.tsx +19 -0
  286. package/registry/examples/screen/native/app-shell.d.ts +4 -0
  287. package/registry/examples/screen/native/app-shell.dark.png +0 -0
  288. package/registry/examples/screen/native/app-shell.js +25 -0
  289. package/registry/examples/screen/native/app-shell.light.png +0 -0
  290. package/registry/examples/screen/native/app-shell.tsx +33 -0
  291. package/registry/examples/screen/native/auth.d.ts +4 -0
  292. package/registry/examples/screen/native/auth.dark.png +0 -0
  293. package/registry/examples/screen/native/auth.js +24 -0
  294. package/registry/examples/screen/native/auth.light.png +0 -0
  295. package/registry/examples/screen/native/auth.tsx +20 -0
  296. package/registry/examples/screen/native/chat.d.ts +4 -0
  297. package/registry/examples/screen/native/chat.dark.png +0 -0
  298. package/registry/examples/screen/native/chat.js +27 -0
  299. package/registry/examples/screen/native/chat.light.png +0 -0
  300. package/registry/examples/screen/native/chat.tsx +22 -0
  301. package/registry/examples/screen/native/feed.d.ts +4 -0
  302. package/registry/examples/screen/native/feed.dark.png +0 -0
  303. package/registry/examples/screen/native/feed.js +24 -0
  304. package/registry/examples/screen/native/feed.light.png +0 -0
  305. package/registry/examples/screen/native/feed.tsx +34 -0
  306. package/registry/examples/screen/native/profile.d.ts +4 -0
  307. package/registry/examples/screen/native/profile.dark.png +0 -0
  308. package/registry/examples/screen/native/profile.js +29 -0
  309. package/registry/examples/screen/native/profile.light.png +0 -0
  310. package/registry/examples/screen/native/profile.tsx +27 -0
  311. package/registry/examples/screen/native/settings.d.ts +4 -0
  312. package/registry/examples/screen/native/settings.dark.png +0 -0
  313. package/registry/examples/screen/native/settings.js +20 -0
  314. package/registry/examples/screen/native/settings.light.png +0 -0
  315. package/registry/examples/screen/native/settings.tsx +19 -0
  316. package/registry/examples/search-field/native/cancel.d.ts +4 -0
  317. package/registry/examples/search-field/native/cancel.dark.png +0 -0
  318. package/registry/examples/search-field/native/cancel.js +14 -0
  319. package/registry/examples/search-field/native/cancel.light.png +0 -0
  320. package/registry/examples/search-field/native/cancel.tsx +13 -0
  321. package/registry/examples/stat/grid.d.ts +4 -0
  322. package/registry/examples/stat/grid.js +17 -0
  323. package/registry/examples/stat/grid.tsx +14 -0
  324. package/registry/examples/step-progress/native/sign-up.d.ts +4 -0
  325. package/registry/examples/step-progress/native/sign-up.dark.png +0 -0
  326. package/registry/examples/step-progress/native/sign-up.js +12 -0
  327. package/registry/examples/step-progress/native/sign-up.light.png +0 -0
  328. package/registry/examples/step-progress/native/sign-up.tsx +11 -0
  329. package/registry/examples/step-progress/sign-up.d.ts +4 -0
  330. package/registry/examples/step-progress/sign-up.js +22 -0
  331. package/registry/examples/step-progress/sign-up.tsx +16 -0
  332. package/registry/examples/stepper/native/run.d.ts +4 -0
  333. package/registry/examples/stepper/native/run.dark.png +0 -0
  334. package/registry/examples/stepper/native/run.js +24 -0
  335. package/registry/examples/stepper/native/run.light.png +0 -0
  336. package/registry/examples/stepper/native/run.tsx +20 -0
  337. package/registry/examples/swipe-deck/discover.d.ts +4 -0
  338. package/registry/examples/swipe-deck/discover.js +41 -0
  339. package/registry/examples/swipe-deck/discover.tsx +37 -0
  340. package/registry/examples/swipe-deck/native/discover.d.ts +4 -0
  341. package/registry/examples/swipe-deck/native/discover.dark.png +0 -0
  342. package/registry/examples/swipe-deck/native/discover.js +39 -0
  343. package/registry/examples/swipe-deck/native/discover.light.png +0 -0
  344. package/registry/examples/swipe-deck/native/discover.tsx +35 -0
  345. package/registry/examples/swipeable-row/native/conversation.d.ts +4 -0
  346. package/registry/examples/swipeable-row/native/conversation.dark.png +0 -0
  347. package/registry/examples/swipeable-row/native/conversation.js +30 -0
  348. package/registry/examples/swipeable-row/native/conversation.light.png +0 -0
  349. package/registry/examples/swipeable-row/native/conversation.tsx +27 -0
  350. package/registry/examples/tab-bar/native/main-sections.d.ts +4 -0
  351. package/registry/examples/tab-bar/native/main-sections.dark.png +0 -0
  352. package/registry/examples/tab-bar/native/main-sections.js +29 -0
  353. package/registry/examples/tab-bar/native/main-sections.light.png +0 -0
  354. package/registry/examples/tab-bar/native/main-sections.tsx +30 -0
  355. package/registry/examples/tabs/native/sections.d.ts +4 -0
  356. package/registry/examples/tabs/native/sections.dark.png +0 -0
  357. package/registry/examples/tabs/native/sections.js +23 -0
  358. package/registry/examples/tabs/native/sections.light.png +0 -0
  359. package/registry/examples/tabs/native/sections.tsx +19 -0
  360. package/registry/examples/tabs/native/segmented.d.ts +4 -0
  361. package/registry/examples/tabs/native/segmented.dark.png +0 -0
  362. package/registry/examples/tabs/native/segmented.js +22 -0
  363. package/registry/examples/tabs/native/segmented.light.png +0 -0
  364. package/registry/examples/tabs/native/segmented.tsx +18 -0
  365. package/registry/examples/tag-selector/interests.d.ts +4 -0
  366. package/registry/examples/tag-selector/interests.js +14 -0
  367. package/registry/examples/tag-selector/interests.tsx +12 -0
  368. package/registry/examples/tag-selector/native/interests.d.ts +4 -0
  369. package/registry/examples/tag-selector/native/interests.dark.png +0 -0
  370. package/registry/examples/tag-selector/native/interests.js +15 -0
  371. package/registry/examples/tag-selector/native/interests.light.png +0 -0
  372. package/registry/examples/tag-selector/native/interests.tsx +15 -0
  373. package/registry/examples/toast/native/snackbar.d.ts +4 -0
  374. package/registry/examples/toast/native/snackbar.dark.png +0 -0
  375. package/registry/examples/toast/native/snackbar.js +23 -0
  376. package/registry/examples/toast/native/snackbar.light.png +0 -0
  377. package/registry/examples/toast/native/snackbar.tsx +21 -0
  378. package/registry/examples/tree-view/docs.d.ts +4 -0
  379. package/registry/examples/tree-view/docs.js +24 -0
  380. package/registry/examples/tree-view/docs.tsx +22 -0
  381. package/registry/examples/tree-view/lazy.d.ts +4 -0
  382. package/registry/examples/tree-view/lazy.js +21 -0
  383. package/registry/examples/tree-view/lazy.tsx +19 -0
  384. package/registry/examples/verified-badge/native/verified.d.ts +4 -0
  385. package/registry/examples/verified-badge/native/verified.dark.png +0 -0
  386. package/registry/examples/verified-badge/native/verified.js +18 -0
  387. package/registry/examples/verified-badge/native/verified.light.png +0 -0
  388. package/registry/examples/verified-badge/native/verified.tsx +15 -0
  389. package/registry/examples/verified-badge/verified.d.ts +4 -0
  390. package/registry/examples/verified-badge/verified.js +17 -0
  391. package/registry/examples/verified-badge/verified.tsx +13 -0
  392. package/registry/fab.json +122 -0
  393. package/registry/field.json +1 -1
  394. package/registry/file-upload.json +2 -2
  395. package/registry/filter-bar.json +1 -1
  396. package/registry/form.json +2 -2
  397. package/registry/gallery-page.json +1 -1
  398. package/registry/glow-card.json +1 -1
  399. package/registry/goal-gauge.json +1 -1
  400. package/registry/header.json +137 -0
  401. package/registry/how-it-works-page.json +1 -1
  402. package/registry/image-cropper.json +1 -1
  403. package/registry/image-viewer.json +107 -0
  404. package/registry/index.json +441 -25
  405. package/registry/iso.json +1 -1
  406. package/registry/kanban.json +253 -0
  407. package/registry/kbd.json +1 -1
  408. package/registry/landing-page.json +1 -1
  409. package/registry/landscape.json +1 -1
  410. package/registry/legal-page.json +1 -1
  411. package/registry/link-card.json +1 -1
  412. package/registry/list.json +367 -30
  413. package/registry/loader.json +157 -4
  414. package/registry/longform-page.json +1 -1
  415. package/registry/map.json +1368 -0
  416. package/registry/marketing-layout.json +1 -1
  417. package/registry/marquee.json +1 -1
  418. package/registry/mascot-quote.json +1 -1
  419. package/registry/mascot-state.json +1 -1
  420. package/registry/mascots.json +1 -1
  421. package/registry/match-dialog.json +300 -0
  422. package/registry/media-capture.json +1 -1
  423. package/registry/media-picker.json +129 -0
  424. package/registry/meter.json +136 -4
  425. package/registry/nav-bar.json +1 -1
  426. package/registry/number-ticker.json +96 -4
  427. package/registry/onboarding.json +95 -0
  428. package/registry/otp-input.json +150 -0
  429. package/registry/page-header.json +1 -1
  430. package/registry/page-hero.json +1 -1
  431. package/registry/page.json +1 -1
  432. package/registry/pagination.json +1 -1
  433. package/registry/permission-prompt.json +172 -0
  434. package/registry/photo-grid.json +302 -0
  435. package/registry/pointer-light.json +1 -1
  436. package/registry/popover.json +1 -1
  437. package/registry/pricing-page.json +1 -1
  438. package/registry/product-page.json +1 -1
  439. package/registry/profile-card.json +1 -1
  440. package/registry/progress.json +2 -2
  441. package/registry/promise-card.json +1 -1
  442. package/registry/pull-to-refresh.json +74 -0
  443. package/registry/radio-group.json +1 -1
  444. package/registry/screen.json +184 -0
  445. package/registry/scroll-stage.json +1 -1
  446. package/registry/search-field.json +30 -3
  447. package/registry/section-backdrop.json +1 -1
  448. package/registry/separator.json +1 -1
  449. package/registry/settings-layout.json +1 -1
  450. package/registry/skeleton.json +1 -1
  451. package/registry/slider.json +1 -1
  452. package/registry/slot.json +1 -1
  453. package/registry/spinner.json +1 -1
  454. package/registry/split-view.json +1 -1
  455. package/registry/stage-banner.json +1 -1
  456. package/registry/stat.json +68 -5
  457. package/registry/status-page.json +1 -1
  458. package/registry/step-progress.json +255 -0
  459. package/registry/stepper.json +75 -4
  460. package/registry/swipe-deck.json +512 -0
  461. package/registry/swipeable-row.json +124 -0
  462. package/registry/switch.json +1 -1
  463. package/registry/tab-bar.json +115 -0
  464. package/registry/tabs.json +94 -4
  465. package/registry/tag-input.json +1 -1
  466. package/registry/tag-selector.json +276 -0
  467. package/registry/terminal-replay.json +1 -1
  468. package/registry/theme.json +8 -1
  469. package/registry/toast.json +17 -3
  470. package/registry/toc.json +1 -1
  471. package/registry/tooltip.json +1 -1
  472. package/registry/tree-view.json +291 -0
  473. package/registry/verified-badge.json +202 -0
  474. package/registry/video-player.json +1 -1
  475. package/registry/video-trimmer.json +1 -1
  476. package/registry/virtual.json +1 -1
  477. package/skills/map/SKILL.md +35 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@krizaka/ui",
3
- "version": "3.3.0",
3
+ "version": "3.5.0",
4
4
  "description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yazakia, Yororis) and the motion signature — web and /native.",
5
5
  "keywords": [
6
6
  "krizaka",
@@ -32,7 +32,7 @@
32
32
  "tanstack",
33
33
  "tanstack-intent"
34
34
  ],
35
- "homepage": "https://github.com/krizaka/krizaka-ui#readme",
35
+ "homepage": "https://www.krizaka.com/en/docs/ui",
36
36
  "bugs": "https://github.com/krizaka/krizaka-ui/issues",
37
37
  "repository": {
38
38
  "type": "git",
@@ -266,6 +266,10 @@
266
266
  "types": "./dist/date-picker.d.ts",
267
267
  "import": "./dist/date-picker.js"
268
268
  },
269
+ "./map": {
270
+ "types": "./dist/map.d.ts",
271
+ "import": "./dist/map.js"
272
+ },
269
273
  "./search-field": {
270
274
  "types": "./dist/search-field.d.ts",
271
275
  "import": "./dist/search-field.js"
@@ -294,6 +298,26 @@
294
298
  "types": "./dist/image-cropper.d.ts",
295
299
  "import": "./dist/image-cropper.js"
296
300
  },
301
+ "./list": {
302
+ "types": "./dist/list.d.ts",
303
+ "import": "./dist/list.js"
304
+ },
305
+ "./description-list": {
306
+ "types": "./dist/description-list.d.ts",
307
+ "import": "./dist/description-list.js"
308
+ },
309
+ "./activity-feed": {
310
+ "types": "./dist/activity-feed.d.ts",
311
+ "import": "./dist/activity-feed.js"
312
+ },
313
+ "./tree-view": {
314
+ "types": "./dist/tree-view.d.ts",
315
+ "import": "./dist/tree-view.js"
316
+ },
317
+ "./kanban": {
318
+ "types": "./dist/kanban.d.ts",
319
+ "import": "./dist/kanban.js"
320
+ },
297
321
  "./page": {
298
322
  "types": "./dist/page.d.ts",
299
323
  "import": "./dist/page.js"
@@ -470,6 +494,34 @@
470
494
  "types": "./dist/pricing-page.d.ts",
471
495
  "import": "./dist/pricing-page.js"
472
496
  },
497
+ "./chat": {
498
+ "types": "./dist/chat.d.ts",
499
+ "import": "./dist/chat.js"
500
+ },
501
+ "./swipe-deck": {
502
+ "types": "./dist/swipe-deck.d.ts",
503
+ "import": "./dist/swipe-deck.js"
504
+ },
505
+ "./match-dialog": {
506
+ "types": "./dist/match-dialog.d.ts",
507
+ "import": "./dist/match-dialog.js"
508
+ },
509
+ "./tag-selector": {
510
+ "types": "./dist/tag-selector.d.ts",
511
+ "import": "./dist/tag-selector.js"
512
+ },
513
+ "./step-progress": {
514
+ "types": "./dist/step-progress.d.ts",
515
+ "import": "./dist/step-progress.js"
516
+ },
517
+ "./verified-badge": {
518
+ "types": "./dist/verified-badge.d.ts",
519
+ "import": "./dist/verified-badge.js"
520
+ },
521
+ "./photo-grid": {
522
+ "types": "./dist/photo-grid.d.ts",
523
+ "import": "./dist/photo-grid.js"
524
+ },
473
525
  "./motion.css": "./dist/motion.css",
474
526
  "./blocks.css": "./dist/blocks.css",
475
527
  "./story.css": "./dist/story.css",
@@ -486,6 +538,10 @@
486
538
  "types": "./dist/native/media-capture.d.ts",
487
539
  "import": "./dist/native/media-capture.js"
488
540
  },
541
+ "./native/media-picker": {
542
+ "types": "./dist/native/media-picker.d.ts",
543
+ "import": "./dist/native/media-picker.js"
544
+ },
489
545
  "./native/list": {
490
546
  "types": "./dist/native/list.d.ts",
491
547
  "import": "./dist/native/list.js"
@@ -494,6 +550,10 @@
494
550
  "types": "./dist/native/form.d.ts",
495
551
  "import": "./dist/native/form.js"
496
552
  },
553
+ "./native/map": {
554
+ "types": "./dist/native/map.d.ts",
555
+ "import": "./dist/native/map.js"
556
+ },
497
557
  "./registry/examples/*": {
498
558
  "types": "./registry/examples/*.d.ts",
499
559
  "import": "./registry/examples/*.js"
@@ -517,12 +577,15 @@
517
577
  "*.css"
518
578
  ],
519
579
  "peerDependencies": {
520
- "@krizaka/query": ">=0.1.0",
521
- "@krizaka/tailwind": ">=3.3.0",
580
+ "@krizaka/query": ">=0.1.1",
581
+ "@krizaka/tailwind": ">=3.5.0",
582
+ "@maplibre/maplibre-react-native": ">=11",
522
583
  "@shopify/flash-list": ">=2",
523
584
  "expo-camera": ">=16",
585
+ "expo-image-picker": ">=16",
524
586
  "expo-video": ">=2",
525
587
  "hls.js": ">=1.5",
588
+ "maplibre-gl": ">=6",
526
589
  "react": ">=18",
527
590
  "react-dom": ">=18",
528
591
  "react-native": ">=0.76",
@@ -533,6 +596,7 @@
533
596
  "@arethetypeswrong/cli": "^0.18.5",
534
597
  "@babel/core": "^7.29.7",
535
598
  "@jest/globals": "30.4.1",
599
+ "@maplibre/maplibre-react-native": "11.4.0",
536
600
  "@react-native/babel-preset": "0.86.3",
537
601
  "@react-native/jest-preset": "0.86.3",
538
602
  "@shopify/flash-list": "2.3.3",
@@ -550,11 +614,13 @@
550
614
  "eslint": "^9.39.0",
551
615
  "expect": "30.4.1",
552
616
  "expo-camera": "57.0.6",
617
+ "expo-image-picker": "57.0.20",
553
618
  "expo-modules-core": "^57.0.21",
554
619
  "expo-video": "57.0.5",
555
620
  "happy-dom": "^20.0.0",
556
621
  "jest": "30.4.2",
557
622
  "jest-environment-node": "30.4.1",
623
+ "maplibre-gl": "6.11.2",
558
624
  "publint": "^0.3.25",
559
625
  "react": "^19.2.0",
560
626
  "react-docgen-typescript": "^2.4.0",
@@ -570,9 +636,8 @@
570
636
  "typescript": "^5.9.0",
571
637
  "vitest": "^4.1.11",
572
638
  "zod": "^4.6.5",
573
- "@krizaka/query": "0.1.0",
574
- "@krizaka/tokens": "3.3.0",
575
- "@krizaka/config": "0.3.0"
639
+ "@krizaka/config": "0.3.1",
640
+ "@krizaka/query": "0.1.1"
576
641
  },
577
642
  "engines": {
578
643
  "node": ">=20"
@@ -587,18 +652,27 @@
587
652
  "@krizaka/tailwind": {
588
653
  "optional": true
589
654
  },
655
+ "@maplibre/maplibre-react-native": {
656
+ "optional": true
657
+ },
590
658
  "@shopify/flash-list": {
591
659
  "optional": true
592
660
  },
593
661
  "expo-camera": {
594
662
  "optional": true
595
663
  },
664
+ "expo-image-picker": {
665
+ "optional": true
666
+ },
596
667
  "expo-video": {
597
668
  "optional": true
598
669
  },
599
670
  "hls.js": {
600
671
  "optional": true
601
672
  },
673
+ "maplibre-gl": {
674
+ "optional": true
675
+ },
602
676
  "react-dom": {
603
677
  "optional": true
604
678
  },
@@ -622,7 +696,7 @@
622
696
  {
623
697
  "name": "./native (bundled into the app by Metro, never downloaded: a regression guard, not a budget)",
624
698
  "path": "dist/native.js",
625
- "limit": "31.5 kB",
699
+ "limit": "47.5 kB",
626
700
  "gzip": true
627
701
  },
628
702
  {
@@ -1237,6 +1311,56 @@
1237
1311
  "clsx"
1238
1312
  ]
1239
1313
  },
1314
+ {
1315
+ "name": "./list",
1316
+ "path": "dist/list.js",
1317
+ "limit": "8 kB",
1318
+ "gzip": true,
1319
+ "ignore": [
1320
+ "tailwind-variants",
1321
+ "clsx"
1322
+ ]
1323
+ },
1324
+ {
1325
+ "name": "./description-list",
1326
+ "path": "dist/description-list.js",
1327
+ "limit": "1 kB",
1328
+ "gzip": true,
1329
+ "ignore": [
1330
+ "tailwind-variants",
1331
+ "clsx"
1332
+ ]
1333
+ },
1334
+ {
1335
+ "name": "./activity-feed",
1336
+ "path": "dist/activity-feed.js",
1337
+ "limit": "2.5 kB",
1338
+ "gzip": true,
1339
+ "ignore": [
1340
+ "tailwind-variants",
1341
+ "clsx"
1342
+ ]
1343
+ },
1344
+ {
1345
+ "name": "./tree-view",
1346
+ "path": "dist/tree-view.js",
1347
+ "limit": "2.5 kB",
1348
+ "gzip": true,
1349
+ "ignore": [
1350
+ "tailwind-variants",
1351
+ "clsx"
1352
+ ]
1353
+ },
1354
+ {
1355
+ "name": "./kanban",
1356
+ "path": "dist/kanban.js",
1357
+ "limit": "3 kB",
1358
+ "gzip": true,
1359
+ "ignore": [
1360
+ "tailwind-variants",
1361
+ "clsx"
1362
+ ]
1363
+ },
1240
1364
  {
1241
1365
  "name": "./native/video-player (expo-video is the app's)",
1242
1366
  "path": "dist/native/video-player.js",
@@ -1736,18 +1860,129 @@
1736
1860
  "clsx",
1737
1861
  "@krizaka/ui"
1738
1862
  ]
1863
+ },
1864
+ {
1865
+ "name": "./map",
1866
+ "path": "dist/map.js",
1867
+ "limit": "16 kB",
1868
+ "gzip": true,
1869
+ "ignore": [
1870
+ "tailwind-variants",
1871
+ "clsx",
1872
+ "maplibre-gl",
1873
+ "pmtiles",
1874
+ "react-dom"
1875
+ ]
1876
+ },
1877
+ {
1878
+ "name": "./native/map",
1879
+ "path": "dist/native/map.js",
1880
+ "limit": "13.5 kB",
1881
+ "gzip": true,
1882
+ "ignore": [
1883
+ "react-native",
1884
+ "react-native-svg",
1885
+ "@maplibre/maplibre-react-native",
1886
+ "@krizaka/ui"
1887
+ ]
1888
+ },
1889
+ {
1890
+ "name": "./native/media-picker (expo-image-picker is the app's)",
1891
+ "path": "dist/native/media-picker.js",
1892
+ "limit": "2.5 kB",
1893
+ "gzip": true,
1894
+ "ignore": [
1895
+ "expo-video",
1896
+ "expo-camera",
1897
+ "expo-image-picker",
1898
+ "@krizaka/ui"
1899
+ ]
1900
+ },
1901
+ {
1902
+ "name": "./photo-grid",
1903
+ "path": "dist/photo-grid.js",
1904
+ "limit": "2.5 kB",
1905
+ "gzip": true,
1906
+ "ignore": [
1907
+ "tailwind-variants",
1908
+ "clsx"
1909
+ ]
1910
+ },
1911
+ {
1912
+ "name": "./swipe-deck",
1913
+ "path": "dist/swipe-deck.js",
1914
+ "limit": "3 kB",
1915
+ "gzip": true,
1916
+ "ignore": [
1917
+ "tailwind-variants",
1918
+ "clsx"
1919
+ ]
1920
+ },
1921
+ {
1922
+ "name": "./verified-badge",
1923
+ "path": "dist/verified-badge.js",
1924
+ "limit": "1 kB",
1925
+ "gzip": true,
1926
+ "ignore": [
1927
+ "tailwind-variants",
1928
+ "clsx"
1929
+ ]
1930
+ },
1931
+ {
1932
+ "name": "./match-dialog",
1933
+ "path": "dist/match-dialog.js",
1934
+ "limit": "20 kB",
1935
+ "gzip": true,
1936
+ "ignore": [
1937
+ "tailwind-variants",
1938
+ "clsx"
1939
+ ]
1940
+ },
1941
+ {
1942
+ "name": "./tag-selector",
1943
+ "path": "dist/tag-selector.js",
1944
+ "limit": "10 kB",
1945
+ "gzip": true,
1946
+ "ignore": [
1947
+ "tailwind-variants",
1948
+ "clsx"
1949
+ ]
1950
+ },
1951
+ {
1952
+ "name": "./step-progress",
1953
+ "path": "dist/step-progress.js",
1954
+ "limit": "1 kB",
1955
+ "gzip": true,
1956
+ "ignore": [
1957
+ "tailwind-variants",
1958
+ "clsx"
1959
+ ]
1960
+ },
1961
+ {
1962
+ "name": "./chat",
1963
+ "path": "dist/chat.js",
1964
+ "limit": "7 kB",
1965
+ "gzip": true,
1966
+ "ignore": [
1967
+ "tailwind-variants",
1968
+ "clsx"
1969
+ ]
1739
1970
  }
1740
1971
  ],
1741
1972
  "dependencies": {
1742
- "@krizaka/intl": "^0.1.0",
1973
+ "@protomaps/basemaps": "5.7.2",
1743
1974
  "@tanstack/react-form": "1.33.5",
1744
1975
  "@tanstack/react-table": "9.2.8",
1745
1976
  "@tanstack/react-virtual": "3.14.15",
1977
+ "@types/geojson": "7946.0.16",
1746
1978
  "clsx": "^2.1.1",
1747
1979
  "cmdk": "^1.1.1",
1980
+ "pmtiles": "4.5.0",
1748
1981
  "radix-ui": "^1.7.0",
1749
1982
  "sonner": "^2.0.8",
1750
- "tailwind-variants": "^3.3.1"
1983
+ "tailwind-variants": "^3.3.1",
1984
+ "@krizaka/intl": "^0.1.1",
1985
+ "@krizaka/tokens": "^3.5.0"
1751
1986
  },
1752
1987
  "scripts": {
1753
1988
  "build": "node -e \"const fs=require('node:fs');fs.rmSync('dist',{recursive:true,force:true});for(const f of fs.readdirSync('registry/examples',{recursive:true}))if(/\\.(js|d\\.ts)$/.test(f))fs.rmSync('registry/examples/'+f)\" && tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css');require('node:fs').copyFileSync('src/blocks.css','dist/blocks.css');require('node:fs').copyFileSync('src/story.css','dist/story.css')\" && node scripts/build-registry.mjs",
@@ -193,7 +193,7 @@
193
193
  },
194
194
  {
195
195
  "path": "meta.ts",
196
- "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n | \"achievement\"\n | \"action-bar\"\n | \"alert\"\n | \"app-shell\"\n | \"argument-card\"\n | \"audio-player\"\n | \"auth-layout\"\n | \"avatar\"\n | \"badge\"\n | \"button\"\n | \"card\"\n | \"card-grid\"\n | \"catalogue-page\"\n | \"changelog-page\"\n | \"checkbox\"\n | \"chip\"\n | \"chip-link\"\n | \"choice-grid\"\n | \"cn\"\n | \"code-block\"\n | \"combobox\"\n | \"command\"\n | \"component-page\"\n | \"confirm-button\"\n | \"contact-page\"\n | \"continue-prompt\"\n | \"countdown\"\n | \"cta-panel\"\n | \"dashboard-layout\"\n | \"data-table\"\n | \"date-picker\"\n | \"decision-list\"\n | \"detail-layout\"\n | \"dialog\"\n | \"docs-article-page\"\n | \"docs-hub-page\"\n | \"docs-layout\"\n | \"dropdown-menu\"\n | \"empty-state\"\n | \"error-page\"\n | \"field\"\n | \"file-upload\"\n | \"filter-bar\"\n | \"form\"\n | \"gallery-page\"\n | \"glow-card\"\n | \"goal-gauge\"\n | \"how-it-works-page\"\n | \"image-cropper\"\n | \"iso\"\n | \"kbd\"\n | \"landing-page\"\n | \"landscape\"\n | \"legal-page\"\n | \"link-card\"\n | \"list\"\n | \"loader\"\n | \"longform-page\"\n | \"marketing-layout\"\n | \"marquee\"\n | \"mascot-quote\"\n | \"mascot-state\"\n | \"mascots\"\n | \"media-capture\"\n | \"meter\"\n | \"nav-bar\"\n | \"number-ticker\"\n | \"page\"\n | \"page-header\"\n | \"page-hero\"\n | \"pagination\"\n | \"pointer-light\"\n | \"popover\"\n | \"pricing-page\"\n | \"product-page\"\n | \"profile-card\"\n | \"progress\"\n | \"promise-card\"\n | \"radio-group\"\n | \"scroll-stage\"\n | \"search-field\"\n | \"section-backdrop\"\n | \"segmented\"\n | \"separator\"\n | \"settings-layout\"\n | \"skeleton\"\n | \"slider\"\n | \"slot\"\n | \"spinner\"\n | \"split-view\"\n | \"stage-banner\"\n | \"stat\"\n | \"status-page\"\n | \"stepper\"\n | \"switch\"\n | \"tabs\"\n | \"tag-input\"\n | \"terminal-replay\"\n | \"theme\"\n | \"toast\"\n | \"toc\"\n | \"tooltip\"\n | \"txt\"\n | \"video-player\"\n | \"video-trimmer\"\n | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n /** The file name, kebab-case (`primary`, `icon-button`). */\n readonly name: string;\n /** A short title (`Primary`, `Icon button`). */\n readonly title: string;\n /** One or two sentences: when this variant is the right one. */\n readonly description: string;\n /**\n * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n */\n readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n readonly imports: readonly string[];\n /** The examples, in reading order; the first one is the component's preview. */\n readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n /**\n * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n */\n readonly entry?: string;\n /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n readonly keys: string;\n /** What they do. */\n readonly action: string;\n}\n\nexport interface ComponentMeta {\n /** The display name: `Button`, `Dropdown menu`. */\n readonly title: string;\n /** One sentence: what it is. */\n readonly summary: string;\n readonly status: Status;\n readonly category: Category;\n /** Must match the sides below: `both` ⇔ `web` and `native`. */\n readonly platforms: Platform;\n /** When to reach for it: concrete situations, one per item. */\n readonly whenToUse: readonly string[];\n /** When not to — and what to use instead (`use`), when another component is the answer. */\n readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n /** How to use it well: wording, placement, composition. */\n readonly bestPractices: readonly string[];\n readonly accessibility: {\n /** The keyboard, when it does more than Tab and Enter. */\n readonly keyboard: readonly KeyboardInteraction[];\n /** Roles, names and announcements: what the component does, what the app must provide. */\n readonly notes: readonly string[];\n };\n /** The components a reader of this page should know about. */\n readonly related: readonly ComponentName[];\n readonly web?: PlatformDocs;\n readonly native?: NativeDocs;\n}\n"
196
+ "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n | \"achievement\"\n | \"action-bar\"\n | \"activity-feed\"\n | \"action-sheet\"\n | \"alert\"\n | \"app-shell\"\n | \"argument-card\"\n | \"audio-player\"\n | \"auth-layout\"\n | \"avatar\"\n | \"badge\"\n | \"button\"\n | \"card\"\n | \"card-grid\"\n | \"catalogue-page\"\n | \"changelog-page\"\n | \"chat\"\n | \"checkbox\"\n | \"chip\"\n | \"chip-link\"\n | \"choice-grid\"\n | \"cn\"\n | \"code-block\"\n | \"combobox\"\n | \"command\"\n | \"component-page\"\n | \"confirm-button\"\n | \"contact-page\"\n | \"continue-prompt\"\n | \"countdown\"\n | \"cta-panel\"\n | \"dashboard-layout\"\n | \"data-table\"\n | \"date-picker\"\n | \"decision-list\"\n | \"description-list\"\n | \"detail-layout\"\n | \"dialog\"\n | \"docs-article-page\"\n | \"docs-hub-page\"\n | \"docs-layout\"\n | \"dropdown-menu\"\n | \"empty-state\"\n | \"error-page\"\n | \"fab\"\n | \"field\"\n | \"file-upload\"\n | \"filter-bar\"\n | \"form\"\n | \"gallery-page\"\n | \"glow-card\"\n | \"goal-gauge\"\n | \"header\"\n | \"how-it-works-page\"\n | \"image-cropper\"\n | \"image-viewer\"\n | \"iso\"\n | \"kanban\"\n | \"kbd\"\n | \"landing-page\"\n | \"landscape\"\n | \"legal-page\"\n | \"link-card\"\n | \"list\"\n | \"loader\"\n | \"map\"\n | \"longform-page\"\n | \"marketing-layout\"\n | \"marquee\"\n | \"mascot-quote\"\n | \"mascot-state\"\n | \"mascots\"\n | \"match-dialog\"\n | \"media-capture\"\n | \"media-picker\"\n | \"meter\"\n | \"nav-bar\"\n | \"number-ticker\"\n | \"onboarding\"\n | \"otp-input\"\n | \"page\"\n | \"page-header\"\n | \"page-hero\"\n | \"pagination\"\n | \"permission-prompt\"\n | \"photo-grid\"\n | \"pointer-light\"\n | \"popover\"\n | \"pricing-page\"\n | \"product-page\"\n | \"profile-card\"\n | \"progress\"\n | \"promise-card\"\n | \"pull-to-refresh\"\n | \"radio-group\"\n | \"screen\"\n | \"scroll-stage\"\n | \"search-field\"\n | \"section-backdrop\"\n | \"segmented\"\n | \"separator\"\n | \"settings-layout\"\n | \"skeleton\"\n | \"slider\"\n | \"slot\"\n | \"spinner\"\n | \"split-view\"\n | \"stage-banner\"\n | \"stat\"\n | \"status-page\"\n | \"step-progress\"\n | \"stepper\"\n | \"swipe-deck\"\n | \"swipeable-row\"\n | \"switch\"\n | \"tab-bar\"\n | \"tabs\"\n | \"tag-input\"\n | \"tag-selector\"\n | \"terminal-replay\"\n | \"theme\"\n | \"toast\"\n | \"toc\"\n | \"tooltip\"\n | \"tree-view\"\n | \"txt\"\n | \"verified-badge\"\n | \"video-player\"\n | \"video-trimmer\"\n | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n /** The file name, kebab-case (`primary`, `icon-button`). */\n readonly name: string;\n /** A short title (`Primary`, `Icon button`). */\n readonly title: string;\n /** One or two sentences: when this variant is the right one. */\n readonly description: string;\n /**\n * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n */\n readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n readonly imports: readonly string[];\n /** The examples, in reading order; the first one is the component's preview. */\n readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n /**\n * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n */\n readonly entry?: string;\n /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n readonly keys: string;\n /** What they do. */\n readonly action: string;\n}\n\nexport interface ComponentMeta {\n /** The display name: `Button`, `Dropdown menu`. */\n readonly title: string;\n /** One sentence: what it is. */\n readonly summary: string;\n readonly status: Status;\n readonly category: Category;\n /** Must match the sides below: `both` ⇔ `web` and `native`. */\n readonly platforms: Platform;\n /** When to reach for it: concrete situations, one per item. */\n readonly whenToUse: readonly string[];\n /** When not to — and what to use instead (`use`), when another component is the answer. */\n readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n /** How to use it well: wording, placement, composition. */\n readonly bestPractices: readonly string[];\n readonly accessibility: {\n /** The keyboard, when it does more than Tab and Enter. */\n readonly keyboard: readonly KeyboardInteraction[];\n /** Roles, names and announcements: what the component does, what the app must provide. */\n readonly notes: readonly string[];\n };\n /** The components a reader of this page should know about. */\n readonly related: readonly ComponentName[];\n readonly web?: PlatformDocs;\n readonly native?: NativeDocs;\n}\n"
197
197
  },
198
198
  {
199
199
  "path": "story-variant.ts",
@@ -140,7 +140,7 @@
140
140
  },
141
141
  {
142
142
  "path": "meta.ts",
143
- "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n | \"achievement\"\n | \"action-bar\"\n | \"alert\"\n | \"app-shell\"\n | \"argument-card\"\n | \"audio-player\"\n | \"auth-layout\"\n | \"avatar\"\n | \"badge\"\n | \"button\"\n | \"card\"\n | \"card-grid\"\n | \"catalogue-page\"\n | \"changelog-page\"\n | \"checkbox\"\n | \"chip\"\n | \"chip-link\"\n | \"choice-grid\"\n | \"cn\"\n | \"code-block\"\n | \"combobox\"\n | \"command\"\n | \"component-page\"\n | \"confirm-button\"\n | \"contact-page\"\n | \"continue-prompt\"\n | \"countdown\"\n | \"cta-panel\"\n | \"dashboard-layout\"\n | \"data-table\"\n | \"date-picker\"\n | \"decision-list\"\n | \"detail-layout\"\n | \"dialog\"\n | \"docs-article-page\"\n | \"docs-hub-page\"\n | \"docs-layout\"\n | \"dropdown-menu\"\n | \"empty-state\"\n | \"error-page\"\n | \"field\"\n | \"file-upload\"\n | \"filter-bar\"\n | \"form\"\n | \"gallery-page\"\n | \"glow-card\"\n | \"goal-gauge\"\n | \"how-it-works-page\"\n | \"image-cropper\"\n | \"iso\"\n | \"kbd\"\n | \"landing-page\"\n | \"landscape\"\n | \"legal-page\"\n | \"link-card\"\n | \"list\"\n | \"loader\"\n | \"longform-page\"\n | \"marketing-layout\"\n | \"marquee\"\n | \"mascot-quote\"\n | \"mascot-state\"\n | \"mascots\"\n | \"media-capture\"\n | \"meter\"\n | \"nav-bar\"\n | \"number-ticker\"\n | \"page\"\n | \"page-header\"\n | \"page-hero\"\n | \"pagination\"\n | \"pointer-light\"\n | \"popover\"\n | \"pricing-page\"\n | \"product-page\"\n | \"profile-card\"\n | \"progress\"\n | \"promise-card\"\n | \"radio-group\"\n | \"scroll-stage\"\n | \"search-field\"\n | \"section-backdrop\"\n | \"segmented\"\n | \"separator\"\n | \"settings-layout\"\n | \"skeleton\"\n | \"slider\"\n | \"slot\"\n | \"spinner\"\n | \"split-view\"\n | \"stage-banner\"\n | \"stat\"\n | \"status-page\"\n | \"stepper\"\n | \"switch\"\n | \"tabs\"\n | \"tag-input\"\n | \"terminal-replay\"\n | \"theme\"\n | \"toast\"\n | \"toc\"\n | \"tooltip\"\n | \"txt\"\n | \"video-player\"\n | \"video-trimmer\"\n | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n /** The file name, kebab-case (`primary`, `icon-button`). */\n readonly name: string;\n /** A short title (`Primary`, `Icon button`). */\n readonly title: string;\n /** One or two sentences: when this variant is the right one. */\n readonly description: string;\n /**\n * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n */\n readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n readonly imports: readonly string[];\n /** The examples, in reading order; the first one is the component's preview. */\n readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n /**\n * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n */\n readonly entry?: string;\n /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n readonly keys: string;\n /** What they do. */\n readonly action: string;\n}\n\nexport interface ComponentMeta {\n /** The display name: `Button`, `Dropdown menu`. */\n readonly title: string;\n /** One sentence: what it is. */\n readonly summary: string;\n readonly status: Status;\n readonly category: Category;\n /** Must match the sides below: `both` ⇔ `web` and `native`. */\n readonly platforms: Platform;\n /** When to reach for it: concrete situations, one per item. */\n readonly whenToUse: readonly string[];\n /** When not to — and what to use instead (`use`), when another component is the answer. */\n readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n /** How to use it well: wording, placement, composition. */\n readonly bestPractices: readonly string[];\n readonly accessibility: {\n /** The keyboard, when it does more than Tab and Enter. */\n readonly keyboard: readonly KeyboardInteraction[];\n /** Roles, names and announcements: what the component does, what the app must provide. */\n readonly notes: readonly string[];\n };\n /** The components a reader of this page should know about. */\n readonly related: readonly ComponentName[];\n readonly web?: PlatformDocs;\n readonly native?: NativeDocs;\n}\n"
143
+ "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n | \"achievement\"\n | \"action-bar\"\n | \"activity-feed\"\n | \"action-sheet\"\n | \"alert\"\n | \"app-shell\"\n | \"argument-card\"\n | \"audio-player\"\n | \"auth-layout\"\n | \"avatar\"\n | \"badge\"\n | \"button\"\n | \"card\"\n | \"card-grid\"\n | \"catalogue-page\"\n | \"changelog-page\"\n | \"chat\"\n | \"checkbox\"\n | \"chip\"\n | \"chip-link\"\n | \"choice-grid\"\n | \"cn\"\n | \"code-block\"\n | \"combobox\"\n | \"command\"\n | \"component-page\"\n | \"confirm-button\"\n | \"contact-page\"\n | \"continue-prompt\"\n | \"countdown\"\n | \"cta-panel\"\n | \"dashboard-layout\"\n | \"data-table\"\n | \"date-picker\"\n | \"decision-list\"\n | \"description-list\"\n | \"detail-layout\"\n | \"dialog\"\n | \"docs-article-page\"\n | \"docs-hub-page\"\n | \"docs-layout\"\n | \"dropdown-menu\"\n | \"empty-state\"\n | \"error-page\"\n | \"fab\"\n | \"field\"\n | \"file-upload\"\n | \"filter-bar\"\n | \"form\"\n | \"gallery-page\"\n | \"glow-card\"\n | \"goal-gauge\"\n | \"header\"\n | \"how-it-works-page\"\n | \"image-cropper\"\n | \"image-viewer\"\n | \"iso\"\n | \"kanban\"\n | \"kbd\"\n | \"landing-page\"\n | \"landscape\"\n | \"legal-page\"\n | \"link-card\"\n | \"list\"\n | \"loader\"\n | \"map\"\n | \"longform-page\"\n | \"marketing-layout\"\n | \"marquee\"\n | \"mascot-quote\"\n | \"mascot-state\"\n | \"mascots\"\n | \"match-dialog\"\n | \"media-capture\"\n | \"media-picker\"\n | \"meter\"\n | \"nav-bar\"\n | \"number-ticker\"\n | \"onboarding\"\n | \"otp-input\"\n | \"page\"\n | \"page-header\"\n | \"page-hero\"\n | \"pagination\"\n | \"permission-prompt\"\n | \"photo-grid\"\n | \"pointer-light\"\n | \"popover\"\n | \"pricing-page\"\n | \"product-page\"\n | \"profile-card\"\n | \"progress\"\n | \"promise-card\"\n | \"pull-to-refresh\"\n | \"radio-group\"\n | \"screen\"\n | \"scroll-stage\"\n | \"search-field\"\n | \"section-backdrop\"\n | \"segmented\"\n | \"separator\"\n | \"settings-layout\"\n | \"skeleton\"\n | \"slider\"\n | \"slot\"\n | \"spinner\"\n | \"split-view\"\n | \"stage-banner\"\n | \"stat\"\n | \"status-page\"\n | \"step-progress\"\n | \"stepper\"\n | \"swipe-deck\"\n | \"swipeable-row\"\n | \"switch\"\n | \"tab-bar\"\n | \"tabs\"\n | \"tag-input\"\n | \"tag-selector\"\n | \"terminal-replay\"\n | \"theme\"\n | \"toast\"\n | \"toc\"\n | \"tooltip\"\n | \"tree-view\"\n | \"txt\"\n | \"verified-badge\"\n | \"video-player\"\n | \"video-trimmer\"\n | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n /** The file name, kebab-case (`primary`, `icon-button`). */\n readonly name: string;\n /** A short title (`Primary`, `Icon button`). */\n readonly title: string;\n /** One or two sentences: when this variant is the right one. */\n readonly description: string;\n /**\n * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n */\n readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n readonly imports: readonly string[];\n /** The examples, in reading order; the first one is the component's preview. */\n readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n /**\n * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n */\n readonly entry?: string;\n /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n readonly keys: string;\n /** What they do. */\n readonly action: string;\n}\n\nexport interface ComponentMeta {\n /** The display name: `Button`, `Dropdown menu`. */\n readonly title: string;\n /** One sentence: what it is. */\n readonly summary: string;\n readonly status: Status;\n readonly category: Category;\n /** Must match the sides below: `both` ⇔ `web` and `native`. */\n readonly platforms: Platform;\n /** When to reach for it: concrete situations, one per item. */\n readonly whenToUse: readonly string[];\n /** When not to — and what to use instead (`use`), when another component is the answer. */\n readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n /** How to use it well: wording, placement, composition. */\n readonly bestPractices: readonly string[];\n readonly accessibility: {\n /** The keyboard, when it does more than Tab and Enter. */\n readonly keyboard: readonly KeyboardInteraction[];\n /** Roles, names and announcements: what the component does, what the app must provide. */\n readonly notes: readonly string[];\n };\n /** The components a reader of this page should know about. */\n readonly related: readonly ComponentName[];\n readonly web?: PlatformDocs;\n readonly native?: NativeDocs;\n}\n"
144
144
  }
145
145
  ],
146
146
  "dependencies": [],
@@ -0,0 +1,121 @@
1
+ {
2
+ "name": "action-sheet",
3
+ "type": "native",
4
+ "title": "Action sheet",
5
+ "summary": "A short list of actions on an item from the bottom edge, the destructive one in danger, cancel apart.",
6
+ "description": "A short list of actions on an item from the bottom edge, the destructive one in danger, cancel apart.",
7
+ "status": "beta",
8
+ "category": "overlays",
9
+ "platforms": "native",
10
+ "whenToUse": [
11
+ "The “more” button of a video, a message, a comment.",
12
+ "Choosing where a photo comes from: the library or the camera."
13
+ ],
14
+ "whenNotToUse": [
15
+ {
16
+ "when": "For more than six actions or for content.",
17
+ "use": "dialog"
18
+ },
19
+ {
20
+ "when": "To confirm what the action does.",
21
+ "use": "dialog"
22
+ }
23
+ ],
24
+ "bestPractices": [
25
+ "Put the destructive action last, in its own words (“Delete the video”).",
26
+ "Keep it to verbs: share, edit, start an auction."
27
+ ],
28
+ "accessibility": {
29
+ "keyboard": [],
30
+ "notes": [
31
+ "A `menu` of `menuitem`s named by the title; cancel is a button apart.",
32
+ "A selection tick on each action when the app gives haptics."
33
+ ]
34
+ },
35
+ "related": [
36
+ "dialog",
37
+ "dropdown-menu"
38
+ ],
39
+ "web": null,
40
+ "native": {
41
+ "entry": "@krizaka/ui/native",
42
+ "import": "import { ActionSheet } from \"@krizaka/ui/native\";",
43
+ "differences": [],
44
+ "props": [
45
+ {
46
+ "component": "ActionSheet",
47
+ "description": "A short list of actions from the bottom edge — share, edit, delete — and a cancel button apart, as the platforms do.",
48
+ "props": [
49
+ {
50
+ "name": "actions",
51
+ "type": "readonly ActionSheetAction[]",
52
+ "default": null,
53
+ "description": "The choices, in order.",
54
+ "required": true
55
+ },
56
+ {
57
+ "name": "cancelLabel",
58
+ "type": "string",
59
+ "default": null,
60
+ "description": "The cancel button's words (“Cancel”) — passed translated.",
61
+ "required": true
62
+ },
63
+ {
64
+ "name": "title",
65
+ "type": "string",
66
+ "default": null,
67
+ "description": "What the choices are about (“Your video”) — the accessible name.",
68
+ "required": true
69
+ },
70
+ {
71
+ "name": "defaultOpen",
72
+ "type": "boolean",
73
+ "default": null,
74
+ "description": "Open at first, uncontrolled.",
75
+ "required": false
76
+ },
77
+ {
78
+ "name": "description",
79
+ "type": "string",
80
+ "default": null,
81
+ "description": "One line under the title.",
82
+ "required": false
83
+ },
84
+ {
85
+ "name": "onOpenChange",
86
+ "type": "((open: boolean) => void)",
87
+ "default": null,
88
+ "description": "Called when it opens or closes (the back button, the scrim, an action).",
89
+ "required": false
90
+ },
91
+ {
92
+ "name": "open",
93
+ "type": "boolean",
94
+ "default": null,
95
+ "description": "Open (controlled).",
96
+ "required": false
97
+ }
98
+ ]
99
+ }
100
+ ],
101
+ "examples": [
102
+ {
103
+ "name": "video-actions",
104
+ "title": "A video's actions",
105
+ "description": "Share, auction, edit, delete — cancel apart.",
106
+ "path": "examples/action-sheet/native/video-actions.tsx",
107
+ "module": "@krizaka/ui/registry/examples/action-sheet/native/video-actions",
108
+ "code": "import { ActionSheet, Button } from \"@krizaka/ui/native\";\nimport { useState } from \"react\";\n\n// A video's actions, the destructive one last, cancel apart.\nexport default function NativeActionSheetVideoActions({ defaultOpen = false }: { defaultOpen?: boolean }) {\n const [open, setOpen] = useState(defaultOpen);\n return (\n <>\n <Button label=\"More\" onPress={() => setOpen(true)} />\n <ActionSheet\n open={open}\n onOpenChange={setOpen}\n title=\"Sunset session\"\n cancelLabel=\"Cancel\"\n actions={[\n { label: \"Share\", onPress: () => undefined },\n { label: \"Start an auction\", onPress: () => undefined },\n { label: \"Edit details\", onPress: () => undefined },\n { label: \"Delete\", destructive: true, onPress: () => undefined },\n ]}\n />\n </>\n );\n}\n",
109
+ "screenshots": {
110
+ "dark": "examples/action-sheet/native/video-actions.dark.png",
111
+ "light": "examples/action-sheet/native/video-actions.light.png"
112
+ }
113
+ }
114
+ ]
115
+ },
116
+ "files": [],
117
+ "dependencies": [],
118
+ "registryDependencies": [],
119
+ "demo": null,
120
+ "props": []
121
+ }