@ankhorage/zora 1.5.0 → 2.0.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 (306) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/README.md +125 -123
  3. package/dist/components/app-bar/AppBar.js +4 -4
  4. package/dist/components/app-bar/AppBar.js.map +1 -1
  5. package/dist/components/avatar/Avatar.d.ts.map +1 -1
  6. package/dist/components/avatar/Avatar.js +19 -9
  7. package/dist/components/avatar/Avatar.js.map +1 -1
  8. package/dist/components/avatar/types.d.ts +2 -2
  9. package/dist/components/avatar/types.d.ts.map +1 -1
  10. package/dist/components/avatar/types.js.map +1 -1
  11. package/dist/components/avatar-group/AvatarGroup.js +2 -2
  12. package/dist/components/avatar-group/AvatarGroup.js.map +1 -1
  13. package/dist/components/avatar-group/types.d.ts +2 -2
  14. package/dist/components/avatar-group/types.d.ts.map +1 -1
  15. package/dist/components/avatar-group/types.js.map +1 -1
  16. package/dist/components/badge/Badge.js +3 -3
  17. package/dist/components/badge/Badge.js.map +1 -1
  18. package/dist/components/badge/types.d.ts +4 -4
  19. package/dist/components/badge/types.d.ts.map +1 -1
  20. package/dist/components/badge/types.js.map +1 -1
  21. package/dist/components/button/Button.js +3 -3
  22. package/dist/components/button/Button.js.map +1 -1
  23. package/dist/components/button/meta.d.ts +7 -7
  24. package/dist/components/button/meta.d.ts.map +1 -1
  25. package/dist/components/button/meta.js +8 -7
  26. package/dist/components/button/meta.js.map +1 -1
  27. package/dist/components/button/types.d.ts +4 -4
  28. package/dist/components/button/types.d.ts.map +1 -1
  29. package/dist/components/button/types.js.map +1 -1
  30. package/dist/components/card/Card.js +2 -2
  31. package/dist/components/card/Card.js.map +1 -1
  32. package/dist/components/checkbox/CheckboxGroup.js +5 -5
  33. package/dist/components/checkbox/CheckboxGroup.js.map +1 -1
  34. package/dist/components/checkbox/types.d.ts +1 -1
  35. package/dist/components/checkbox/types.d.ts.map +1 -1
  36. package/dist/components/checkbox/types.js.map +1 -1
  37. package/dist/components/chip/Chip.d.ts.map +1 -1
  38. package/dist/components/chip/Chip.js +9 -10
  39. package/dist/components/chip/Chip.js.map +1 -1
  40. package/dist/components/chip/resolveChipColors.d.ts +3 -3
  41. package/dist/components/chip/resolveChipColors.d.ts.map +1 -1
  42. package/dist/components/chip/resolveChipColors.js +14 -4
  43. package/dist/components/chip/resolveChipColors.js.map +1 -1
  44. package/dist/components/chip/types.d.ts +2 -2
  45. package/dist/components/chip/types.d.ts.map +1 -1
  46. package/dist/components/chip/types.js.map +1 -1
  47. package/dist/components/chip-group/ChipGroup.js +2 -2
  48. package/dist/components/chip-group/ChipGroup.js.map +1 -1
  49. package/dist/components/chip-group/types.d.ts +2 -2
  50. package/dist/components/chip-group/types.d.ts.map +1 -1
  51. package/dist/components/chip-group/types.js.map +1 -1
  52. package/dist/components/drawer/Drawer.js +1 -1
  53. package/dist/components/drawer/Drawer.js.map +1 -1
  54. package/dist/components/form/FormError.js +1 -1
  55. package/dist/components/form/FormError.js.map +1 -1
  56. package/dist/components/form/FormField.js +1 -1
  57. package/dist/components/form/FormField.js.map +1 -1
  58. package/dist/components/heading/Heading.d.ts.map +1 -1
  59. package/dist/components/heading/Heading.js +5 -3
  60. package/dist/components/heading/Heading.js.map +1 -1
  61. package/dist/components/heading/index.d.ts +1 -1
  62. package/dist/components/heading/index.d.ts.map +1 -1
  63. package/dist/components/heading/index.js.map +1 -1
  64. package/dist/components/heading/meta.d.ts +9 -3
  65. package/dist/components/heading/meta.d.ts.map +1 -1
  66. package/dist/components/heading/meta.js +10 -3
  67. package/dist/components/heading/meta.js.map +1 -1
  68. package/dist/components/heading/resolveHeadingRecipe.d.ts +4 -3
  69. package/dist/components/heading/resolveHeadingRecipe.d.ts.map +1 -1
  70. package/dist/components/heading/resolveHeadingRecipe.js +33 -12
  71. package/dist/components/heading/resolveHeadingRecipe.js.map +1 -1
  72. package/dist/components/heading/types.d.ts +5 -2
  73. package/dist/components/heading/types.d.ts.map +1 -1
  74. package/dist/components/heading/types.js.map +1 -1
  75. package/dist/components/icon-button/IconButton.js +3 -3
  76. package/dist/components/icon-button/IconButton.js.map +1 -1
  77. package/dist/components/icon-button/types.d.ts +3 -3
  78. package/dist/components/icon-button/types.d.ts.map +1 -1
  79. package/dist/components/icon-button/types.js.map +1 -1
  80. package/dist/components/input/Input.js +1 -1
  81. package/dist/components/input/Input.js.map +1 -1
  82. package/dist/components/media-card/MediaCard.js +2 -2
  83. package/dist/components/media-card/MediaCard.js.map +1 -1
  84. package/dist/components/metric-card/MetricCard.js +5 -5
  85. package/dist/components/metric-card/MetricCard.js.map +1 -1
  86. package/dist/components/metric-card/types.d.ts +2 -2
  87. package/dist/components/metric-card/types.d.ts.map +1 -1
  88. package/dist/components/metric-card/types.js.map +1 -1
  89. package/dist/components/modal/Modal.js +1 -1
  90. package/dist/components/modal/Modal.js.map +1 -1
  91. package/dist/components/progress/Progress.js +2 -2
  92. package/dist/components/progress/Progress.js.map +1 -1
  93. package/dist/components/progress/types.d.ts +3 -3
  94. package/dist/components/progress/types.d.ts.map +1 -1
  95. package/dist/components/progress/types.js +12 -2
  96. package/dist/components/progress/types.js.map +1 -1
  97. package/dist/components/radio/RadioGroup.js +5 -5
  98. package/dist/components/radio/RadioGroup.js.map +1 -1
  99. package/dist/components/radio/types.d.ts +1 -1
  100. package/dist/components/radio/types.d.ts.map +1 -1
  101. package/dist/components/radio/types.js.map +1 -1
  102. package/dist/components/rating/Rating.js +2 -2
  103. package/dist/components/rating/Rating.js.map +1 -1
  104. package/dist/components/rating/types.d.ts +3 -3
  105. package/dist/components/rating/types.d.ts.map +1 -1
  106. package/dist/components/rating/types.js +12 -2
  107. package/dist/components/rating/types.js.map +1 -1
  108. package/dist/components/tabs/Tabs.d.ts.map +1 -1
  109. package/dist/components/tabs/Tabs.js +4 -4
  110. package/dist/components/tabs/Tabs.js.map +1 -1
  111. package/dist/components/text/Text.d.ts.map +1 -1
  112. package/dist/components/text/Text.js +3 -2
  113. package/dist/components/text/Text.js.map +1 -1
  114. package/dist/components/text/index.d.ts +1 -1
  115. package/dist/components/text/index.d.ts.map +1 -1
  116. package/dist/components/text/index.js.map +1 -1
  117. package/dist/components/text/meta.d.ts +10 -4
  118. package/dist/components/text/meta.d.ts.map +1 -1
  119. package/dist/components/text/meta.js +11 -4
  120. package/dist/components/text/meta.js.map +1 -1
  121. package/dist/components/text/resolveTextRecipe.d.ts +4 -3
  122. package/dist/components/text/resolveTextRecipe.d.ts.map +1 -1
  123. package/dist/components/text/resolveTextRecipe.js +35 -13
  124. package/dist/components/text/resolveTextRecipe.js.map +1 -1
  125. package/dist/components/text/types.d.ts +5 -2
  126. package/dist/components/text/types.d.ts.map +1 -1
  127. package/dist/components/text/types.js.map +1 -1
  128. package/dist/components/toolbar/ToolbarAction.js +1 -1
  129. package/dist/components/toolbar/ToolbarAction.js.map +1 -1
  130. package/dist/index.d.ts +4 -2
  131. package/dist/index.d.ts.map +1 -1
  132. package/dist/index.js +1 -0
  133. package/dist/index.js.map +1 -1
  134. package/dist/internal/colorModel.d.ts +10 -0
  135. package/dist/internal/colorModel.d.ts.map +1 -0
  136. package/dist/internal/colorModel.js +25 -0
  137. package/dist/internal/colorModel.js.map +1 -0
  138. package/dist/internal/recipes.d.ts +12 -11
  139. package/dist/internal/recipes.d.ts.map +1 -1
  140. package/dist/internal/recipes.js +6 -6
  141. package/dist/internal/recipes.js.map +1 -1
  142. package/dist/layout/screen/Screen.d.ts.map +1 -1
  143. package/dist/layout/screen/Screen.js +7 -3
  144. package/dist/layout/screen/Screen.js.map +1 -1
  145. package/dist/patterns/auth/ForgotPasswordForm.js +2 -2
  146. package/dist/patterns/auth/ForgotPasswordForm.js.map +1 -1
  147. package/dist/patterns/auth/OtpForm.js +2 -2
  148. package/dist/patterns/auth/OtpForm.js.map +1 -1
  149. package/dist/patterns/auth/SignInForm.js +4 -4
  150. package/dist/patterns/auth/SignInForm.js.map +1 -1
  151. package/dist/patterns/auth/SignUpForm.js +2 -2
  152. package/dist/patterns/auth/SignUpForm.js.map +1 -1
  153. package/dist/patterns/chat-list-item/ChatListItem.d.ts.map +1 -1
  154. package/dist/patterns/chat-list-item/ChatListItem.js +6 -6
  155. package/dist/patterns/chat-list-item/ChatListItem.js.map +1 -1
  156. package/dist/patterns/chat-list-item/types.d.ts +2 -2
  157. package/dist/patterns/chat-list-item/types.d.ts.map +1 -1
  158. package/dist/patterns/chat-list-item/types.js.map +1 -1
  159. package/dist/patterns/collection-editor/CollectionEditor.js +5 -5
  160. package/dist/patterns/collection-editor/CollectionEditor.js.map +1 -1
  161. package/dist/patterns/confirm-dialog/ConfirmDialog.js +3 -3
  162. package/dist/patterns/confirm-dialog/ConfirmDialog.js.map +1 -1
  163. package/dist/patterns/confirm-dialog/types.d.ts +3 -3
  164. package/dist/patterns/confirm-dialog/types.d.ts.map +1 -1
  165. package/dist/patterns/confirm-dialog/types.js.map +1 -1
  166. package/dist/patterns/disclosure-section/DisclosureSection.js +1 -1
  167. package/dist/patterns/disclosure-section/DisclosureSection.js.map +1 -1
  168. package/dist/patterns/empty-state/EmptyState.js +2 -2
  169. package/dist/patterns/empty-state/EmptyState.js.map +1 -1
  170. package/dist/patterns/empty-state/types.d.ts +3 -3
  171. package/dist/patterns/empty-state/types.d.ts.map +1 -1
  172. package/dist/patterns/empty-state/types.js.map +1 -1
  173. package/dist/patterns/form-field/FormField.js +1 -1
  174. package/dist/patterns/form-field/FormField.js.map +1 -1
  175. package/dist/patterns/hero/Hero.js +3 -3
  176. package/dist/patterns/hero/Hero.js.map +1 -1
  177. package/dist/patterns/hero/types.d.ts +3 -3
  178. package/dist/patterns/hero/types.d.ts.map +1 -1
  179. package/dist/patterns/hero/types.js.map +1 -1
  180. package/dist/patterns/image-preview/ImagePreview.js +1 -1
  181. package/dist/patterns/image-preview/ImagePreview.js.map +1 -1
  182. package/dist/patterns/image-upload-field/ImageUploadField.js +7 -7
  183. package/dist/patterns/image-upload-field/ImageUploadField.js.map +1 -1
  184. package/dist/patterns/list/ListRow.js +2 -2
  185. package/dist/patterns/list/ListRow.js.map +1 -1
  186. package/dist/patterns/message-bubble/MessageBubble.d.ts.map +1 -1
  187. package/dist/patterns/message-bubble/MessageBubble.js +6 -6
  188. package/dist/patterns/message-bubble/MessageBubble.js.map +1 -1
  189. package/dist/patterns/message-bubble/types.d.ts +2 -2
  190. package/dist/patterns/message-bubble/types.d.ts.map +1 -1
  191. package/dist/patterns/message-bubble/types.js.map +1 -1
  192. package/dist/patterns/notice/Notice.js +2 -2
  193. package/dist/patterns/notice/Notice.js.map +1 -1
  194. package/dist/patterns/notice/types.d.ts +2 -2
  195. package/dist/patterns/notice/types.d.ts.map +1 -1
  196. package/dist/patterns/notice/types.js.map +1 -1
  197. package/dist/patterns/post-card/PostCard.js +4 -4
  198. package/dist/patterns/post-card/PostCard.js.map +1 -1
  199. package/dist/patterns/post-card/types.d.ts +2 -2
  200. package/dist/patterns/post-card/types.d.ts.map +1 -1
  201. package/dist/patterns/post-card/types.js.map +1 -1
  202. package/dist/patterns/section-header/SectionHeader.js +2 -2
  203. package/dist/patterns/section-header/SectionHeader.js.map +1 -1
  204. package/dist/patterns/settings-row/SettingsRow.js +1 -1
  205. package/dist/patterns/settings-row/SettingsRow.js.map +1 -1
  206. package/dist/patterns/theme-composer/ThemeComposer.js +14 -14
  207. package/dist/patterns/theme-composer/ThemeComposer.js.map +1 -1
  208. package/dist/patterns/tile-grid/PaletteItem.js +1 -1
  209. package/dist/patterns/tile-grid/PaletteItem.js.map +1 -1
  210. package/dist/patterns/timeline/Timeline.d.ts.map +1 -1
  211. package/dist/patterns/timeline/Timeline.js +14 -4
  212. package/dist/patterns/timeline/Timeline.js.map +1 -1
  213. package/dist/patterns/timeline/types.d.ts +2 -2
  214. package/dist/patterns/timeline/types.d.ts.map +1 -1
  215. package/dist/patterns/timeline/types.js.map +1 -1
  216. package/dist/patterns/tree-view/TreeItem.js +1 -1
  217. package/dist/patterns/tree-view/TreeItem.js.map +1 -1
  218. package/dist/patterns/zora-tab-bar/ZoraTabBar.d.ts.map +1 -1
  219. package/dist/patterns/zora-tab-bar/ZoraTabBar.js +64 -15
  220. package/dist/patterns/zora-tab-bar/ZoraTabBar.js.map +1 -1
  221. package/package.json +2 -2
  222. package/src/components/app-bar/AppBar.tsx +6 -6
  223. package/src/components/avatar/Avatar.tsx +21 -11
  224. package/src/components/avatar/types.ts +2 -2
  225. package/src/components/avatar-group/AvatarGroup.tsx +2 -2
  226. package/src/components/avatar-group/types.ts +2 -2
  227. package/src/components/badge/Badge.tsx +4 -4
  228. package/src/components/badge/types.ts +4 -4
  229. package/src/components/button/Button.tsx +4 -4
  230. package/src/components/button/meta.ts +8 -7
  231. package/src/components/button/types.ts +4 -4
  232. package/src/components/card/Card.tsx +2 -2
  233. package/src/components/checkbox/CheckboxGroup.tsx +6 -6
  234. package/src/components/checkbox/types.ts +1 -1
  235. package/src/components/chip/Chip.tsx +9 -10
  236. package/src/components/chip/resolveChipColors.ts +16 -6
  237. package/src/components/chip/types.ts +2 -2
  238. package/src/components/chip-group/ChipGroup.tsx +2 -2
  239. package/src/components/chip-group/types.ts +2 -2
  240. package/src/components/drawer/Drawer.tsx +1 -1
  241. package/src/components/form/FormError.tsx +1 -1
  242. package/src/components/form/FormField.tsx +1 -1
  243. package/src/components/heading/Heading.tsx +6 -3
  244. package/src/components/heading/index.ts +2 -1
  245. package/src/components/heading/meta.ts +10 -3
  246. package/src/components/heading/resolveHeadingRecipe.test.ts +13 -10
  247. package/src/components/heading/resolveHeadingRecipe.ts +58 -15
  248. package/src/components/heading/types.ts +5 -10
  249. package/src/components/icon-button/IconButton.tsx +4 -4
  250. package/src/components/icon-button/types.ts +3 -3
  251. package/src/components/input/Input.tsx +2 -2
  252. package/src/components/media-card/MediaCard.tsx +2 -2
  253. package/src/components/metric-card/MetricCard.tsx +6 -6
  254. package/src/components/metric-card/types.ts +2 -2
  255. package/src/components/modal/Modal.tsx +1 -1
  256. package/src/components/progress/Progress.tsx +2 -2
  257. package/src/components/progress/types.ts +14 -4
  258. package/src/components/radio/RadioGroup.tsx +6 -6
  259. package/src/components/radio/types.ts +1 -1
  260. package/src/components/rating/Rating.tsx +2 -2
  261. package/src/components/rating/types.ts +14 -4
  262. package/src/components/tabs/Tabs.tsx +11 -7
  263. package/src/components/text/Text.tsx +4 -2
  264. package/src/components/text/index.ts +8 -1
  265. package/src/components/text/meta.ts +11 -4
  266. package/src/components/text/resolveTextRecipe.test.ts +18 -14
  267. package/src/components/text/resolveTextRecipe.ts +42 -15
  268. package/src/components/text/types.ts +5 -10
  269. package/src/components/toolbar/ToolbarAction.tsx +2 -2
  270. package/src/index.ts +22 -2
  271. package/src/internal/colorModel.ts +39 -0
  272. package/src/internal/recipes.test.ts +2 -2
  273. package/src/internal/recipes.ts +18 -18
  274. package/src/layout/screen/Screen.tsx +11 -3
  275. package/src/patterns/auth/ForgotPasswordForm.tsx +2 -2
  276. package/src/patterns/auth/OtpForm.tsx +2 -2
  277. package/src/patterns/auth/SignInForm.tsx +4 -4
  278. package/src/patterns/auth/SignUpForm.tsx +2 -2
  279. package/src/patterns/chat-list-item/ChatListItem.tsx +7 -6
  280. package/src/patterns/chat-list-item/types.ts +2 -2
  281. package/src/patterns/collection-editor/CollectionEditor.tsx +6 -6
  282. package/src/patterns/confirm-dialog/ConfirmDialog.tsx +4 -4
  283. package/src/patterns/confirm-dialog/types.ts +3 -3
  284. package/src/patterns/disclosure-section/DisclosureSection.tsx +2 -2
  285. package/src/patterns/empty-state/EmptyState.tsx +4 -4
  286. package/src/patterns/empty-state/types.ts +3 -3
  287. package/src/patterns/form-field/FormField.tsx +1 -1
  288. package/src/patterns/hero/Hero.tsx +4 -4
  289. package/src/patterns/hero/types.ts +3 -3
  290. package/src/patterns/image-preview/ImagePreview.tsx +1 -1
  291. package/src/patterns/image-upload-field/ImageUploadField.tsx +8 -8
  292. package/src/patterns/list/ListRow.tsx +2 -2
  293. package/src/patterns/message-bubble/MessageBubble.tsx +10 -6
  294. package/src/patterns/message-bubble/types.ts +2 -2
  295. package/src/patterns/notice/Notice.tsx +2 -2
  296. package/src/patterns/notice/types.ts +2 -2
  297. package/src/patterns/post-card/PostCard.tsx +5 -5
  298. package/src/patterns/post-card/types.ts +2 -2
  299. package/src/patterns/section-header/SectionHeader.tsx +2 -2
  300. package/src/patterns/settings-row/SettingsRow.tsx +1 -1
  301. package/src/patterns/theme-composer/ThemeComposer.tsx +15 -15
  302. package/src/patterns/tile-grid/PaletteItem.tsx +1 -1
  303. package/src/patterns/timeline/Timeline.tsx +15 -5
  304. package/src/patterns/timeline/types.ts +2 -2
  305. package/src/patterns/tree-view/TreeItem.tsx +1 -1
  306. package/src/patterns/zora-tab-bar/ZoraTabBar.tsx +104 -15
@@ -1,15 +1,16 @@
1
1
  import type { SurfaceTheme } from '@ankhorage/surface';
2
2
  import type { TextStyle } from 'react-native';
3
- import type { HeadingAlign, HeadingLevel, HeadingSize, HeadingTone, HeadingWeight } from './types';
3
+ import type { HeadingAlign, HeadingColor, HeadingEmphasis, HeadingLevel, HeadingSize, HeadingWeight } from './types';
4
4
  interface ResolveHeadingRecipeOptions {
5
5
  level: HeadingLevel;
6
6
  size?: HeadingSize;
7
- tone?: HeadingTone;
7
+ color?: HeadingColor;
8
+ emphasis?: HeadingEmphasis;
8
9
  align?: HeadingAlign;
9
10
  weight?: HeadingWeight;
10
11
  italic?: boolean;
11
12
  }
12
13
  export declare function resolveHeadingSizeFromLevel(level: HeadingLevel): HeadingSize;
13
- export declare function resolveHeadingRecipe(theme: SurfaceTheme, { align, italic, level, size, tone, weight }: ResolveHeadingRecipeOptions): TextStyle;
14
+ export declare function resolveHeadingRecipe(theme: SurfaceTheme, { align, color, emphasis, italic, level, size, weight, }: ResolveHeadingRecipeOptions): TextStyle;
14
15
  export {};
15
16
  //# sourceMappingURL=resolveHeadingRecipe.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"resolveHeadingRecipe.d.ts","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEnG,UAAU,2BAA2B;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,YAAY,GAAG,WAAW,CAe5E;AA6ED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,YAAY,EACnB,EAAE,KAAK,EAAE,MAAc,EAAE,KAAK,EAAE,IAAI,EAAE,IAAgB,EAAE,MAAM,EAAE,EAAE,2BAA2B,GAC5F,SAAS,CAcX"}
1
+ {"version":3,"file":"resolveHeadingRecipe.d.ts","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,WAAW,EACX,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB,UAAU,2BAA2B;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,YAAY,GAAG,WAAW,CAe5E;AAwGD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,YAAY,EACnB,EACE,KAAK,EACL,KAAK,EACL,QAAoB,EACpB,MAAc,EACd,KAAK,EACL,IAAI,EACJ,MAAM,GACP,EAAE,2BAA2B,GAC7B,SAAS,CAcX"}
@@ -46,22 +46,43 @@ function resolveSizeRecipe(theme, size) {
46
46
  weight: heading.weight,
47
47
  };
48
48
  }
49
- function resolveToneColor(theme, tone) {
50
- switch (tone) {
49
+ function resolveRoleSemantics(theme, color) {
50
+ switch (color) {
51
+ case 'secondary':
52
+ return theme.semantics.secondary;
53
+ case 'tertiary':
54
+ return theme.semantics.accent;
55
+ case 'quaternary':
56
+ return theme.semantics.highlight;
57
+ case 'neutral':
58
+ return theme.semantics.action.neutral;
59
+ case 'error':
60
+ return theme.semantics.error;
61
+ case 'info':
62
+ return theme.semantics.info;
63
+ case 'danger':
64
+ return theme.semantics.action.danger;
65
+ case 'success':
66
+ return theme.semantics.success;
67
+ case 'warning':
68
+ return theme.semantics.warning;
69
+ case 'primary':
70
+ default:
71
+ return theme.semantics.action.primary;
72
+ }
73
+ }
74
+ function resolveHeadingColor(theme, emphasis, color) {
75
+ if (color) {
76
+ const role = resolveRoleSemantics(theme, color);
77
+ return emphasis === 'inverse' ? role.onSolidText : role.base;
78
+ }
79
+ switch (emphasis) {
51
80
  case 'muted':
52
81
  return theme.semantics.content.muted;
53
82
  case 'subtle':
54
83
  return theme.semantics.content.subtle;
55
84
  case 'inverse':
56
85
  return theme.semantics.content.inverse;
57
- case 'primary':
58
- return theme.semantics.brand.base;
59
- case 'danger':
60
- return theme.semantics.danger.base;
61
- case 'success':
62
- return theme.semantics.success.base;
63
- case 'warning':
64
- return theme.semantics.warning.base;
65
86
  case 'default':
66
87
  default:
67
88
  return theme.semantics.content.default;
@@ -73,11 +94,11 @@ function resolveWeight(theme, weight) {
73
94
  function resolveFontFamily({ theme, weight, italic, }) {
74
95
  return theme.typography.fonts[italic ? 'italic' : 'normal'][weight];
75
96
  }
76
- export function resolveHeadingRecipe(theme, { align, italic = false, level, size, tone = 'default', weight }) {
97
+ export function resolveHeadingRecipe(theme, { align, color, emphasis = 'default', italic = false, level, size, weight, }) {
77
98
  const recipe = resolveSizeRecipe(theme, size ?? resolveHeadingSizeFromLevel(level));
78
99
  const resolvedWeight = resolveWeight(theme, weight ?? recipe.weight);
79
100
  return {
80
- color: resolveToneColor(theme, tone),
101
+ color: resolveHeadingColor(theme, emphasis, color),
81
102
  elevation: 0,
82
103
  fontFamily: resolveFontFamily({ theme, weight: resolvedWeight, italic }),
83
104
  fontSize: recipe.fontSize,
@@ -1 +1 @@
1
- {"version":3,"file":"resolveHeadingRecipe.js","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"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","sourcesContent":["import type { FontWeight, SurfaceTheme } from '@ankhorage/surface';\nimport type { TextStyle } from 'react-native';\n\nimport type { HeadingAlign, HeadingLevel, HeadingSize, HeadingTone, HeadingWeight } from './types';\n\ninterface ResolveHeadingRecipeOptions {\n level: HeadingLevel;\n size?: HeadingSize;\n tone?: HeadingTone;\n align?: HeadingAlign;\n weight?: HeadingWeight;\n italic?: boolean;\n}\n\ninterface HeadingRecipe {\n fontSize: number;\n lineHeight: number;\n weight: HeadingWeight;\n}\n\nexport function resolveHeadingSizeFromLevel(level: HeadingLevel): HeadingSize {\n switch (level) {\n case 1:\n return 'h1';\n case 2:\n return 'h2';\n case 3:\n return 'h3';\n case 4:\n return 'h4';\n case 5:\n return 'h5';\n case 6:\n return 'h6';\n }\n}\n\nfunction resolveHeadingLevelFromSize(size: Exclude<HeadingSize, 'display'>): HeadingLevel {\n switch (size) {\n case 'h1':\n return 1;\n case 'h2':\n return 2;\n case 'h3':\n return 3;\n case 'h4':\n return 4;\n case 'h5':\n return 5;\n case 'h6':\n return 6;\n }\n}\n\nfunction resolveSizeRecipe(theme: SurfaceTheme, size: HeadingSize): HeadingRecipe {\n if (size === 'display') {\n const fontSize = theme.typography.sizes['3xl'];\n\n return {\n fontSize,\n lineHeight: fontSize + 8,\n weight: 'bold',\n };\n }\n\n const heading = theme.typography.headings[resolveHeadingLevelFromSize(size)];\n\n return {\n fontSize: heading.size,\n lineHeight: heading.lineHeight,\n weight: heading.weight,\n };\n}\n\nfunction resolveToneColor(theme: SurfaceTheme, tone: HeadingTone): string {\n switch (tone) {\n case 'muted':\n return theme.semantics.content.muted;\n case 'subtle':\n return theme.semantics.content.subtle;\n case 'inverse':\n return theme.semantics.content.inverse;\n case 'primary':\n return theme.semantics.brand.base;\n case 'danger':\n return theme.semantics.danger.base;\n case 'success':\n return theme.semantics.success.base;\n case 'warning':\n return theme.semantics.warning.base;\n case 'default':\n default:\n return theme.semantics.content.default;\n }\n}\n\nfunction resolveWeight(theme: SurfaceTheme, weight: HeadingWeight): FontWeight {\n return theme.typography.weights[weight];\n}\n\nfunction resolveFontFamily({\n theme,\n weight,\n italic,\n}: {\n theme: SurfaceTheme;\n weight: FontWeight;\n italic: boolean;\n}): string | undefined {\n return theme.typography.fonts[italic ? 'italic' : 'normal'][weight];\n}\n\nexport function resolveHeadingRecipe(\n theme: SurfaceTheme,\n { align, italic = false, level, size, tone = 'default', weight }: ResolveHeadingRecipeOptions,\n): TextStyle {\n const recipe = resolveSizeRecipe(theme, size ?? resolveHeadingSizeFromLevel(level));\n const resolvedWeight = resolveWeight(theme, weight ?? recipe.weight);\n\n return {\n color: resolveToneColor(theme, tone),\n elevation: 0,\n fontFamily: resolveFontFamily({ theme, weight: resolvedWeight, italic }),\n fontSize: recipe.fontSize,\n fontStyle: italic ? 'italic' : 'normal',\n fontWeight: resolvedWeight,\n lineHeight: recipe.lineHeight,\n textAlign: align,\n };\n}\n"]}
1
+ {"version":3,"file":"resolveHeadingRecipe.js","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"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","sourcesContent":["import type { FontWeight, RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\nimport type { TextStyle } from 'react-native';\n\nimport type {\n HeadingAlign,\n HeadingColor,\n HeadingEmphasis,\n HeadingLevel,\n HeadingSize,\n HeadingWeight,\n} from './types';\n\ninterface ResolveHeadingRecipeOptions {\n level: HeadingLevel;\n size?: HeadingSize;\n color?: HeadingColor;\n emphasis?: HeadingEmphasis;\n align?: HeadingAlign;\n weight?: HeadingWeight;\n italic?: boolean;\n}\n\ninterface HeadingRecipe {\n fontSize: number;\n lineHeight: number;\n weight: HeadingWeight;\n}\n\nexport function resolveHeadingSizeFromLevel(level: HeadingLevel): HeadingSize {\n switch (level) {\n case 1:\n return 'h1';\n case 2:\n return 'h2';\n case 3:\n return 'h3';\n case 4:\n return 'h4';\n case 5:\n return 'h5';\n case 6:\n return 'h6';\n }\n}\n\nfunction resolveHeadingLevelFromSize(size: Exclude<HeadingSize, 'display'>): HeadingLevel {\n switch (size) {\n case 'h1':\n return 1;\n case 'h2':\n return 2;\n case 'h3':\n return 3;\n case 'h4':\n return 4;\n case 'h5':\n return 5;\n case 'h6':\n return 6;\n }\n}\n\nfunction resolveSizeRecipe(theme: SurfaceTheme, size: HeadingSize): HeadingRecipe {\n if (size === 'display') {\n const fontSize = theme.typography.sizes['3xl'];\n\n return {\n fontSize,\n lineHeight: fontSize + 8,\n weight: 'bold',\n };\n }\n\n const heading = theme.typography.headings[resolveHeadingLevelFromSize(size)];\n\n return {\n fontSize: heading.size,\n lineHeight: heading.lineHeight,\n weight: heading.weight,\n };\n}\n\nfunction resolveRoleSemantics(theme: SurfaceTheme, color: HeadingColor): RoleSemantics {\n switch (color) {\n case 'secondary':\n return theme.semantics.secondary;\n case 'tertiary':\n return theme.semantics.accent;\n case 'quaternary':\n return theme.semantics.highlight;\n case 'neutral':\n return theme.semantics.action.neutral;\n case 'error':\n return theme.semantics.error;\n case 'info':\n return theme.semantics.info;\n case 'danger':\n return theme.semantics.action.danger;\n case 'success':\n return theme.semantics.success;\n case 'warning':\n return theme.semantics.warning;\n case 'primary':\n default:\n return theme.semantics.action.primary;\n }\n}\n\nfunction resolveHeadingColor(\n theme: SurfaceTheme,\n emphasis: HeadingEmphasis,\n color?: HeadingColor,\n): string {\n if (color) {\n const role = resolveRoleSemantics(theme, color);\n return emphasis === 'inverse' ? role.onSolidText : role.base;\n }\n\n switch (emphasis) {\n case 'muted':\n return theme.semantics.content.muted;\n case 'subtle':\n return theme.semantics.content.subtle;\n case 'inverse':\n return theme.semantics.content.inverse;\n case 'default':\n default:\n return theme.semantics.content.default;\n }\n}\n\nfunction resolveWeight(theme: SurfaceTheme, weight: HeadingWeight): FontWeight {\n return theme.typography.weights[weight];\n}\n\nfunction resolveFontFamily({\n theme,\n weight,\n italic,\n}: {\n theme: SurfaceTheme;\n weight: FontWeight;\n italic: boolean;\n}): string | undefined {\n return theme.typography.fonts[italic ? 'italic' : 'normal'][weight];\n}\n\nexport function resolveHeadingRecipe(\n theme: SurfaceTheme,\n {\n align,\n color,\n emphasis = 'default',\n italic = false,\n level,\n size,\n weight,\n }: ResolveHeadingRecipeOptions,\n): TextStyle {\n const recipe = resolveSizeRecipe(theme, size ?? resolveHeadingSizeFromLevel(level));\n const resolvedWeight = resolveWeight(theme, weight ?? recipe.weight);\n\n return {\n color: resolveHeadingColor(theme, emphasis, color),\n elevation: 0,\n fontFamily: resolveFontFamily({ theme, weight: resolvedWeight, italic }),\n fontSize: recipe.fontSize,\n fontStyle: italic ? 'italic' : 'normal',\n fontWeight: resolvedWeight,\n lineHeight: recipe.lineHeight,\n textAlign: align,\n };\n}\n"]}
@@ -1,10 +1,12 @@
1
1
  import type { Responsive } from '@ankhorage/surface';
2
2
  import type React from 'react';
3
3
  import type { AccessibilityRole, TextStyle } from 'react-native';
4
+ import type { ZoraColor, ZoraEmphasis } from '../../internal/recipes';
4
5
  import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
5
6
  export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
6
7
  export type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
7
- export type HeadingTone = 'default' | 'muted' | 'subtle' | 'inverse' | 'primary' | 'danger' | 'success' | 'warning';
8
+ export type HeadingColor = ZoraColor;
9
+ export type HeadingEmphasis = ZoraEmphasis;
8
10
  export type HeadingAlign = NonNullable<TextStyle['textAlign']>;
9
11
  export type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
10
12
  export interface HeadingProps extends ZoraBaseProps {
@@ -13,7 +15,8 @@ export interface HeadingProps extends ZoraBaseProps {
13
15
  i18nKey?: string;
14
16
  level?: HeadingLevel;
15
17
  size?: Responsive<HeadingSize>;
16
- tone?: Responsive<HeadingTone>;
18
+ color?: Responsive<HeadingColor>;
19
+ emphasis?: Responsive<HeadingEmphasis>;
17
20
  align?: Responsive<HeadingAlign>;
18
21
  weight?: Responsive<HeadingWeight>;
19
22
  italic?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9E,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;AAE/D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEvE,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9E,MAAM,MAAM,YAAY,GAAG,SAAS,CAAC;AACrC,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC;AAE3C,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;AAE/D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEvE,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Responsive } from '@ankhorage/surface';\nimport type React from 'react';\nimport type { AccessibilityRole, TextStyle } from 'react-native';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport type HeadingTone =\n | 'default'\n | 'muted'\n | 'subtle'\n | 'inverse'\n | 'primary'\n | 'danger'\n | 'success'\n | 'warning';\n\nexport type HeadingAlign = NonNullable<TextStyle['textAlign']>;\n\nexport type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';\n\nexport interface HeadingProps extends ZoraBaseProps {\n children?: React.ReactNode;\n text?: string;\n i18nKey?: string;\n level?: HeadingLevel;\n size?: Responsive<HeadingSize>;\n tone?: Responsive<HeadingTone>;\n align?: Responsive<HeadingAlign>;\n weight?: Responsive<HeadingWeight>;\n italic?: boolean;\n numberOfLines?: number;\n ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';\n selectable?: boolean;\n accessibilityLabel?: string;\n accessibilityHint?: string;\n accessibilityRole?: AccessibilityRole;\n nativeID?: string;\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Responsive } from '@ankhorage/surface';\nimport type React from 'react';\nimport type { AccessibilityRole, TextStyle } from 'react-native';\n\nimport type { ZoraColor, ZoraEmphasis } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport type HeadingColor = ZoraColor;\nexport type HeadingEmphasis = ZoraEmphasis;\n\nexport type HeadingAlign = NonNullable<TextStyle['textAlign']>;\n\nexport type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';\n\nexport interface HeadingProps extends ZoraBaseProps {\n children?: React.ReactNode;\n text?: string;\n i18nKey?: string;\n level?: HeadingLevel;\n size?: Responsive<HeadingSize>;\n color?: Responsive<HeadingColor>;\n emphasis?: Responsive<HeadingEmphasis>;\n align?: Responsive<HeadingAlign>;\n weight?: Responsive<HeadingWeight>;\n italic?: boolean;\n numberOfLines?: number;\n ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';\n selectable?: boolean;\n accessibilityLabel?: string;\n accessibilityHint?: string;\n accessibilityRole?: AccessibilityRole;\n nativeID?: string;\n}\n"]}
@@ -2,9 +2,9 @@ import { IconButton as SurfaceIconButton } from '@ankhorage/surface';
2
2
  import React from 'react';
3
3
  import { resolveButtonRecipe } from '../../internal/recipes';
4
4
  import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
5
- function IconButtonInner({ themeId: _themeId, mode: _mode, icon, label, emphasis = 'ghost', tone = 'neutral', size = 'm', ...props }) {
6
- const recipe = resolveButtonRecipe({ emphasis, tone, size });
7
- return (<SurfaceIconButton {...props} icon={icon} accessibilityLabel={label} size={recipe.size} tone={recipe.tone} variant={recipe.variant}/>);
5
+ function IconButtonInner({ themeId: _themeId, mode: _mode, icon, label, variant = 'ghost', color = 'neutral', size = 'm', ...props }) {
6
+ const recipe = resolveButtonRecipe({ color, variant, size });
7
+ return (<SurfaceIconButton {...props} icon={icon} accessibilityLabel={label} color={recipe.color} size={recipe.size} variant={recipe.variant}/>);
8
8
  }
9
9
  export const IconButton = withZoraThemeScope(IconButtonInner);
10
10
  //# sourceMappingURL=IconButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,OAAO,EAClB,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,GAAG,EACV,GAAG,KAAK,EACQ;IAChB,MAAM,MAAM,GAAG,mBAAmB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,CAAC,iBAAiB,CAChB,IAAI,KAAK,CAAC,CACV,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,kBAAkB,CAAC,CAAC,KAAK,CAAC,CAC1B,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACxB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import { IconButton as SurfaceIconButton } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveButtonRecipe } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { IconButtonProps } from './types';\n\nfunction IconButtonInner({\n themeId: _themeId,\n mode: _mode,\n icon,\n label,\n emphasis = 'ghost',\n tone = 'neutral',\n size = 'm',\n ...props\n}: IconButtonProps) {\n const recipe = resolveButtonRecipe({ emphasis, tone, size });\n\n return (\n <SurfaceIconButton\n {...props}\n icon={icon}\n accessibilityLabel={label}\n size={recipe.size}\n tone={recipe.tone}\n variant={recipe.variant}\n />\n );\n}\n\nexport const IconButton = withZoraThemeScope(IconButtonInner);\n"]}
1
+ {"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,EACJ,KAAK,EACL,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,EACV,GAAG,KAAK,EACQ;IAChB,MAAM,MAAM,GAAG,mBAAmB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,CAAC,iBAAiB,CAChB,IAAI,KAAK,CAAC,CACV,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,kBAAkB,CAAC,CAAC,KAAK,CAAC,CAC1B,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACxB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import { IconButton as SurfaceIconButton } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveButtonRecipe } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { IconButtonProps } from './types';\n\nfunction IconButtonInner({\n themeId: _themeId,\n mode: _mode,\n icon,\n label,\n variant = 'ghost',\n color = 'neutral',\n size = 'm',\n ...props\n}: IconButtonProps) {\n const recipe = resolveButtonRecipe({ color, variant, size });\n\n return (\n <SurfaceIconButton\n {...props}\n icon={icon}\n accessibilityLabel={label}\n color={recipe.color}\n size={recipe.size}\n variant={recipe.variant}\n />\n );\n}\n\nexport const IconButton = withZoraThemeScope(IconButtonInner);\n"]}
@@ -1,11 +1,11 @@
1
1
  import type { ButtonIconSpec } from '@ankhorage/surface';
2
- import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
2
+ import type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../../internal/recipes';
3
3
  import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
4
4
  export interface IconButtonProps extends ZoraBaseProps {
5
5
  icon: ButtonIconSpec;
6
6
  label: string;
7
- emphasis?: ZoraEmphasis;
8
- tone?: ZoraTone;
7
+ variant?: ZoraButtonVariant;
8
+ color?: ZoraColor;
9
9
  size?: ZoraControlSize;
10
10
  disabled?: boolean;
11
11
  loading?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\n\nimport type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface IconButtonProps extends ZoraBaseProps {\n icon: ButtonIconSpec;\n label: string;\n emphasis?: ZoraEmphasis;\n tone?: ZoraTone;\n size?: ZoraControlSize;\n disabled?: boolean;\n loading?: boolean;\n onPress?: () => void;\n testID?: string;\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\n\nimport type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface IconButtonProps extends ZoraBaseProps {\n icon: ButtonIconSpec;\n label: string;\n variant?: ZoraButtonVariant;\n color?: ZoraColor;\n size?: ZoraControlSize;\n disabled?: boolean;\n loading?: boolean;\n onPress?: () => void;\n testID?: string;\n}\n"]}
@@ -8,7 +8,7 @@ function InputInner({ themeId: _themeId, mode: _mode, size = 'l', leadingIcon, t
8
8
  const { theme } = useZoraTheme();
9
9
  const iconSize = resolveIconSize(size);
10
10
  const iconColor = theme.semantics.content.muted;
11
- return (<Surface.TextInput {...props} disabled={disabled} leadingAccessory={leadingIcon ? (<Surface.Icon color={iconColor} name={leadingIcon.name} provider={leadingIcon.provider} size={iconSize}/>) : undefined} readOnly={readOnly} size={size} trailingAccessory={trailingAction ? (<IconButton icon={trailingAction.icon} label={trailingAction.label} disabled={disabled ?? readOnly} emphasis="ghost" size={size === 'l' ? 'm' : size} tone="neutral" onPress={trailingAction.onPress}/>) : trailingIcon ? (<Surface.Icon color={iconColor} name={trailingIcon.name} provider={trailingIcon.provider} size={iconSize}/>) : undefined}/>);
11
+ return (<Surface.TextInput {...props} disabled={disabled} leadingAccessory={leadingIcon ? (<Surface.Icon color={iconColor} name={leadingIcon.name} provider={leadingIcon.provider} size={iconSize}/>) : undefined} readOnly={readOnly} size={size} trailingAccessory={trailingAction ? (<IconButton icon={trailingAction.icon} label={trailingAction.label} disabled={disabled ?? readOnly} variant="ghost" size={size === 'l' ? 'm' : size} color="neutral" onPress={trailingAction.onPress}/>) : trailingIcon ? (<Surface.Icon color={iconColor} name={trailingIcon.name} provider={trailingIcon.provider} size={iconSize}/>) : undefined}/>);
12
12
  }
13
13
  export const Input = withZoraThemeScope(InputInner);
14
14
  //# sourceMappingURL=Input.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,GAAG,GAAG,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACG;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;IAEhD,OAAO,CACL,CAAC,OAAO,CAAC,SAAS,CAChB,IAAI,KAAK,CAAC,CACV,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,gBAAgB,CAAC,CACf,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,OAAO,CAAC,IAAI,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CACvB,QAAQ,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAC/B,IAAI,CAAC,CAAC,QAAQ,CAAC,EACf,CACH,CAAC,CAAC,CAAC,SACN,CAAC,CACD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,iBAAiB,CAAC,CAChB,cAAc,CAAC,CAAC,CAAC,CACf,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1B,KAAK,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAC5B,QAAQ,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAC/B,QAAQ,CAAC,OAAO,CAChB,IAAI,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAChC,IAAI,CAAC,SAAS,CACd,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,EAChC,CACH,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CACjB,CAAC,OAAO,CAAC,IAAI,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CACxB,QAAQ,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAChC,IAAI,CAAC,CAAC,QAAQ,CAAC,EACf,CACH,CAAC,CAAC,CAAC,SACN,CAAC,EACD,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import * as Surface from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { IconButton } from '../icon-button';\nimport type { InputProps } from './types';\n\nfunction InputInner({\n themeId: _themeId,\n mode: _mode,\n size = 'l',\n leadingIcon,\n trailingIcon,\n trailingAction,\n disabled,\n readOnly,\n ...props\n}: InputProps) {\n const { theme } = useZoraTheme();\n const iconSize = resolveIconSize(size);\n const iconColor = theme.semantics.content.muted;\n\n return (\n <Surface.TextInput\n {...props}\n disabled={disabled}\n leadingAccessory={\n leadingIcon ? (\n <Surface.Icon\n color={iconColor}\n name={leadingIcon.name}\n provider={leadingIcon.provider}\n size={iconSize}\n />\n ) : undefined\n }\n readOnly={readOnly}\n size={size}\n trailingAccessory={\n trailingAction ? (\n <IconButton\n icon={trailingAction.icon}\n label={trailingAction.label}\n disabled={disabled ?? readOnly}\n emphasis=\"ghost\"\n size={size === 'l' ? 'm' : size}\n tone=\"neutral\"\n onPress={trailingAction.onPress}\n />\n ) : trailingIcon ? (\n <Surface.Icon\n color={iconColor}\n name={trailingIcon.name}\n provider={trailingIcon.provider}\n size={iconSize}\n />\n ) : undefined\n }\n />\n );\n}\n\nexport const Input = withZoraThemeScope(InputInner);\n"]}
1
+ {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,GAAG,GAAG,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACG;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;IAEhD,OAAO,CACL,CAAC,OAAO,CAAC,SAAS,CAChB,IAAI,KAAK,CAAC,CACV,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,gBAAgB,CAAC,CACf,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,OAAO,CAAC,IAAI,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CACvB,QAAQ,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAC/B,IAAI,CAAC,CAAC,QAAQ,CAAC,EACf,CACH,CAAC,CAAC,CAAC,SACN,CAAC,CACD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,iBAAiB,CAAC,CAChB,cAAc,CAAC,CAAC,CAAC,CACf,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1B,KAAK,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAC5B,QAAQ,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAC/B,OAAO,CAAC,OAAO,CACf,IAAI,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAChC,KAAK,CAAC,SAAS,CACf,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,EAChC,CACH,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CACjB,CAAC,OAAO,CAAC,IAAI,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CACxB,QAAQ,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAChC,IAAI,CAAC,CAAC,QAAQ,CAAC,EACf,CACH,CAAC,CAAC,CAAC,SACN,CAAC,EACD,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import * as Surface from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { IconButton } from '../icon-button';\nimport type { InputProps } from './types';\n\nfunction InputInner({\n themeId: _themeId,\n mode: _mode,\n size = 'l',\n leadingIcon,\n trailingIcon,\n trailingAction,\n disabled,\n readOnly,\n ...props\n}: InputProps) {\n const { theme } = useZoraTheme();\n const iconSize = resolveIconSize(size);\n const iconColor = theme.semantics.content.muted;\n\n return (\n <Surface.TextInput\n {...props}\n disabled={disabled}\n leadingAccessory={\n leadingIcon ? (\n <Surface.Icon\n color={iconColor}\n name={leadingIcon.name}\n provider={leadingIcon.provider}\n size={iconSize}\n />\n ) : undefined\n }\n readOnly={readOnly}\n size={size}\n trailingAccessory={\n trailingAction ? (\n <IconButton\n icon={trailingAction.icon}\n label={trailingAction.label}\n disabled={disabled ?? readOnly}\n variant=\"ghost\"\n size={size === 'l' ? 'm' : size}\n color=\"neutral\"\n onPress={trailingAction.onPress}\n />\n ) : trailingIcon ? (\n <Surface.Icon\n color={iconColor}\n name={trailingIcon.name}\n provider={trailingIcon.provider}\n size={iconSize}\n />\n ) : undefined\n }\n />\n );\n}\n\nexport const Input = withZoraThemeScope(InputInner);\n"]}
@@ -40,14 +40,14 @@ function MediaCardInner({ themeId: _themeId, mode: _mode, testID, imageSource, i
40
40
  {hasHeader ? (<Stack align={{ base: 'flex-start', md: 'center' }} direction={{ base: 'column', md: 'row' }} gap="m" justify="space-between">
41
41
  <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
42
42
  <Stack gap="xs">
43
- {eyebrow ? (<Text tone="muted" variant="caption" weight="semiBold">
43
+ {eyebrow ? (<Text emphasis="muted" variant="caption" weight="semiBold">
44
44
  {eyebrow}
45
45
  </Text>) : null}
46
46
  <Stack gap="xs">
47
47
  <Heading level={compact ? 4 : 3}>{title}</Heading>
48
48
  {badges ? <Box>{badges}</Box> : null}
49
49
  </Stack>
50
- {description ? (<Text tone="muted" variant="bodySmall">
50
+ {description ? (<Text emphasis="muted" variant="bodySmall">
51
51
  {description}
52
52
  </Text>) : null}
53
53
  </Stack>
@@ -1 +1 @@
1
- {"version":3,"file":"MediaCard.js","sourceRoot":"","sources":["../../../src/components/media-card/MediaCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Image } from 'react-native';\n\nimport { Box, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Card } from '../card';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { MediaCardProps } from './types';\n\nfunction resolveImageAspectRatio(\n imageAspectRatio: NonNullable<MediaCardProps['imageAspectRatio']>,\n) {\n if (!Number.isFinite(imageAspectRatio) || imageAspectRatio <= 0) {\n return 16 / 9;\n }\n\n return imageAspectRatio;\n}\n\nfunction MediaCardInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n imageSource,\n imageLabel,\n image,\n imageAspectRatio = 16 / 9,\n title,\n description,\n eyebrow,\n badges,\n actions,\n footer,\n children,\n tone = 'default',\n compact = false,\n onPress,\n}: MediaCardProps) {\n const { theme } = useZoraTheme();\n const gap = compact ? 's' : 'm';\n const isInteractive = Boolean(onPress) && !actions;\n const resolvedAspectRatio = resolveImageAspectRatio(imageAspectRatio);\n\n const renderImage = () => {\n if (image) {\n return (\n <Box radius=\"m\" style={{ overflow: 'hidden' }}>\n {image}\n </Box>\n );\n }\n\n if (!imageSource) {\n return null;\n }\n\n return (\n <Box bg={theme.semantics.neutral.surface} radius=\"m\" style={{ overflow: 'hidden' }}>\n <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>\n <Image\n accessibilityLabel={imageLabel}\n source={imageSource}\n style={{ height: '100%', width: '100%' }}\n />\n </Box>\n </Box>\n );\n };\n\n const hasHeader = [eyebrow, title, description, badges, actions].some((item) => item != null);\n\n return (\n <Card\n compact={compact}\n onPress={isInteractive ? onPress : undefined}\n testID={testID}\n tone={tone}\n >\n <Stack gap={gap}>\n {renderImage()}\n\n {hasHeader ? (\n <Stack\n align={{ base: 'flex-start', md: 'center' }}\n direction={{ base: 'column', md: 'row' }}\n gap=\"m\"\n justify=\"space-between\"\n >\n <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>\n <Stack gap=\"xs\">\n {eyebrow ? (\n <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n {eyebrow}\n </Text>\n ) : null}\n <Stack gap=\"xs\">\n <Heading level={compact ? 4 : 3}>{title}</Heading>\n {badges ? <Box>{badges}</Box> : null}\n </Stack>\n {description ? (\n <Text tone=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n </Box>\n {actions ? <Box>{actions}</Box> : null}\n </Stack>\n ) : null}\n\n {children ? <Box>{children}</Box> : null}\n {footer ? <Box pt=\"xs\">{footer}</Box> : null}\n </Stack>\n </Card>\n );\n}\n\nexport const MediaCard = withZoraThemeScope(MediaCardInner);\n"]}
1
+ {"version":3,"file":"MediaCard.js","sourceRoot":"","sources":["../../../src/components/media-card/MediaCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Image } from 'react-native';\n\nimport { Box, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Card } from '../card';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { MediaCardProps } from './types';\n\nfunction resolveImageAspectRatio(\n imageAspectRatio: NonNullable<MediaCardProps['imageAspectRatio']>,\n) {\n if (!Number.isFinite(imageAspectRatio) || imageAspectRatio <= 0) {\n return 16 / 9;\n }\n\n return imageAspectRatio;\n}\n\nfunction MediaCardInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n imageSource,\n imageLabel,\n image,\n imageAspectRatio = 16 / 9,\n title,\n description,\n eyebrow,\n badges,\n actions,\n footer,\n children,\n tone = 'default',\n compact = false,\n onPress,\n}: MediaCardProps) {\n const { theme } = useZoraTheme();\n const gap = compact ? 's' : 'm';\n const isInteractive = Boolean(onPress) && !actions;\n const resolvedAspectRatio = resolveImageAspectRatio(imageAspectRatio);\n\n const renderImage = () => {\n if (image) {\n return (\n <Box radius=\"m\" style={{ overflow: 'hidden' }}>\n {image}\n </Box>\n );\n }\n\n if (!imageSource) {\n return null;\n }\n\n return (\n <Box bg={theme.semantics.neutral.surface} radius=\"m\" style={{ overflow: 'hidden' }}>\n <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>\n <Image\n accessibilityLabel={imageLabel}\n source={imageSource}\n style={{ height: '100%', width: '100%' }}\n />\n </Box>\n </Box>\n );\n };\n\n const hasHeader = [eyebrow, title, description, badges, actions].some((item) => item != null);\n\n return (\n <Card\n compact={compact}\n onPress={isInteractive ? onPress : undefined}\n testID={testID}\n tone={tone}\n >\n <Stack gap={gap}>\n {renderImage()}\n\n {hasHeader ? (\n <Stack\n align={{ base: 'flex-start', md: 'center' }}\n direction={{ base: 'column', md: 'row' }}\n gap=\"m\"\n justify=\"space-between\"\n >\n <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>\n <Stack gap=\"xs\">\n {eyebrow ? (\n <Text emphasis=\"muted\" variant=\"caption\" weight=\"semiBold\">\n {eyebrow}\n </Text>\n ) : null}\n <Stack gap=\"xs\">\n <Heading level={compact ? 4 : 3}>{title}</Heading>\n {badges ? <Box>{badges}</Box> : null}\n </Stack>\n {description ? (\n <Text emphasis=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n </Box>\n {actions ? <Box>{actions}</Box> : null}\n </Stack>\n ) : null}\n\n {children ? <Box>{children}</Box> : null}\n {footer ? <Box pt=\"xs\">{footer}</Box> : null}\n </Stack>\n </Card>\n );\n}\n\nexport const MediaCard = withZoraThemeScope(MediaCardInner);\n"]}
@@ -8,10 +8,10 @@ import { Card } from '../card';
8
8
  import { Heading } from '../heading';
9
9
  import { Icon } from '../icon';
10
10
  import { Text } from '../text';
11
- function MetricCardInner({ themeId: _themeId, mode: _mode, testID, label, value, description, icon, delta, deltaTone = 'neutral', actions, tone = 'default', compact = false, onPress, }) {
11
+ function MetricCardInner({ themeId: _themeId, mode: _mode, testID, label, value, description, icon, delta, deltaColor = 'neutral', actions, tone = 'default', compact = false, onPress, }) {
12
12
  const { theme } = useZoraTheme();
13
13
  const isInteractive = Boolean(onPress) && !actions;
14
- const badgeRecipe = resolveBadgeRecipe({ tone: deltaTone, emphasis: 'soft', size: 's' });
14
+ const badgeRecipe = resolveBadgeRecipe({ color: deltaColor, variant: 'soft', size: 's' });
15
15
  const iconColor = theme.semantics.content.muted;
16
16
  return (<Card compact={compact} onPress={isInteractive ? onPress : undefined} testID={testID} tone={tone}>
17
17
  <Stack gap={compact ? 's' : 'm'}>
@@ -19,17 +19,17 @@ function MetricCardInner({ themeId: _themeId, mode: _mode, testID, label, value,
19
19
  <Stack flex={1} gap="xs">
20
20
  <Inline align="center" gap="xs" wrap="wrap">
21
21
  {icon ? (<Icon color={iconColor} name={icon.name} provider={icon.provider} size={resolveIconSize('s')}/>) : null}
22
- <Text tone="muted" variant="caption" weight="semiBold">
22
+ <Text emphasis="muted" variant="caption" weight="semiBold">
23
23
  {label}
24
24
  </Text>
25
- {delta != null ? (<Badge emphasis={badgeRecipe.variant} size={badgeRecipe.size} tone={badgeRecipe.tone}>
25
+ {delta != null ? (<Badge variant={badgeRecipe.variant} size={badgeRecipe.size} color={badgeRecipe.color}>
26
26
  {delta}
27
27
  </Badge>) : null}
28
28
  </Inline>
29
29
 
30
30
  <Heading level={compact ? 3 : 2}>{value}</Heading>
31
31
 
32
- {description ? (<Text tone="muted" variant="bodySmall">
32
+ {description ? (<Text emphasis="muted" variant="bodySmall">
33
33
  {description}
34
34
  </Text>) : null}
35
35
  </Stack>
@@ -1 +1 @@
1
- {"version":3,"file":"MetricCard.js","sourceRoot":"","sources":["../../../src/components/metric-card/MetricCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,SAAS,EACrB,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,GACS;IAChB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;IAEnD,MAAM,WAAW,GAAG,kBAAkB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;IACzF,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;IAEhD,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC7C,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,CAAC,CAAC,IAAI,CAAC,CAEX;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAC9B;QAAA,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,eAAe,CACxD;UAAA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CACtB;YAAA,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CACzC;cAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,IAAI,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,EAC3B,CACH,CAAC,CAAC,CAAC,IAAI,CACR;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CACpD;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,IAAI,CACN;cAAA,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CACf,CAAC,KAAK,CACJ,QAAQ,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAC9B,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CACvB,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAEvB;kBAAA,CAAC,KAAK,CACR;gBAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,IAAI,CACV;YAAA,EAAE,MAAM,CAER;;YAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CAEjD;;YAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACpC;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;UAAA,EAAE,KAAK,CAEP;;UAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;QAAA,EAAE,MAAM,CACV;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box, Inline, Stack } from '../../foundation';\nimport { resolveBadgeRecipe, resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Badge } from '../badge';\nimport { Card } from '../card';\nimport { Heading } from '../heading';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport type { MetricCardProps } from './types';\n\nfunction MetricCardInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n label,\n value,\n description,\n icon,\n delta,\n deltaTone = 'neutral',\n actions,\n tone = 'default',\n compact = false,\n onPress,\n}: MetricCardProps) {\n const { theme } = useZoraTheme();\n const isInteractive = Boolean(onPress) && !actions;\n\n const badgeRecipe = resolveBadgeRecipe({ tone: deltaTone, emphasis: 'soft', size: 's' });\n const iconColor = theme.semantics.content.muted;\n\n return (\n <Card\n compact={compact}\n onPress={isInteractive ? onPress : undefined}\n testID={testID}\n tone={tone}\n >\n <Stack gap={compact ? 's' : 'm'}>\n <Inline align=\"flex-start\" gap=\"m\" justify=\"space-between\">\n <Stack flex={1} gap=\"xs\">\n <Inline align=\"center\" gap=\"xs\" wrap=\"wrap\">\n {icon ? (\n <Icon\n color={iconColor}\n name={icon.name}\n provider={icon.provider}\n size={resolveIconSize('s')}\n />\n ) : null}\n <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n {label}\n </Text>\n {delta != null ? (\n <Badge\n emphasis={badgeRecipe.variant}\n size={badgeRecipe.size}\n tone={badgeRecipe.tone}\n >\n {delta}\n </Badge>\n ) : null}\n </Inline>\n\n <Heading level={compact ? 3 : 2}>{value}</Heading>\n\n {description ? (\n <Text tone=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n\n {actions ? <Box>{actions}</Box> : null}\n </Inline>\n </Stack>\n </Card>\n );\n}\n\nexport const MetricCard = withZoraThemeScope(MetricCardInner);\n"]}
1
+ {"version":3,"file":"MetricCard.js","sourceRoot":"","sources":["../../../src/components/metric-card/MetricCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Box, Inline, Stack } from '../../foundation';\nimport { resolveBadgeRecipe, resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Badge } from '../badge';\nimport { Card } from '../card';\nimport { Heading } from '../heading';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport type { MetricCardProps } from './types';\n\nfunction MetricCardInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n label,\n value,\n description,\n icon,\n delta,\n deltaColor = 'neutral',\n actions,\n tone = 'default',\n compact = false,\n onPress,\n}: MetricCardProps) {\n const { theme } = useZoraTheme();\n const isInteractive = Boolean(onPress) && !actions;\n\n const badgeRecipe = resolveBadgeRecipe({ color: deltaColor, variant: 'soft', size: 's' });\n const iconColor = theme.semantics.content.muted;\n\n return (\n <Card\n compact={compact}\n onPress={isInteractive ? onPress : undefined}\n testID={testID}\n tone={tone}\n >\n <Stack gap={compact ? 's' : 'm'}>\n <Inline align=\"flex-start\" gap=\"m\" justify=\"space-between\">\n <Stack flex={1} gap=\"xs\">\n <Inline align=\"center\" gap=\"xs\" wrap=\"wrap\">\n {icon ? (\n <Icon\n color={iconColor}\n name={icon.name}\n provider={icon.provider}\n size={resolveIconSize('s')}\n />\n ) : null}\n <Text emphasis=\"muted\" variant=\"caption\" weight=\"semiBold\">\n {label}\n </Text>\n {delta != null ? (\n <Badge\n variant={badgeRecipe.variant}\n size={badgeRecipe.size}\n color={badgeRecipe.color}\n >\n {delta}\n </Badge>\n ) : null}\n </Inline>\n\n <Heading level={compact ? 3 : 2}>{value}</Heading>\n\n {description ? (\n <Text emphasis=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n\n {actions ? <Box>{actions}</Box> : null}\n </Inline>\n </Stack>\n </Card>\n );\n}\n\nexport const MetricCard = withZoraThemeScope(MetricCardInner);\n"]}
@@ -1,6 +1,6 @@
1
1
  import type { ButtonIconSpec } from '@ankhorage/surface';
2
2
  import type React from 'react';
3
- import type { ZoraCardTone, ZoraTone } from '../../internal/recipes';
3
+ import type { ZoraCardTone, ZoraColor } from '../../internal/recipes';
4
4
  import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
5
5
  export interface MetricCardProps extends ZoraBaseProps {
6
6
  label: React.ReactNode;
@@ -8,7 +8,7 @@ export interface MetricCardProps extends ZoraBaseProps {
8
8
  description?: React.ReactNode;
9
9
  icon?: ButtonIconSpec;
10
10
  delta?: React.ReactNode;
11
- deltaTone?: ZoraTone;
11
+ deltaColor?: ZoraColor;
12
12
  actions?: React.ReactNode;
13
13
  tone?: ZoraCardTone;
14
14
  compact?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/metric-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/metric-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/metric-card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraCardTone, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface MetricCardProps extends ZoraBaseProps {\n label: React.ReactNode;\n value: React.ReactNode;\n description?: React.ReactNode;\n icon?: ButtonIconSpec;\n delta?: React.ReactNode;\n deltaTone?: ZoraTone;\n actions?: React.ReactNode;\n tone?: ZoraCardTone;\n compact?: boolean;\n onPress?: () => void;\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/metric-card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraCardTone, ZoraColor } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface MetricCardProps extends ZoraBaseProps {\n label: React.ReactNode;\n value: React.ReactNode;\n description?: React.ReactNode;\n icon?: ButtonIconSpec;\n delta?: React.ReactNode;\n deltaColor?: ZoraColor;\n actions?: React.ReactNode;\n tone?: ZoraCardTone;\n compact?: boolean;\n onPress?: () => void;\n}\n"]}
@@ -22,7 +22,7 @@ function ModalInner({ themeId: _themeId, mode: _mode, children, title, descripti
22
22
  <Stack gap="m">
23
23
  {hasHeader ? (<Stack gap="xs">
24
24
  {title ? <Heading level={3}>{title}</Heading> : null}
25
- {description ? (<Text tone="muted" variant="bodySmall">
25
+ {description ? (<Text emphasis="muted" variant="bodySmall">
26
26
  {description}
27
27
  </Text>) : null}
28
28
  </Stack>) : null}
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,iBAAiB,CAAC,QAAkC;IAC3D,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,WAAW,CAAC,GAAG,EAAE;QACtB,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,GAAG,SAAS,EACjB,SAAS,EACT,GAAG,KAAK,EACG;IACX,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC;IACvD,MAAM,eAAe,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAErD,OAAO,CACL,CAAC,YAAY,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAClD;MAAA,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CACtF;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;cAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CACpD;cAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACpC;kBAAA,CAAC,WAAW,CACd;gBAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;YAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;UAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC9C;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,YAAY,CAAC,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import { Modal as SurfaceModal } from '@ankhorage/surface';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport { Box, Stack } from '../../foundation';\nimport { resolveDialogWidth } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { ModalProps } from './types';\n\nfunction useStableCallback(callback: (() => void) | undefined): (() => void) | undefined {\n const callbackRef = useRef(callback);\n\n useEffect(() => {\n callbackRef.current = callback;\n }, [callback]);\n\n return useCallback(() => {\n callbackRef.current?.();\n }, []);\n}\n\nfunction ModalInner({\n themeId: _themeId,\n mode: _mode,\n children,\n title,\n description,\n footer,\n width = 'default',\n onDismiss,\n ...props\n}: ModalProps) {\n const hasHeader = title != null || description != null;\n const stableOnDismiss = useStableCallback(onDismiss);\n\n return (\n <SurfaceModal {...props} onDismiss={stableOnDismiss}>\n <Box maxWidth={resolveDialogWidth(width)} style={{ alignSelf: 'center', width: '100%' }}>\n <Stack gap=\"m\">\n {hasHeader ? (\n <Stack gap=\"xs\">\n {title ? <Heading level={3}>{title}</Heading> : null}\n {description ? (\n <Text tone=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n ) : null}\n {children ? <Box>{children}</Box> : null}\n {footer ? <Box pt=\"xs\">{footer}</Box> : null}\n </Stack>\n </Box>\n </SurfaceModal>\n );\n}\n\nexport const Modal = withZoraThemeScope(ModalInner);\n"]}
1
+ {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,iBAAiB,CAAC,QAAkC;IAC3D,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,WAAW,CAAC,GAAG,EAAE;QACtB,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,GAAG,SAAS,EACjB,SAAS,EACT,GAAG,KAAK,EACG;IACX,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC;IACvD,MAAM,eAAe,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAErD,OAAO,CACL,CAAC,YAAY,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAClD;MAAA,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CACtF;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;cAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CACpD;cAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACxC;kBAAA,CAAC,WAAW,CACd;gBAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;YAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;UAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC9C;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,YAAY,CAAC,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import { Modal as SurfaceModal } from '@ankhorage/surface';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport { Box, Stack } from '../../foundation';\nimport { resolveDialogWidth } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { ModalProps } from './types';\n\nfunction useStableCallback(callback: (() => void) | undefined): (() => void) | undefined {\n const callbackRef = useRef(callback);\n\n useEffect(() => {\n callbackRef.current = callback;\n }, [callback]);\n\n return useCallback(() => {\n callbackRef.current?.();\n }, []);\n}\n\nfunction ModalInner({\n themeId: _themeId,\n mode: _mode,\n children,\n title,\n description,\n footer,\n width = 'default',\n onDismiss,\n ...props\n}: ModalProps) {\n const hasHeader = title != null || description != null;\n const stableOnDismiss = useStableCallback(onDismiss);\n\n return (\n <SurfaceModal {...props} onDismiss={stableOnDismiss}>\n <Box maxWidth={resolveDialogWidth(width)} style={{ alignSelf: 'center', width: '100%' }}>\n <Stack gap=\"m\">\n {hasHeader ? (\n <Stack gap=\"xs\">\n {title ? <Heading level={3}>{title}</Heading> : null}\n {description ? (\n <Text emphasis=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n ) : null}\n {children ? <Box>{children}</Box> : null}\n {footer ? <Box pt=\"xs\">{footer}</Box> : null}\n </Stack>\n </Box>\n </SurfaceModal>\n );\n}\n\nexport const Modal = withZoraThemeScope(ModalInner);\n"]}
@@ -15,11 +15,11 @@ function resolveProgressHeight(size) {
15
15
  return 8;
16
16
  }
17
17
  }
18
- function ProgressInner({ themeId: _themeId, mode: _mode, testID, value, max = 100, tone = 'primary', size = 'm', }) {
18
+ function ProgressInner({ themeId: _themeId, mode: _mode, testID, value, max = 100, color = 'primary', size = 'm', }) {
19
19
  const { theme } = useZoraTheme();
20
20
  const fraction = resolveProgressFraction({ value, max });
21
21
  const height = resolveProgressHeight(size);
22
- const role = resolveProgressRole(theme, tone);
22
+ const role = resolveProgressRole(theme, color);
23
23
  return (<Box accessibilityRole="progressbar" bg={theme.semantics.neutral.surface} borderColor={theme.semantics.neutral.divider} borderWidth={1} radius="full" testID={testID} style={{ height, overflow: 'hidden' }}>
24
24
  <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }}/>
25
25
  </Box>);
@@ -1 +1 @@
1
- {"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAsB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAElE,SAAS,qBAAqB,CAAC,IAAwC;IACrE,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG,CAAC;QACT;YACE,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,GAAG,GAAG,GAAG,EACT,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,GAAG,GACI;IACd,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,uBAAuB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,IAAI,GAAG,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAE9C,OAAO,CACL,CAAC,GAAG,CACF,iBAAiB,CAAC,aAAa,CAC/B,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CACpC,WAAW,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAC7C,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,MAAM,CAAC,MAAM,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAEtC;MAAA,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG,EAAE,CAAC,EAC7E;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { resolveProgressFraction } from './resolveProgressFraction';\nimport { type ProgressProps, resolveProgressRole } from './types';\n\nfunction resolveProgressHeight(size: NonNullable<ProgressProps['size']>): number {\n switch (size) {\n case 's':\n return 4;\n case 'm':\n return 6;\n case 'l':\n default:\n return 8;\n }\n}\n\nfunction ProgressInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n value,\n max = 100,\n tone = 'primary',\n size = 'm',\n}: ProgressProps) {\n const { theme } = useZoraTheme();\n const fraction = resolveProgressFraction({ value, max });\n const height = resolveProgressHeight(size);\n const role = resolveProgressRole(theme, tone);\n\n return (\n <Box\n accessibilityRole=\"progressbar\"\n bg={theme.semantics.neutral.surface}\n borderColor={theme.semantics.neutral.divider}\n borderWidth={1}\n radius=\"full\"\n testID={testID}\n style={{ height, overflow: 'hidden' }}\n >\n <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />\n </Box>\n );\n}\n\nexport const Progress = withZoraThemeScope(ProgressInner);\n"]}
1
+ {"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAsB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAElE,SAAS,qBAAqB,CAAC,IAAwC;IACrE,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG,CAAC;QACT;YACE,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,GACI;IACd,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,uBAAuB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,IAAI,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAE/C,OAAO,CACL,CAAC,GAAG,CACF,iBAAiB,CAAC,aAAa,CAC/B,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CACpC,WAAW,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAC7C,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,MAAM,CAAC,MAAM,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAEtC;MAAA,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG,EAAE,CAAC,EAC7E;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { resolveProgressFraction } from './resolveProgressFraction';\nimport { type ProgressProps, resolveProgressRole } from './types';\n\nfunction resolveProgressHeight(size: NonNullable<ProgressProps['size']>): number {\n switch (size) {\n case 's':\n return 4;\n case 'm':\n return 6;\n case 'l':\n default:\n return 8;\n }\n}\n\nfunction ProgressInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n value,\n max = 100,\n color = 'primary',\n size = 'm',\n}: ProgressProps) {\n const { theme } = useZoraTheme();\n const fraction = resolveProgressFraction({ value, max });\n const height = resolveProgressHeight(size);\n const role = resolveProgressRole(theme, color);\n\n return (\n <Box\n accessibilityRole=\"progressbar\"\n bg={theme.semantics.neutral.surface}\n borderColor={theme.semantics.neutral.divider}\n borderWidth={1}\n radius=\"full\"\n testID={testID}\n style={{ height, overflow: 'hidden' }}\n >\n <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />\n </Box>\n );\n}\n\nexport const Progress = withZoraThemeScope(ProgressInner);\n"]}
@@ -1,11 +1,11 @@
1
1
  import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
2
- import type { ZoraControlSize, ZoraTone } from '../../internal/recipes';
2
+ import type { ZoraColor, ZoraControlSize } from '../../internal/recipes';
3
3
  import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
4
4
  export interface ProgressProps extends ZoraBaseProps {
5
5
  value: number;
6
6
  max?: number;
7
- tone?: ZoraTone;
7
+ color?: ZoraColor;
8
8
  size?: ZoraControlSize;
9
9
  }
10
- export declare function resolveProgressRole(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics;
10
+ export declare function resolveProgressRole(theme: SurfaceTheme, color: ZoraColor): RoleSemantics;
11
11
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/progress/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,GAAG,aAAa,CActF"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/progress/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,GAAG,aAAa,CAwBxF"}
@@ -1,5 +1,15 @@
1
- export function resolveProgressRole(theme, tone) {
2
- switch (tone) {
1
+ export function resolveProgressRole(theme, color) {
2
+ switch (color) {
3
+ case 'secondary':
4
+ return theme.semantics.secondary;
5
+ case 'tertiary':
6
+ return theme.semantics.accent;
7
+ case 'quaternary':
8
+ return theme.semantics.highlight;
9
+ case 'error':
10
+ return theme.semantics.error;
11
+ case 'info':
12
+ return theme.semantics.info;
3
13
  case 'primary':
4
14
  return theme.semantics.action.primary;
5
15
  case 'danger':
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/progress/types.ts"],"names":[],"mappings":"AAYA,MAAM,UAAU,mBAAmB,CAAC,KAAmB,EAAE,IAAc;IACrE,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;QACxC,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;QACvC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACjC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACjC,KAAK,SAAS,CAAC;QACf;YACE,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;IAC1C,CAAC;AACH,CAAC","sourcesContent":["import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\n\nimport type { ZoraControlSize, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ProgressProps extends ZoraBaseProps {\n value: number;\n max?: number;\n tone?: ZoraTone;\n size?: ZoraControlSize;\n}\n\nexport function resolveProgressRole(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {\n switch (tone) {\n case 'primary':\n return theme.semantics.action.primary;\n case 'danger':\n return theme.semantics.action.danger;\n case 'success':\n return theme.semantics.success;\n case 'warning':\n return theme.semantics.warning;\n case 'neutral':\n default:\n return theme.semantics.action.neutral;\n }\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/progress/types.ts"],"names":[],"mappings":"AAYA,MAAM,UAAU,mBAAmB,CAAC,KAAmB,EAAE,KAAgB;IACvE,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,WAAW;YACd,OAAO,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;QACnC,KAAK,UAAU;YACb,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;QAChC,KAAK,YAAY;YACf,OAAO,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;QACnC,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;QAC/B,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;QAC9B,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;QACxC,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;QACvC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACjC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACjC,KAAK,SAAS,CAAC;QACf;YACE,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;IAC1C,CAAC;AACH,CAAC","sourcesContent":["import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\n\nimport type { ZoraColor, ZoraControlSize } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ProgressProps extends ZoraBaseProps {\n value: number;\n max?: number;\n color?: ZoraColor;\n size?: ZoraControlSize;\n}\n\nexport function resolveProgressRole(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {\n switch (color) {\n case 'secondary':\n return theme.semantics.secondary;\n case 'tertiary':\n return theme.semantics.accent;\n case 'quaternary':\n return theme.semantics.highlight;\n case 'error':\n return theme.semantics.error;\n case 'info':\n return theme.semantics.info;\n case 'primary':\n return theme.semantics.action.primary;\n case 'danger':\n return theme.semantics.action.danger;\n case 'success':\n return theme.semantics.success;\n case 'warning':\n return theme.semantics.warning;\n case 'neutral':\n default:\n return theme.semantics.action.neutral;\n }\n}\n"]}
@@ -4,26 +4,26 @@ import { View } from 'react-native';
4
4
  import { Stack } from '../../foundation';
5
5
  import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
6
6
  import { Text } from '../text';
7
- function RadioGroupInner({ themeId: _themeId, mode: _mode, value, onValueChange, options, orientation = 'vertical', gap = 's', tone = 'primary', size = 'm', invalid = false, readOnly = false, disabled = false, testID, }) {
7
+ function RadioGroupInner({ themeId: _themeId, mode: _mode, value, onValueChange, options, orientation = 'vertical', gap = 's', color = 'primary', size = 'm', invalid = false, readOnly = false, disabled = false, testID, }) {
8
8
  const isHorizontal = orientation === 'horizontal';
9
9
  return (<View testID={testID} accessibilityRole="radiogroup" style={{
10
10
  flexDirection: isHorizontal ? 'row' : 'column',
11
11
  flexWrap: isHorizontal ? 'wrap' : 'nowrap',
12
12
  }}>
13
13
  <Stack direction={isHorizontal ? 'row' : 'column'} gap={gap} wrap={isHorizontal ? 'wrap' : 'nowrap'}>
14
- {options.map((option) => (<RadioGroupItem key={option.value} option={option} checked={value === option.value} disabled={disabled || option.disabled === true} invalid={invalid} readOnly={readOnly} size={size} tone={tone} onSelect={onValueChange}/>))}
14
+ {options.map((option) => (<RadioGroupItem key={option.value} option={option} checked={value === option.value} disabled={disabled || option.disabled === true} invalid={invalid} readOnly={readOnly} size={size} color={color} onSelect={onValueChange}/>))}
15
15
  </Stack>
16
16
  </View>);
17
17
  }
18
18
  export const RadioGroup = withZoraThemeScope(RadioGroupInner);
19
- function RadioGroupItem({ option, checked, disabled, invalid, readOnly, size, tone, onSelect, }) {
20
- return (<Radio checked={checked} disabled={disabled} invalid={invalid} readOnly={readOnly} size={size} tone={tone} testID={option.testID} onCheckedChange={(nextChecked) => {
19
+ function RadioGroupItem({ option, checked, disabled, invalid, readOnly, size, color, onSelect, }) {
20
+ return (<Radio checked={checked} disabled={disabled} invalid={invalid} readOnly={readOnly} size={size} color={color} testID={option.testID} onCheckedChange={(nextChecked) => {
21
21
  if (nextChecked)
22
22
  onSelect(option.value);
23
23
  }}>
24
24
  <Stack gap="xs">
25
25
  <Text>{option.label}</Text>
26
- {option.description ? (<Text variant="caption" tone="muted">
26
+ {option.description ? (<Text emphasis="muted" variant="caption">
27
27
  {option.description}
28
28
  </Text>) : null}
29
29
  </Stack>