@remix-run/ui 0.1.2 → 0.3.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 (318) hide show
  1. package/README.md +9 -7
  2. package/dist/animation/demos/animation.demo.d.ts +5 -0
  3. package/dist/animation/demos/animation.demo.js +92 -0
  4. package/dist/animation/demos/animation.demo.js.map +1 -0
  5. package/dist/animation/demos/aspect-ratio.d.ts +2 -0
  6. package/dist/animation/demos/aspect-ratio.js +69 -0
  7. package/dist/animation/demos/aspect-ratio.js.map +1 -0
  8. package/dist/animation/demos/bouncy-switch.d.ts +2 -0
  9. package/dist/animation/demos/bouncy-switch.js +36 -0
  10. package/dist/animation/demos/bouncy-switch.js.map +1 -0
  11. package/dist/animation/demos/color-interpolation.d.ts +1 -0
  12. package/dist/animation/demos/color-interpolation.js +53 -0
  13. package/dist/animation/demos/color-interpolation.js.map +1 -0
  14. package/dist/animation/demos/cube.d.ts +2 -0
  15. package/dist/animation/demos/cube.js +86 -0
  16. package/dist/animation/demos/cube.js.map +1 -0
  17. package/dist/animation/demos/default-animate.d.ts +2 -0
  18. package/dist/animation/demos/default-animate.js +89 -0
  19. package/dist/animation/demos/default-animate.js.map +1 -0
  20. package/dist/animation/demos/drag-release.d.ts +24 -0
  21. package/dist/animation/demos/drag-release.js +96 -0
  22. package/dist/animation/demos/drag-release.js.map +1 -0
  23. package/dist/animation/demos/enter.d.ts +1 -0
  24. package/dist/animation/demos/enter.js +19 -0
  25. package/dist/animation/demos/enter.js.map +1 -0
  26. package/dist/animation/demos/exit.d.ts +2 -0
  27. package/dist/animation/demos/exit.js +58 -0
  28. package/dist/animation/demos/exit.js.map +1 -0
  29. package/dist/animation/demos/flip-toggle.d.ts +2 -0
  30. package/dist/animation/demos/flip-toggle.js +37 -0
  31. package/dist/animation/demos/flip-toggle.js.map +1 -0
  32. package/dist/animation/demos/hold-to-confirm.d.ts +13 -0
  33. package/dist/animation/demos/hold-to-confirm.js +211 -0
  34. package/dist/animation/demos/hold-to-confirm.js.map +1 -0
  35. package/dist/animation/demos/html-content.d.ts +2 -0
  36. package/dist/animation/demos/html-content.js +30 -0
  37. package/dist/animation/demos/html-content.js.map +1 -0
  38. package/dist/animation/demos/interruptible-keyframes.d.ts +1 -0
  39. package/dist/animation/demos/interruptible-keyframes.js +48 -0
  40. package/dist/animation/demos/interruptible-keyframes.js.map +1 -0
  41. package/dist/animation/demos/keyframes.d.ts +1 -0
  42. package/dist/animation/demos/keyframes.js +24 -0
  43. package/dist/animation/demos/keyframes.js.map +1 -0
  44. package/dist/animation/demos/material-ripple.d.ts +2 -0
  45. package/dist/animation/demos/material-ripple.js +127 -0
  46. package/dist/animation/demos/material-ripple.js.map +1 -0
  47. package/dist/animation/demos/mixin-presence-list.d.ts +2 -0
  48. package/dist/animation/demos/mixin-presence-list.js +88 -0
  49. package/dist/animation/demos/mixin-presence-list.js.map +1 -0
  50. package/dist/animation/demos/mixin-reclaim.d.ts +2 -0
  51. package/dist/animation/demos/mixin-reclaim.js +90 -0
  52. package/dist/animation/demos/mixin-reclaim.js.map +1 -0
  53. package/dist/animation/demos/multi-state-badge.d.ts +2 -0
  54. package/dist/animation/demos/multi-state-badge.js +231 -0
  55. package/dist/animation/demos/multi-state-badge.js.map +1 -0
  56. package/dist/animation/demos/press.d.ts +2 -0
  57. package/dist/animation/demos/press.js +63 -0
  58. package/dist/animation/demos/press.js.map +1 -0
  59. package/dist/animation/demos/reordering.d.ts +2 -0
  60. package/dist/animation/demos/reordering.js +50 -0
  61. package/dist/animation/demos/reordering.js.map +1 -0
  62. package/dist/animation/demos/rolling-square.d.ts +2 -0
  63. package/dist/animation/demos/rolling-square.js +42 -0
  64. package/dist/animation/demos/rolling-square.js.map +1 -0
  65. package/dist/animation/demos/rotate.d.ts +1 -0
  66. package/dist/animation/demos/rotate.js +18 -0
  67. package/dist/animation/demos/rotate.js.map +1 -0
  68. package/dist/animation/demos/shared-layout.d.ts +2 -0
  69. package/dist/animation/demos/shared-layout.js +114 -0
  70. package/dist/animation/demos/shared-layout.js.map +1 -0
  71. package/dist/animation/demos/spring.demo.d.ts +6 -0
  72. package/dist/animation/demos/spring.demo.js +304 -0
  73. package/dist/animation/demos/spring.demo.js.map +1 -0
  74. package/dist/animation/demos/transition-options.d.ts +1 -0
  75. package/dist/animation/demos/transition-options.js +21 -0
  76. package/dist/animation/demos/transition-options.js.map +1 -0
  77. package/dist/animation/spring.d.ts +24 -31
  78. package/dist/animation/spring.js +31 -8
  79. package/dist/animation/spring.js.map +1 -1
  80. package/dist/components/accordion/accordion.d.ts +6 -6
  81. package/dist/components/accordion/accordion.js.map +1 -1
  82. package/dist/components/accordion/demos/card.demo.d.ts +1 -0
  83. package/dist/components/accordion/demos/card.demo.js +1 -0
  84. package/dist/components/accordion/demos/card.demo.js.map +1 -1
  85. package/dist/components/accordion/demos/multiple.demo.d.ts +1 -0
  86. package/dist/components/accordion/demos/multiple.demo.js +1 -0
  87. package/dist/components/accordion/demos/multiple.demo.js.map +1 -1
  88. package/dist/components/accordion/demos/overview.demo.d.ts +1 -0
  89. package/dist/components/accordion/demos/overview.demo.js +1 -0
  90. package/dist/components/accordion/demos/overview.demo.js.map +1 -1
  91. package/dist/components/anchor/anchor.d.ts +8 -1
  92. package/dist/components/anchor/anchor.js +30 -11
  93. package/dist/components/anchor/anchor.js.map +1 -1
  94. package/dist/components/breadcrumbs/{demos/basic.demo.d.ts → basic.demo.d.ts} +1 -0
  95. package/dist/components/breadcrumbs/{demos/basic.demo.js → basic.demo.js} +1 -0
  96. package/dist/components/breadcrumbs/basic.demo.js.map +1 -0
  97. package/dist/components/breadcrumbs/breadcrumbs.d.ts +1 -1
  98. package/dist/components/breadcrumbs/{demos/separator.demo.d.ts → separator.demo.d.ts} +1 -0
  99. package/dist/components/breadcrumbs/{demos/separator.demo.js → separator.demo.js} +1 -0
  100. package/dist/components/breadcrumbs/separator.demo.js.map +1 -0
  101. package/dist/components/button/button.d.ts +4 -4
  102. package/dist/components/button/button.js +3 -1
  103. package/dist/components/button/button.js.map +1 -1
  104. package/dist/components/button/demos/aliases.demo.d.ts +1 -0
  105. package/dist/components/button/demos/aliases.demo.js +1 -0
  106. package/dist/components/button/demos/aliases.demo.js.map +1 -1
  107. package/dist/components/button/demos/basic.demo.d.ts +1 -0
  108. package/dist/components/button/demos/basic.demo.js +1 -0
  109. package/dist/components/button/demos/basic.demo.js.map +1 -1
  110. package/dist/components/button/demos/states.demo.d.ts +1 -0
  111. package/dist/components/button/demos/states.demo.js +1 -0
  112. package/dist/components/button/demos/states.demo.js.map +1 -1
  113. package/dist/components/combobox/combobox.d.ts +10 -10
  114. package/dist/components/combobox/combobox.js.map +1 -1
  115. package/dist/components/combobox/{demos/overview.demo.d.ts → overview.demo.d.ts} +1 -0
  116. package/dist/components/combobox/{demos/overview.demo.js → overview.demo.js} +1 -0
  117. package/dist/components/combobox/overview.demo.js.map +1 -0
  118. package/dist/components/listbox/listbox.d.ts +3 -3
  119. package/dist/components/listbox/listbox.js.map +1 -1
  120. package/dist/components/listbox/{demos/overview.demo.d.ts → overview.demo.d.ts} +1 -0
  121. package/dist/components/listbox/{demos/overview.demo.js → overview.demo.js} +1 -0
  122. package/dist/components/listbox/overview.demo.js.map +1 -0
  123. package/dist/components/menu/demos/bubbling.demo.d.ts +1 -0
  124. package/dist/components/menu/demos/bubbling.demo.js +1 -0
  125. package/dist/components/menu/demos/bubbling.demo.js.map +1 -1
  126. package/dist/components/menu/demos/context-trigger.demo.d.ts +7 -0
  127. package/dist/components/menu/demos/context-trigger.demo.js +87 -0
  128. package/dist/components/menu/demos/context-trigger.demo.js.map +1 -0
  129. package/dist/components/menu/demos/overview.demo.d.ts +1 -0
  130. package/dist/components/menu/demos/overview.demo.js +1 -0
  131. package/dist/components/menu/demos/overview.demo.js.map +1 -1
  132. package/dist/components/menu/menu.d.ts +15 -12
  133. package/dist/components/menu/menu.js +55 -0
  134. package/dist/components/menu/menu.js.map +1 -1
  135. package/dist/components/popover/{demos/overview.demo.d.ts → overview.demo.d.ts} +1 -0
  136. package/dist/components/popover/{demos/overview.demo.js → overview.demo.js} +1 -0
  137. package/dist/components/popover/overview.demo.js.map +1 -0
  138. package/dist/components/popover/popover.d.ts +7 -7
  139. package/dist/components/popover/popover.js +11 -4
  140. package/dist/components/popover/popover.js.map +1 -1
  141. package/dist/components/select/{demos/deconstructed.demo.d.ts → deconstructed.demo.d.ts} +1 -0
  142. package/dist/components/select/{demos/deconstructed.demo.js → deconstructed.demo.js} +1 -0
  143. package/dist/components/select/deconstructed.demo.js.map +1 -0
  144. package/dist/components/select/{demos/overview.demo.d.ts → overview.demo.d.ts} +1 -0
  145. package/dist/components/select/{demos/overview.demo.js → overview.demo.js} +1 -0
  146. package/dist/components/select/overview.demo.js.map +1 -0
  147. package/dist/components/select/select.d.ts +10 -10
  148. package/dist/components/select/select.js +1 -1
  149. package/dist/components/select/select.js.map +1 -1
  150. package/dist/components/tabs/tabs.d.ts +3 -3
  151. package/dist/index.d.ts +1 -1
  152. package/dist/index.js.map +1 -1
  153. package/dist/interactions/keydown/keydown.d.ts +1 -1
  154. package/dist/interactions/outside-click/outside-click-mixin.d.ts +2 -1
  155. package/dist/interactions/typeahead/typeahead-mixin.d.ts +3 -1
  156. package/dist/runtime/client-entries.d.ts +1 -2
  157. package/dist/runtime/client-entries.js.map +1 -1
  158. package/dist/runtime/component.d.ts +20 -17
  159. package/dist/runtime/component.js +15 -6
  160. package/dist/runtime/component.js.map +1 -1
  161. package/dist/runtime/core/attributes.d.ts +3 -1
  162. package/dist/runtime/core/attributes.js +19 -1
  163. package/dist/runtime/core/attributes.js.map +1 -1
  164. package/dist/runtime/core/props.js +6 -5
  165. package/dist/runtime/core/props.js.map +1 -1
  166. package/dist/runtime/demos/basic.demo.d.ts +6 -0
  167. package/dist/runtime/demos/basic.demo.js +16 -0
  168. package/dist/runtime/demos/basic.demo.js.map +1 -0
  169. package/dist/runtime/demos/controlled-uncontrolled-values.demo.d.ts +6 -0
  170. package/dist/runtime/demos/controlled-uncontrolled-values.demo.js +77 -0
  171. package/dist/runtime/demos/controlled-uncontrolled-values.demo.js.map +1 -0
  172. package/dist/runtime/demos/keyed-list.demo.d.ts +6 -0
  173. package/dist/runtime/demos/keyed-list.demo.js +62 -0
  174. package/dist/runtime/demos/keyed-list.demo.js.map +1 -0
  175. package/dist/runtime/demos/readme.demo.d.ts +5 -0
  176. package/dist/runtime/demos/readme.demo.js +396 -0
  177. package/dist/runtime/demos/readme.demo.js.map +1 -0
  178. package/dist/runtime/diff-dom.js +194 -21
  179. package/dist/runtime/diff-dom.js.map +1 -1
  180. package/dist/runtime/dom.d.ts +16 -9
  181. package/dist/runtime/frame.d.ts +7 -0
  182. package/dist/runtime/frame.js +176 -41
  183. package/dist/runtime/frame.js.map +1 -1
  184. package/dist/runtime/jsx.d.ts +3 -4
  185. package/dist/runtime/jsx.js.map +1 -1
  186. package/dist/runtime/mixins/link-mixin.d.ts +5 -1
  187. package/dist/runtime/mixins/link-mixin.js.map +1 -1
  188. package/dist/runtime/mixins/mixin.d.ts +2 -1
  189. package/dist/runtime/mixins/mixin.js.map +1 -1
  190. package/dist/runtime/mixins/ref-mixin.d.ts +2 -1
  191. package/dist/runtime/mixins/ref-mixin.js.map +1 -1
  192. package/dist/runtime/reconcile.d.ts +1 -1
  193. package/dist/runtime/reconcile.js +19 -5
  194. package/dist/runtime/reconcile.js.map +1 -1
  195. package/dist/runtime/scheduler.d.ts +10 -10
  196. package/dist/runtime/scheduler.js +1 -1
  197. package/dist/runtime/scheduler.js.map +1 -1
  198. package/dist/runtime/svg-attributes.js +1 -0
  199. package/dist/runtime/svg-attributes.js.map +1 -1
  200. package/dist/runtime/to-vnode.js +2 -2
  201. package/dist/runtime/to-vnode.js.map +1 -1
  202. package/dist/runtime/vnode.d.ts +6 -1
  203. package/dist/runtime/vnode.js +4 -0
  204. package/dist/runtime/vnode.js.map +1 -1
  205. package/dist/server/stream.d.ts +2 -0
  206. package/dist/server/stream.js +82 -11
  207. package/dist/server/stream.js.map +1 -1
  208. package/dist/style/css-mixin.d.ts +2 -1
  209. package/dist/style/css-mixin.js.map +1 -1
  210. package/dist/style/index.d.ts +1 -1
  211. package/dist/style/style.js +27 -10
  212. package/dist/style/style.js.map +1 -1
  213. package/dist/style/stylesheet.d.ts +13 -13
  214. package/dist/style/stylesheet.js.map +1 -1
  215. package/dist/theme/contract.d.ts +24 -222
  216. package/dist/theme/contract.js +2 -2
  217. package/dist/theme/contract.js.map +1 -1
  218. package/dist/theme/glyph-contract.d.ts +1 -3
  219. package/dist/theme/glyph-contract.js.map +1 -1
  220. package/dist/theme/presets/rmx-01/index.d.ts +4 -2
  221. package/dist/theme/presets/rmx-01/index.js.map +1 -1
  222. package/dist/utils/scroll-lock.d.ts +3 -3
  223. package/dist/utils/scroll-lock.js.map +1 -1
  224. package/package.json +4 -4
  225. package/src/animation/README.md +7 -5
  226. package/src/animation/demos/animation.demo.tsx +194 -0
  227. package/src/animation/demos/aspect-ratio.tsx +120 -0
  228. package/src/animation/demos/bouncy-switch.tsx +47 -0
  229. package/src/animation/demos/color-interpolation.tsx +73 -0
  230. package/src/animation/demos/cube.tsx +116 -0
  231. package/src/animation/demos/default-animate.tsx +129 -0
  232. package/src/animation/demos/drag-release.ts +118 -0
  233. package/src/animation/demos/enter.tsx +22 -0
  234. package/src/animation/demos/exit.tsx +79 -0
  235. package/src/animation/demos/flip-toggle.tsx +46 -0
  236. package/src/animation/demos/hold-to-confirm.tsx +317 -0
  237. package/src/animation/demos/html-content.tsx +41 -0
  238. package/src/animation/demos/interruptible-keyframes.tsx +62 -0
  239. package/src/animation/demos/keyframes.tsx +29 -0
  240. package/src/animation/demos/material-ripple.tsx +158 -0
  241. package/src/animation/demos/mixin-presence-list.tsx +121 -0
  242. package/src/animation/demos/mixin-reclaim.tsx +125 -0
  243. package/src/animation/demos/multi-state-badge.tsx +426 -0
  244. package/src/animation/demos/press.tsx +67 -0
  245. package/src/animation/demos/reordering.tsx +65 -0
  246. package/src/animation/demos/rolling-square.tsx +57 -0
  247. package/src/animation/demos/rotate.tsx +21 -0
  248. package/src/animation/demos/shared-layout.tsx +211 -0
  249. package/src/animation/demos/spring.demo.tsx +385 -0
  250. package/src/animation/demos/transition-options.tsx +24 -0
  251. package/src/animation/spring.ts +43 -9
  252. package/src/components/accordion/accordion.tsx +7 -5
  253. package/src/components/accordion/demos/card.demo.tsx +1 -0
  254. package/src/components/accordion/demos/multiple.demo.tsx +1 -0
  255. package/src/components/accordion/demos/overview.demo.tsx +1 -0
  256. package/src/components/anchor/README.md +11 -3
  257. package/src/components/anchor/anchor.ts +54 -13
  258. package/src/components/breadcrumbs/{demos/basic.demo.tsx → basic.demo.tsx} +1 -0
  259. package/src/components/breadcrumbs/breadcrumbs.tsx +1 -1
  260. package/src/components/breadcrumbs/{demos/separator.demo.tsx → separator.demo.tsx} +1 -0
  261. package/src/components/button/button.tsx +30 -18
  262. package/src/components/button/demos/aliases.demo.tsx +1 -0
  263. package/src/components/button/demos/basic.demo.tsx +1 -0
  264. package/src/components/button/demos/states.demo.tsx +1 -0
  265. package/src/components/combobox/README.md +1 -1
  266. package/src/components/combobox/combobox.tsx +30 -12
  267. package/src/components/combobox/{demos/overview.demo.tsx → overview.demo.tsx} +1 -0
  268. package/src/components/glyph/glyph.tsx +2 -2
  269. package/src/components/listbox/listbox.ts +88 -83
  270. package/src/components/listbox/{demos/overview.demo.tsx → overview.demo.tsx} +1 -0
  271. package/src/components/menu/README.md +26 -2
  272. package/src/components/menu/demos/bubbling.demo.tsx +1 -0
  273. package/src/components/menu/demos/context-trigger.demo.tsx +133 -0
  274. package/src/components/menu/demos/overview.demo.tsx +1 -0
  275. package/src/components/menu/menu.tsx +100 -16
  276. package/src/components/popover/{demos/overview.demo.tsx → overview.demo.tsx} +1 -0
  277. package/src/components/popover/popover.ts +101 -81
  278. package/src/components/select/{demos/deconstructed.demo.tsx → deconstructed.demo.tsx} +1 -0
  279. package/src/components/select/{demos/overview.demo.tsx → overview.demo.tsx} +1 -0
  280. package/src/components/select/select.tsx +27 -10
  281. package/src/index.ts +1 -0
  282. package/src/runtime/client-entries.ts +1 -5
  283. package/src/runtime/component.ts +37 -15
  284. package/src/runtime/core/attributes.ts +21 -0
  285. package/src/runtime/core/props.ts +6 -4
  286. package/src/runtime/demos/basic.demo.tsx +21 -0
  287. package/src/runtime/demos/controlled-uncontrolled-values.demo.tsx +177 -0
  288. package/src/runtime/demos/keyed-list.demo.tsx +94 -0
  289. package/src/runtime/demos/readme.demo.tsx +702 -0
  290. package/src/runtime/diff-dom.ts +270 -20
  291. package/src/runtime/dom.ts +16 -9
  292. package/src/runtime/frame.ts +218 -41
  293. package/src/runtime/jsx.ts +7 -11
  294. package/src/runtime/mixins/link-mixin.ts +88 -86
  295. package/src/runtime/mixins/mixin.ts +9 -1
  296. package/src/runtime/mixins/ref-mixin.ts +4 -5
  297. package/src/runtime/reconcile.ts +23 -14
  298. package/src/runtime/scheduler.ts +20 -20
  299. package/src/runtime/svg-attributes.ts +1 -0
  300. package/src/runtime/to-vnode.ts +2 -2
  301. package/src/runtime/vnode.ts +10 -0
  302. package/src/server/README.md +4 -2
  303. package/src/server/stream.ts +84 -10
  304. package/src/style/css-mixin.ts +6 -1
  305. package/src/style/index.ts +1 -2
  306. package/src/style/style.ts +29 -10
  307. package/src/style/stylesheet.ts +14 -2
  308. package/src/theme/contract.ts +37 -5
  309. package/src/theme/glyph-contract.ts +3 -1
  310. package/src/theme/presets/rmx-01/index.ts +4 -2
  311. package/src/utils/scroll-lock.ts +7 -3
  312. package/dist/components/breadcrumbs/demos/basic.demo.js.map +0 -1
  313. package/dist/components/breadcrumbs/demos/separator.demo.js.map +0 -1
  314. package/dist/components/combobox/demos/overview.demo.js.map +0 -1
  315. package/dist/components/listbox/demos/overview.demo.js.map +0 -1
  316. package/dist/components/popover/demos/overview.demo.js.map +0 -1
  317. package/dist/components/select/demos/deconstructed.demo.js.map +0 -1
  318. package/dist/components/select/demos/overview.demo.js.map +0 -1
package/README.md CHANGED
@@ -135,13 +135,15 @@ let Theme = createTheme({
135
135
  Render the theme once near the top of your document:
136
136
 
137
137
  ```tsx
138
- function Layout(props: { children: RemixNode }) {
139
- return (
138
+ import type { Handle, RemixNode } from 'remix/ui'
139
+
140
+ function Layout(handle: Handle<{ children: RemixNode }>) {
141
+ return () => (
140
142
  <html>
141
143
  <head>
142
144
  <Theme />
143
145
  </head>
144
- <body>{props.children}</body>
146
+ <body>{handle.props.children}</body>
145
147
  </html>
146
148
  )
147
149
  }
@@ -168,13 +170,13 @@ let card = css({
168
170
  Render shared glyphs separately from the theme styles:
169
171
 
170
172
  ```tsx
171
- import type { RemixNode } from 'remix/ui'
173
+ import type { Handle, RemixNode } from 'remix/ui'
172
174
  import { Button } from 'remix/ui/button'
173
175
  import { Glyph } from 'remix/ui/glyph'
174
176
  import { RMX_01, RMX_01_GLYPHS } from 'remix/ui/theme'
175
177
 
176
- function Layout(props: { children: RemixNode }) {
177
- return (
178
+ function Layout(handle: Handle<{ children: RemixNode }>) {
179
+ return () => (
178
180
  <html>
179
181
  <head>
180
182
  <RMX_01 />
@@ -184,7 +186,7 @@ function Layout(props: { children: RemixNode }) {
184
186
  <Button startIcon={<Glyph name="add" />} tone="primary">
185
187
  New project
186
188
  </Button>
187
- {props.children}
189
+ {handle.props.children}
188
190
  </body>
189
191
  </html>
190
192
  )
package/dist/animation/demos/animation.demo.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ /**
2
+ * @name Animation Gallery
3
+ * @description A collection of motion and animation experiments adapted from the standalone demos.
4
+ */
5
+ export default function AnimationGallery(): () => import("@remix-run/ui").RemixElement;
package/dist/animation/demos/animation.demo.js ADDED
@@ -0,0 +1,92 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@remix-run/ui/jsx-runtime";
2
+ import { css, on } from '@remix-run/ui';
3
+ import { DefaultAnimate } from "./default-animate.js";
4
+ import { EnterAnimation } from "./enter.js";
5
+ import { ExitAnimation } from "./exit.js";
6
+ import { Press } from "./press.js";
7
+ import { HTMLContent } from "./html-content.js";
8
+ import { Keyframes } from "./keyframes.js";
9
+ import { InterruptibleKeyframes } from "./interruptible-keyframes.js";
10
+ import { RollingSquare } from "./rolling-square.js";
11
+ import { Rotate } from "./rotate.js";
12
+ import { TransitionOptions } from "./transition-options.js";
13
+ import { Cube } from "./cube.js";
14
+ import { SharedLayout } from "./shared-layout.js";
15
+ import { AspectRatio } from "./aspect-ratio.js";
16
+ import { BouncySwitch } from "./bouncy-switch.js";
17
+ import { ColorInterpolation } from "./color-interpolation.js";
18
+ import { FlipToggle } from "./flip-toggle.js";
19
+ import { Reordering } from "./reordering.js";
20
+ import { MultiStateBadge } from "./multi-state-badge.js";
21
+ import { HoldToConfirm } from "./hold-to-confirm.js";
22
+ import { MaterialRipple } from "./material-ripple.js";
23
+ function Tile(handle) {
24
+ let remountKey = 0;
25
+ return () => {
26
+ let { title, children, notes } = handle.props;
27
+ return (_jsxs("div", { mix: [
28
+ css({
29
+ backgroundColor: 'white',
30
+ padding: '40px',
31
+ borderRadius: 12,
32
+ boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
33
+ display: 'flex',
34
+ alignItems: 'center',
35
+ flexDirection: 'column',
36
+ gap: 12,
37
+ position: 'relative',
38
+ }),
39
+ ], children: [_jsx("button", { mix: [
40
+ css({
41
+ position: 'absolute',
42
+ bottom: 8,
43
+ right: 8,
44
+ width: 18,
45
+ height: 18,
46
+ padding: 0,
47
+ border: 'none',
48
+ background: 'transparent',
49
+ cursor: 'pointer',
50
+ opacity: 0.4,
51
+ '&:hover': {
52
+ opacity: 1,
53
+ },
54
+ }),
55
+ on('click', () => {
56
+ remountKey++;
57
+ handle.update();
58
+ }),
59
+ ], title: "Replay animation", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M1 4v6h6M23 20v-6h-6" }), _jsx("path", { d: "M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" })] }) }), _jsx("h3", { mix: [css({ margin: 0 })], children: title }), _jsx("div", { mix: [
60
+ css({
61
+ flex: 1,
62
+ display: 'flex',
63
+ alignItems: 'center',
64
+ justifyContent: 'center',
65
+ minHeight: 280,
66
+ }),
67
+ ], children: children }, remountKey), notes && (_jsx("p", { mix: [
68
+ css({
69
+ margin: 0,
70
+ fontSize: 12,
71
+ color: '#666',
72
+ textAlign: 'center',
73
+ maxWidth: '200px',
74
+ }),
75
+ ], children: notes }))] }));
76
+ };
77
+ }
78
+ /**
79
+ * @name Animation Gallery
80
+ * @description A collection of motion and animation experiments adapted from the standalone demos.
81
+ */
82
+ export default function AnimationGallery() {
83
+ return () => (_jsxs(_Fragment, { children: [_jsx("h1", { mix: [css({ marginBottom: 0, '& + p': { marginTop: 0 } })], children: "Animations" }), _jsxs("p", { children: ["Most animations are adapted from ", _jsx("a", { href: "https://www.motion.dev", children: "Motion" }), ". Thank you for your work ", _jsx("a", { href: "https://motion.dev/@matt", children: "Matt Perry" }), "!"] }), _jsxs("div", { mix: [
84
+ css({
85
+ display: 'grid',
86
+ gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
87
+ gap: 24,
88
+ marginTop: 40,
89
+ }),
90
+ ], children: [_jsx(Tile, { title: "Default Animate", notes: "animateEntrance + animateLayout defaults", children: _jsx(DefaultAnimate, {}) }), _jsx(Tile, { title: "Rolling Square", notes: "CSS transition with spring() timing function", children: _jsx(RollingSquare, {}) }), _jsx(Tile, { title: "Enter Animation", notes: "animateEntrance() with spring physics", children: _jsx(EnterAnimation, {}) }), _jsx(Tile, { title: "Exit Animation", notes: "animateEntrance() + animateExit()", children: _jsx(ExitAnimation, {}) }), _jsx(Tile, { title: "Press Interaction", notes: "CSS transition + pointer/keyboard events", children: _jsx(Press, {}) }), _jsx(Tile, { title: "HTML Content", notes: "rAF loop with spring iterator for text", children: _jsx(HTMLContent, {}) }), _jsx(Tile, { title: "Keyframes", notes: "CSS @keyframes with infinite loop", children: _jsx(Keyframes, {}) }), _jsx(Tile, { title: "Interruptible Keyframes", notes: "Web Animations API with commitStyles()", children: _jsx(InterruptibleKeyframes, {}) }), _jsx(Tile, { title: "Rotate", notes: "CSS @keyframes (one-shot)", children: _jsx(Rotate, {}) }), _jsx(Tile, { title: "Transition Options", notes: "animateEntrance() with cubic-bezier + delay", children: _jsx(TransitionOptions, {}) }), _jsx(Tile, { title: "3D Cube", notes: "rAF loop with direct style manipulation", children: _jsx(Cube, {}) }), _jsx(Tile, { title: "Shared Layout", notes: "CSS Grid overlap for simultaneous enter/exit", children: _jsx(SharedLayout, {}) }), _jsx(Tile, { title: "Aspect Ratio", children: _jsx(AspectRatio, {}) }), _jsx(Tile, { title: "Bouncy Switch", notes: "Spring up, bounce down with CSS linear()", children: _jsx(BouncySwitch, {}) }), _jsx(Tile, { title: "FLIP Toggle", notes: "animateLayout() with interruptible WAAPI", children: _jsx(FlipToggle, {}) }), _jsx(Tile, { title: "Reordering", notes: "animateLayout() with auto-shuffling list", children: _jsx(Reordering, {}) }), _jsx(Tile, { title: "Color Interpolation", notes: "sRGB vs OKLCH color space", children: _jsx(ColorInterpolation, {}) }), _jsx(Tile, { title: "Multi-State Badge", notes: "Animated icon/label swap with WAAPI shake", children: _jsx(MultiStateBadge, {}) }), _jsx(Tile, { title: "Hold to Confirm", notes: "Custom interaction with progress tracking", children: _jsx(HoldToConfirm, {}) }), _jsx(Tile, { title: "Material Ripple", notes: "Pointer-tracked ripples with enter/exit animations", children: _jsx(MaterialRipple, {}) })] })] }));
91
+ }
92
+ //# sourceMappingURL=animation.demo.js.map
package/dist/animation/demos/animation.demo.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animation.demo.js","sourceRoot":"","sources":["../../../src/animation/demos/animation.demo.tsx"],"names":[],"mappings":"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"}
package/dist/animation/demos/aspect-ratio.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { type Handle } from '@remix-run/ui';
2
+ export declare function AspectRatio(handle: Handle): () => import("@remix-run/ui").RemixElement;
package/dist/animation/demos/aspect-ratio.js ADDED
@@ -0,0 +1,69 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
2
+ import {} from '@remix-run/ui';
3
+ import { css, on } from '@remix-run/ui';
4
+ import { spring } from '@remix-run/ui/animation';
5
+ export function AspectRatio(handle) {
6
+ let aspectRatio = 1;
7
+ let width = 100;
8
+ return () => (_jsxs("div", { mix: [
9
+ css({
10
+ display: 'flex',
11
+ alignItems: 'center',
12
+ flexDirection: 'column',
13
+ gap: 20,
14
+ }),
15
+ ], children: [_jsx("div", { mix: [
16
+ css({
17
+ display: 'flex',
18
+ justifyContent: 'center',
19
+ alignItems: 'center',
20
+ width: 180,
21
+ height: 180,
22
+ }),
23
+ ], children: _jsx("div", { mix: [
24
+ css({
25
+ backgroundColor: '#8df0cc',
26
+ borderRadius: 10,
27
+ transition: spring.transition(['width', 'aspect-ratio'], 'bouncy'),
28
+ }),
29
+ ], style: {
30
+ width,
31
+ aspectRatio,
32
+ } }) }), _jsxs("div", { mix: [css({ display: 'flex', flexDirection: 'column', gap: 12, width: '100%' })], children: [_jsxs("label", { mix: [
33
+ css({
34
+ display: 'flex',
35
+ alignItems: 'center',
36
+ gap: 10,
37
+ fontSize: 13,
38
+ color: '#666',
39
+ }),
40
+ ], children: [_jsx("span", { mix: [css({ width: 50, flexShrink: 0 })], children: "Ratio" }), _jsx("input", { type: "range", value: aspectRatio, min: 0.2, max: 3, step: 0.1, mix: [
41
+ css(rangeInputCss),
42
+ on('input', (event) => {
43
+ let value = event.currentTarget.value;
44
+ aspectRatio = parseFloat(value);
45
+ handle.update();
46
+ }),
47
+ ] }), _jsx("span", { mix: [css({ width: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' })], children: aspectRatio.toFixed(1) })] }), _jsxs("label", { mix: [
48
+ css({
49
+ display: 'flex',
50
+ alignItems: 'center',
51
+ gap: 10,
52
+ fontSize: 13,
53
+ color: '#666',
54
+ }),
55
+ ], children: [_jsx("span", { mix: [css({ width: 50, flexShrink: 0 })], children: "Width" }), _jsx("input", { type: "range", value: width, min: 20, max: 160, step: 5, mix: [
56
+ css(rangeInputCss),
57
+ on('input', (event) => {
58
+ let value = event.currentTarget.value;
59
+ width = parseFloat(value);
60
+ handle.update();
61
+ }),
62
+ ] }), _jsx("span", { mix: [css({ width: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' })], children: width })] })] })] }));
63
+ }
64
+ const rangeInputCss = {
65
+ flex: 1,
66
+ accentColor: '#8df0cc',
67
+ cursor: 'pointer',
68
+ };
69
+ //# sourceMappingURL=aspect-ratio.js.map
package/dist/animation/demos/aspect-ratio.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"aspect-ratio.js","sourceRoot":"","sources":["../../../src/animation/demos/aspect-ratio.tsx"],"names":[],"mappings":"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"}
package/dist/animation/demos/bouncy-switch.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { type Handle } from '@remix-run/ui';
2
+ export declare function BouncySwitch(handle: Handle): () => import("@remix-run/ui").RemixElement;
package/dist/animation/demos/bouncy-switch.js ADDED
@@ -0,0 +1,36 @@
1
+ import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
2
+ import {} from '@remix-run/ui';
3
+ import { css, on } from '@remix-run/ui';
4
+ import { spring } from '@remix-run/ui/animation';
5
+ const bounceEasing = `linear(0, 0.258 12%, 0.424 18.3%, 0.633 24.4%, 0.999 33.3%, 0.783 39.8%, 0.733 42.5%, 0.716 45.1%, 0.731 47.6%, 0.777 50.2%, 0.999 57.7%, 0.906 61.7%, 0.883 63.5%, 0.876 65.2%, 0.901 68.7%, 0.999 74.5%, 0.964 77.4%, 0.953 80.1%, 0.961 82.6%, 1 88.2%, 0.99 91.9%, 1)`;
6
+ export function BouncySwitch(handle) {
7
+ let isOn = true;
8
+ return () => (_jsx("div", { mix: [
9
+ css({
10
+ height: 160,
11
+ backgroundColor: '#ff6b35',
12
+ display: 'flex',
13
+ flexDirection: 'column',
14
+ justifyContent: 'flex-end',
15
+ borderRadius: 50,
16
+ padding: 10,
17
+ cursor: 'pointer',
18
+ }),
19
+ on('click', () => {
20
+ isOn = !isOn;
21
+ handle.update();
22
+ }),
23
+ ], children: _jsx("div", { mix: [
24
+ css({
25
+ width: 60,
26
+ height: 60,
27
+ backgroundColor: 'white',
28
+ borderRadius: 30,
29
+ willChange: 'transform',
30
+ }),
31
+ ], style: {
32
+ transform: isOn ? 'translateY(-100px)' : 'translateY(0)',
33
+ transition: isOn ? `transform ${spring()}` : `transform 800ms ${bounceEasing}`,
34
+ } }) }));
35
+ }
36
+ //# sourceMappingURL=bouncy-switch.js.map
package/dist/animation/demos/bouncy-switch.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"bouncy-switch.js","sourceRoot":"","sources":["../../../src/animation/demos/bouncy-switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAEhD,MAAM,YAAY,GAAG,2QAA2Q,CAAA;AAEhS,MAAM,UAAU,YAAY,CAAC,MAAc;IACzC,IAAI,IAAI,GAAG,IAAI,CAAA;IAEf,OAAO,GAAG,EAAE,CAAC,CACX,cACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,MAAM,EAAE,GAAG;gBACX,eAAe,EAAE,SAAS;gBAC1B,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,cAAc,EAAE,UAAU;gBAC1B,YAAY,EAAE,EAAE;gBAChB,OAAO,EAAE,EAAE;gBACX,MAAM,EAAE,SAAS;aAClB,CAAC;YACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;gBACf,IAAI,GAAG,CAAC,IAAI,CAAA;gBACZ,MAAM,CAAC,MAAM,EAAE,CAAA;YACjB,CAAC,CAAC;SACH,YAED,cACE,GAAG,EAAE;gBACH,GAAG,CAAC;oBACF,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,eAAe,EAAE,OAAO;oBACxB,YAAY,EAAE,EAAE;oBAChB,UAAU,EAAE,WAAW;iBACxB,CAAC;aACH,EACD,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,eAAe;gBACxD,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,YAAY,EAAE;aAC/E,GACD,GACE,CACP,CAAA;AACH,CAAC"}
package/dist/animation/demos/color-interpolation.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function ColorInterpolation(): () => import("@remix-run/ui").RemixElement;
package/dist/animation/demos/color-interpolation.js ADDED
@@ -0,0 +1,53 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
2
+ import { css } from '@remix-run/ui';
3
+ /*
4
+ * A comparison of color interpolation methods.
5
+ *
6
+ * The "dimming effect" in browser animations happens because sRGB is
7
+ * gamma-encoded, so linear interpolation passes through desaturated colors.
8
+ *
9
+ * The OKLCH box uses the @property hack: register a custom property as <number>,
10
+ * animate it 0→1, then use color-mix(in oklch, ...) with that number.
11
+ */
12
+ export function ColorInterpolation() {
13
+ return () => (_jsxs("div", { mix: [css({ display: 'flex', gap: 30, alignItems: 'center', justifyContent: 'center' })], children: [_jsx("style", { children: `
14
+ @property --color-t {
15
+ syntax: '<number>';
16
+ inherits: false;
17
+ initial-value: 0;
18
+ }
19
+
20
+ @keyframes color-t-anim {
21
+ 0%, 100% { --color-t: 0; }
22
+ 50% { --color-t: 1; }
23
+ }
24
+
25
+ .oklch-box {
26
+ animation: color-t-anim 4s linear infinite;
27
+ background-color: color-mix(
28
+ in oklch,
29
+ #ff0088 calc((1 - var(--color-t)) * 100%),
30
+ #0d63f8 calc(var(--color-t) * 100%)
31
+ );
32
+ }
33
+ ` }), _jsxs("div", { mix: [css({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 })], children: [_jsx("div", { mix: [
34
+ css({
35
+ width: 100,
36
+ height: 100,
37
+ borderRadius: 8,
38
+ backgroundColor: '#ff0088',
39
+ '@keyframes srgb-color': {
40
+ '0%, 100%': { backgroundColor: '#ff0088' },
41
+ '50%': { backgroundColor: '#0d63f8' },
42
+ },
43
+ animation: 'srgb-color 4s linear infinite',
44
+ }),
45
+ ] }), _jsx("div", { mix: [css({ fontSize: 14, color: '#666' })], children: "sRGB" })] }), _jsxs("div", { mix: [css({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 })], children: [_jsx("div", { className: "oklch-box", mix: [
46
+ css({
47
+ width: 100,
48
+ height: 100,
49
+ borderRadius: 8,
50
+ }),
51
+ ] }), _jsx("div", { mix: [css({ fontSize: 14, color: '#666' })], children: "OKLCH" })] })] }));
52
+ }
53
+ //# sourceMappingURL=color-interpolation.js.map
package/dist/animation/demos/color-interpolation.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-interpolation.js","sourceRoot":"","sources":["../../../src/animation/demos/color-interpolation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAEnC;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,GAAG,EAAE,CAAC,CACX,eAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,CAAC,aAC3F,0BACG;;;;;;;;;;;;;;;;;;;;SAoBA,GACK,EAER,eAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,aAC1F,cACE,GAAG,EAAE;4BACH,GAAG,CAAC;gCACF,KAAK,EAAE,GAAG;gCACV,MAAM,EAAE,GAAG;gCACX,YAAY,EAAE,CAAC;gCACf,eAAe,EAAE,SAAS;gCAC1B,uBAAuB,EAAE;oCACvB,UAAU,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;oCAC1C,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;iCACtC;gCACD,SAAS,EAAE,+BAA+B;6BAC3C,CAAC;yBACH,GACD,EACF,cAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,qBAAY,IACxD,EAEN,eAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,aAC1F,cACE,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE;4BACH,GAAG,CAAC;gCACF,KAAK,EAAE,GAAG;gCACV,MAAM,EAAE,GAAG;gCACX,YAAY,EAAE,CAAC;6BAChB,CAAC;yBACH,GACD,EACF,cAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,sBAAa,IACzD,IACF,CACP,CAAA;AACH,CAAC"}
package/dist/animation/demos/cube.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { Handle } from '@remix-run/ui';
2
+ export declare function Cube(handle: Handle): () => import("@remix-run/ui").RemixElement;
package/dist/animation/demos/cube.js ADDED
@@ -0,0 +1,86 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
2
+ import { css, ref } from '@remix-run/ui';
3
+ export function Cube(handle) {
4
+ let cube;
5
+ function animate(t) {
6
+ if (handle.signal.aborted)
7
+ return;
8
+ let rotate = Math.sin(t / 10000) * 200;
9
+ let y = (1 + Math.sin(t / 1000)) * -25;
10
+ cube.style.transform = `translateY(${y}px) rotateX(${rotate}deg) rotateY(${rotate}deg)`;
11
+ requestAnimationFrame(animate);
12
+ }
13
+ return () => (_jsx("div", { mix: [
14
+ css({
15
+ perspective: '400px',
16
+ width: '100px',
17
+ height: '100px',
18
+ }),
19
+ ], children: _jsxs("div", { mix: [
20
+ ref((node) => {
21
+ cube = node;
22
+ requestAnimationFrame(animate);
23
+ }),
24
+ css({
25
+ width: '100px',
26
+ height: '100px',
27
+ position: 'relative',
28
+ transformStyle: 'preserve-3d',
29
+ }),
30
+ ], children: [_jsx("div", { mix: [
31
+ css({
32
+ position: 'absolute',
33
+ width: '100%',
34
+ height: '100%',
35
+ opacity: 0.6,
36
+ transform: 'rotateY(0deg) translateZ(50px)',
37
+ backgroundColor: '#ff0055',
38
+ }),
39
+ ] }), _jsx("div", { mix: [
40
+ css({
41
+ position: 'absolute',
42
+ width: '100%',
43
+ height: '100%',
44
+ opacity: 0.6,
45
+ transform: 'rotateY(90deg) translateZ(50px)',
46
+ backgroundColor: '#0099ff',
47
+ }),
48
+ ] }), _jsx("div", { mix: [
49
+ css({
50
+ position: 'absolute',
51
+ width: '100%',
52
+ height: '100%',
53
+ opacity: 0.6,
54
+ transform: 'rotateY(180deg) translateZ(50px)',
55
+ backgroundColor: '#22cc88',
56
+ }),
57
+ ] }), _jsx("div", { mix: [
58
+ css({
59
+ position: 'absolute',
60
+ width: '100%',
61
+ height: '100%',
62
+ opacity: 0.6,
63
+ transform: 'rotateY(-90deg) translateZ(50px)',
64
+ backgroundColor: '#ffaa00',
65
+ }),
66
+ ] }), _jsx("div", { mix: [
67
+ css({
68
+ position: 'absolute',
69
+ width: '100%',
70
+ height: '100%',
71
+ opacity: 0.6,
72
+ transform: 'rotateX(90deg) translateZ(50px)',
73
+ backgroundColor: '#aa00ff',
74
+ }),
75
+ ] }), _jsx("div", { mix: [
76
+ css({
77
+ position: 'absolute',
78
+ width: '100%',
79
+ height: '100%',
80
+ opacity: 0.6,
81
+ transform: 'rotateX(-90deg) translateZ(50px)',
82
+ backgroundColor: '#ff00aa',
83
+ }),
84
+ ] })] }) }));
85
+ }
86
+ //# sourceMappingURL=cube.js.map
package/dist/animation/demos/cube.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cube.js","sourceRoot":"","sources":["../../../src/animation/demos/cube.tsx"],"names":[],"mappings":"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"}
package/dist/animation/demos/default-animate.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { type Handle } from '@remix-run/ui';
2
+ export declare function DefaultAnimate(handle: Handle): () => import("@remix-run/ui").RemixElement;
package/dist/animation/demos/default-animate.js ADDED
@@ -0,0 +1,89 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
2
+ import { css, on } from '@remix-run/ui';
3
+ import { animateEntrance, animateLayout } from '@remix-run/ui/animation';
4
+ let nextId = 1;
5
+ function createItem() {
6
+ return { id: nextId++, label: `Item ${nextId - 1}` };
7
+ }
8
+ export function DefaultAnimate(handle) {
9
+ let items = [createItem(), createItem()];
10
+ return () => (_jsxs("div", { mix: [
11
+ css({
12
+ display: 'flex',
13
+ flexDirection: 'column',
14
+ gap: 10,
15
+ width: 200,
16
+ alignSelf: 'flex-start',
17
+ }),
18
+ ], children: [_jsxs("div", { mix: [css({ display: 'flex', gap: 8, marginBottom: 8 })], children: [_jsx("button", { mix: [
19
+ css({
20
+ flex: 1,
21
+ padding: '8px 12px',
22
+ border: 'none',
23
+ borderRadius: 6,
24
+ backgroundColor: '#10b981',
25
+ color: 'white',
26
+ cursor: 'pointer',
27
+ fontWeight: 500,
28
+ '&:hover': { backgroundColor: '#059669' },
29
+ }),
30
+ on('click', () => {
31
+ items.unshift(createItem());
32
+ handle.update();
33
+ }),
34
+ ], children: "Add" }), _jsx("button", { mix: [
35
+ css({
36
+ flex: 1,
37
+ padding: '8px 12px',
38
+ border: 'none',
39
+ borderRadius: 6,
40
+ backgroundColor: '#6366f1',
41
+ color: 'white',
42
+ cursor: 'pointer',
43
+ fontWeight: 500,
44
+ '&:hover': { backgroundColor: '#4f46e5' },
45
+ }),
46
+ on('click', () => {
47
+ // Shuffle the array
48
+ for (let i = items.length - 1; i > 0; i--) {
49
+ let j = Math.floor(Math.random() * (i + 1));
50
+ [items[i], items[j]] = [items[j], items[i]];
51
+ }
52
+ handle.update();
53
+ }),
54
+ ], children: "Shuffle" })] }), items.map((item) => (_jsxs("div", { mix: [
55
+ animateEntrance(),
56
+ animateLayout(),
57
+ css({
58
+ display: 'flex',
59
+ alignItems: 'center',
60
+ justifyContent: 'space-between',
61
+ padding: '12px 16px',
62
+ backgroundColor: '#f1f5f9',
63
+ borderRadius: 8,
64
+ fontSize: 14,
65
+ fontWeight: 500,
66
+ color: '#334155',
67
+ }),
68
+ ], children: [_jsx("span", { children: item.label }), _jsx("button", { mix: [
69
+ css({
70
+ width: 20,
71
+ height: 20,
72
+ padding: 0,
73
+ border: 'none',
74
+ borderRadius: 4,
75
+ backgroundColor: 'transparent',
76
+ color: '#94a3b8',
77
+ cursor: 'pointer',
78
+ display: 'flex',
79
+ alignItems: 'center',
80
+ justifyContent: 'center',
81
+ '&:hover': { backgroundColor: '#e2e8f0', color: '#64748b' },
82
+ }),
83
+ on('click', () => {
84
+ items = items.filter((i) => i.id !== item.id);
85
+ handle.update();
86
+ }),
87
+ ], children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) })] }, item.id)))] }));
88
+ }
89
+ //# sourceMappingURL=default-animate.js.map
package/dist/animation/demos/default-animate.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"default-animate.js","sourceRoot":"","sources":["../../../src/animation/demos/default-animate.tsx"],"names":[],"mappings":"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"}
package/dist/animation/demos/drag-release.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ export declare const dragVelocityReleaseEventType: "rmx:drag-velocity-release";
2
+ declare global {
3
+ interface HTMLElementEventMap {
4
+ [dragVelocityReleaseEventType]: DragVelocityEvent;
5
+ }
6
+ }
7
+ export declare class DragVelocityEvent extends Event {
8
+ clientX: number;
9
+ clientY: number;
10
+ velocityX: number;
11
+ velocityY: number;
12
+ constructor(type: typeof dragVelocityReleaseEventType, init: {
13
+ clientX: number;
14
+ clientY: number;
15
+ velocityX: number;
16
+ velocityY: number;
17
+ });
18
+ }
19
+ declare const baseDragVelocityEvents: import("@remix-run/ui").MixinFactory<HTMLElement, [], import("@remix-run/ui").ElementProps>;
20
+ type DragVelocityEventsMixin = typeof baseDragVelocityEvents & {
21
+ readonly release: typeof dragVelocityReleaseEventType;
22
+ };
23
+ export declare const dragVelocityEvents: DragVelocityEventsMixin;
24
+ export {};