@kushagradhawan/kookie-ui 0.1.28 → 0.1.30

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 (538) hide show
  1. package/components.css +4742 -2680
  2. package/dist/cjs/components/_internal/base-button.d.ts +36 -0
  3. package/dist/cjs/components/_internal/base-button.d.ts.map +1 -1
  4. package/dist/cjs/components/_internal/base-button.js +1 -1
  5. package/dist/cjs/components/_internal/base-button.js.map +3 -3
  6. package/dist/cjs/components/_internal/base-button.props.d.ts +61 -0
  7. package/dist/cjs/components/_internal/base-button.props.d.ts.map +1 -1
  8. package/dist/cjs/components/_internal/base-button.props.js +1 -1
  9. package/dist/cjs/components/_internal/base-button.props.js.map +3 -3
  10. package/dist/cjs/components/_internal/base-checkbox.props.d.ts +6 -1
  11. package/dist/cjs/components/_internal/base-checkbox.props.d.ts.map +1 -1
  12. package/dist/cjs/components/_internal/base-checkbox.props.js +1 -1
  13. package/dist/cjs/components/_internal/base-checkbox.props.js.map +3 -3
  14. package/dist/cjs/components/_internal/base-menu.props.d.ts +8 -0
  15. package/dist/cjs/components/_internal/base-menu.props.d.ts.map +1 -1
  16. package/dist/cjs/components/_internal/base-menu.props.js +1 -1
  17. package/dist/cjs/components/_internal/base-menu.props.js.map +3 -3
  18. package/dist/cjs/components/_internal/base-radio.props.d.ts +6 -1
  19. package/dist/cjs/components/_internal/base-radio.props.d.ts.map +1 -1
  20. package/dist/cjs/components/_internal/base-radio.props.js +1 -1
  21. package/dist/cjs/components/_internal/base-radio.props.js.map +3 -3
  22. package/dist/cjs/components/accordion.d.ts +22 -0
  23. package/dist/cjs/components/accordion.d.ts.map +1 -0
  24. package/dist/cjs/components/accordion.js +2 -0
  25. package/dist/cjs/components/accordion.js.map +7 -0
  26. package/dist/cjs/components/accordion.props.d.ts +97 -0
  27. package/dist/cjs/components/accordion.props.d.ts.map +1 -0
  28. package/dist/cjs/components/accordion.props.js +2 -0
  29. package/dist/cjs/components/accordion.props.js.map +7 -0
  30. package/dist/cjs/components/alert-dialog.d.ts.map +1 -1
  31. package/dist/cjs/components/alert-dialog.js +1 -1
  32. package/dist/cjs/components/alert-dialog.js.map +3 -3
  33. package/dist/cjs/components/alert-dialog.props.d.ts +69 -2
  34. package/dist/cjs/components/alert-dialog.props.d.ts.map +1 -1
  35. package/dist/cjs/components/alert-dialog.props.js +1 -1
  36. package/dist/cjs/components/alert-dialog.props.js.map +3 -3
  37. package/dist/cjs/components/avatar.d.ts.map +1 -1
  38. package/dist/cjs/components/avatar.js +1 -1
  39. package/dist/cjs/components/avatar.js.map +3 -3
  40. package/dist/cjs/components/avatar.props.d.ts +9 -1
  41. package/dist/cjs/components/avatar.props.d.ts.map +1 -1
  42. package/dist/cjs/components/avatar.props.js +1 -1
  43. package/dist/cjs/components/avatar.props.js.map +3 -3
  44. package/dist/cjs/components/badge.d.ts +8 -1
  45. package/dist/cjs/components/badge.d.ts.map +1 -1
  46. package/dist/cjs/components/badge.js +1 -1
  47. package/dist/cjs/components/badge.js.map +3 -3
  48. package/dist/cjs/components/badge.props.d.ts +14 -6
  49. package/dist/cjs/components/badge.props.d.ts.map +1 -1
  50. package/dist/cjs/components/badge.props.js +1 -1
  51. package/dist/cjs/components/badge.props.js.map +3 -3
  52. package/dist/cjs/components/blockquote.props.d.ts +1 -1
  53. package/dist/cjs/components/button.d.ts +53 -1
  54. package/dist/cjs/components/button.d.ts.map +1 -1
  55. package/dist/cjs/components/button.js +1 -1
  56. package/dist/cjs/components/button.js.map +3 -3
  57. package/dist/cjs/components/button.props.d.ts +17 -0
  58. package/dist/cjs/components/button.props.d.ts.map +1 -1
  59. package/dist/cjs/components/button.props.js.map +2 -2
  60. package/dist/cjs/components/callout.d.ts +4 -0
  61. package/dist/cjs/components/callout.d.ts.map +1 -1
  62. package/dist/cjs/components/callout.js +1 -1
  63. package/dist/cjs/components/callout.js.map +3 -3
  64. package/dist/cjs/components/callout.props.d.ts +9 -1
  65. package/dist/cjs/components/callout.props.d.ts.map +1 -1
  66. package/dist/cjs/components/callout.props.js +1 -1
  67. package/dist/cjs/components/callout.props.js.map +3 -3
  68. package/dist/cjs/components/card.d.ts.map +1 -1
  69. package/dist/cjs/components/card.js +1 -1
  70. package/dist/cjs/components/card.js.map +3 -3
  71. package/dist/cjs/components/card.props.d.ts +5 -0
  72. package/dist/cjs/components/card.props.d.ts.map +1 -1
  73. package/dist/cjs/components/card.props.js +1 -1
  74. package/dist/cjs/components/card.props.js.map +3 -3
  75. package/dist/cjs/components/checkbox-cards.d.ts.map +1 -1
  76. package/dist/cjs/components/checkbox-cards.js +1 -1
  77. package/dist/cjs/components/checkbox-cards.js.map +3 -3
  78. package/dist/cjs/components/checkbox-cards.props.d.ts +2 -2
  79. package/dist/cjs/components/checkbox-cards.props.js +1 -1
  80. package/dist/cjs/components/checkbox-cards.props.js.map +2 -2
  81. package/dist/cjs/components/checkbox-group.props.d.ts +6 -1
  82. package/dist/cjs/components/checkbox-group.props.d.ts.map +1 -1
  83. package/dist/cjs/components/checkbox.d.ts.map +1 -1
  84. package/dist/cjs/components/checkbox.js +1 -1
  85. package/dist/cjs/components/checkbox.js.map +3 -3
  86. package/dist/cjs/components/code.js.map +1 -1
  87. package/dist/cjs/components/code.props.d.ts +1 -1
  88. package/dist/cjs/components/context-menu.d.ts +1 -1
  89. package/dist/cjs/components/context-menu.d.ts.map +1 -1
  90. package/dist/cjs/components/context-menu.js +1 -1
  91. package/dist/cjs/components/context-menu.js.map +3 -3
  92. package/dist/cjs/components/dialog.d.ts.map +1 -1
  93. package/dist/cjs/components/dialog.js +1 -1
  94. package/dist/cjs/components/dialog.js.map +3 -3
  95. package/dist/cjs/components/dialog.props.d.ts +6 -1
  96. package/dist/cjs/components/dialog.props.d.ts.map +1 -1
  97. package/dist/cjs/components/dialog.props.js +1 -1
  98. package/dist/cjs/components/dialog.props.js.map +3 -3
  99. package/dist/cjs/components/dropdown-menu.d.ts +1 -1
  100. package/dist/cjs/components/dropdown-menu.d.ts.map +1 -1
  101. package/dist/cjs/components/dropdown-menu.js +1 -1
  102. package/dist/cjs/components/dropdown-menu.js.map +3 -3
  103. package/dist/cjs/components/heading.props.d.ts +1 -1
  104. package/dist/cjs/components/icon-button.d.ts +79 -1
  105. package/dist/cjs/components/icon-button.d.ts.map +1 -1
  106. package/dist/cjs/components/icon-button.js +4 -1
  107. package/dist/cjs/components/icon-button.js.map +3 -3
  108. package/dist/cjs/components/image.d.ts +131 -12
  109. package/dist/cjs/components/image.d.ts.map +1 -1
  110. package/dist/cjs/components/image.js +1 -1
  111. package/dist/cjs/components/image.js.map +3 -3
  112. package/dist/cjs/components/image.props.d.ts +136 -21
  113. package/dist/cjs/components/image.props.d.ts.map +1 -1
  114. package/dist/cjs/components/image.props.js +1 -1
  115. package/dist/cjs/components/image.props.js.map +3 -3
  116. package/dist/cjs/components/index.d.ts +1 -0
  117. package/dist/cjs/components/index.d.ts.map +1 -1
  118. package/dist/cjs/components/index.js +1 -1
  119. package/dist/cjs/components/index.js.map +3 -3
  120. package/dist/cjs/components/link.props.d.ts +1 -1
  121. package/dist/cjs/components/progress.props.d.ts +2 -2
  122. package/dist/cjs/components/progress.props.js +1 -1
  123. package/dist/cjs/components/progress.props.js.map +2 -2
  124. package/dist/cjs/components/radio-cards.d.ts.map +1 -1
  125. package/dist/cjs/components/radio-cards.js +1 -1
  126. package/dist/cjs/components/radio-cards.js.map +3 -3
  127. package/dist/cjs/components/radio-cards.props.d.ts +2 -2
  128. package/dist/cjs/components/radio-cards.props.js +1 -1
  129. package/dist/cjs/components/radio-cards.props.js.map +2 -2
  130. package/dist/cjs/components/radio.d.ts.map +1 -1
  131. package/dist/cjs/components/radio.js +1 -1
  132. package/dist/cjs/components/radio.js.map +3 -3
  133. package/dist/cjs/components/segmented-control.props.d.ts +3 -3
  134. package/dist/cjs/components/segmented-control.props.js +1 -1
  135. package/dist/cjs/components/segmented-control.props.js.map +2 -2
  136. package/dist/cjs/components/select.d.ts.map +1 -1
  137. package/dist/cjs/components/select.js +1 -1
  138. package/dist/cjs/components/select.js.map +3 -3
  139. package/dist/cjs/components/select.props.d.ts +12 -0
  140. package/dist/cjs/components/select.props.d.ts.map +1 -1
  141. package/dist/cjs/components/select.props.js +1 -1
  142. package/dist/cjs/components/select.props.js.map +2 -2
  143. package/dist/cjs/components/sidebar.d.ts +5 -0
  144. package/dist/cjs/components/sidebar.d.ts.map +1 -1
  145. package/dist/cjs/components/sidebar.js +1 -1
  146. package/dist/cjs/components/sidebar.js.map +3 -3
  147. package/dist/cjs/components/slider.d.ts +5 -0
  148. package/dist/cjs/components/slider.d.ts.map +1 -1
  149. package/dist/cjs/components/slider.js +1 -1
  150. package/dist/cjs/components/slider.js.map +3 -3
  151. package/dist/cjs/components/slider.props.d.ts +10 -2
  152. package/dist/cjs/components/slider.props.d.ts.map +1 -1
  153. package/dist/cjs/components/slider.props.js +1 -1
  154. package/dist/cjs/components/slider.props.js.map +2 -2
  155. package/dist/cjs/components/switch.d.ts.map +1 -1
  156. package/dist/cjs/components/switch.js +1 -1
  157. package/dist/cjs/components/switch.js.map +3 -3
  158. package/dist/cjs/components/switch.props.d.ts +17 -4
  159. package/dist/cjs/components/switch.props.d.ts.map +1 -1
  160. package/dist/cjs/components/switch.props.js +1 -1
  161. package/dist/cjs/components/switch.props.js.map +3 -3
  162. package/dist/cjs/components/tab-nav.d.ts.map +1 -1
  163. package/dist/cjs/components/tab-nav.js +1 -1
  164. package/dist/cjs/components/tab-nav.js.map +3 -3
  165. package/dist/cjs/components/tabs.d.ts.map +1 -1
  166. package/dist/cjs/components/tabs.js +1 -1
  167. package/dist/cjs/components/tabs.js.map +2 -2
  168. package/dist/cjs/components/text-area.d.ts.map +1 -1
  169. package/dist/cjs/components/text-area.js +1 -1
  170. package/dist/cjs/components/text-area.js.map +3 -3
  171. package/dist/cjs/components/text-area.props.d.ts +29 -0
  172. package/dist/cjs/components/text-area.props.d.ts.map +1 -1
  173. package/dist/cjs/components/text-area.props.js +1 -1
  174. package/dist/cjs/components/text-area.props.js.map +3 -3
  175. package/dist/cjs/components/text-field.d.ts.map +1 -1
  176. package/dist/cjs/components/text-field.js +4 -4
  177. package/dist/cjs/components/text-field.js.map +3 -3
  178. package/dist/cjs/components/text-field.props.d.ts +29 -0
  179. package/dist/cjs/components/text-field.props.d.ts.map +1 -1
  180. package/dist/cjs/components/text-field.props.js +1 -1
  181. package/dist/cjs/components/text-field.props.js.map +3 -3
  182. package/dist/cjs/components/text.props.d.ts +1 -1
  183. package/dist/cjs/components/theme.d.ts +3 -0
  184. package/dist/cjs/components/theme.d.ts.map +1 -1
  185. package/dist/cjs/components/theme.js +1 -1
  186. package/dist/cjs/components/theme.js.map +3 -3
  187. package/dist/cjs/components/theme.props.d.ts +14 -0
  188. package/dist/cjs/components/theme.props.d.ts.map +1 -1
  189. package/dist/cjs/components/theme.props.js +1 -1
  190. package/dist/cjs/components/theme.props.js.map +3 -3
  191. package/dist/cjs/components/toggle-button.d.ts +52 -0
  192. package/dist/cjs/components/toggle-button.d.ts.map +1 -1
  193. package/dist/cjs/components/toggle-button.js +1 -1
  194. package/dist/cjs/components/toggle-button.js.map +3 -3
  195. package/dist/cjs/components/toggle-icon-button.d.ts +84 -2
  196. package/dist/cjs/components/toggle-icon-button.d.ts.map +1 -1
  197. package/dist/cjs/components/toggle-icon-button.js +1 -1
  198. package/dist/cjs/components/toggle-icon-button.js.map +3 -3
  199. package/dist/cjs/helpers/extract-margin-props.d.ts +7 -7
  200. package/dist/cjs/hooks/index.d.ts +2 -0
  201. package/dist/cjs/hooks/index.d.ts.map +1 -0
  202. package/dist/cjs/hooks/index.js +2 -0
  203. package/dist/cjs/hooks/index.js.map +7 -0
  204. package/dist/cjs/hooks/use-live-announcer.d.ts +6 -0
  205. package/dist/cjs/hooks/use-live-announcer.d.ts.map +1 -0
  206. package/dist/cjs/hooks/use-live-announcer.js +10 -0
  207. package/dist/cjs/hooks/use-live-announcer.js.map +7 -0
  208. package/dist/cjs/index.d.ts +1 -0
  209. package/dist/cjs/index.d.ts.map +1 -1
  210. package/dist/cjs/index.js +1 -1
  211. package/dist/cjs/index.js.map +2 -2
  212. package/dist/cjs/props/weight.prop.d.ts +1 -1
  213. package/dist/cjs/props/weight.prop.js +1 -1
  214. package/dist/cjs/props/weight.prop.js.map +2 -2
  215. package/dist/esm/components/_internal/base-button.d.ts +36 -0
  216. package/dist/esm/components/_internal/base-button.d.ts.map +1 -1
  217. package/dist/esm/components/_internal/base-button.js +1 -1
  218. package/dist/esm/components/_internal/base-button.js.map +3 -3
  219. package/dist/esm/components/_internal/base-button.props.d.ts +61 -0
  220. package/dist/esm/components/_internal/base-button.props.d.ts.map +1 -1
  221. package/dist/esm/components/_internal/base-button.props.js +1 -1
  222. package/dist/esm/components/_internal/base-button.props.js.map +3 -3
  223. package/dist/esm/components/_internal/base-checkbox.props.d.ts +6 -1
  224. package/dist/esm/components/_internal/base-checkbox.props.d.ts.map +1 -1
  225. package/dist/esm/components/_internal/base-checkbox.props.js +1 -1
  226. package/dist/esm/components/_internal/base-checkbox.props.js.map +3 -3
  227. package/dist/esm/components/_internal/base-menu.props.d.ts +8 -0
  228. package/dist/esm/components/_internal/base-menu.props.d.ts.map +1 -1
  229. package/dist/esm/components/_internal/base-menu.props.js +1 -1
  230. package/dist/esm/components/_internal/base-menu.props.js.map +3 -3
  231. package/dist/esm/components/_internal/base-radio.props.d.ts +6 -1
  232. package/dist/esm/components/_internal/base-radio.props.d.ts.map +1 -1
  233. package/dist/esm/components/_internal/base-radio.props.js +1 -1
  234. package/dist/esm/components/_internal/base-radio.props.js.map +3 -3
  235. package/dist/esm/components/accordion.d.ts +22 -0
  236. package/dist/esm/components/accordion.d.ts.map +1 -0
  237. package/dist/esm/components/accordion.js +2 -0
  238. package/dist/esm/components/accordion.js.map +7 -0
  239. package/dist/esm/components/accordion.props.d.ts +97 -0
  240. package/dist/esm/components/accordion.props.d.ts.map +1 -0
  241. package/dist/esm/components/accordion.props.js +2 -0
  242. package/dist/esm/components/accordion.props.js.map +7 -0
  243. package/dist/esm/components/alert-dialog.d.ts.map +1 -1
  244. package/dist/esm/components/alert-dialog.js +1 -1
  245. package/dist/esm/components/alert-dialog.js.map +3 -3
  246. package/dist/esm/components/alert-dialog.props.d.ts +69 -2
  247. package/dist/esm/components/alert-dialog.props.d.ts.map +1 -1
  248. package/dist/esm/components/alert-dialog.props.js +1 -1
  249. package/dist/esm/components/alert-dialog.props.js.map +3 -3
  250. package/dist/esm/components/avatar.d.ts.map +1 -1
  251. package/dist/esm/components/avatar.js +1 -1
  252. package/dist/esm/components/avatar.js.map +3 -3
  253. package/dist/esm/components/avatar.props.d.ts +9 -1
  254. package/dist/esm/components/avatar.props.d.ts.map +1 -1
  255. package/dist/esm/components/avatar.props.js +1 -1
  256. package/dist/esm/components/avatar.props.js.map +3 -3
  257. package/dist/esm/components/badge.d.ts +8 -1
  258. package/dist/esm/components/badge.d.ts.map +1 -1
  259. package/dist/esm/components/badge.js +1 -1
  260. package/dist/esm/components/badge.js.map +3 -3
  261. package/dist/esm/components/badge.props.d.ts +14 -6
  262. package/dist/esm/components/badge.props.d.ts.map +1 -1
  263. package/dist/esm/components/badge.props.js +1 -1
  264. package/dist/esm/components/badge.props.js.map +3 -3
  265. package/dist/esm/components/blockquote.props.d.ts +1 -1
  266. package/dist/esm/components/button.d.ts +53 -1
  267. package/dist/esm/components/button.d.ts.map +1 -1
  268. package/dist/esm/components/button.js +1 -1
  269. package/dist/esm/components/button.js.map +3 -3
  270. package/dist/esm/components/button.props.d.ts +17 -0
  271. package/dist/esm/components/button.props.d.ts.map +1 -1
  272. package/dist/esm/components/button.props.js.map +2 -2
  273. package/dist/esm/components/callout.d.ts +4 -0
  274. package/dist/esm/components/callout.d.ts.map +1 -1
  275. package/dist/esm/components/callout.js +1 -1
  276. package/dist/esm/components/callout.js.map +3 -3
  277. package/dist/esm/components/callout.props.d.ts +9 -1
  278. package/dist/esm/components/callout.props.d.ts.map +1 -1
  279. package/dist/esm/components/callout.props.js +1 -1
  280. package/dist/esm/components/callout.props.js.map +3 -3
  281. package/dist/esm/components/card.d.ts.map +1 -1
  282. package/dist/esm/components/card.js +1 -1
  283. package/dist/esm/components/card.js.map +3 -3
  284. package/dist/esm/components/card.props.d.ts +5 -0
  285. package/dist/esm/components/card.props.d.ts.map +1 -1
  286. package/dist/esm/components/card.props.js +1 -1
  287. package/dist/esm/components/card.props.js.map +3 -3
  288. package/dist/esm/components/checkbox-cards.d.ts.map +1 -1
  289. package/dist/esm/components/checkbox-cards.js +1 -1
  290. package/dist/esm/components/checkbox-cards.js.map +3 -3
  291. package/dist/esm/components/checkbox-cards.props.d.ts +2 -2
  292. package/dist/esm/components/checkbox-cards.props.js +1 -1
  293. package/dist/esm/components/checkbox-cards.props.js.map +2 -2
  294. package/dist/esm/components/checkbox-group.props.d.ts +6 -1
  295. package/dist/esm/components/checkbox-group.props.d.ts.map +1 -1
  296. package/dist/esm/components/checkbox.d.ts.map +1 -1
  297. package/dist/esm/components/checkbox.js +1 -1
  298. package/dist/esm/components/checkbox.js.map +3 -3
  299. package/dist/esm/components/code.js.map +1 -1
  300. package/dist/esm/components/code.props.d.ts +1 -1
  301. package/dist/esm/components/context-menu.d.ts +1 -1
  302. package/dist/esm/components/context-menu.d.ts.map +1 -1
  303. package/dist/esm/components/context-menu.js +1 -1
  304. package/dist/esm/components/context-menu.js.map +3 -3
  305. package/dist/esm/components/dialog.d.ts.map +1 -1
  306. package/dist/esm/components/dialog.js +1 -1
  307. package/dist/esm/components/dialog.js.map +3 -3
  308. package/dist/esm/components/dialog.props.d.ts +6 -1
  309. package/dist/esm/components/dialog.props.d.ts.map +1 -1
  310. package/dist/esm/components/dialog.props.js +1 -1
  311. package/dist/esm/components/dialog.props.js.map +3 -3
  312. package/dist/esm/components/dropdown-menu.d.ts +1 -1
  313. package/dist/esm/components/dropdown-menu.d.ts.map +1 -1
  314. package/dist/esm/components/dropdown-menu.js +1 -1
  315. package/dist/esm/components/dropdown-menu.js.map +3 -3
  316. package/dist/esm/components/heading.props.d.ts +1 -1
  317. package/dist/esm/components/icon-button.d.ts +79 -1
  318. package/dist/esm/components/icon-button.d.ts.map +1 -1
  319. package/dist/esm/components/icon-button.js +4 -1
  320. package/dist/esm/components/icon-button.js.map +3 -3
  321. package/dist/esm/components/image.d.ts +131 -12
  322. package/dist/esm/components/image.d.ts.map +1 -1
  323. package/dist/esm/components/image.js +1 -1
  324. package/dist/esm/components/image.js.map +3 -3
  325. package/dist/esm/components/image.props.d.ts +136 -21
  326. package/dist/esm/components/image.props.d.ts.map +1 -1
  327. package/dist/esm/components/image.props.js +1 -1
  328. package/dist/esm/components/image.props.js.map +3 -3
  329. package/dist/esm/components/index.d.ts +1 -0
  330. package/dist/esm/components/index.d.ts.map +1 -1
  331. package/dist/esm/components/index.js +1 -1
  332. package/dist/esm/components/index.js.map +3 -3
  333. package/dist/esm/components/link.props.d.ts +1 -1
  334. package/dist/esm/components/progress.props.d.ts +2 -2
  335. package/dist/esm/components/progress.props.js +1 -1
  336. package/dist/esm/components/progress.props.js.map +2 -2
  337. package/dist/esm/components/radio-cards.d.ts.map +1 -1
  338. package/dist/esm/components/radio-cards.js +1 -1
  339. package/dist/esm/components/radio-cards.js.map +3 -3
  340. package/dist/esm/components/radio-cards.props.d.ts +2 -2
  341. package/dist/esm/components/radio-cards.props.js +1 -1
  342. package/dist/esm/components/radio-cards.props.js.map +2 -2
  343. package/dist/esm/components/radio.d.ts.map +1 -1
  344. package/dist/esm/components/radio.js +1 -1
  345. package/dist/esm/components/radio.js.map +3 -3
  346. package/dist/esm/components/segmented-control.props.d.ts +3 -3
  347. package/dist/esm/components/segmented-control.props.js +1 -1
  348. package/dist/esm/components/segmented-control.props.js.map +2 -2
  349. package/dist/esm/components/select.d.ts.map +1 -1
  350. package/dist/esm/components/select.js +1 -1
  351. package/dist/esm/components/select.js.map +3 -3
  352. package/dist/esm/components/select.props.d.ts +12 -0
  353. package/dist/esm/components/select.props.d.ts.map +1 -1
  354. package/dist/esm/components/select.props.js +1 -1
  355. package/dist/esm/components/select.props.js.map +2 -2
  356. package/dist/esm/components/sidebar.d.ts +5 -0
  357. package/dist/esm/components/sidebar.d.ts.map +1 -1
  358. package/dist/esm/components/sidebar.js +1 -1
  359. package/dist/esm/components/sidebar.js.map +3 -3
  360. package/dist/esm/components/slider.d.ts +5 -0
  361. package/dist/esm/components/slider.d.ts.map +1 -1
  362. package/dist/esm/components/slider.js +1 -1
  363. package/dist/esm/components/slider.js.map +3 -3
  364. package/dist/esm/components/slider.props.d.ts +10 -2
  365. package/dist/esm/components/slider.props.d.ts.map +1 -1
  366. package/dist/esm/components/slider.props.js +1 -1
  367. package/dist/esm/components/slider.props.js.map +2 -2
  368. package/dist/esm/components/switch.d.ts.map +1 -1
  369. package/dist/esm/components/switch.js +1 -1
  370. package/dist/esm/components/switch.js.map +3 -3
  371. package/dist/esm/components/switch.props.d.ts +17 -4
  372. package/dist/esm/components/switch.props.d.ts.map +1 -1
  373. package/dist/esm/components/switch.props.js +1 -1
  374. package/dist/esm/components/switch.props.js.map +3 -3
  375. package/dist/esm/components/tab-nav.d.ts.map +1 -1
  376. package/dist/esm/components/tab-nav.js +1 -1
  377. package/dist/esm/components/tab-nav.js.map +3 -3
  378. package/dist/esm/components/tabs.d.ts.map +1 -1
  379. package/dist/esm/components/tabs.js +1 -1
  380. package/dist/esm/components/tabs.js.map +2 -2
  381. package/dist/esm/components/text-area.d.ts.map +1 -1
  382. package/dist/esm/components/text-area.js +1 -1
  383. package/dist/esm/components/text-area.js.map +3 -3
  384. package/dist/esm/components/text-area.props.d.ts +29 -0
  385. package/dist/esm/components/text-area.props.d.ts.map +1 -1
  386. package/dist/esm/components/text-area.props.js +1 -1
  387. package/dist/esm/components/text-area.props.js.map +3 -3
  388. package/dist/esm/components/text-field.d.ts.map +1 -1
  389. package/dist/esm/components/text-field.js +4 -4
  390. package/dist/esm/components/text-field.js.map +3 -3
  391. package/dist/esm/components/text-field.props.d.ts +29 -0
  392. package/dist/esm/components/text-field.props.d.ts.map +1 -1
  393. package/dist/esm/components/text-field.props.js +1 -1
  394. package/dist/esm/components/text-field.props.js.map +3 -3
  395. package/dist/esm/components/text.props.d.ts +1 -1
  396. package/dist/esm/components/theme.d.ts +3 -0
  397. package/dist/esm/components/theme.d.ts.map +1 -1
  398. package/dist/esm/components/theme.js +1 -1
  399. package/dist/esm/components/theme.js.map +3 -3
  400. package/dist/esm/components/theme.props.d.ts +14 -0
  401. package/dist/esm/components/theme.props.d.ts.map +1 -1
  402. package/dist/esm/components/theme.props.js +1 -1
  403. package/dist/esm/components/theme.props.js.map +3 -3
  404. package/dist/esm/components/toggle-button.d.ts +52 -0
  405. package/dist/esm/components/toggle-button.d.ts.map +1 -1
  406. package/dist/esm/components/toggle-button.js +1 -1
  407. package/dist/esm/components/toggle-button.js.map +3 -3
  408. package/dist/esm/components/toggle-icon-button.d.ts +84 -2
  409. package/dist/esm/components/toggle-icon-button.d.ts.map +1 -1
  410. package/dist/esm/components/toggle-icon-button.js +1 -1
  411. package/dist/esm/components/toggle-icon-button.js.map +3 -3
  412. package/dist/esm/helpers/extract-margin-props.d.ts +7 -7
  413. package/dist/esm/hooks/index.d.ts +2 -0
  414. package/dist/esm/hooks/index.d.ts.map +1 -0
  415. package/dist/esm/hooks/index.js +2 -0
  416. package/dist/esm/hooks/index.js.map +7 -0
  417. package/dist/esm/hooks/use-live-announcer.d.ts +6 -0
  418. package/dist/esm/hooks/use-live-announcer.d.ts.map +1 -0
  419. package/dist/esm/hooks/use-live-announcer.js +10 -0
  420. package/dist/esm/hooks/use-live-announcer.js.map +7 -0
  421. package/dist/esm/index.d.ts +1 -0
  422. package/dist/esm/index.d.ts.map +1 -1
  423. package/dist/esm/index.js +1 -1
  424. package/dist/esm/index.js.map +2 -2
  425. package/dist/esm/props/weight.prop.d.ts +1 -1
  426. package/dist/esm/props/weight.prop.js +1 -1
  427. package/dist/esm/props/weight.prop.js.map +2 -2
  428. package/layout/components.css +1 -0
  429. package/layout.css +1 -0
  430. package/package.json +2 -1
  431. package/src/components/_internal/base-button.css +483 -284
  432. package/src/components/_internal/base-button.props.ts +87 -0
  433. package/src/components/_internal/base-button.tsx +127 -10
  434. package/src/components/_internal/base-card.css +866 -83
  435. package/src/components/_internal/base-checkbox.css +252 -52
  436. package/src/components/_internal/base-checkbox.props.ts +4 -1
  437. package/src/components/_internal/base-dialog.css +39 -8
  438. package/src/components/_internal/base-menu.css +55 -32
  439. package/src/components/_internal/base-menu.props.ts +10 -0
  440. package/src/components/_internal/base-radio.css +222 -52
  441. package/src/components/_internal/base-radio.props.ts +4 -1
  442. package/src/components/_internal/base-sidebar-menu.css +223 -0
  443. package/src/components/_internal/base-sidebar.css +141 -0
  444. package/src/components/_internal/base-tab-list.css +16 -0
  445. package/src/components/accordion.css +657 -0
  446. package/src/components/accordion.props.tsx +90 -0
  447. package/src/components/accordion.tsx +209 -0
  448. package/src/components/alert-dialog.props.tsx +22 -2
  449. package/src/components/alert-dialog.tsx +94 -3
  450. package/src/components/avatar.css +294 -152
  451. package/src/components/avatar.props.tsx +7 -1
  452. package/src/components/avatar.tsx +12 -2
  453. package/src/components/badge.css +160 -138
  454. package/src/components/badge.props.tsx +10 -3
  455. package/src/components/badge.tsx +71 -9
  456. package/src/components/button.css +88 -0
  457. package/src/components/button.props.tsx +17 -0
  458. package/src/components/button.tsx +107 -5
  459. package/src/components/callout.css +122 -35
  460. package/src/components/callout.props.tsx +7 -1
  461. package/src/components/callout.tsx +32 -9
  462. package/src/components/card.css +0 -597
  463. package/src/components/card.props.tsx +3 -0
  464. package/src/components/card.tsx +4 -2
  465. package/src/components/checkbox-cards.css +27 -104
  466. package/src/components/checkbox-cards.props.tsx +2 -2
  467. package/src/components/checkbox-cards.tsx +21 -3
  468. package/src/components/checkbox.tsx +2 -0
  469. package/src/components/code.css +1 -1
  470. package/src/components/code.tsx +1 -1
  471. package/src/components/container.css +1 -0
  472. package/src/components/context-menu.tsx +54 -12
  473. package/src/components/dialog.props.tsx +3 -0
  474. package/src/components/dialog.tsx +93 -3
  475. package/src/components/dropdown-menu.tsx +49 -12
  476. package/src/components/icon-button.css +73 -4
  477. package/src/components/icon-button.tsx +125 -19
  478. package/src/components/image.css +160 -91
  479. package/src/components/image.props.ts +152 -15
  480. package/src/components/image.tsx +290 -247
  481. package/src/components/index.css +1 -0
  482. package/src/components/index.tsx +1 -0
  483. package/src/components/kbd.css +23 -44
  484. package/src/components/progress.css +130 -149
  485. package/src/components/progress.props.tsx +2 -2
  486. package/src/components/radio-cards.css +23 -113
  487. package/src/components/radio-cards.props.tsx +2 -2
  488. package/src/components/radio-cards.tsx +45 -18
  489. package/src/components/radio.tsx +4 -3
  490. package/src/components/scroll-area.css +1 -1
  491. package/src/components/segmented-control.css +83 -64
  492. package/src/components/segmented-control.props.tsx +3 -3
  493. package/src/components/select.css +502 -224
  494. package/src/components/select.props.tsx +8 -0
  495. package/src/components/select.tsx +45 -2
  496. package/src/components/sidebar.css +186 -630
  497. package/src/components/sidebar.tsx +61 -5
  498. package/src/components/slider.css +228 -88
  499. package/src/components/slider.props.tsx +6 -2
  500. package/src/components/slider.tsx +201 -24
  501. package/src/components/spinner.css +12 -0
  502. package/src/components/switch.css +135 -216
  503. package/src/components/switch.props.tsx +16 -4
  504. package/src/components/switch.tsx +5 -3
  505. package/src/components/tab-nav.tsx +6 -3
  506. package/src/components/tabs.tsx +2 -0
  507. package/src/components/text-area.css +222 -140
  508. package/src/components/text-area.props.tsx +18 -1
  509. package/src/components/text-area.tsx +58 -7
  510. package/src/components/text-field.css +214 -131
  511. package/src/components/text-field.props.tsx +17 -0
  512. package/src/components/text-field.tsx +79 -28
  513. package/src/components/theme.props.tsx +12 -0
  514. package/src/components/theme.tsx +31 -1
  515. package/src/components/toggle-button.tsx +102 -3
  516. package/src/components/toggle-icon-button.tsx +150 -7
  517. package/src/components/tooltip.css +3 -3
  518. package/src/hooks/index.ts +1 -0
  519. package/src/hooks/use-live-announcer.ts +52 -0
  520. package/src/index.ts +1 -0
  521. package/src/props/weight.prop.ts +1 -1
  522. package/src/styles/fonts.css +27 -13
  523. package/src/styles/index.css +1 -1
  524. package/src/styles/tokens/base.css +2 -0
  525. package/src/styles/tokens/blur.css +32 -0
  526. package/src/styles/tokens/color.css +9 -9
  527. package/src/styles/tokens/constants.css +88 -140
  528. package/src/styles/tokens/index.css +2 -0
  529. package/src/styles/tokens/opacity.css +32 -0
  530. package/src/styles/tokens/radius.css +6 -10
  531. package/src/styles/tokens/shadow.css +25 -25
  532. package/src/styles/tokens/transition.css +49 -13
  533. package/src/styles/tokens/typography.css +7 -3
  534. package/src/styles/utilities/font-weight.css +16 -0
  535. package/styles.css +11129 -8945
  536. package/tokens/base.css +127 -49
  537. package/tokens.css +158 -114
  538. package/utilities.css +72 -0
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/dropdown-menu.tsx"],
4
- "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { DropdownMenu as DropdownMenuPrimitive, Slot } from 'radix-ui';\n\nimport { ScrollArea } from './scroll-area.js';\nimport {\n dropdownMenuContentPropDefs,\n dropdownMenuItemPropDefs,\n dropdownMenuCheckboxItemPropDefs,\n dropdownMenuRadioItemPropDefs,\n} from './dropdown-menu.props.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { Kbd } from './kbd.js';\n\nimport type { IconProps } from './icons.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ninterface DropdownMenuRootProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\nconst DropdownMenuRoot: React.FC<DropdownMenuRootProps> = (props) => (\n <DropdownMenuPrimitive.Root {...props} />\n);\nDropdownMenuRoot.displayName = 'DropdownMenu.Root';\n\ntype DropdownMenuTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.Trigger>;\ninterface DropdownMenuTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Trigger, RemovedProps> {}\nconst DropdownMenuTrigger = React.forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(\n ({ children, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Trigger {...props} ref={forwardedRef} asChild>\n {requireReactElement(children)}\n </DropdownMenuPrimitive.Trigger>\n ),\n);\nDropdownMenuTrigger.displayName = 'DropdownMenu.Trigger';\n\ntype DropdownMenuContentOwnProps = GetPropDefTypes<typeof dropdownMenuContentPropDefs>;\ntype DropdownMenuContentContextValue = DropdownMenuContentOwnProps;\nconst DropdownMenuContentContext = React.createContext<DropdownMenuContentContextValue>({});\ntype DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPrimitive.Content>;\ninterface DropdownMenuContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Content, RemovedProps>,\n DropdownMenuContentContextValue {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n}\nconst DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(\n (props, forwardedRef) => {\n const themeContext = useThemeContext();\n const {\n size = dropdownMenuContentPropDefs.size.default,\n variant = dropdownMenuContentPropDefs.variant.default,\n highContrast = dropdownMenuContentPropDefs.highContrast.default,\n panelBackground = props.panelBackground ?? themeContext.panelBackground,\n } = props;\n const {\n className,\n children,\n color,\n container,\n forceMount,\n panelBackground: _,\n ...contentProps\n } = extractProps(props, dropdownMenuContentPropDefs);\n const resolvedColor = color || themeContext.accentColor;\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.Content\n data-accent-color={resolvedColor}\n data-panel-background={panelBackground}\n align=\"start\"\n sideOffset={4}\n collisionPadding={10}\n {...contentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-DropdownMenuContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n <DropdownMenuContentContext.Provider\n value={React.useMemo(\n () => ({ size, variant, color: resolvedColor, highContrast, panelBackground }),\n [size, variant, resolvedColor, highContrast, panelBackground],\n )}\n >\n {children}\n </DropdownMenuContentContext.Provider>\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.Content>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n },\n);\nDropdownMenuContent.displayName = 'DropdownMenu.Content';\n\ntype DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrimitive.Label>;\ninterface DropdownMenuLabelProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Label, RemovedProps> {}\nconst DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Label\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuLabel', 'rt-DropdownMenuLabel', className)}\n />\n ),\n);\nDropdownMenuLabel.displayName = 'DropdownMenu.Label';\n\ntype DropdownMenuItemElement = React.ElementRef<typeof DropdownMenuPrimitive.Item>;\ntype DropdownMenuItemOwnProps = GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\ninterface DropdownMenuItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Item, RemovedProps>,\n DropdownMenuItemOwnProps {}\nconst DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(\n (props, forwardedRef) => {\n const {\n className,\n children,\n color = dropdownMenuItemPropDefs.color.default,\n shortcut,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.Item\n data-accent-color={color}\n {...itemProps}\n ref={forwardedRef}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-DropdownMenuItem', className)}\n >\n <Slot.Slottable>{children}</Slot.Slottable>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\nDropdownMenuItem.displayName = 'DropdownMenu.Item';\n\ntype DropdownMenuGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.Group>;\ninterface DropdownMenuGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Group, RemovedProps> {}\nconst DropdownMenuGroup = React.forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Group\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuGroup', 'rt-DropdownMenuGroup', className)}\n />\n ),\n);\nDropdownMenuGroup.displayName = 'DropdownMenu.Group';\n\ntype DropdownMenuRadioGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>;\ninterface DropdownMenuRadioGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioGroup, RemovedProps> {}\nconst DropdownMenuRadioGroup = React.forwardRef<\n DropdownMenuRadioGroupElement,\n DropdownMenuRadioGroupProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.RadioGroup\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuRadioGroup', 'rt-DropdownMenuRadioGroup', className)}\n />\n));\nDropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';\n\ntype DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>;\ntype DropdownMenuRadioItemOwnProps = GetPropDefTypes<typeof dropdownMenuRadioItemPropDefs>;\ninterface DropdownMenuRadioItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioItem, RemovedProps>,\n DropdownMenuRadioItemOwnProps {}\nconst DropdownMenuRadioItem = React.forwardRef<\n DropdownMenuRadioItemElement,\n DropdownMenuRadioItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n color = dropdownMenuRadioItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.RadioItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuRadioItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuRadioItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickDotIcon className=\"rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </DropdownMenuPrimitive.RadioItem>\n );\n});\nDropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';\n\ntype DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>;\ntype DropdownMenuCheckboxItemOwnProps = GetPropDefTypes<typeof dropdownMenuCheckboxItemPropDefs>;\ninterface DropdownMenuCheckboxItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.CheckboxItem, RemovedProps>,\n DropdownMenuCheckboxItemOwnProps {}\nconst DropdownMenuCheckboxItem = React.forwardRef<\n DropdownMenuCheckboxItemElement,\n DropdownMenuCheckboxItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n shortcut,\n color = dropdownMenuCheckboxItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.CheckboxItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuCheckboxItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuCheckboxItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickCheckIcon className=\"rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n});\nDropdownMenuCheckboxItem.displayName = 'DropdownMenu.CheckboxItem';\n\ninterface DropdownMenuSubProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub> {}\nconst DropdownMenuSub: React.FC<DropdownMenuSubProps> = (props) => (\n <DropdownMenuPrimitive.Sub {...props} />\n);\nDropdownMenuSub.displayName = 'DropdownMenu.Sub';\n\ntype DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>;\ninterface DropdownMenuSubTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubTrigger, RemovedProps> {}\nconst DropdownMenuSubTrigger = React.forwardRef<\n DropdownMenuSubTriggerElement,\n DropdownMenuSubTriggerProps\n>((props, forwardedRef) => {\n const { className, children, ...subTriggerProps } = props;\n return (\n <DropdownMenuPrimitive.SubTrigger\n {...subTriggerProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuSubTrigger',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuSubTrigger',\n className,\n )}\n >\n {children}\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <ThickChevronRightIcon className=\"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon\" />\n </div>\n </DropdownMenuPrimitive.SubTrigger>\n );\n});\nDropdownMenuSubTrigger.displayName = 'DropdownMenu.SubTrigger';\n\ntype DropdownMenuSubContentElement = React.ElementRef<typeof DropdownMenuPrimitive.SubContent>;\ninterface DropdownMenuSubContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubContent, RemovedProps> {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n}\nconst DropdownMenuSubContent = React.forwardRef<\n DropdownMenuSubContentElement,\n DropdownMenuSubContentProps\n>((props, forwardedRef) => {\n const { size, variant, color, highContrast, panelBackground } = React.useContext(\n DropdownMenuContentContext,\n );\n const {\n className,\n children,\n container,\n forceMount,\n panelBackground: _,\n ...subContentProps\n } = extractProps(\n { size, variant, color, highContrast, panelBackground, ...props },\n dropdownMenuContentPropDefs,\n );\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.SubContent\n data-accent-color={color}\n data-panel-background={panelBackground}\n alignOffset={-Number(size) * 4}\n // Side offset accounts for the outer solid box-shadow\n sideOffset={1}\n collisionPadding={10}\n {...subContentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-BaseMenuSubContent',\n 'rt-DropdownMenuContent',\n 'rt-DropdownMenuSubContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n {children}\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.SubContent>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuSubContent.displayName = 'DropdownMenu.SubContent';\n\ntype DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitive.Separator>;\ninterface DropdownMenuSeparatorProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Separator, RemovedProps> {}\nconst DropdownMenuSeparator = React.forwardRef<\n DropdownMenuSeparatorElement,\n DropdownMenuSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Separator\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuSeparator', 'rt-DropdownMenuSeparator', className)}\n />\n));\nDropdownMenuSeparator.displayName = 'DropdownMenu.Separator';\n\ntype DropdownMenuTriggerIconElement = React.ElementRef<'svg'>;\ninterface DropdownMenuTriggerIconProps extends IconProps {}\nconst DropdownMenuTriggerIcon = React.forwardRef<\n DropdownMenuTriggerIconElement,\n DropdownMenuTriggerIconProps\n>((props, forwardedRef) => (\n <ChevronDownIcon {...props} ref={forwardedRef} className=\"rt-DropdownMenuTriggerIcon\" />\n));\nDropdownMenuTriggerIcon.displayName = 'DropdownMenu.TriggerIcon';\n\nexport {\n DropdownMenuRoot as Root,\n DropdownMenuTrigger as Trigger,\n DropdownMenuTriggerIcon as TriggerIcon,\n DropdownMenuContent as Content,\n DropdownMenuLabel as Label,\n DropdownMenuItem as Item,\n DropdownMenuGroup as Group,\n DropdownMenuRadioGroup as RadioGroup,\n DropdownMenuRadioItem as RadioItem,\n DropdownMenuCheckboxItem as CheckboxItem,\n DropdownMenuSub as Sub,\n DropdownMenuSubTrigger as SubTrigger,\n DropdownMenuSubContent as SubContent,\n DropdownMenuSeparator as Separator,\n};\n\nexport type {\n DropdownMenuRootProps as RootProps,\n DropdownMenuTriggerProps as TriggerProps,\n DropdownMenuTriggerIconProps as TriggerIconProps,\n DropdownMenuContentProps as ContentProps,\n DropdownMenuLabelProps as LabelProps,\n DropdownMenuItemProps as ItemProps,\n DropdownMenuGroupProps as GroupProps,\n DropdownMenuRadioGroupProps as RadioGroupProps,\n DropdownMenuRadioItemProps as RadioItemProps,\n DropdownMenuCheckboxItemProps as CheckboxItemProps,\n DropdownMenuSubProps as SubProps,\n DropdownMenuSubTriggerProps as SubTriggerProps,\n DropdownMenuSubContentProps as SubContentProps,\n DropdownMenuSeparatorProps as SeparatorProps,\n};\n"],
5
- "mappings": "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",
6
- "names": ["dropdown_menu_exports", "__export", "DropdownMenuCheckboxItem", "DropdownMenuContent", "DropdownMenuGroup", "DropdownMenuItem", "DropdownMenuLabel", "DropdownMenuRadioGroup", "DropdownMenuRadioItem", "DropdownMenuRoot", "DropdownMenuSeparator", "DropdownMenuSub", "DropdownMenuSubContent", "DropdownMenuSubTrigger", "DropdownMenuTrigger", "DropdownMenuTriggerIcon", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_scroll_area", "import_dropdown_menu_props", "import_theme", "import_icons", "import_extract_props", "import_require_react_element", "import_kbd", "props", "DropdownMenuPrimitive", "children", "forwardedRef", "DropdownMenuContentContext", "themeContext", "size", "variant", "highContrast", "panelBackground", "className", "color", "container", "forceMount", "_", "contentProps", "resolvedColor", "classNames", "shortcut", "itemProps", "subTriggerProps", "subContentProps"]
4
+ "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { DropdownMenu as DropdownMenuPrimitive, Slot } from 'radix-ui';\n\nimport { ScrollArea } from './scroll-area.js';\nimport {\n dropdownMenuContentPropDefs,\n dropdownMenuItemPropDefs,\n dropdownMenuCheckboxItemPropDefs,\n dropdownMenuRadioItemPropDefs,\n} from './dropdown-menu.props.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { Kbd } from './kbd.js';\n\nimport type { IconProps } from './icons.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ninterface DropdownMenuRootProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\nconst DropdownMenuRoot: React.FC<DropdownMenuRootProps> = (props) => (\n <DropdownMenuPrimitive.Root {...props} />\n);\nDropdownMenuRoot.displayName = 'DropdownMenu.Root';\n\ntype DropdownMenuTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.Trigger>;\ninterface DropdownMenuTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Trigger, RemovedProps> {}\nconst DropdownMenuTrigger = React.forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(\n ({ children, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Trigger {...props} ref={forwardedRef} asChild>\n {requireReactElement(children)}\n </DropdownMenuPrimitive.Trigger>\n ),\n);\nDropdownMenuTrigger.displayName = 'DropdownMenu.Trigger';\n\ntype DropdownMenuContentOwnProps = GetPropDefTypes<typeof dropdownMenuContentPropDefs>;\ntype DropdownMenuContentContextValue = DropdownMenuContentOwnProps;\nconst DropdownMenuContentContext = React.createContext<DropdownMenuContentContextValue>({});\ntype DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPrimitive.Content>;\ninterface DropdownMenuContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Content, RemovedProps>,\n DropdownMenuContentContextValue {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n}\nconst DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(\n (props, forwardedRef) => {\n const themeContext = useThemeContext();\n\n // Show deprecation warning for panelBackground when used\n React.useEffect(() => {\n if (props.panelBackground !== undefined) {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n );\n }\n }, [props.panelBackground]);\n\n // Material takes precedence over panelBackground\n const effectiveMaterial =\n props.material ?? props.panelBackground ?? themeContext.panelBackground;\n\n // Memoize theme context values to prevent unnecessary re-renders\n const memoizedThemeContext = React.useMemo(\n () => ({\n material: effectiveMaterial,\n accentColor: themeContext.accentColor,\n }),\n [effectiveMaterial, themeContext.accentColor],\n );\n\n const {\n size = dropdownMenuContentPropDefs.size.default,\n variant = dropdownMenuContentPropDefs.variant.default,\n highContrast = dropdownMenuContentPropDefs.highContrast.default,\n material = memoizedThemeContext.material,\n } = props;\n const {\n className,\n children,\n color,\n container,\n forceMount,\n material: _,\n panelBackground: __,\n ...contentProps\n } = extractProps(props, dropdownMenuContentPropDefs);\n\n // Memoize color resolution to prevent unnecessary re-renders\n const resolvedColor = React.useMemo(\n () => color || memoizedThemeContext.accentColor,\n [color, memoizedThemeContext.accentColor],\n );\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.Content\n data-accent-color={resolvedColor}\n data-material={material}\n data-panel-background={material}\n align=\"start\"\n sideOffset={4}\n collisionPadding={10}\n {...contentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-DropdownMenuContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n <DropdownMenuContentContext.Provider\n value={React.useMemo(\n () => ({ size, variant, color: resolvedColor, highContrast, material }),\n [size, variant, resolvedColor, highContrast, material],\n )}\n >\n {children}\n </DropdownMenuContentContext.Provider>\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.Content>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n },\n);\nDropdownMenuContent.displayName = 'DropdownMenu.Content';\n\ntype DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrimitive.Label>;\ninterface DropdownMenuLabelProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Label, RemovedProps> {}\nconst DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Label\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuLabel', 'rt-DropdownMenuLabel', className)}\n />\n ),\n);\nDropdownMenuLabel.displayName = 'DropdownMenu.Label';\n\ntype DropdownMenuItemElement = React.ElementRef<typeof DropdownMenuPrimitive.Item>;\ntype DropdownMenuItemOwnProps = GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\ninterface DropdownMenuItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Item, RemovedProps>,\n DropdownMenuItemOwnProps {}\nconst DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(\n (props, forwardedRef) => {\n const {\n className,\n children,\n color = dropdownMenuItemPropDefs.color.default,\n shortcut,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.Item\n data-accent-color={color}\n {...itemProps}\n ref={forwardedRef}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-DropdownMenuItem', className)}\n >\n <Slot.Slottable>{children}</Slot.Slottable>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\nDropdownMenuItem.displayName = 'DropdownMenu.Item';\n\ntype DropdownMenuGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.Group>;\ninterface DropdownMenuGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Group, RemovedProps> {}\nconst DropdownMenuGroup = React.forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Group\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuGroup', 'rt-DropdownMenuGroup', className)}\n />\n ),\n);\nDropdownMenuGroup.displayName = 'DropdownMenu.Group';\n\ntype DropdownMenuRadioGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>;\ninterface DropdownMenuRadioGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioGroup, RemovedProps> {}\nconst DropdownMenuRadioGroup = React.forwardRef<\n DropdownMenuRadioGroupElement,\n DropdownMenuRadioGroupProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.RadioGroup\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuRadioGroup', 'rt-DropdownMenuRadioGroup', className)}\n />\n));\nDropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';\n\ntype DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>;\ntype DropdownMenuRadioItemOwnProps = GetPropDefTypes<typeof dropdownMenuRadioItemPropDefs>;\ninterface DropdownMenuRadioItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioItem, RemovedProps>,\n DropdownMenuRadioItemOwnProps {}\nconst DropdownMenuRadioItem = React.forwardRef<\n DropdownMenuRadioItemElement,\n DropdownMenuRadioItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n color = dropdownMenuRadioItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.RadioItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuRadioItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuRadioItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickDotIcon className=\"rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </DropdownMenuPrimitive.RadioItem>\n );\n});\nDropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';\n\ntype DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>;\ntype DropdownMenuCheckboxItemOwnProps = GetPropDefTypes<typeof dropdownMenuCheckboxItemPropDefs>;\ninterface DropdownMenuCheckboxItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.CheckboxItem, RemovedProps>,\n DropdownMenuCheckboxItemOwnProps {}\nconst DropdownMenuCheckboxItem = React.forwardRef<\n DropdownMenuCheckboxItemElement,\n DropdownMenuCheckboxItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n shortcut,\n color = dropdownMenuCheckboxItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.CheckboxItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuCheckboxItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuCheckboxItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickCheckIcon className=\"rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n});\nDropdownMenuCheckboxItem.displayName = 'DropdownMenu.CheckboxItem';\n\ninterface DropdownMenuSubProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub> {}\nconst DropdownMenuSub: React.FC<DropdownMenuSubProps> = (props) => (\n <DropdownMenuPrimitive.Sub {...props} />\n);\nDropdownMenuSub.displayName = 'DropdownMenu.Sub';\n\ntype DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>;\ninterface DropdownMenuSubTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubTrigger, RemovedProps> {}\nconst DropdownMenuSubTrigger = React.forwardRef<\n DropdownMenuSubTriggerElement,\n DropdownMenuSubTriggerProps\n>((props, forwardedRef) => {\n const { className, children, ...subTriggerProps } = props;\n return (\n <DropdownMenuPrimitive.SubTrigger\n {...subTriggerProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuSubTrigger',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuSubTrigger',\n className,\n )}\n >\n {children}\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <ThickChevronRightIcon className=\"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon\" />\n </div>\n </DropdownMenuPrimitive.SubTrigger>\n );\n});\nDropdownMenuSubTrigger.displayName = 'DropdownMenu.SubTrigger';\n\ntype DropdownMenuSubContentElement = React.ElementRef<typeof DropdownMenuPrimitive.SubContent>;\ninterface DropdownMenuSubContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubContent, RemovedProps>,\n DropdownMenuContentContextValue {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n}\nconst DropdownMenuSubContent = React.forwardRef<\n DropdownMenuSubContentElement,\n DropdownMenuSubContentProps\n>((props, forwardedRef) => {\n // Memoize context consumption to prevent unnecessary re-renders\n const contextValue = React.useContext(DropdownMenuContentContext);\n const { size, variant, color, highContrast, material } = React.useMemo(\n () => contextValue,\n [contextValue],\n );\n\n const {\n className,\n children,\n container,\n forceMount,\n material: _,\n panelBackground: __,\n ...subContentProps\n } = extractProps(\n { size, variant, color, highContrast, material, ...props },\n dropdownMenuContentPropDefs,\n );\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.SubContent\n data-accent-color={color}\n data-material={material}\n data-panel-background={material}\n alignOffset={-Number(size) * 4}\n // Side offset accounts for the outer solid box-shadow\n sideOffset={1}\n collisionPadding={10}\n {...subContentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-BaseMenuSubContent',\n 'rt-DropdownMenuContent',\n 'rt-DropdownMenuSubContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n {children}\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.SubContent>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuSubContent.displayName = 'DropdownMenu.SubContent';\n\ntype DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitive.Separator>;\ninterface DropdownMenuSeparatorProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Separator, RemovedProps> {}\nconst DropdownMenuSeparator = React.forwardRef<\n DropdownMenuSeparatorElement,\n DropdownMenuSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Separator\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuSeparator', 'rt-DropdownMenuSeparator', className)}\n />\n));\nDropdownMenuSeparator.displayName = 'DropdownMenu.Separator';\n\ntype DropdownMenuTriggerIconElement = React.ElementRef<'svg'>;\ninterface DropdownMenuTriggerIconProps extends IconProps {}\nconst DropdownMenuTriggerIcon = React.forwardRef<\n DropdownMenuTriggerIconElement,\n DropdownMenuTriggerIconProps\n>((props, forwardedRef) => (\n <ChevronDownIcon {...props} ref={forwardedRef} className=\"rt-DropdownMenuTriggerIcon\" />\n));\nDropdownMenuTriggerIcon.displayName = 'DropdownMenu.TriggerIcon';\n\nexport {\n DropdownMenuRoot as Root,\n DropdownMenuTrigger as Trigger,\n DropdownMenuTriggerIcon as TriggerIcon,\n DropdownMenuContent as Content,\n DropdownMenuLabel as Label,\n DropdownMenuItem as Item,\n DropdownMenuGroup as Group,\n DropdownMenuRadioGroup as RadioGroup,\n DropdownMenuRadioItem as RadioItem,\n DropdownMenuCheckboxItem as CheckboxItem,\n DropdownMenuSub as Sub,\n DropdownMenuSubTrigger as SubTrigger,\n DropdownMenuSubContent as SubContent,\n DropdownMenuSeparator as Separator,\n};\n\nexport type {\n DropdownMenuRootProps as RootProps,\n DropdownMenuTriggerProps as TriggerProps,\n DropdownMenuTriggerIconProps as TriggerIconProps,\n DropdownMenuContentProps as ContentProps,\n DropdownMenuLabelProps as LabelProps,\n DropdownMenuItemProps as ItemProps,\n DropdownMenuGroupProps as GroupProps,\n DropdownMenuRadioGroupProps as RadioGroupProps,\n DropdownMenuRadioItemProps as RadioItemProps,\n DropdownMenuCheckboxItemProps as CheckboxItemProps,\n DropdownMenuSubProps as SubProps,\n DropdownMenuSubTriggerProps as SubTriggerProps,\n DropdownMenuSubContentProps as SubContentProps,\n DropdownMenuSeparatorProps as SeparatorProps,\n};\n"],
5
+ "mappings": "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",
6
+ "names": ["dropdown_menu_exports", "__export", "DropdownMenuCheckboxItem", "DropdownMenuContent", "DropdownMenuGroup", "DropdownMenuItem", "DropdownMenuLabel", "DropdownMenuRadioGroup", "DropdownMenuRadioItem", "DropdownMenuRoot", "DropdownMenuSeparator", "DropdownMenuSub", "DropdownMenuSubContent", "DropdownMenuSubTrigger", "DropdownMenuTrigger", "DropdownMenuTriggerIcon", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_scroll_area", "import_dropdown_menu_props", "import_theme", "import_icons", "import_extract_props", "import_require_react_element", "import_kbd", "props", "DropdownMenuPrimitive", "children", "forwardedRef", "DropdownMenuContentContext", "themeContext", "effectiveMaterial", "memoizedThemeContext", "size", "variant", "highContrast", "material", "className", "color", "container", "forceMount", "_", "__", "contentProps", "resolvedColor", "classNames", "shortcut", "itemProps", "subTriggerProps", "contextValue", "subContentProps"]
7
7
  }
@@ -34,7 +34,7 @@ declare const headingPropDefs: {
34
34
  weight: {
35
35
  type: "enum";
36
36
  className: string;
37
- values: readonly ["light", "regular", "medium", "bold"];
37
+ values: readonly ["thin", "extralight", "light", "regular", "medium", "semibold", "bold", "extrabold"];
38
38
  responsive: true;
39
39
  };
40
40
  size: {
@@ -2,6 +2,15 @@ import * as React from 'react';
2
2
  import { BaseButton } from './_internal/base-button.js';
3
3
  import type { BaseButtonProps } from './_internal/base-button.js';
4
4
  type IconButtonElement = React.ElementRef<typeof BaseButton>;
5
+ /**
6
+ * Required accessibility props for icon buttons
7
+ * Icon buttons must have an accessible name to meet WCAG guidelines
8
+ *
9
+ * Three ways to provide accessibility:
10
+ * 1. aria-label: Direct descriptive text
11
+ * 2. aria-labelledby: Reference to a label element
12
+ * 3. children: Visible text content (fallback)
13
+ */
5
14
  type AccessibilityProps = {
6
15
  'aria-label': string;
7
16
  'aria-labelledby'?: never;
@@ -13,13 +22,82 @@ type AccessibilityProps = {
13
22
  'aria-labelledby'?: never;
14
23
  children: React.ReactNode;
15
24
  };
16
- type IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps;
25
+ /**
26
+ * Tooltip configuration props that can be passed to IconButton
27
+ * These props are forwarded to the underlying Tooltip component
28
+ */
29
+ interface IconButtonTooltipProps {
30
+ /** Content to display in the tooltip on hover/focus */
31
+ tooltip?: React.ReactNode;
32
+ /** Side of the button where the tooltip should appear */
33
+ tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
34
+ /** Alignment of the tooltip relative to the button */
35
+ tooltipAlign?: 'start' | 'center' | 'end';
36
+ /** Delay before showing the tooltip (in milliseconds) */
37
+ tooltipDelayDuration?: number;
38
+ /** Whether to disable hoverable content behavior */
39
+ tooltipDisableHoverableContent?: boolean;
40
+ }
41
+ /**
42
+ * Core IconButton props excluding the 'as' prop for polymorphic behavior
43
+ * Combines BaseButton props with accessibility requirements and tooltip functionality
44
+ */
45
+ type IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps & IconButtonTooltipProps;
46
+ /**
47
+ * Polymorphic IconButton props that support rendering as different HTML elements
48
+ * @template C - The element type to render as (defaults to 'button')
49
+ */
17
50
  type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {
51
+ /** Element type to render as (e.g., 'a', 'span', etc.) */
18
52
  as?: C;
19
53
  } & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;
54
+ /**
55
+ * IconButton component type that supports polymorphic rendering
56
+ * @template C - The element type to render as
57
+ */
20
58
  type IconButtonComponent = <C extends React.ElementType = 'button'>(props: IconButtonProps<C> & {
21
59
  ref?: React.ForwardedRef<IconButtonElement>;
22
60
  }) => React.ReactElement | null;
61
+ /**
62
+ * IconButton component for compact, accessible icon-only interactions
63
+ *
64
+ * The IconButton component extends Button with specialized behavior for visual symbols.
65
+ * It enforces accessibility requirements, provides automatic square sizing, and includes
66
+ * built-in tooltip integration. Icon buttons are essential for space-efficient interfaces
67
+ * while maintaining accessibility compliance.
68
+ *
69
+ * Key features:
70
+ * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)
71
+ * - Automatic square aspect ratios for consistent visual alignment
72
+ * - Built-in tooltip support for context and guidance
73
+ * - Same variant and size system as Button for consistency
74
+ * - Runtime validation for accessibility compliance
75
+ *
76
+ * @example
77
+ * ```tsx
78
+ * // Basic icon button with aria-label
79
+ * <IconButton aria-label="Settings">
80
+ * <Settings />
81
+ * </IconButton>
82
+ *
83
+ * // Icon button with tooltip
84
+ * <IconButton aria-label="Save" tooltip="Save your progress">
85
+ * <Save />
86
+ * </IconButton>
87
+ *
88
+ * // Icon button with aria-labelledby
89
+ * <IconButton aria-labelledby="settings-label">
90
+ * <Settings />
91
+ * </IconButton>
92
+ * <span id="settings-label">Open settings panel</span>
93
+ *
94
+ * // Icon button with visible text (fallback)
95
+ * <IconButton>
96
+ * <Settings />
97
+ * Settings
98
+ * </IconButton>
99
+ * ```
100
+ */
23
101
  declare const IconButton: IconButtonComponent & {
24
102
  displayName?: string;
25
103
  };
@@ -1 +1 @@
1
- {"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,KAAK,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAG7D,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAGnF,KAAK,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,kBAAkB,CAAC;AAE3E,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,kBAAkB,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAEtE,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,UAAU,EA6BX,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
1
+ {"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,KAAK,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAE7D;;;;;;;;GAQG;AACH,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAEnF;;;GAGG;AACH,UAAU,sBAAsB;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yDAAyD;IACzD,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC1C,yDAAyD;IACzD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oDAAoD;IACpD,8BAA8B,CAAC,EAAE,OAAO,CAAC;CAC1C;AAED;;;GAGG;AACH,KAAK,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,kBAAkB,GAAG,sBAAsB,CAAC;AAEpG;;;GAGG;AACH,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,kBAAkB,GAAG;IAClF,0DAA0D;IAC1D,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAEtE;;;GAGG;AACH,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,QAAA,MAAM,UAAU,EAyDX,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
@@ -1,2 +1,5 @@
1
- "use strict";var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(e,t)=>{for(var n in t)a(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of d(t))!y.call(e,o)&&o!==n&&a(e,o,{get:()=>t[o],enumerable:!(r=u(t,o))||r.enumerable});return e};var i=(e,t,n)=>(n=e!=null?m(B(e)):{},s(t||!e||!e.__esModule?a(n,"default",{value:e,enumerable:!0}):n,e)),I=e=>s(a({},"__esModule",{value:!0}),e);var h={};f(h,{IconButton:()=>l});module.exports=I(h);var p=i(require("react")),c=i(require("classnames")),b=require("./_internal/base-button.js");const l=p.forwardRef(({className:e,...t},n)=>p.createElement(b.BaseButton,{...t,ref:n,className:(0,c.default)("rt-IconButton",e)}));l.displayName="IconButton";
1
+ "use strict";var P=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var E=(t,e)=>{for(var o in e)l(t,o,{get:e[o],enumerable:!0})},p=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of C(e))!w.call(t,n)&&n!==o&&l(t,n,{get:()=>e[n],enumerable:!(r=h(e,n))||r.enumerable});return t};var b=(t,e,o)=>(o=t!=null?P(v(t)):{},p(e||!t||!t.__esModule?l(o,"default",{value:t,enumerable:!0}):o,t)),g=t=>p(l({},"__esModule",{value:!0}),t);var x={};E(x,{IconButton:()=>c});module.exports=g(x);var i=b(require("react")),u=b(require("classnames")),m=require("./_internal/base-button.js"),d=require("./tooltip.js");const c=i.forwardRef(({className:t,tooltip:e,tooltipSide:o="top",tooltipAlign:r="center",tooltipDelayDuration:n,tooltipDisableHoverableContent:B,...a},y)=>{const f="aria-label"in a&&a["aria-label"],I="aria-labelledby"in a&&a["aria-labelledby"],R="children"in a&&a.children;if(!f&&!I&&!R)throw new Error(`IconButton: Icon buttons must have an accessible name. Please provide either:
2
+ - aria-label prop with descriptive text
3
+ - aria-labelledby prop referencing a label element
4
+ - or visible text children`);const s=i.createElement(m.BaseButton,{...a,ref:y,className:(0,u.default)("rt-IconButton",t)});return e?i.createElement(d.Tooltip,{content:e,side:o,align:r,delayDuration:n,disableHoverableContent:B},s):s});c.displayName="IconButton";
2
5
  //# sourceMappingURL=icon-button.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/icon-button.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype IconButtonElement = React.ElementRef<typeof BaseButton>;\n\n// Required accessibility props for icon buttons\ntype AccessibilityProps =\n | { 'aria-label': string; 'aria-labelledby'?: never }\n | { 'aria-label'?: never; 'aria-labelledby': string }\n | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n// Polymorphic IconButton props with required accessibility\ntype IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps;\n\ntype IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {\n as?: C;\n} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;\n\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },\n) => React.ReactElement | null;\n\nconst IconButton = React.forwardRef(\n (\n { className, ...props }: IconButtonProps,\n forwardedRef: React.ForwardedRef<IconButtonElement>,\n ) => {\n // Warn in development if no accessibility attributes are provided\n if (process.env.NODE_ENV === 'development') {\n const hasAriaLabel = 'aria-label' in props && props['aria-label'];\n const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];\n const hasChildren = 'children' in props && props.children;\n\n if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {\n console.warn(\n 'IconButton: Icon buttons must have an accessible name. Please provide either:' +\n '\\n- aria-label prop with descriptive text' +\n '\\n- aria-labelledby prop referencing a label element' +\n '\\n- or visible text children',\n );\n }\n }\n\n return (\n <BaseButton\n {...props}\n ref={forwardedRef}\n className={classNames('rt-IconButton', className)}\n />\n );\n },\n) as IconButtonComponent & { displayName?: string };\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],
5
- "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA2B,sCAsB3B,MAAMJ,EAAaE,EAAM,WACvB,CACE,CAAE,UAAAG,EAAW,GAAGC,CAAM,EACtBC,IAmBEL,EAAA,cAAC,cACE,GAAGI,EACJ,IAAKC,EACL,aAAW,EAAAC,SAAW,gBAAiBH,CAAS,EAClD,CAGN,EAEAL,EAAW,YAAc",
6
- "names": ["icon_button_exports", "__export", "IconButton", "__toCommonJS", "React", "import_classnames", "import_base_button", "className", "props", "forwardedRef", "classNames"]
4
+ "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-button.js';\nimport { Tooltip } from './tooltip.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype IconButtonElement = React.ElementRef<typeof BaseButton>;\n\n/**\n * Required accessibility props for icon buttons\n * Icon buttons must have an accessible name to meet WCAG guidelines\n *\n * Three ways to provide accessibility:\n * 1. aria-label: Direct descriptive text\n * 2. aria-labelledby: Reference to a label element\n * 3. children: Visible text content (fallback)\n */\ntype AccessibilityProps =\n | { 'aria-label': string; 'aria-labelledby'?: never }\n | { 'aria-label'?: never; 'aria-labelledby': string }\n | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n/**\n * Tooltip configuration props that can be passed to IconButton\n * These props are forwarded to the underlying Tooltip component\n */\ninterface IconButtonTooltipProps {\n /** Content to display in the tooltip on hover/focus */\n tooltip?: React.ReactNode;\n /** Side of the button where the tooltip should appear */\n tooltipSide?: 'top' | 'right' | 'bottom' | 'left';\n /** Alignment of the tooltip relative to the button */\n tooltipAlign?: 'start' | 'center' | 'end';\n /** Delay before showing the tooltip (in milliseconds) */\n tooltipDelayDuration?: number;\n /** Whether to disable hoverable content behavior */\n tooltipDisableHoverableContent?: boolean;\n}\n\n/**\n * Core IconButton props excluding the 'as' prop for polymorphic behavior\n * Combines BaseButton props with accessibility requirements and tooltip functionality\n */\ntype IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps & IconButtonTooltipProps;\n\n/**\n * Polymorphic IconButton props that support rendering as different HTML elements\n * @template C - The element type to render as (defaults to 'button')\n */\ntype IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {\n /** Element type to render as (e.g., 'a', 'span', etc.) */\n as?: C;\n} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;\n\n/**\n * IconButton component type that supports polymorphic rendering\n * @template C - The element type to render as\n */\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },\n) => React.ReactElement | null;\n\n/**\n * IconButton component for compact, accessible icon-only interactions\n *\n * The IconButton component extends Button with specialized behavior for visual symbols.\n * It enforces accessibility requirements, provides automatic square sizing, and includes\n * built-in tooltip integration. Icon buttons are essential for space-efficient interfaces\n * while maintaining accessibility compliance.\n *\n * Key features:\n * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)\n * - Automatic square aspect ratios for consistent visual alignment\n * - Built-in tooltip support for context and guidance\n * - Same variant and size system as Button for consistency\n * - Runtime validation for accessibility compliance\n *\n * @example\n * ```tsx\n * // Basic icon button with aria-label\n * <IconButton aria-label=\"Settings\">\n * <Settings />\n * </IconButton>\n *\n * // Icon button with tooltip\n * <IconButton aria-label=\"Save\" tooltip=\"Save your progress\">\n * <Save />\n * </IconButton>\n *\n * // Icon button with aria-labelledby\n * <IconButton aria-labelledby=\"settings-label\">\n * <Settings />\n * </IconButton>\n * <span id=\"settings-label\">Open settings panel</span>\n *\n * // Icon button with visible text (fallback)\n * <IconButton>\n * <Settings />\n * Settings\n * </IconButton>\n * ```\n */\nconst IconButton = React.forwardRef(\n (\n {\n className,\n tooltip,\n tooltipSide = 'top',\n tooltipAlign = 'center',\n tooltipDelayDuration,\n tooltipDisableHoverableContent,\n ...props\n }: IconButtonProps,\n forwardedRef: React.ForwardedRef<IconButtonElement>,\n ) => {\n // Runtime accessibility validation to ensure WCAG compliance\n // This helps catch accessibility issues during development\n const hasAriaLabel = 'aria-label' in props && props['aria-label'];\n const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];\n const hasChildren = 'children' in props && props.children;\n\n // Throw descriptive error if no accessible name is provided\n if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {\n throw new Error(\n 'IconButton: Icon buttons must have an accessible name. Please provide either:' +\n '\\n- aria-label prop with descriptive text' +\n '\\n- aria-labelledby prop referencing a label element' +\n '\\n- or visible text children',\n );\n }\n\n // Create the base icon button element with accessibility props\n const iconButton = (\n <BaseButton\n {...props}\n ref={forwardedRef}\n className={classNames('rt-IconButton', className)}\n />\n );\n\n // If no tooltip is provided, return the icon button as-is for better performance\n if (!tooltip) {\n return iconButton;\n }\n\n // Wrap with Tooltip when tooltip content is provided\n // This creates a compound component that handles both button and tooltip functionality\n return (\n <Tooltip\n content={tooltip}\n side={tooltipSide}\n align={tooltipAlign}\n delayDuration={tooltipDelayDuration}\n disableHoverableContent={tooltipDisableHoverableContent}\n >\n {iconButton}\n </Tooltip>\n );\n },\n) as IconButtonComponent & { displayName?: string };\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],
5
+ "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA2B,sCAC3BC,EAAwB,wBAmGxB,MAAML,EAAaE,EAAM,WACvB,CACE,CACE,UAAAI,EACA,QAAAC,EACA,YAAAC,EAAc,MACd,aAAAC,EAAe,SACf,qBAAAC,EACA,+BAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAGH,MAAMC,EAAe,eAAgBF,GAASA,EAAM,YAAY,EAC1DG,EAAoB,oBAAqBH,GAASA,EAAM,iBAAiB,EACzEI,EAAc,aAAcJ,GAASA,EAAM,SAGjD,GAAI,CAACE,GAAgB,CAACC,GAAqB,CAACC,EAC1C,MAAM,IAAI,MACR;AAAA;AAAA;AAAA,2BAIF,EAIF,MAAMC,EACJf,EAAA,cAAC,cACE,GAAGU,EACJ,IAAKC,EACL,aAAW,EAAAK,SAAW,gBAAiBZ,CAAS,EAClD,EAIF,OAAKC,EAOHL,EAAA,cAAC,WACC,QAASK,EACT,KAAMC,EACN,MAAOC,EACP,cAAeC,EACf,wBAAyBC,GAExBM,CACH,EAdOA,CAgBX,CACF,EAEAjB,EAAW,YAAc",
6
+ "names": ["icon_button_exports", "__export", "IconButton", "__toCommonJS", "React", "import_classnames", "import_base_button", "import_tooltip", "className", "tooltip", "tooltipSide", "tooltipAlign", "tooltipDelayDuration", "tooltipDisableHoverableContent", "props", "forwardedRef", "hasAriaLabel", "hasAriaLabelledBy", "hasChildren", "iconButton", "classNames"]
7
7
  }
@@ -6,41 +6,160 @@ import type { WidthProps } from '../props/width.props.js';
6
6
  import type { HeightProps } from '../props/height.props.js';
7
7
  import type { LayoutProps } from '../props/layout.props.js';
8
8
  import type { GetPropDefTypes } from '../props/prop-def.js';
9
+ /**
10
+ * Core Image props that extend the base image prop definitions
11
+ * These props provide enhanced functionality beyond standard HTML img attributes
12
+ */
9
13
  type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
14
+ /**
15
+ * Native loading behavior for the image
16
+ * 'lazy' defers loading until the image is near the viewport
17
+ * 'eager' loads the image immediately
18
+ */
10
19
  loading?: 'eager' | 'lazy';
11
20
  /**
12
- * Placeholder image URL to show while the main image is loading.
13
- * Can be a low-quality/blurred version of the main image.
21
+ * Placeholder image URL to show while the main image is loading
22
+ *
23
+ * Best practices:
24
+ * - Use a low-quality/blurred version of the main image
25
+ * - Keep file size small (under 10KB recommended)
26
+ * - Use same aspect ratio as main image
27
+ * - Consider using base64 data URLs for inline placeholders
28
+ *
29
+ * @example
30
+ * ```tsx
31
+ * <Image
32
+ * src="/high-res-image.jpg"
33
+ * placeholder="/low-res-placeholder.jpg"
34
+ * alt="Product photo"
35
+ * />
36
+ * ```
14
37
  */
15
38
  placeholder?: string;
16
39
  /**
17
- * Shows a skeleton placeholder while loading instead of a blank space.
40
+ * Shows a skeleton placeholder while loading instead of a blank space
41
+ *
42
+ * Use this when:
43
+ * - You don't have a placeholder image
44
+ * - You want consistent loading states across your interface
45
+ * - The image is part of a content layout that needs stable dimensions
18
46
  */
19
47
  showSkeleton?: boolean;
20
48
  /**
21
- * Whether the image should fade in when loaded. Set to false for background images or when you want immediate visibility.
49
+ * Whether the image should fade in when loaded
50
+ *
51
+ * Set to false for:
52
+ * - Background images where immediate visibility is important
53
+ * - Images that need to appear instantly for UX reasons
54
+ * - When you're implementing custom loading animations
22
55
  */
23
56
  fadeIn?: boolean;
24
57
  /**
25
- * Callback fired when the image successfully loads.
58
+ * Callback fired when the image successfully loads
59
+ *
60
+ * Use this to:
61
+ * - Track image loading performance
62
+ * - Trigger layout adjustments after load
63
+ * - Implement custom loading state management
26
64
  */
27
65
  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
28
66
  /**
29
- * Callback fired when the image fails to load.
67
+ * Callback fired when the image fails to load
68
+ *
69
+ * Use this to:
70
+ * - Log errors for monitoring
71
+ * - Show fallback content
72
+ * - Implement retry logic
30
73
  */
31
74
  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
32
- /**
33
- * Style object to apply to the wrapper container. Useful for overriding display, width, height, etc.
34
- */
35
- wrapperStyle?: React.CSSProperties;
36
75
  };
76
+ /**
77
+ * Complete Image component props interface
78
+ *
79
+ * Combines HTML img attributes with design system props and enhanced functionality.
80
+ * Excludes conflicting props like 'color', 'width', 'height' that are handled by the design system.
81
+ */
37
82
  interface ImageProps extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>, MarginProps, WidthProps, HeightProps, LayoutProps, ImageOwnProps {
38
83
  /**
39
- * The alt attribute provides alternative information for an image if a user for some reason cannot view it.
40
- * Required for accessibility when not using asChild. Use empty string for decorative images.
84
+ * Alternative text for the image
85
+ *
86
+ * Required for accessibility when not using asChild pattern.
87
+ * Describes the image content for screen readers and when images fail to load.
88
+ *
89
+ * Guidelines:
90
+ * - Be descriptive but concise
91
+ * - Don't include "image of" or "picture of"
92
+ * - Use empty string ("") for purely decorative images
93
+ * - Describe the content and context, not just what you see
94
+ *
95
+ * @example
96
+ * ```tsx
97
+ * // Good alt text
98
+ * <Image src="/chart.png" alt="Sales increased 25% from Q1 to Q2" />
99
+ *
100
+ * // Decorative image
101
+ * <Image src="/decoration.png" alt="" />
102
+ *
103
+ * // Avoid generic descriptions
104
+ * <Image src="/photo.jpg" alt="A photo" /> // ❌ Too generic
105
+ * <Image src="/photo.jpg" alt="Team celebrating project launch" /> // ✅ Descriptive
106
+ * ```
41
107
  */
42
108
  alt: string;
43
109
  }
110
+ /**
111
+ * Image component for displaying images with enhanced loading states and accessibility
112
+ *
113
+ * The Image component extends the standard HTML img element with advanced features
114
+ * including placeholder images, skeleton loading states, fade-in animations, and
115
+ * comprehensive accessibility support. It integrates seamlessly with the design
116
+ * system's layout, spacing, and theming capabilities.
117
+ *
118
+ * Key features:
119
+ * - Progressive loading with placeholder and skeleton states
120
+ * - Fade-in animations with reduced motion support
121
+ * - Comprehensive accessibility with ARIA attributes
122
+ * - Object-fit control for responsive image scaling
123
+ * - Caption support for additional context
124
+ * - AsChild pattern for flexible composition
125
+ * - Error handling with fallback states
126
+ * - Performance optimizations for cached images
127
+ *
128
+ * @example
129
+ * ```tsx
130
+ * // Basic usage
131
+ * <Image src="/photo.jpg" alt="Team photo" />
132
+ *
133
+ * // With placeholder and skeleton
134
+ * <Image
135
+ * src="/high-res.jpg"
136
+ * placeholder="/low-res.jpg"
137
+ * showSkeleton
138
+ * alt="Product showcase"
139
+ * />
140
+ *
141
+ * // With caption and custom fit
142
+ * <Image
143
+ * src="/chart.png"
144
+ * alt="Sales data visualization"
145
+ * caption="Q3 2024 Sales Performance"
146
+ * fit="contain"
147
+ * width="400px"
148
+ * height="300px"
149
+ * />
150
+ *
151
+ * // As clickable element
152
+ * <Image
153
+ * asChild
154
+ * src="/thumbnail.jpg"
155
+ * alt="View full gallery"
156
+ * >
157
+ * <a href="/gallery">
158
+ * View Gallery
159
+ * </a>
160
+ * </Image>
161
+ * ```
162
+ */
44
163
  declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
45
164
  export { Image };
46
165
  export type { ImageProps };
@@ -1 +1 @@
1
- {"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AASjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC,CAAC;AAEF,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,KAAK,qFA0TT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AASjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAI5D;;;GAGG;AACH,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF;;;;;GAKG;AACH,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa;IACf;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,QAAA,MAAM,KAAK,qFA+OT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var V=Object.create;var b=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var R=(o,e)=>{for(var s in e)b(o,s,{get:e[s],enumerable:!0})},z=(o,e,s,y)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of Y(e))!_.call(o,p)&&p!==s&&b(o,p,{get:()=>e[p],enumerable:!(y=X(e,p))||y.enumerable});return o};var O=(o,e,s)=>(s=o!=null?V(Z(o)):{},z(e||!o||!o.__esModule?b(s,"default",{value:o,enumerable:!0}):s,o)),ee=o=>z(b({},"__esModule",{value:!0}),o);var te={};R(te,{Image:()=>x});module.exports=ee(te);var t=O(require("react")),a=O(require("classnames")),B=require("./image.props.js"),q=require("../helpers/extract-props.js"),A=require("../props/margin.props.js"),G=require("../props/width.props.js"),F=require("../props/height.props.js"),$=require("../props/layout.props.js"),J=require("./skeleton.js"),v=require("./box.js");const x=t.forwardRef((o,e)=>{const{variant:s="surface",wrapperStyle:y,...p}=o,{asChild:D,className:n,radius:l,style:d,loading:c="lazy",alt:u,src:i,placeholder:E,showSkeleton:K=!1,fadeIn:k=!0,onLoad:C,onError:w,children:H,...M}=(0,q.extractProps)(p,B.imagePropDefs,A.marginPropDefs,G.widthPropDefs,F.heightPropDefs,$.layoutPropDefs),[T,S]=t.useState(!1),[Q,L]=t.useState(!1),[U,N]=t.useState(!!E),g=t.useRef(null),f=t.useCallback(r=>{S(!0),L(!1),N(!1),C?.(r)},[C]),I=t.useCallback(r=>{S(!1),L(!0),N(!1),w?.(r)},[w]);if(t.useEffect(()=>{const r=g.current;r&&r.complete&&r.naturalWidth>0&&(S(!0),L(!1),N(!1))},[i]),!i)return console.warn("Image component: src prop is required"),null;!D&&u===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const h={width:"100%",height:"100%",display:"block",opacity:k?T?1:0:1,transition:k?"opacity 0.3s ease-out":"none",...d},P={position:"relative",display:"block",...y},j=K&&!T&&!Q?t.createElement(J.Skeleton,{width:"100%",height:"100px",style:{borderRadius:l?`var(--radius-${l})`:void 0},className:n}):null,W=E&&U?t.createElement("img",{"data-radius":l,style:{...h,filter:"blur(4px)",opacity:.7,transition:"opacity 0.3s ease-out"},className:(0,a.default)("rt-reset","rt-Image","rt-Image--placeholder",n),alt:"",src:E}):null;if(D&&H){const r=t.Children.only(H);return s==="blur"?t.cloneElement(r,{className:(0,a.default)(r.props?.className,"rt-variant-blur"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...P,...d,...r.props?.style},children:t.createElement(t.Fragment,null,t.createElement("img",{"data-radius":l,loading:c,style:{position:"absolute",top:"0",left:"0",width:"105%",height:"105%",transform:"translate(-2.5%, -2.5%)",filter:"blur(16px) saturate(1.5)",opacity:.5,zIndex:-1},className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur-bg",n),alt:"",src:i}),t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur",n),alt:u,src:i,onLoad:f,onError:I,ref:m=>{g.current=m,typeof e=="function"?e(m):e&&(e.current=m)}}))}):t.cloneElement(r,{className:(0,a.default)(r.props?.className),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...P,...r.props?.style},children:t.createElement(t.Fragment,null,j,W,t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image",n),alt:u,src:i,onLoad:f,onError:I,ref:m=>{g.current=m,typeof e=="function"?e(m):e&&(e.current=m)}}))})}return s==="blur"?t.createElement(v.Box,{className:(0,a.default)("rt-variant-blur",n),style:{...d,...P},...M},t.createElement("img",{"data-radius":l,loading:c,style:{position:"absolute",top:"0",left:"0",width:"105%",height:"105%",transform:"translate(-2.5%, -2.5%)",filter:"blur(16px) saturate(1.5)",opacity:.5,zIndex:-1},className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur-bg",n),alt:"",src:i}),t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur",n),alt:u,src:i,onLoad:f,onError:I,ref:r=>{g.current=r,typeof e=="function"?e(r):e&&(e.current=r)}})):t.createElement(v.Box,{className:n,style:{...d,...P},...M},j,W,t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image",n),alt:u,src:i,onLoad:f,onError:I,ref:r=>{g.current=r,typeof e=="function"?e(r):e&&(e.current=r)}}))});x.displayName="Image";
1
+ "use strict";var U=Object.create;var l=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var _=(o,t)=>{for(var r in t)l(o,r,{get:t[r],enumerable:!0})},D=(o,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of X(t))!Z.call(o,i)&&i!==r&&l(o,i,{get:()=>t[i],enumerable:!(s=V(t,i))||s.enumerable});return o};var C=(o,t,r)=>(r=o!=null?U(Y(o)):{},D(t||!o||!o.__esModule?l(r,"default",{value:o,enumerable:!0}):r,o)),$=o=>D(l({},"__esModule",{value:!0}),o);var ee={};_(ee,{Image:()=>y});module.exports=$(ee);var e=C(require("react")),h=C(require("classnames")),N=require("./image.props.js"),H=require("../helpers/extract-props.js"),k=require("../props/margin.props.js"),M=require("../props/width.props.js"),T=require("../props/height.props.js"),j=require("../props/layout.props.js"),W=require("./skeleton.js"),z=require("./slot.js");const y=e.forwardRef((o,t)=>{const{asChild:r,className:s,style:i,loading:O="lazy",alt:u,src:p,placeholder:m,showSkeleton:R=!1,fadeIn:P=!0,errorAriaLabel:q="Failed to load image",radius:G,caption:n,onLoad:I,onError:v,children:A,...E}=(0,H.extractProps)(o,N.imagePropDefs,k.marginPropDefs,M.widthPropDefs,T.heightPropDefs,j.layoutPropDefs),[d,c]=e.useState("loading"),[F,g]=e.useState(!!m),S=e.useRef(null),B=e.useCallback(a=>{c("loaded"),g(!1),I?.(a)},[I]),J=e.useCallback(a=>{c("error"),g(!1),v?.(a)},[v]);if(e.useEffect(()=>{const a=S.current;a&&a.complete&&a.naturalWidth>0&&(c("loaded"),g(!1))},[p]),!p)return console.warn("Image component: src prop is required"),null;!r&&u===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const L=d==="loading",f=d==="error",K=d==="loaded",Q={"aria-busy":L,"aria-invalid":f,"aria-describedby":f?"image-error":void 0},b={width:"100%",height:"100%",display:"block",opacity:P?K?1:0:1,transition:P?"opacity 0.3s ease-out":"none"},w=e.createElement(e.Fragment,null,e.createElement("div",{style:{position:"relative",flex:n?"1 1 0%":void 0,height:n?void 0:"100%",minHeight:0}},f&&e.createElement("div",{id:"image-error",className:"rt-sr-only","aria-live":"polite"},q),R&&L&&e.createElement(W.Skeleton,{width:"100%",height:"100%",style:{position:"absolute",inset:0}}),m&&F&&e.createElement("img",{style:{...b,position:"absolute",inset:0,filter:"blur(4px)",opacity:.7,zIndex:0},className:(0,h.default)("rt-reset","rt-Image","rt-Image--placeholder"),alt:"",src:m}),e.createElement("img",{ref:a=>{S.current=a,typeof t=="function"?t(a):t&&(t.current=a)},loading:O,style:{...b,position:"relative",zIndex:1},className:(0,h.default)("rt-reset","rt-Image",s),alt:u,src:p,"data-radius":G,onLoad:B,onError:J,...Q})),n&&e.createElement("div",{className:"rt-Image-caption",style:{flex:"0 0 auto"}},n)),x={display:n?"flex":"block",flexDirection:n?"column":void 0,...i};return r?e.createElement(z.Slot,{className:s,style:x,...E},e.cloneElement(A,{},w)):e.createElement("div",{className:s,style:x,...E},w)});y.displayName="Image";
2
2
  //# sourceMappingURL=image.js.map