@remix-run/ui 0.3.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 (308) 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.js → anchor/index.js} +1 -1
  9. package/dist/anchor/index.js.map +1 -0
  10. package/dist/animation/demos/reordering.js +9 -6
  11. package/dist/animation/demos/reordering.js.map +1 -1
  12. package/dist/{components/breadcrumbs/breadcrumbs.js → breadcrumbs/index.js} +19 -19
  13. package/dist/breadcrumbs/index.js.map +1 -0
  14. package/dist/button/index.d.ts +15 -0
  15. package/dist/button/index.js +128 -0
  16. package/dist/button/index.js.map +1 -0
  17. package/dist/checkbox/index.d.ts +14 -0
  18. package/dist/checkbox/index.js +125 -0
  19. package/dist/checkbox/index.js.map +1 -0
  20. package/dist/combobox/index.d.ts +21 -0
  21. package/dist/combobox/index.js +58 -0
  22. package/dist/combobox/index.js.map +1 -0
  23. package/dist/{components/combobox/combobox.d.ts → combobox/primitives.d.ts} +3 -7
  24. package/dist/{components/combobox/combobox.js → combobox/primitives.js} +8 -61
  25. package/dist/combobox/primitives.js.map +1 -0
  26. package/dist/input/index.d.ts +13 -0
  27. package/dist/input/index.js +121 -0
  28. package/dist/input/index.js.map +1 -0
  29. package/dist/listbox/flash-attribute.js.map +1 -0
  30. package/dist/{components/listbox/listbox.d.ts → listbox/index.d.ts} +2 -6
  31. package/dist/{components/listbox/listbox.js → listbox/index.js} +4 -82
  32. package/dist/listbox/index.js.map +1 -0
  33. package/dist/menu/hover-aim.js.map +1 -0
  34. package/dist/menu/index.d.ts +42 -0
  35. package/dist/menu/index.js +250 -0
  36. package/dist/menu/index.js.map +1 -0
  37. package/dist/{components/menu/menu.d.ts → menu/primitives.d.ts} +3 -32
  38. package/dist/{components/menu/menu.js → menu/primitives.js} +97 -314
  39. package/dist/menu/primitives.js.map +1 -0
  40. package/dist/{components/popover/popover.d.ts → popover/index.d.ts} +2 -4
  41. package/dist/{components/popover/popover.js → popover/index.js} +5 -48
  42. package/dist/popover/index.js.map +1 -0
  43. package/dist/{interactions/outside-click/outside-click-mixin.js → popover/outside-click.js} +1 -1
  44. package/dist/popover/outside-click.js.map +1 -0
  45. package/dist/popover/scroll-lock.d.ts +1 -0
  46. package/dist/{utils → popover}/scroll-lock.js +0 -18
  47. package/dist/popover/scroll-lock.js.map +1 -0
  48. package/dist/radio/index.d.ts +12 -0
  49. package/dist/radio/index.js +77 -0
  50. package/dist/radio/index.js.map +1 -0
  51. package/dist/runtime/reconcile.js +11 -5
  52. package/dist/runtime/reconcile.js.map +1 -1
  53. package/dist/runtime/vdom.js +3 -0
  54. package/dist/runtime/vdom.js.map +1 -1
  55. package/dist/select/index.d.ts +19 -0
  56. package/dist/select/index.js +95 -0
  57. package/dist/select/index.js.map +1 -0
  58. package/dist/select/keydown.js.map +1 -0
  59. package/dist/{components/select/select.d.ts → select/primitives.d.ts} +4 -6
  60. package/dist/{components/select/select.js → select/primitives.js} +11 -63
  61. package/dist/select/primitives.js.map +1 -0
  62. package/dist/server/stream.js +2 -2
  63. package/dist/server/stream.js.map +1 -1
  64. package/dist/shared/focus-styles.d.ts +1 -0
  65. package/dist/shared/focus-styles.js +2 -0
  66. package/dist/shared/focus-styles.js.map +1 -0
  67. package/dist/shared/icons.d.ts +9 -0
  68. package/dist/shared/icons.js +42 -0
  69. package/dist/shared/icons.js.map +1 -0
  70. package/dist/shared/listbox-popover-styles.d.ts +6 -0
  71. package/dist/shared/listbox-popover-styles.js +137 -0
  72. package/dist/shared/listbox-popover-styles.js.map +1 -0
  73. package/dist/shared/style-values.d.ts +78 -0
  74. package/dist/{theme/presets/rmx-01/index.js → shared/style-values.js} +3 -34
  75. package/dist/shared/style-values.js.map +1 -0
  76. package/dist/{interactions/typeahead/typeahead-mixin.js → shared/typeahead.js} +1 -1
  77. package/dist/shared/typeahead.js.map +1 -0
  78. package/dist/shared/wait-for-css-transition.js.map +1 -0
  79. package/dist/shared/wait.js.map +1 -0
  80. package/dist/tabs/index.d.ts +32 -0
  81. package/dist/tabs/index.js +157 -0
  82. package/dist/tabs/index.js.map +1 -0
  83. package/dist/tabs/primitives.d.ts +57 -0
  84. package/dist/tabs/primitives.js +238 -0
  85. package/dist/tabs/primitives.js.map +1 -0
  86. package/dist/toggle/index.d.ts +9 -0
  87. package/dist/toggle/index.js +108 -0
  88. package/dist/toggle/index.js.map +1 -0
  89. package/dist/toggle/primitives.d.ts +29 -0
  90. package/dist/toggle/primitives.js +127 -0
  91. package/dist/toggle/primitives.js.map +1 -0
  92. package/package.json +73 -44
  93. package/src/{components/accordion → accordion}/README.md +50 -14
  94. package/src/accordion/index.tsx +285 -0
  95. package/src/accordion/primitives.tsx +512 -0
  96. package/src/{components/anchor → anchor}/README.md +37 -2
  97. package/src/animation/demos/reordering.tsx +9 -6
  98. package/src/{components/breadcrumbs → breadcrumbs}/README.md +4 -4
  99. package/src/{components/breadcrumbs/breadcrumbs.tsx → breadcrumbs/index.tsx} +18 -18
  100. package/src/button/README.md +44 -0
  101. package/src/button/index.ts +168 -0
  102. package/src/checkbox/README.md +59 -0
  103. package/src/checkbox/index.ts +162 -0
  104. package/src/{components/combobox → combobox}/README.md +58 -9
  105. package/src/combobox/index.tsx +112 -0
  106. package/src/{components/combobox/combobox.tsx → combobox/primitives.tsx} +5 -91
  107. package/src/input/README.md +52 -0
  108. package/src/input/index.ts +147 -0
  109. package/src/{components/listbox → listbox}/README.md +9 -41
  110. package/src/{components/listbox/listbox.ts → listbox/index.ts} +2 -87
  111. package/src/{components/menu → menu}/README.md +55 -14
  112. package/src/menu/index.tsx +354 -0
  113. package/src/{components/menu/menu.tsx → menu/primitives.tsx} +99 -413
  114. package/src/{components/popover → popover}/README.md +20 -39
  115. package/src/{components/popover/popover.ts → popover/index.ts} +3 -57
  116. package/src/{utils → popover}/scroll-lock.ts +0 -28
  117. package/src/radio/README.md +53 -0
  118. package/src/radio/index.ts +100 -0
  119. package/src/runtime/demos/readme.demo.tsx +16 -14
  120. package/src/runtime/reconcile.ts +11 -5
  121. package/src/runtime/vdom.ts +3 -0
  122. package/src/{components/select → select}/README.md +29 -19
  123. package/src/select/index.tsx +159 -0
  124. package/src/{components/select/select.tsx → select/primitives.tsx} +10 -98
  125. package/src/server/stream.ts +3 -3
  126. package/src/shared/focus-styles.ts +2 -0
  127. package/src/shared/icons.tsx +62 -0
  128. package/src/shared/listbox-popover-styles.ts +146 -0
  129. package/src/shared/style-values.ts +165 -0
  130. package/src/tabs/README.md +141 -0
  131. package/src/tabs/index.tsx +244 -0
  132. package/src/tabs/primitives.ts +365 -0
  133. package/src/toggle/README.md +56 -0
  134. package/src/toggle/index.tsx +134 -0
  135. package/src/toggle/primitives.ts +192 -0
  136. package/dist/animation/demos/animation.demo.d.ts +0 -5
  137. package/dist/animation/demos/animation.demo.js +0 -92
  138. package/dist/animation/demos/animation.demo.js.map +0 -1
  139. package/dist/animation/demos/spring.demo.d.ts +0 -6
  140. package/dist/animation/demos/spring.demo.js +0 -304
  141. package/dist/animation/demos/spring.demo.js.map +0 -1
  142. package/dist/components/accordion/accordion.d.ts +0 -92
  143. package/dist/components/accordion/accordion.js +0 -335
  144. package/dist/components/accordion/accordion.js.map +0 -1
  145. package/dist/components/accordion/demos/card.demo.d.ts +0 -7
  146. package/dist/components/accordion/demos/card.demo.js +0 -59
  147. package/dist/components/accordion/demos/card.demo.js.map +0 -1
  148. package/dist/components/accordion/demos/multiple.demo.d.ts +0 -7
  149. package/dist/components/accordion/demos/multiple.demo.js +0 -20
  150. package/dist/components/accordion/demos/multiple.demo.js.map +0 -1
  151. package/dist/components/accordion/demos/overview.demo.d.ts +0 -7
  152. package/dist/components/accordion/demos/overview.demo.js +0 -20
  153. package/dist/components/accordion/demos/overview.demo.js.map +0 -1
  154. package/dist/components/anchor/anchor.js.map +0 -1
  155. package/dist/components/breadcrumbs/basic.demo.d.ts +0 -6
  156. package/dist/components/breadcrumbs/basic.demo.js +0 -15
  157. package/dist/components/breadcrumbs/basic.demo.js.map +0 -1
  158. package/dist/components/breadcrumbs/breadcrumbs.js.map +0 -1
  159. package/dist/components/breadcrumbs/separator.demo.d.ts +0 -6
  160. package/dist/components/breadcrumbs/separator.demo.js +0 -15
  161. package/dist/components/breadcrumbs/separator.demo.js.map +0 -1
  162. package/dist/components/button/button.d.ts +0 -105
  163. package/dist/components/button/button.js +0 -207
  164. package/dist/components/button/button.js.map +0 -1
  165. package/dist/components/button/demos/aliases.demo.d.ts +0 -7
  166. package/dist/components/button/demos/aliases.demo.js +0 -19
  167. package/dist/components/button/demos/aliases.demo.js.map +0 -1
  168. package/dist/components/button/demos/basic.demo.d.ts +0 -7
  169. package/dist/components/button/demos/basic.demo.js +0 -20
  170. package/dist/components/button/demos/basic.demo.js.map +0 -1
  171. package/dist/components/button/demos/states.demo.d.ts +0 -7
  172. package/dist/components/button/demos/states.demo.js +0 -30
  173. package/dist/components/button/demos/states.demo.js.map +0 -1
  174. package/dist/components/combobox/combobox.js.map +0 -1
  175. package/dist/components/combobox/overview.demo.d.ts +0 -7
  176. package/dist/components/combobox/overview.demo.js +0 -154
  177. package/dist/components/combobox/overview.demo.js.map +0 -1
  178. package/dist/components/glyph/glyph.d.ts +0 -14
  179. package/dist/components/glyph/glyph.js +0 -65
  180. package/dist/components/glyph/glyph.js.map +0 -1
  181. package/dist/components/listbox/listbox.js.map +0 -1
  182. package/dist/components/listbox/overview.demo.d.ts +0 -7
  183. package/dist/components/listbox/overview.demo.js +0 -65
  184. package/dist/components/listbox/overview.demo.js.map +0 -1
  185. package/dist/components/menu/demos/bubbling.demo.d.ts +0 -6
  186. package/dist/components/menu/demos/bubbling.demo.js +0 -16
  187. package/dist/components/menu/demos/bubbling.demo.js.map +0 -1
  188. package/dist/components/menu/demos/context-trigger.demo.d.ts +0 -7
  189. package/dist/components/menu/demos/context-trigger.demo.js +0 -87
  190. package/dist/components/menu/demos/context-trigger.demo.js.map +0 -1
  191. package/dist/components/menu/demos/overview.demo.d.ts +0 -7
  192. package/dist/components/menu/demos/overview.demo.js +0 -33
  193. package/dist/components/menu/demos/overview.demo.js.map +0 -1
  194. package/dist/components/menu/hover-aim.js.map +0 -1
  195. package/dist/components/menu/menu.js.map +0 -1
  196. package/dist/components/popover/overview.demo.d.ts +0 -7
  197. package/dist/components/popover/overview.demo.js +0 -65
  198. package/dist/components/popover/overview.demo.js.map +0 -1
  199. package/dist/components/popover/popover.js.map +0 -1
  200. package/dist/components/select/deconstructed.demo.d.ts +0 -7
  201. package/dist/components/select/deconstructed.demo.js +0 -54
  202. package/dist/components/select/deconstructed.demo.js.map +0 -1
  203. package/dist/components/select/overview.demo.d.ts +0 -6
  204. package/dist/components/select/overview.demo.js +0 -28
  205. package/dist/components/select/overview.demo.js.map +0 -1
  206. package/dist/components/select/select.js.map +0 -1
  207. package/dist/components/separator/separator.d.ts +0 -2
  208. package/dist/components/separator/separator.js +0 -15
  209. package/dist/components/separator/separator.js.map +0 -1
  210. package/dist/components/tabs/tabs.d.ts +0 -78
  211. package/dist/components/tabs/tabs.js +0 -339
  212. package/dist/components/tabs/tabs.js.map +0 -1
  213. package/dist/interactions/keydown/keydown.js.map +0 -1
  214. package/dist/interactions/outside-click/outside-click-mixin.js.map +0 -1
  215. package/dist/interactions/typeahead/typeahead-mixin.js.map +0 -1
  216. package/dist/runtime/demos/basic.demo.d.ts +0 -6
  217. package/dist/runtime/demos/basic.demo.js +0 -16
  218. package/dist/runtime/demos/basic.demo.js.map +0 -1
  219. package/dist/runtime/demos/controlled-uncontrolled-values.demo.d.ts +0 -6
  220. package/dist/runtime/demos/controlled-uncontrolled-values.demo.js +0 -77
  221. package/dist/runtime/demos/controlled-uncontrolled-values.demo.js.map +0 -1
  222. package/dist/runtime/demos/keyed-list.demo.d.ts +0 -6
  223. package/dist/runtime/demos/keyed-list.demo.js +0 -62
  224. package/dist/runtime/demos/keyed-list.demo.js.map +0 -1
  225. package/dist/runtime/demos/readme.demo.d.ts +0 -5
  226. package/dist/runtime/demos/readme.demo.js +0 -396
  227. package/dist/runtime/demos/readme.demo.js.map +0 -1
  228. package/dist/theme/contract.d.ts +0 -61
  229. package/dist/theme/contract.js +0 -131
  230. package/dist/theme/contract.js.map +0 -1
  231. package/dist/theme/glyph-contract.d.ts +0 -11
  232. package/dist/theme/glyph-contract.js +0 -34
  233. package/dist/theme/glyph-contract.js.map +0 -1
  234. package/dist/theme/presets/rmx-01/glyphs.d.ts +0 -2
  235. package/dist/theme/presets/rmx-01/glyphs.js +0 -252
  236. package/dist/theme/presets/rmx-01/glyphs.js.map +0 -1
  237. package/dist/theme/presets/rmx-01/index.d.ts +0 -4
  238. package/dist/theme/presets/rmx-01/index.js.map +0 -1
  239. package/dist/theme/runtime.d.ts +0 -2
  240. package/dist/theme/runtime.js +0 -84
  241. package/dist/theme/runtime.js.map +0 -1
  242. package/dist/theme/theme.d.ts +0 -6
  243. package/dist/theme/theme.js +0 -5
  244. package/dist/theme/theme.js.map +0 -1
  245. package/dist/utils/flash-attribute.js.map +0 -1
  246. package/dist/utils/scroll-lock.d.ts +0 -3
  247. package/dist/utils/scroll-lock.js.map +0 -1
  248. package/dist/utils/wait-for-css-transition.js.map +0 -1
  249. package/dist/utils/wait.js.map +0 -1
  250. package/src/animation/demos/animation.demo.tsx +0 -194
  251. package/src/animation/demos/spring.demo.tsx +0 -385
  252. package/src/components/accordion/accordion.tsx +0 -565
  253. package/src/components/accordion/demos/card.demo.tsx +0 -114
  254. package/src/components/accordion/demos/multiple.demo.tsx +0 -57
  255. package/src/components/accordion/demos/overview.demo.tsx +0 -57
  256. package/src/components/breadcrumbs/basic.demo.tsx +0 -18
  257. package/src/components/breadcrumbs/separator.demo.tsx +0 -19
  258. package/src/components/button/README.md +0 -44
  259. package/src/components/button/button.tsx +0 -286
  260. package/src/components/button/demos/aliases.demo.tsx +0 -28
  261. package/src/components/button/demos/basic.demo.tsx +0 -31
  262. package/src/components/button/demos/states.demo.tsx +0 -53
  263. package/src/components/combobox/overview.demo.tsx +0 -200
  264. package/src/components/glyph/README.md +0 -72
  265. package/src/components/glyph/glyph.tsx +0 -110
  266. package/src/components/listbox/overview.demo.tsx +0 -102
  267. package/src/components/menu/demos/bubbling.demo.tsx +0 -35
  268. package/src/components/menu/demos/context-trigger.demo.tsx +0 -133
  269. package/src/components/menu/demos/overview.demo.tsx +0 -77
  270. package/src/components/popover/overview.demo.tsx +0 -144
  271. package/src/components/select/deconstructed.demo.tsx +0 -96
  272. package/src/components/select/overview.demo.tsx +0 -52
  273. package/src/components/separator/separator.ts +0 -19
  274. package/src/components/tabs/README.md +0 -105
  275. package/src/components/tabs/tabs.tsx +0 -504
  276. package/src/runtime/demos/basic.demo.tsx +0 -21
  277. package/src/runtime/demos/controlled-uncontrolled-values.demo.tsx +0 -177
  278. package/src/runtime/demos/keyed-list.demo.tsx +0 -94
  279. package/src/theme/README.md +0 -103
  280. package/src/theme/contract.ts +0 -215
  281. package/src/theme/glyph-contract.ts +0 -59
  282. package/src/theme/presets/rmx-01/glyphs.tsx +0 -308
  283. package/src/theme/presets/rmx-01/index.ts +0 -123
  284. package/src/theme/runtime.ts +0 -119
  285. package/src/theme/theme.ts +0 -15
  286. package/src/utils/scroll-lock/README.md +0 -33
  287. /package/dist/{components/anchor/anchor.d.ts → anchor/index.d.ts} +0 -0
  288. /package/dist/{components/breadcrumbs/breadcrumbs.d.ts → breadcrumbs/index.d.ts} +0 -0
  289. /package/dist/{utils → listbox}/flash-attribute.d.ts +0 -0
  290. /package/dist/{utils → listbox}/flash-attribute.js +0 -0
  291. /package/dist/{components/menu → menu}/hover-aim.d.ts +0 -0
  292. /package/dist/{components/menu → menu}/hover-aim.js +0 -0
  293. /package/dist/{interactions/outside-click/outside-click-mixin.d.ts → popover/outside-click.d.ts} +0 -0
  294. /package/dist/{interactions/keydown → select}/keydown.d.ts +0 -0
  295. /package/dist/{interactions/keydown → select}/keydown.js +0 -0
  296. /package/dist/{interactions/typeahead/typeahead-mixin.d.ts → shared/typeahead.d.ts} +0 -0
  297. /package/dist/{utils → shared}/wait-for-css-transition.d.ts +0 -0
  298. /package/dist/{utils → shared}/wait-for-css-transition.js +0 -0
  299. /package/dist/{utils → shared}/wait.d.ts +0 -0
  300. /package/dist/{utils → shared}/wait.js +0 -0
  301. /package/src/{components/anchor/anchor.ts → anchor/index.ts} +0 -0
  302. /package/src/{utils → listbox}/flash-attribute.ts +0 -0
  303. /package/src/{components/menu → menu}/hover-aim.ts +0 -0
  304. /package/src/{interactions/outside-click/outside-click-mixin.ts → popover/outside-click.ts} +0 -0
  305. /package/src/{interactions/keydown → select}/keydown.ts +0 -0
  306. /package/src/{interactions/typeahead/typeahead-mixin.ts → shared/typeahead.ts} +0 -0
  307. /package/src/{utils → shared}/wait-for-css-transition.ts +0 -0
  308. /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":";AAAA,OAAO,EACL,GAAG,EACH,aAAa,GAKd,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAChD,OAAO,KAAK,SAAS,MAAM,oCAAoC,CAAA;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAqB,CAAA;AACtD,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAyC1E,MAAM,qBAAqB,GAAG,GAAG,CAAC;IAChC,SAAS,EAAE,CAAC;IACZ,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAG,MAAM,EAAE,CAAA;AAEpC,MAAM,gBAAgB,GAAuB,GAAG,CAAC;IAC/C,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE,CAAC;CACZ,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAuB,GAAG,CAAC;IAC/C,QAAQ,EAAE,CAAC;CACZ,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAuB,GAAG,CAAC;IAClD,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,CAAC;CACZ,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAuB,GAAG,CAAC;IAClD,GAAG,EAAE,OAAO;IACZ,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,qBAAqB;IAC1C,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE;IACpB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,MAAM;IACjB,OAAO,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI;IAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;IACjC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI;IAClC,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;IAC5B,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM;IACpC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM;IACpC,SAAS,EAAE,MAAM;IACjB,wBAAwB,EAAE;QACxB,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI;KACrC;IACD,2CAA2C,EAAE;QAC3C,kBAAkB,EAAE,WAAW;KAChC;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,aAAa,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE;QAChD,aAAa,EAAE,KAAK;KACrB;IACD,YAAY,EAAE;QACZ,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,IAAI;KACd;IACD,sBAAsB,EAAE;QACtB,QAAQ,EAAE,CAAC;KACZ;CACF,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAuB,GAAG,CAAC;IACpD,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;IACzB,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;IAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;IAC/B,UAAU,EAAE,aAAa,mBAAmB,EAAE;IAC9C,SAAS,EAAE;QACT,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,sBAAsB,EAAE;QACtB,SAAS,EAAE,eAAe;KAC3B;CACF,CAAC,CAAA;AAEF,MAAM,iBAAiB,GAAuB,GAAG,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,gBAAgB,EAAE,KAAK;IACvB,UAAU,EAAE,sBAAsB,mBAAmB,EAAE;IACvD,sBAAsB,EAAE;QACtB,gBAAgB,EAAE,KAAK;KACxB;IACD,wBAAwB,EAAE;QACxB,aAAa,EAAE,MAAM;KACtB;IACD,yCAAyC,EAAE;QACzC,UAAU,EAAE,MAAM;KACnB;CACF,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAuB,GAAG,CAAC;IAC/C,OAAO,EAAE,WAAW;IACpB,SAAS,EAAE,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;IACnC,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;IAC5B,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,OAAO;IACrC,kBAAkB,EAAE;QAClB,SAAS,EAAE,CAAC;KACb;IACD,iBAAiB,EAAE;QACjB,YAAY,EAAE,CAAC;KAChB;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,gBAAgB,CAAA;AACzC,MAAM,CAAC,MAAM,SAAS,GAAG,gBAAgB,CAAA;AACzC,MAAM,CAAC,MAAM,YAAY,GAAG,mBAAmB,CAAA;AAC/C,MAAM,CAAC,MAAM,YAAY,GAAG,mBAAmB,CAAA;AAC/C,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAA;AACnD,MAAM,CAAC,MAAM,UAAU,GAAG,iBAAiB,CAAA;AAC3C,MAAM,CAAC,MAAM,SAAS,GAAG,gBAAgB,CAAA;AAEzC,MAAM,UAAU,SAAS,CAAC,MAA8B;IACtD,OAAO,GAAG,EAAE;QACV,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YACrC,IAAI,EACF,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,GAAG,EACH,aAAa,EACb,IAAI,EACJ,KAAK,EACL,GAAG,QAAQ,EACZ,GAAG,MAAM,CAAC,KAAK,CAAA;YAEhB,OAAO,CACL,KAAC,SAAS,CAAC,OAAO,IAChB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,YAEZ,iBAAS,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,YACvD,QAAQ,GACL,GACY,CACrB,CAAA;QACH,CAAC;QAED,IAAI,EACF,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,GAAG,EACH,aAAa,EACb,IAAI,EACJ,KAAK,EACL,GAAG,QAAQ,EACZ,GAAG,MAAM,CAAC,KAAK,CAAA;QAEhB,OAAO,CACL,KAAC,SAAS,CAAC,OAAO,IAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,YAEZ,iBAAS,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,YACvD,QAAQ,GACL,GACY,CACrB,CAAA;IACH,CAAC,CAAA;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,MAAkC;IAC9D,OAAO,GAAG,EAAE;QACV,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,GAAG,MAAM,CAAC,KAAK,CAAA;QAElE,OAAO,CACL,KAAC,SAAS,CAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YACrD,iBAAS,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,YACvD,QAAQ,GACL,GACgB,CACzB,CAAA;IACH,CAAC,CAAA;AACH,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,MAAqC;IACpE,OAAO,GAAG,EAAE;QACV,IAAI,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;QACpD,IAAI,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,EAAiC,CAAA;QACvE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAA;QAE/E,IAAI,MAAM,GAAG,CACX,qBACM,WAAW,EACf,GAAG,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,CAAC,EACzD,IAAI,EAAE,IAAI,IAAI,QAAQ,aAEtB,yBAAO,QAAQ,GAAQ,EACtB,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,+CAC+B,EAAE,gBACnB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACzC,GAAG,EAAE,cAAc,YAElB,SAAS,IAAI,KAAC,gBAAgB,KAAG,GAC7B,CACR,IACM,CACV,CAAA;QAED,OAAO,aAAa,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,MAAM,CAAC,CAAA;IACjE,CAAC,CAAA;AACH,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,MAAqC;IACpE,OAAO,GAAG,EAAE;QACV,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAA;QAEnD,OAAO,CACL,iBAAS,UAAU,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,OAAO,EAAE,EAAE,GAAG,CAAC,YAC9D,cAAK,GAAG,EAAE,qBAAqB,YAC7B,cAAK,GAAG,EAAE,SAAS,YAAG,QAAQ,GAAO,GACjC,GACF,CACP,CAAA;IACH,CAAC,CAAA;AACH,CAAC"}
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 {};