@remix-run/ui 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (395) hide show
  1. package/README.md +50 -164
  2. package/dist/accordion/index.d.ts +46 -0
  3. package/dist/accordion/index.js +142 -0
  4. package/dist/accordion/index.js.map +1 -0
  5. package/dist/accordion/primitives.d.ts +104 -0
  6. package/dist/accordion/primitives.js +312 -0
  7. package/dist/accordion/primitives.js.map +1 -0
  8. package/dist/{components/anchor/anchor.d.ts → anchor/index.d.ts} +8 -1
  9. package/dist/{components/anchor/anchor.js → anchor/index.js} +31 -12
  10. package/dist/anchor/index.js.map +1 -0
  11. package/dist/animation/demos/aspect-ratio.d.ts +2 -0
  12. package/dist/animation/demos/aspect-ratio.js +69 -0
  13. package/dist/animation/demos/aspect-ratio.js.map +1 -0
  14. package/dist/animation/demos/bouncy-switch.d.ts +2 -0
  15. package/dist/animation/demos/bouncy-switch.js +36 -0
  16. package/dist/animation/demos/bouncy-switch.js.map +1 -0
  17. package/dist/animation/demos/color-interpolation.d.ts +1 -0
  18. package/dist/animation/demos/color-interpolation.js +53 -0
  19. package/dist/animation/demos/color-interpolation.js.map +1 -0
  20. package/dist/animation/demos/cube.d.ts +2 -0
  21. package/dist/animation/demos/cube.js +86 -0
  22. package/dist/animation/demos/cube.js.map +1 -0
  23. package/dist/animation/demos/default-animate.d.ts +2 -0
  24. package/dist/animation/demos/default-animate.js +89 -0
  25. package/dist/animation/demos/default-animate.js.map +1 -0
  26. package/dist/animation/demos/drag-release.d.ts +24 -0
  27. package/dist/animation/demos/drag-release.js +96 -0
  28. package/dist/animation/demos/drag-release.js.map +1 -0
  29. package/dist/animation/demos/enter.d.ts +1 -0
  30. package/dist/animation/demos/enter.js +19 -0
  31. package/dist/animation/demos/enter.js.map +1 -0
  32. package/dist/animation/demos/exit.d.ts +2 -0
  33. package/dist/animation/demos/exit.js +58 -0
  34. package/dist/animation/demos/exit.js.map +1 -0
  35. package/dist/animation/demos/flip-toggle.d.ts +2 -0
  36. package/dist/animation/demos/flip-toggle.js +37 -0
  37. package/dist/animation/demos/flip-toggle.js.map +1 -0
  38. package/dist/animation/demos/hold-to-confirm.d.ts +13 -0
  39. package/dist/animation/demos/hold-to-confirm.js +211 -0
  40. package/dist/animation/demos/hold-to-confirm.js.map +1 -0
  41. package/dist/animation/demos/html-content.d.ts +2 -0
  42. package/dist/animation/demos/html-content.js +30 -0
  43. package/dist/animation/demos/html-content.js.map +1 -0
  44. package/dist/animation/demos/interruptible-keyframes.d.ts +1 -0
  45. package/dist/animation/demos/interruptible-keyframes.js +48 -0
  46. package/dist/animation/demos/interruptible-keyframes.js.map +1 -0
  47. package/dist/animation/demos/keyframes.d.ts +1 -0
  48. package/dist/animation/demos/keyframes.js +24 -0
  49. package/dist/animation/demos/keyframes.js.map +1 -0
  50. package/dist/animation/demos/material-ripple.d.ts +2 -0
  51. package/dist/animation/demos/material-ripple.js +127 -0
  52. package/dist/animation/demos/material-ripple.js.map +1 -0
  53. package/dist/animation/demos/mixin-presence-list.d.ts +2 -0
  54. package/dist/animation/demos/mixin-presence-list.js +88 -0
  55. package/dist/animation/demos/mixin-presence-list.js.map +1 -0
  56. package/dist/animation/demos/mixin-reclaim.d.ts +2 -0
  57. package/dist/animation/demos/mixin-reclaim.js +90 -0
  58. package/dist/animation/demos/mixin-reclaim.js.map +1 -0
  59. package/dist/animation/demos/multi-state-badge.d.ts +2 -0
  60. package/dist/animation/demos/multi-state-badge.js +231 -0
  61. package/dist/animation/demos/multi-state-badge.js.map +1 -0
  62. package/dist/animation/demos/press.d.ts +2 -0
  63. package/dist/animation/demos/press.js +63 -0
  64. package/dist/animation/demos/press.js.map +1 -0
  65. package/dist/animation/demos/reordering.d.ts +2 -0
  66. package/dist/animation/demos/reordering.js +53 -0
  67. package/dist/animation/demos/reordering.js.map +1 -0
  68. package/dist/animation/demos/rolling-square.d.ts +2 -0
  69. package/dist/animation/demos/rolling-square.js +42 -0
  70. package/dist/animation/demos/rolling-square.js.map +1 -0
  71. package/dist/animation/demos/rotate.d.ts +1 -0
  72. package/dist/animation/demos/rotate.js +18 -0
  73. package/dist/animation/demos/rotate.js.map +1 -0
  74. package/dist/animation/demos/shared-layout.d.ts +2 -0
  75. package/dist/animation/demos/shared-layout.js +114 -0
  76. package/dist/animation/demos/shared-layout.js.map +1 -0
  77. package/dist/animation/demos/transition-options.d.ts +1 -0
  78. package/dist/animation/demos/transition-options.js +21 -0
  79. package/dist/animation/demos/transition-options.js.map +1 -0
  80. package/dist/animation/spring.d.ts +22 -0
  81. package/dist/animation/spring.js +22 -0
  82. package/dist/animation/spring.js.map +1 -1
  83. package/dist/{components/breadcrumbs/breadcrumbs.js → breadcrumbs/index.js} +19 -19
  84. package/dist/breadcrumbs/index.js.map +1 -0
  85. package/dist/button/index.d.ts +15 -0
  86. package/dist/button/index.js +128 -0
  87. package/dist/button/index.js.map +1 -0
  88. package/dist/checkbox/index.d.ts +14 -0
  89. package/dist/checkbox/index.js +125 -0
  90. package/dist/checkbox/index.js.map +1 -0
  91. package/dist/combobox/index.d.ts +21 -0
  92. package/dist/combobox/index.js +58 -0
  93. package/dist/combobox/index.js.map +1 -0
  94. package/dist/{components/combobox/combobox.d.ts → combobox/primitives.d.ts} +3 -7
  95. package/dist/{components/combobox/combobox.js → combobox/primitives.js} +8 -61
  96. package/dist/combobox/primitives.js.map +1 -0
  97. package/dist/input/index.d.ts +13 -0
  98. package/dist/input/index.js +121 -0
  99. package/dist/input/index.js.map +1 -0
  100. package/dist/listbox/flash-attribute.js.map +1 -0
  101. package/dist/{components/listbox/listbox.d.ts → listbox/index.d.ts} +2 -6
  102. package/dist/{components/listbox/listbox.js → listbox/index.js} +4 -82
  103. package/dist/listbox/index.js.map +1 -0
  104. package/dist/menu/hover-aim.js.map +1 -0
  105. package/dist/menu/index.d.ts +42 -0
  106. package/dist/menu/index.js +250 -0
  107. package/dist/menu/index.js.map +1 -0
  108. package/dist/{components/menu/menu.d.ts → menu/primitives.d.ts} +6 -32
  109. package/dist/{components/menu/menu.js → menu/primitives.js} +117 -279
  110. package/dist/menu/primitives.js.map +1 -0
  111. package/dist/{components/popover/popover.d.ts → popover/index.d.ts} +3 -5
  112. package/dist/{components/popover/popover.js → popover/index.js} +15 -51
  113. package/dist/popover/index.js.map +1 -0
  114. package/dist/{interactions/outside-click/outside-click-mixin.js → popover/outside-click.js} +1 -1
  115. package/dist/popover/outside-click.js.map +1 -0
  116. package/dist/popover/scroll-lock.d.ts +1 -0
  117. package/dist/{utils → popover}/scroll-lock.js +0 -18
  118. package/dist/popover/scroll-lock.js.map +1 -0
  119. package/dist/radio/index.d.ts +12 -0
  120. package/dist/radio/index.js +77 -0
  121. package/dist/radio/index.js.map +1 -0
  122. package/dist/runtime/client-entries.d.ts +1 -2
  123. package/dist/runtime/client-entries.js.map +1 -1
  124. package/dist/runtime/component.d.ts +2 -2
  125. package/dist/runtime/component.js +1 -1
  126. package/dist/runtime/component.js.map +1 -1
  127. package/dist/runtime/diff-dom.js +194 -21
  128. package/dist/runtime/diff-dom.js.map +1 -1
  129. package/dist/runtime/frame.d.ts +7 -0
  130. package/dist/runtime/frame.js +176 -41
  131. package/dist/runtime/frame.js.map +1 -1
  132. package/dist/runtime/jsx.d.ts +2 -3
  133. package/dist/runtime/jsx.js.map +1 -1
  134. package/dist/runtime/reconcile.js +11 -5
  135. package/dist/runtime/reconcile.js.map +1 -1
  136. package/dist/runtime/vdom.js +3 -0
  137. package/dist/runtime/vdom.js.map +1 -1
  138. package/dist/select/index.d.ts +19 -0
  139. package/dist/select/index.js +95 -0
  140. package/dist/select/index.js.map +1 -0
  141. package/dist/select/keydown.js.map +1 -0
  142. package/dist/{components/select/select.d.ts → select/primitives.d.ts} +4 -6
  143. package/dist/{components/select/select.js → select/primitives.js} +12 -64
  144. package/dist/select/primitives.js.map +1 -0
  145. package/dist/server/stream.js +5 -4
  146. package/dist/server/stream.js.map +1 -1
  147. package/dist/shared/focus-styles.d.ts +1 -0
  148. package/dist/shared/focus-styles.js +2 -0
  149. package/dist/shared/focus-styles.js.map +1 -0
  150. package/dist/shared/icons.d.ts +9 -0
  151. package/dist/shared/icons.js +42 -0
  152. package/dist/shared/icons.js.map +1 -0
  153. package/dist/shared/listbox-popover-styles.d.ts +6 -0
  154. package/dist/shared/listbox-popover-styles.js +137 -0
  155. package/dist/shared/listbox-popover-styles.js.map +1 -0
  156. package/dist/shared/style-values.d.ts +78 -0
  157. package/dist/{theme/presets/rmx-01/index.js → shared/style-values.js} +3 -34
  158. package/dist/shared/style-values.js.map +1 -0
  159. package/dist/{interactions/typeahead/typeahead-mixin.js → shared/typeahead.js} +1 -1
  160. package/dist/shared/typeahead.js.map +1 -0
  161. package/dist/shared/wait-for-css-transition.js.map +1 -0
  162. package/dist/shared/wait.js.map +1 -0
  163. package/dist/style/style.js +27 -10
  164. package/dist/style/style.js.map +1 -1
  165. package/dist/tabs/index.d.ts +32 -0
  166. package/dist/tabs/index.js +157 -0
  167. package/dist/tabs/index.js.map +1 -0
  168. package/dist/tabs/primitives.d.ts +57 -0
  169. package/dist/tabs/primitives.js +238 -0
  170. package/dist/tabs/primitives.js.map +1 -0
  171. package/dist/toggle/index.d.ts +9 -0
  172. package/dist/toggle/index.js +108 -0
  173. package/dist/toggle/index.js.map +1 -0
  174. package/dist/toggle/primitives.d.ts +29 -0
  175. package/dist/toggle/primitives.js +127 -0
  176. package/dist/toggle/primitives.js.map +1 -0
  177. package/package.json +74 -45
  178. package/src/{components/accordion → accordion}/README.md +50 -14
  179. package/src/accordion/index.tsx +285 -0
  180. package/src/accordion/primitives.tsx +512 -0
  181. package/src/{components/anchor → anchor}/README.md +48 -5
  182. package/src/{components/anchor/anchor.ts → anchor/index.ts} +53 -12
  183. package/src/animation/demos/aspect-ratio.tsx +120 -0
  184. package/src/animation/demos/bouncy-switch.tsx +47 -0
  185. package/src/animation/demos/color-interpolation.tsx +73 -0
  186. package/src/animation/demos/cube.tsx +116 -0
  187. package/src/animation/demos/default-animate.tsx +129 -0
  188. package/src/animation/demos/drag-release.ts +118 -0
  189. package/src/animation/demos/enter.tsx +22 -0
  190. package/src/animation/demos/exit.tsx +79 -0
  191. package/src/animation/demos/flip-toggle.tsx +46 -0
  192. package/src/animation/demos/hold-to-confirm.tsx +317 -0
  193. package/src/animation/demos/html-content.tsx +41 -0
  194. package/src/animation/demos/interruptible-keyframes.tsx +62 -0
  195. package/src/animation/demos/keyframes.tsx +29 -0
  196. package/src/animation/demos/material-ripple.tsx +158 -0
  197. package/src/animation/demos/mixin-presence-list.tsx +121 -0
  198. package/src/animation/demos/mixin-reclaim.tsx +125 -0
  199. package/src/animation/demos/multi-state-badge.tsx +426 -0
  200. package/src/animation/demos/press.tsx +67 -0
  201. package/src/animation/demos/reordering.tsx +68 -0
  202. package/src/animation/demos/rolling-square.tsx +57 -0
  203. package/src/animation/demos/rotate.tsx +21 -0
  204. package/src/animation/demos/shared-layout.tsx +211 -0
  205. package/src/animation/demos/transition-options.tsx +24 -0
  206. package/src/animation/spring.ts +22 -0
  207. package/src/{components/breadcrumbs → breadcrumbs}/README.md +4 -4
  208. package/src/{components/breadcrumbs/breadcrumbs.tsx → breadcrumbs/index.tsx} +18 -18
  209. package/src/button/README.md +44 -0
  210. package/src/button/index.ts +168 -0
  211. package/src/checkbox/README.md +59 -0
  212. package/src/checkbox/index.ts +162 -0
  213. package/src/{components/combobox → combobox}/README.md +58 -9
  214. package/src/combobox/index.tsx +112 -0
  215. package/src/{components/combobox/combobox.tsx → combobox/primitives.tsx} +5 -91
  216. package/src/input/README.md +52 -0
  217. package/src/input/index.ts +147 -0
  218. package/src/{components/listbox → listbox}/README.md +9 -41
  219. package/src/{components/listbox/listbox.ts → listbox/index.ts} +2 -87
  220. package/src/menu/README.md +161 -0
  221. package/src/menu/index.tsx +354 -0
  222. package/src/{components/menu/menu.tsx → menu/primitives.tsx} +117 -359
  223. package/src/{components/popover → popover}/README.md +20 -39
  224. package/src/{components/popover/popover.ts → popover/index.ts} +16 -61
  225. package/src/{utils → popover}/scroll-lock.ts +0 -28
  226. package/src/radio/README.md +53 -0
  227. package/src/radio/index.ts +100 -0
  228. package/src/runtime/client-entries.ts +1 -5
  229. package/src/runtime/component.ts +3 -3
  230. package/src/runtime/demos/readme.demo.tsx +704 -0
  231. package/src/runtime/diff-dom.ts +270 -20
  232. package/src/runtime/frame.ts +218 -41
  233. package/src/runtime/jsx.ts +6 -10
  234. package/src/runtime/reconcile.ts +11 -5
  235. package/src/runtime/vdom.ts +3 -0
  236. package/src/{components/select → select}/README.md +29 -19
  237. package/src/select/index.tsx +159 -0
  238. package/src/{components/select/select.tsx → select/primitives.tsx} +11 -99
  239. package/src/server/stream.ts +10 -5
  240. package/src/shared/focus-styles.ts +2 -0
  241. package/src/shared/icons.tsx +62 -0
  242. package/src/shared/listbox-popover-styles.ts +146 -0
  243. package/src/shared/style-values.ts +165 -0
  244. package/src/style/style.ts +29 -10
  245. package/src/tabs/README.md +141 -0
  246. package/src/tabs/index.tsx +244 -0
  247. package/src/tabs/primitives.ts +365 -0
  248. package/src/toggle/README.md +56 -0
  249. package/src/toggle/index.tsx +134 -0
  250. package/src/toggle/primitives.ts +192 -0
  251. package/dist/components/accordion/accordion.d.ts +0 -92
  252. package/dist/components/accordion/accordion.js +0 -335
  253. package/dist/components/accordion/accordion.js.map +0 -1
  254. package/dist/components/accordion/demos/card.demo.d.ts +0 -6
  255. package/dist/components/accordion/demos/card.demo.js +0 -58
  256. package/dist/components/accordion/demos/card.demo.js.map +0 -1
  257. package/dist/components/accordion/demos/multiple.demo.d.ts +0 -6
  258. package/dist/components/accordion/demos/multiple.demo.js +0 -19
  259. package/dist/components/accordion/demos/multiple.demo.js.map +0 -1
  260. package/dist/components/accordion/demos/overview.demo.d.ts +0 -6
  261. package/dist/components/accordion/demos/overview.demo.js +0 -19
  262. package/dist/components/accordion/demos/overview.demo.js.map +0 -1
  263. package/dist/components/anchor/anchor.js.map +0 -1
  264. package/dist/components/breadcrumbs/breadcrumbs.js.map +0 -1
  265. package/dist/components/breadcrumbs/demos/basic.demo.d.ts +0 -5
  266. package/dist/components/breadcrumbs/demos/basic.demo.js +0 -14
  267. package/dist/components/breadcrumbs/demos/basic.demo.js.map +0 -1
  268. package/dist/components/breadcrumbs/demos/separator.demo.d.ts +0 -5
  269. package/dist/components/breadcrumbs/demos/separator.demo.js +0 -14
  270. package/dist/components/breadcrumbs/demos/separator.demo.js.map +0 -1
  271. package/dist/components/button/button.d.ts +0 -105
  272. package/dist/components/button/button.js +0 -207
  273. package/dist/components/button/button.js.map +0 -1
  274. package/dist/components/button/demos/aliases.demo.d.ts +0 -6
  275. package/dist/components/button/demos/aliases.demo.js +0 -18
  276. package/dist/components/button/demos/aliases.demo.js.map +0 -1
  277. package/dist/components/button/demos/basic.demo.d.ts +0 -6
  278. package/dist/components/button/demos/basic.demo.js +0 -19
  279. package/dist/components/button/demos/basic.demo.js.map +0 -1
  280. package/dist/components/button/demos/states.demo.d.ts +0 -6
  281. package/dist/components/button/demos/states.demo.js +0 -29
  282. package/dist/components/button/demos/states.demo.js.map +0 -1
  283. package/dist/components/combobox/combobox.js.map +0 -1
  284. package/dist/components/combobox/demos/overview.demo.d.ts +0 -6
  285. package/dist/components/combobox/demos/overview.demo.js +0 -153
  286. package/dist/components/combobox/demos/overview.demo.js.map +0 -1
  287. package/dist/components/glyph/glyph.d.ts +0 -14
  288. package/dist/components/glyph/glyph.js +0 -65
  289. package/dist/components/glyph/glyph.js.map +0 -1
  290. package/dist/components/listbox/demos/overview.demo.d.ts +0 -6
  291. package/dist/components/listbox/demos/overview.demo.js +0 -64
  292. package/dist/components/listbox/demos/overview.demo.js.map +0 -1
  293. package/dist/components/listbox/listbox.js.map +0 -1
  294. package/dist/components/menu/demos/bubbling.demo.d.ts +0 -5
  295. package/dist/components/menu/demos/bubbling.demo.js +0 -15
  296. package/dist/components/menu/demos/bubbling.demo.js.map +0 -1
  297. package/dist/components/menu/demos/overview.demo.d.ts +0 -6
  298. package/dist/components/menu/demos/overview.demo.js +0 -32
  299. package/dist/components/menu/demos/overview.demo.js.map +0 -1
  300. package/dist/components/menu/hover-aim.js.map +0 -1
  301. package/dist/components/menu/menu.js.map +0 -1
  302. package/dist/components/popover/demos/overview.demo.d.ts +0 -6
  303. package/dist/components/popover/demos/overview.demo.js +0 -64
  304. package/dist/components/popover/demos/overview.demo.js.map +0 -1
  305. package/dist/components/popover/popover.js.map +0 -1
  306. package/dist/components/select/demos/deconstructed.demo.d.ts +0 -6
  307. package/dist/components/select/demos/deconstructed.demo.js +0 -53
  308. package/dist/components/select/demos/deconstructed.demo.js.map +0 -1
  309. package/dist/components/select/demos/overview.demo.d.ts +0 -5
  310. package/dist/components/select/demos/overview.demo.js +0 -27
  311. package/dist/components/select/demos/overview.demo.js.map +0 -1
  312. package/dist/components/select/select.js.map +0 -1
  313. package/dist/components/separator/separator.d.ts +0 -2
  314. package/dist/components/separator/separator.js +0 -15
  315. package/dist/components/separator/separator.js.map +0 -1
  316. package/dist/components/tabs/tabs.d.ts +0 -78
  317. package/dist/components/tabs/tabs.js +0 -339
  318. package/dist/components/tabs/tabs.js.map +0 -1
  319. package/dist/interactions/keydown/keydown.js.map +0 -1
  320. package/dist/interactions/outside-click/outside-click-mixin.js.map +0 -1
  321. package/dist/interactions/typeahead/typeahead-mixin.js.map +0 -1
  322. package/dist/theme/contract.d.ts +0 -61
  323. package/dist/theme/contract.js +0 -131
  324. package/dist/theme/contract.js.map +0 -1
  325. package/dist/theme/glyph-contract.d.ts +0 -11
  326. package/dist/theme/glyph-contract.js +0 -34
  327. package/dist/theme/glyph-contract.js.map +0 -1
  328. package/dist/theme/presets/rmx-01/glyphs.d.ts +0 -2
  329. package/dist/theme/presets/rmx-01/glyphs.js +0 -252
  330. package/dist/theme/presets/rmx-01/glyphs.js.map +0 -1
  331. package/dist/theme/presets/rmx-01/index.d.ts +0 -4
  332. package/dist/theme/presets/rmx-01/index.js.map +0 -1
  333. package/dist/theme/runtime.d.ts +0 -2
  334. package/dist/theme/runtime.js +0 -84
  335. package/dist/theme/runtime.js.map +0 -1
  336. package/dist/theme/theme.d.ts +0 -6
  337. package/dist/theme/theme.js +0 -5
  338. package/dist/theme/theme.js.map +0 -1
  339. package/dist/utils/flash-attribute.js.map +0 -1
  340. package/dist/utils/scroll-lock.d.ts +0 -3
  341. package/dist/utils/scroll-lock.js.map +0 -1
  342. package/dist/utils/wait-for-css-transition.js.map +0 -1
  343. package/dist/utils/wait.js.map +0 -1
  344. package/src/components/accordion/accordion.tsx +0 -565
  345. package/src/components/accordion/demos/card.demo.tsx +0 -113
  346. package/src/components/accordion/demos/multiple.demo.tsx +0 -56
  347. package/src/components/accordion/demos/overview.demo.tsx +0 -56
  348. package/src/components/breadcrumbs/demos/basic.demo.tsx +0 -17
  349. package/src/components/breadcrumbs/demos/separator.demo.tsx +0 -18
  350. package/src/components/button/README.md +0 -44
  351. package/src/components/button/button.tsx +0 -286
  352. package/src/components/button/demos/aliases.demo.tsx +0 -27
  353. package/src/components/button/demos/basic.demo.tsx +0 -30
  354. package/src/components/button/demos/states.demo.tsx +0 -52
  355. package/src/components/combobox/demos/overview.demo.tsx +0 -199
  356. package/src/components/glyph/README.md +0 -72
  357. package/src/components/glyph/glyph.tsx +0 -110
  358. package/src/components/listbox/demos/overview.demo.tsx +0 -101
  359. package/src/components/menu/README.md +0 -96
  360. package/src/components/menu/demos/bubbling.demo.tsx +0 -34
  361. package/src/components/menu/demos/overview.demo.tsx +0 -76
  362. package/src/components/popover/demos/overview.demo.tsx +0 -143
  363. package/src/components/select/demos/deconstructed.demo.tsx +0 -95
  364. package/src/components/select/demos/overview.demo.tsx +0 -51
  365. package/src/components/separator/separator.ts +0 -19
  366. package/src/components/tabs/README.md +0 -105
  367. package/src/components/tabs/tabs.tsx +0 -504
  368. package/src/theme/README.md +0 -103
  369. package/src/theme/contract.ts +0 -215
  370. package/src/theme/glyph-contract.ts +0 -59
  371. package/src/theme/presets/rmx-01/glyphs.tsx +0 -308
  372. package/src/theme/presets/rmx-01/index.ts +0 -123
  373. package/src/theme/runtime.ts +0 -119
  374. package/src/theme/theme.ts +0 -15
  375. package/src/utils/scroll-lock/README.md +0 -33
  376. /package/dist/{components/breadcrumbs/breadcrumbs.d.ts → breadcrumbs/index.d.ts} +0 -0
  377. /package/dist/{utils → listbox}/flash-attribute.d.ts +0 -0
  378. /package/dist/{utils → listbox}/flash-attribute.js +0 -0
  379. /package/dist/{components/menu → menu}/hover-aim.d.ts +0 -0
  380. /package/dist/{components/menu → menu}/hover-aim.js +0 -0
  381. /package/dist/{interactions/outside-click/outside-click-mixin.d.ts → popover/outside-click.d.ts} +0 -0
  382. /package/dist/{interactions/keydown → select}/keydown.d.ts +0 -0
  383. /package/dist/{interactions/keydown → select}/keydown.js +0 -0
  384. /package/dist/{interactions/typeahead/typeahead-mixin.d.ts → shared/typeahead.d.ts} +0 -0
  385. /package/dist/{utils → shared}/wait-for-css-transition.d.ts +0 -0
  386. /package/dist/{utils → shared}/wait-for-css-transition.js +0 -0
  387. /package/dist/{utils → shared}/wait.d.ts +0 -0
  388. /package/dist/{utils → shared}/wait.js +0 -0
  389. /package/src/{utils → listbox}/flash-attribute.ts +0 -0
  390. /package/src/{components/menu → menu}/hover-aim.ts +0 -0
  391. /package/src/{interactions/outside-click/outside-click-mixin.ts → popover/outside-click.ts} +0 -0
  392. /package/src/{interactions/keydown → select}/keydown.ts +0 -0
  393. /package/src/{interactions/typeahead/typeahead-mixin.ts → shared/typeahead.ts} +0 -0
  394. /package/src/{utils → shared}/wait-for-css-transition.ts +0 -0
  395. /package/src/{utils → shared}/wait.ts +0 -0
package/README.md CHANGED
@@ -1,15 +1,14 @@
1
1
  # ui
2
2
 
3
- Runtime UI primitives for Remix apps, including the component runtime, server rendering, frame hydration, reusable mixins, first-party components, and theme tokens.
3
+ Runtime UI primitives for Remix apps, including the component runtime, server rendering, frame hydration, reusable mixins, and headless first-party behavior primitives.
4
4
 
5
5
  ## Features
6
6
 
7
7
  - Component runtime APIs for rendering, hydration, frame navigation, and JSX
8
8
  - Server rendering APIs for streaming Remix UI trees and frames
9
9
  - `mix` composition with event, ref, CSS, and animation helpers
10
- - First-party components such as buttons, menus, listboxes, popovers, and selects
11
- - Fixed typed `theme` contract whose leaves resolve to `var(--rmx-...)`
12
- - `createTheme()` and `createGlyphSheet()` utilities for shared app styling and glyphs
10
+ - Headless behavior primitives for controls such as menus, listboxes, popovers, selects, and comboboxes
11
+ - Lower-level utilities for keyboard events, typeahead search, refs, attributes, and CSS transition timing
13
12
 
14
13
  ## Installation
15
14
 
@@ -19,188 +18,75 @@ npm i remix
19
18
 
20
19
  ## Usage
21
20
 
22
- Define your app theme once:
21
+ Compose behavior primitives with your own markup and styles:
23
22
 
24
23
  ```tsx
25
- import { createTheme } from 'remix/ui'
26
-
27
- let Theme = createTheme({
28
- space: {
29
- none: '0px',
30
- px: '1px',
31
- xs: '2px',
32
- sm: '4px',
33
- md: '8px',
34
- lg: '12px',
35
- xl: '16px',
36
- xxl: '24px',
37
- },
38
- radius: {
39
- none: '0px',
40
- sm: '4px',
41
- md: '8px',
42
- lg: '12px',
43
- xl: '16px',
44
- full: '9999px',
45
- },
46
- fontSize: {
47
- xxxs: '10px',
48
- xxs: '11px',
49
- xs: '12px',
50
- sm: '14px',
51
- md: '16px',
52
- lg: '18px',
53
- xl: '20px',
54
- xxl: '28px',
55
- },
56
- lineHeight: {
57
- tight: '1.2',
58
- normal: '1.5',
59
- relaxed: '1.7',
60
- },
61
- fontWeight: {
62
- normal: '400',
63
- medium: '500',
64
- semibold: '600',
65
- bold: '700',
66
- },
67
- shadow: {
68
- xs: '0 1px 2px rgb(0 0 0 / 0.05)',
69
- sm: '0 1px 3px rgb(0 0 0 / 0.10)',
70
- md: '0 4px 10px rgb(0 0 0 / 0.12)',
71
- lg: '0 10px 30px rgb(0 0 0 / 0.16)',
72
- xl: '0 20px 50px rgb(0 0 0 / 0.20)',
73
- },
74
- zIndex: {
75
- dropdown: '1000',
76
- popover: '1100',
77
- sticky: '1200',
78
- overlay: '1300',
79
- modal: '1400',
80
- toast: '1500',
81
- tooltip: '1600',
82
- },
83
- surface: {
84
- lvl0: '#ffffff',
85
- lvl1: '#f8fafc',
86
- lvl2: '#f1f5f9',
87
- lvl3: '#e5edf7',
88
- lvl4: '#dbe6f4',
89
- },
90
- colors: {
91
- text: {
92
- primary: '#111827',
93
- secondary: '#374151',
94
- muted: '#6b7280',
95
- link: '#2563eb',
96
- },
97
- border: {
98
- subtle: '#e5e7eb',
99
- default: '#d1d5db',
100
- strong: '#9ca3af',
101
- },
102
- focus: {
103
- ring: '#3b82f6',
104
- },
105
- overlay: {
106
- scrim: 'rgb(0 0 0 / 0.45)',
107
- },
108
- action: {
109
- primary: {
110
- background: '#2563eb',
111
- backgroundHover: '#1d4ed8',
112
- backgroundActive: '#1e40af',
113
- foreground: '#ffffff',
114
- border: '#2563eb',
115
- },
116
- secondary: {
117
- background: '#ffffff',
118
- backgroundHover: '#f8fafc',
119
- backgroundActive: '#f1f5f9',
120
- foreground: '#111827',
121
- border: '#d1d5db',
122
- },
123
- danger: {
124
- background: '#dc2626',
125
- backgroundHover: '#b91c1c',
126
- backgroundActive: '#991b1b',
127
- foreground: '#ffffff',
128
- border: '#dc2626',
129
- },
130
- },
131
- },
24
+ import { css } from 'remix/ui'
25
+ import * as popover from 'remix/ui/popover'
26
+
27
+ let triggerCss = css({
28
+ border: '1px solid #d1d5db',
29
+ borderRadius: '6px',
30
+ padding: '6px 10px',
132
31
  })
133
- ```
134
32
 
135
- Render the theme once near the top of your document:
33
+ let surfaceCss = css({
34
+ background: 'white',
35
+ border: '1px solid #d1d5db',
36
+ borderRadius: '6px',
37
+ padding: '8px',
38
+ })
136
39
 
137
- ```tsx
138
- import type { Handle, RemixNode } from 'remix/ui'
40
+ function ViewOptions() {
41
+ let open = false
139
42
 
140
- function Layout(handle: Handle<{ children: RemixNode }>) {
141
43
  return () => (
142
- <html>
143
- <head>
144
- <Theme />
145
- </head>
146
- <body>{handle.props.children}</body>
147
- </html>
44
+ <popover.Context>
45
+ <button
46
+ mix={[triggerCss, popover.anchor({ placement: 'bottom-end' }), popover.focusOnHide()]}
47
+ onClick={() => {
48
+ open = true
49
+ }}
50
+ type="button"
51
+ >
52
+ View options
53
+ </button>
54
+ <div
55
+ mix={[
56
+ surfaceCss,
57
+ popover.surface({
58
+ open,
59
+ onHide() {
60
+ open = false
61
+ },
62
+ }),
63
+ ]}
64
+ >
65
+ Panel content
66
+ </div>
67
+ </popover.Context>
148
68
  )
149
69
  }
150
70
  ```
151
71
 
152
- Consume the shared token contract from app code and first-party components:
153
-
154
- ```tsx
155
- import { css } from 'remix/ui'
156
- import { theme } from 'remix/ui'
157
-
158
- let card = css({
159
- backgroundColor: theme.surface.lvl0,
160
- color: theme.colors.text.primary,
161
- border: `1px solid ${theme.colors.border.subtle}`,
162
- borderRadius: theme.radius.md,
163
- paddingInline: theme.space.md,
164
- paddingBlock: theme.space.sm,
165
- })
166
-
167
- <div mix={card} />
168
- ```
169
-
170
- Render shared glyphs separately from the theme styles:
72
+ Button styling is available as a composable mixin:
171
73
 
172
74
  ```tsx
173
- import type { Handle, RemixNode } from 'remix/ui'
174
- import { Button } from 'remix/ui/button'
175
- import { Glyph } from 'remix/ui/glyph'
176
- import { RMX_01, RMX_01_GLYPHS } from 'remix/ui/theme'
75
+ import button from 'remix/ui/button'
177
76
 
178
- function Layout(handle: Handle<{ children: RemixNode }>) {
179
- return () => (
180
- <html>
181
- <head>
182
- <RMX_01 />
183
- </head>
184
- <body>
185
- <RMX_01_GLYPHS />
186
- <Button startIcon={<Glyph name="add" />} tone="primary">
187
- New project
188
- </Button>
189
- {handle.props.children}
190
- </body>
191
- </html>
192
- )
77
+ function Actions() {
78
+ return () => <button mix={button({ tone: 'primary' })}>Create project</button>
193
79
  }
194
80
  ```
195
81
 
196
82
  ## Cascade Layers
197
83
 
198
- Remix UI emits its built-in theme reset in `rmx-reset` and generated `css(...)` rules under `rmx`. Unlayered CSS outranks layered component CSS, so use explicit layer order when mixing Remix UI with global styles.
84
+ Remix UI emits generated `css(...)` rules under the `rmx` cascade layer. Unlayered CSS outranks layered CSS, so use explicit layer order when mixing Remix UI with global styles.
199
85
 
200
- Put layers that should lose to Remix UI before `rmx-reset` and `rmx`:
86
+ Put layers that should lose to Remix UI before `rmx`:
201
87
 
202
88
  ```css
203
- @layer base, rmx-reset, rmx;
89
+ @layer base, rmx;
204
90
 
205
91
  @layer base {
206
92
  button,
package/dist/accordion/index.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { type CSSMixinDescriptor, type Handle, type Props, type RemixNode } from '@remix-run/ui';
2
+ import * as accordion from '@remix-run/ui/accordion/primitives';
3
+ type AccordionBaseProps = Omit<Props<'div'>, 'children'> & {
4
+ children?: RemixNode;
5
+ disabled?: boolean;
6
+ headingLevel?: accordion.AccordionHeadingLevel;
7
+ };
8
+ export type AccordionSingleProps = AccordionBaseProps & {
9
+ type?: 'single';
10
+ value?: string | null;
11
+ defaultValue?: string | null;
12
+ onValueChange?: (value: string | null) => void;
13
+ collapsible?: boolean;
14
+ };
15
+ export type AccordionMultipleProps = AccordionBaseProps & {
16
+ type: 'multiple';
17
+ value?: string[];
18
+ defaultValue?: string[];
19
+ onValueChange?: (value: string[]) => void;
20
+ };
21
+ export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
22
+ export type AccordionItemProps = Omit<Props<'div'>, 'children'> & {
23
+ children?: RemixNode;
24
+ disabled?: boolean;
25
+ value: string;
26
+ };
27
+ export type AccordionTriggerProps = Omit<Props<'button'>, 'children' | 'type'> & {
28
+ children?: RemixNode;
29
+ indicator?: RemixNode | null;
30
+ type?: 'button' | 'submit' | 'reset';
31
+ };
32
+ export type AccordionContentProps = Omit<Props<'div'>, 'children'> & {
33
+ children?: RemixNode;
34
+ };
35
+ export declare const rootStyle: CSSMixinDescriptor;
36
+ export declare const itemStyle: CSSMixinDescriptor;
37
+ export declare const headingStyle: CSSMixinDescriptor;
38
+ export declare const triggerStyle: CSSMixinDescriptor;
39
+ export declare const indicatorStyle: CSSMixinDescriptor;
40
+ export declare const panelStyle: CSSMixinDescriptor;
41
+ export declare const bodyStyle: CSSMixinDescriptor;
42
+ export declare function Accordion(handle: Handle<AccordionProps>): () => RemixNode;
43
+ export declare function AccordionItem(handle: Handle<AccordionItemProps>): () => RemixNode;
44
+ export declare function AccordionTrigger(handle: Handle<AccordionTriggerProps>): () => RemixNode;
45
+ export declare function AccordionContent(handle: Handle<AccordionContentProps>): () => RemixNode;
46
+ export {};
package/dist/accordion/index.js ADDED
@@ -0,0 +1,142 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
2
+ import { css, createElement, } from '@remix-run/ui';
3
+ import { spring } from '@remix-run/ui/animation';
4
+ import * as accordion from '@remix-run/ui/accordion/primitives';
5
+ import { ChevronRightIcon } from "../shared/icons.js";
6
+ import { componentStyleValues as styles } from "../shared/style-values.js";
7
+ const accordionPanelClipCss = css({
8
+ minHeight: 0,
9
+ overflow: 'hidden',
10
+ });
11
+ const accordionTransition = spring();
12
+ const accordionRootCss = css({
13
+ display: 'flex',
14
+ flexDirection: 'column',
15
+ minWidth: 0,
16
+ });
17
+ const accordionItemCss = css({
18
+ minWidth: 0,
19
+ });
20
+ const accordionHeadingCss = css({
21
+ margin: 0,
22
+ minWidth: 0,
23
+ });
24
+ const accordionTriggerCss = css({
25
+ all: 'unset',
26
+ boxSizing: 'border-box',
27
+ cursor: 'pointer',
28
+ display: 'grid',
29
+ gridTemplateColumns: 'minmax(0, 1fr) auto',
30
+ alignItems: 'center',
31
+ gap: styles.space.md,
32
+ width: '100%',
33
+ minHeight: '28px',
34
+ padding: `${styles.space.xs} 0`,
35
+ color: styles.colors.text.primary,
36
+ fontFamily: styles.fontFamily.sans,
37
+ fontSize: styles.fontSize.sm,
38
+ lineHeight: styles.lineHeight.normal,
39
+ fontWeight: styles.fontWeight.medium,
40
+ textAlign: 'left',
41
+ '&:hover:not(:disabled)': {
42
+ backgroundColor: styles.surface.lvl1,
43
+ },
44
+ '&:hover:not(:disabled) > span:first-child': {
45
+ textDecorationLine: 'underline',
46
+ },
47
+ '&:focus-visible': {
48
+ outline: `2px solid ${styles.colors.focus.ring}`,
49
+ outlineOffset: '2px',
50
+ },
51
+ '&:disabled': {
52
+ cursor: 'default',
53
+ opacity: 0.55,
54
+ },
55
+ '& > span:first-child': {
56
+ minWidth: 0,
57
+ },
58
+ });
59
+ const accordionIndicatorCss = css({
60
+ display: 'inline-flex',
61
+ alignItems: 'center',
62
+ justifyContent: 'center',
63
+ width: styles.fontSize.sm,
64
+ height: styles.fontSize.sm,
65
+ color: styles.colors.text.muted,
66
+ transition: `transform ${accordionTransition}`,
67
+ '& > svg': {
68
+ display: 'block',
69
+ width: '100%',
70
+ height: '100%',
71
+ },
72
+ '&[data-state="open"]': {
73
+ transform: 'rotate(90deg)',
74
+ },
75
+ });
76
+ const accordionPanelCss = css({
77
+ display: 'grid',
78
+ gridTemplateRows: '0fr',
79
+ transition: `grid-template-rows ${accordionTransition}`,
80
+ '&[data-state="open"]': {
81
+ gridTemplateRows: '1fr',
82
+ },
83
+ '&[data-state="closed"]': {
84
+ pointerEvents: 'none',
85
+ },
86
+ '@media (prefers-reduced-motion: reduce)': {
87
+ transition: 'none',
88
+ },
89
+ });
90
+ const accordionBodyCss = css({
91
+ display: 'flow-root',
92
+ minHeight: 0,
93
+ paddingBottom: styles.space.md,
94
+ color: styles.colors.text.secondary,
95
+ fontSize: styles.fontSize.sm,
96
+ lineHeight: styles.lineHeight.relaxed,
97
+ '& > :first-child': {
98
+ marginTop: 0,
99
+ },
100
+ '& > :last-child': {
101
+ marginBottom: 0,
102
+ },
103
+ });
104
+ export const rootStyle = accordionRootCss;
105
+ export const itemStyle = accordionItemCss;
106
+ export const headingStyle = accordionHeadingCss;
107
+ export const triggerStyle = accordionTriggerCss;
108
+ export const indicatorStyle = accordionIndicatorCss;
109
+ export const panelStyle = accordionPanelCss;
110
+ export const bodyStyle = accordionBodyCss;
111
+ export function Accordion(handle) {
112
+ return () => {
113
+ if (handle.props.type === 'multiple') {
114
+ let { children, defaultValue, disabled, headingLevel, mix, onValueChange, type, value, ...divProps } = handle.props;
115
+ return (_jsx(accordion.Context, { defaultValue: defaultValue, disabled: disabled, headingLevel: headingLevel, onValueChange: onValueChange, type: type, value: value, children: _jsx("div", { ...divProps, mix: [rootStyle, accordion.root(), mix], children: children }) }));
116
+ }
117
+ let { children, collapsible, defaultValue, disabled, headingLevel, mix, onValueChange, type, value, ...divProps } = handle.props;
118
+ return (_jsx(accordion.Context, { collapsible: collapsible, defaultValue: defaultValue, disabled: disabled, headingLevel: headingLevel, onValueChange: onValueChange, type: type, value: value, children: _jsx("div", { ...divProps, mix: [rootStyle, accordion.root(), mix], children: children }) }));
119
+ };
120
+ }
121
+ export function AccordionItem(handle) {
122
+ return () => {
123
+ let { children, disabled, mix, value, ...divProps } = handle.props;
124
+ return (_jsx(accordion.ItemContext, { disabled: disabled, value: value, children: _jsx("div", { ...divProps, mix: [itemStyle, accordion.item(), mix], children: children }) }));
125
+ };
126
+ }
127
+ export function AccordionTrigger(handle) {
128
+ return () => {
129
+ let item = handle.context.get(accordion.ItemContext);
130
+ let headingTag = `h${item.headingLevel}`;
131
+ let { children, disabled, indicator, mix, type, ...buttonProps } = handle.props;
132
+ let button = (_jsxs("button", { ...buttonProps, mix: [triggerStyle, accordion.trigger({ disabled }), mix], type: type ?? 'button', children: [_jsx("span", { children: children }), indicator === null ? null : (_jsx("span", { "data-rmx-accordion-indicator": "", "data-state": item.open ? 'open' : 'closed', mix: indicatorStyle, children: indicator ?? _jsx(ChevronRightIcon, {}) }))] }));
133
+ return createElement(headingTag, { mix: headingStyle }, button);
134
+ };
135
+ }
136
+ export function AccordionContent(handle) {
137
+ return () => {
138
+ let { children, mix, ...panelProps } = handle.props;
139
+ return (_jsx("div", { ...panelProps, mix: [panelStyle, accordion.content(), mix], children: _jsx("div", { mix: accordionPanelClipCss, children: _jsx("div", { mix: bodyStyle, children: children }) }) }));
140
+ };
141
+ }
142
+ //# sourceMappingURL=index.js.map
package/dist/accordion/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/accordion/index.tsx"],"names":[],"mappings":"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"}
package/dist/accordion/primitives.d.ts ADDED
@@ -0,0 +1,104 @@
1
+ import { on, type Dispatched, type ElementProps, type Handle, type Props, type RemixNode } from '@remix-run/ui';
2
+ declare const ACCORDION_CHANGE_EVENT: "rmx:accordion-change";
3
+ type AccordionChangeHandler<target extends HTMLElement> = (event: Dispatched<AccordionChangeEvent, target>, signal: AbortSignal) => void | Promise<void>;
4
+ declare global {
5
+ interface HTMLElementEventMap {
6
+ [ACCORDION_CHANGE_EVENT]: AccordionChangeEvent;
7
+ }
8
+ }
9
+ export declare class AccordionChangeEvent extends Event {
10
+ readonly accordionType: AccordionType;
11
+ readonly itemValue: string;
12
+ readonly value: AccordionValue;
13
+ constructor(value: AccordionValue, init: {
14
+ accordionType: AccordionType;
15
+ itemValue: string;
16
+ });
17
+ }
18
+ export type AccordionType = 'single' | 'multiple';
19
+ export type AccordionValue = string | null | string[];
20
+ export type AccordionSingleValue = string | null;
21
+ export type AccordionMultipleValue = string[];
22
+ export type AccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
23
+ type FocusDirection = 'first' | 'last' | 'next' | 'previous';
24
+ type RegisteredItem = {
25
+ disabled: boolean;
26
+ getTriggerNode(): HTMLButtonElement | null;
27
+ value: string;
28
+ };
29
+ interface AccordionContextValue {
30
+ readonly collapsible: boolean;
31
+ readonly disabled: boolean;
32
+ readonly headingLevel: AccordionHeadingLevel;
33
+ readonly type: AccordionType;
34
+ focusItem(value: string, direction: FocusDirection): void;
35
+ getPanelId(value: string): string;
36
+ getTriggerId(value: string): string | undefined;
37
+ isOpen(value: string): boolean;
38
+ registerItem(item: RegisteredItem): void;
39
+ registerRoot(node: HTMLElement): void;
40
+ toggleItem(value: string): void;
41
+ unregisterRoot(node: HTMLElement): void;
42
+ }
43
+ interface AccordionItemContextValue {
44
+ readonly disabled: boolean;
45
+ readonly headingLevel: AccordionHeadingLevel;
46
+ readonly lockedOpen: boolean;
47
+ readonly open: boolean;
48
+ readonly panelId: string;
49
+ readonly triggerId: string;
50
+ readonly value: string;
51
+ setTriggerNode(node: HTMLButtonElement | null): void;
52
+ }
53
+ export interface AccordionBaseContextProps {
54
+ children?: RemixNode;
55
+ disabled?: boolean;
56
+ headingLevel?: AccordionHeadingLevel;
57
+ }
58
+ export interface AccordionSingleContextProps extends AccordionBaseContextProps {
59
+ type?: 'single';
60
+ value?: AccordionSingleValue;
61
+ defaultValue?: AccordionSingleValue;
62
+ onValueChange?: (value: AccordionSingleValue) => void;
63
+ collapsible?: boolean;
64
+ }
65
+ export interface AccordionMultipleContextProps extends AccordionBaseContextProps {
66
+ type: 'multiple';
67
+ value?: AccordionMultipleValue;
68
+ defaultValue?: AccordionMultipleValue;
69
+ onValueChange?: (value: AccordionMultipleValue) => void;
70
+ }
71
+ export type AccordionContextProps = AccordionSingleContextProps | AccordionMultipleContextProps;
72
+ export interface AccordionRootOptions {
73
+ }
74
+ export interface AccordionItemOptions {
75
+ disabled?: boolean;
76
+ value: string;
77
+ }
78
+ export interface AccordionTriggerOptions {
79
+ disabled?: boolean;
80
+ }
81
+ export interface AccordionContentOptions {
82
+ }
83
+ export type AccordionProps = Props<'div'> & AccordionContextProps;
84
+ export type AccordionItemProps = Omit<Props<'div'>, 'children'> & AccordionItemOptions & {
85
+ children?: RemixNode;
86
+ };
87
+ export type AccordionTriggerProps = Omit<Props<'button'>, 'children' | 'type'> & AccordionTriggerOptions & {
88
+ children?: RemixNode;
89
+ type?: 'button' | 'submit' | 'reset';
90
+ };
91
+ export type AccordionContentProps = Omit<Props<'div'>, 'children'> & {
92
+ children?: RemixNode;
93
+ };
94
+ declare function AccordionProvider(handle: Handle<AccordionContextProps, AccordionContextValue>): () => RemixNode;
95
+ export declare const Context: typeof AccordionProvider;
96
+ export declare const ItemContext: (handle: Handle<AccordionItemOptions & {
97
+ children?: RemixNode;
98
+ }, AccordionItemContextValue>) => () => RemixNode;
99
+ export declare const content: import("@remix-run/ui").MixinFactory<HTMLElement, [options?: AccordionContentOptions | undefined], ElementProps>;
100
+ export declare const item: import("@remix-run/ui").MixinFactory<HTMLElement, [options?: AccordionItemOptions | undefined], ElementProps>;
101
+ export declare const root: import("@remix-run/ui").MixinFactory<HTMLElement, [options?: AccordionRootOptions | undefined], ElementProps>;
102
+ export declare const trigger: import("@remix-run/ui").MixinFactory<HTMLButtonElement, [options?: AccordionTriggerOptions | undefined], ElementProps>;
103
+ export declare function onAccordionChange<target extends HTMLElement>(handler: AccordionChangeHandler<target>, captureBoolean?: boolean): ReturnType<typeof on<target, typeof ACCORDION_CHANGE_EVENT>>;
104
+ export {};