@waveso/ui 0.0.9 → 0.1.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 (288) hide show
  1. package/dist/accordion.d.ts +24 -8
  2. package/dist/accordion.d.ts.map +1 -0
  3. package/dist/accordion.js +50 -73
  4. package/dist/accordion.js.map +1 -1
  5. package/dist/action-bar.d.ts +83 -0
  6. package/dist/action-bar.d.ts.map +1 -0
  7. package/dist/action-bar.js +264 -0
  8. package/dist/action-bar.js.map +1 -0
  9. package/dist/alert-dialog.d.ts +56 -21
  10. package/dist/alert-dialog.d.ts.map +1 -0
  11. package/dist/alert-dialog.js +75 -127
  12. package/dist/alert-dialog.js.map +1 -1
  13. package/dist/alert.d.ts +26 -11
  14. package/dist/alert.d.ts.map +1 -0
  15. package/dist/alert.js +37 -68
  16. package/dist/alert.js.map +1 -1
  17. package/dist/animate.d.ts +117 -75
  18. package/dist/animate.d.ts.map +1 -0
  19. package/dist/animate.js +259 -223
  20. package/dist/animate.js.map +1 -1
  21. package/dist/aspect-ratio.d.ts +11 -6
  22. package/dist/aspect-ratio.d.ts.map +1 -0
  23. package/dist/aspect-ratio.js +12 -14
  24. package/dist/aspect-ratio.js.map +1 -1
  25. package/dist/autocomplete.d.ts +91 -25
  26. package/dist/autocomplete.d.ts.map +1 -0
  27. package/dist/autocomplete.js +119 -181
  28. package/dist/autocomplete.js.map +1 -1
  29. package/dist/avatar.d.ts +32 -11
  30. package/dist/avatar.d.ts.map +1 -0
  31. package/dist/avatar.js +42 -89
  32. package/dist/avatar.js.map +1 -1
  33. package/dist/badge.d.ts +15 -8
  34. package/dist/badge.d.ts.map +1 -0
  35. package/dist/badge.js +34 -48
  36. package/dist/badge.js.map +1 -1
  37. package/dist/breadcrumb.d.ts +35 -11
  38. package/dist/breadcrumb.d.ts.map +1 -0
  39. package/dist/breadcrumb.js +60 -110
  40. package/dist/breadcrumb.js.map +1 -1
  41. package/dist/button-group.d.ts +26 -13
  42. package/dist/button-group.d.ts.map +1 -0
  43. package/dist/button-group.js +38 -76
  44. package/dist/button-group.js.map +1 -1
  45. package/dist/button.d.ts +17 -10
  46. package/dist/button.d.ts.map +1 -0
  47. package/dist/button.js +50 -3
  48. package/dist/button.js.map +1 -1
  49. package/dist/card.d.ts +35 -11
  50. package/dist/card.d.ts.map +1 -0
  51. package/dist/card.js +43 -82
  52. package/dist/card.js.map +1 -1
  53. package/dist/checkbox.d.ts +6 -4
  54. package/dist/checkbox.d.ts.map +1 -0
  55. package/dist/checkbox.js +21 -29
  56. package/dist/checkbox.js.map +1 -1
  57. package/dist/collapsible.d.ts +15 -7
  58. package/dist/collapsible.d.ts.map +1 -0
  59. package/dist/collapsible.js +19 -8
  60. package/dist/collapsible.js.map +1 -1
  61. package/dist/combobox.d.ts +83 -23
  62. package/dist/combobox.d.ts.map +1 -0
  63. package/dist/combobox.js +149 -247
  64. package/dist/combobox.js.map +1 -1
  65. package/dist/context-menu.d.ts +80 -26
  66. package/dist/context-menu.d.ts.map +1 -0
  67. package/dist/context-menu.js +108 -164
  68. package/dist/context-menu.js.map +1 -1
  69. package/dist/count.d.ts +45 -31
  70. package/dist/count.d.ts.map +1 -0
  71. package/dist/count.js +170 -165
  72. package/dist/count.js.map +1 -1
  73. package/dist/dialog.d.ts +61 -28
  74. package/dist/dialog.d.ts.map +1 -0
  75. package/dist/dialog.js +77 -120
  76. package/dist/dialog.js.map +1 -1
  77. package/dist/direction.d.ts +2 -1
  78. package/dist/direction.js +3 -3
  79. package/dist/drawer.d.ts +45 -15
  80. package/dist/drawer.d.ts.map +1 -0
  81. package/dist/drawer.js +93 -5
  82. package/dist/drawer.js.map +1 -1
  83. package/dist/encrypted-text.d.ts +25 -12
  84. package/dist/encrypted-text.d.ts.map +1 -0
  85. package/dist/encrypted-text.js +102 -134
  86. package/dist/encrypted-text.js.map +1 -1
  87. package/dist/field.d.ts +37 -21
  88. package/dist/field.d.ts.map +1 -0
  89. package/dist/field.js +52 -3
  90. package/dist/field.js.map +1 -1
  91. package/dist/film-grain-shader.d.ts +6 -0
  92. package/dist/film-grain-shader.d.ts.map +1 -0
  93. package/dist/film-grain-shader.js +88 -0
  94. package/dist/film-grain-shader.js.map +1 -0
  95. package/dist/film-grain-webgl.d.ts +20 -0
  96. package/dist/film-grain-webgl.d.ts.map +1 -0
  97. package/dist/film-grain-webgl.js +306 -0
  98. package/dist/film-grain-webgl.js.map +1 -0
  99. package/dist/film-grain.d.ts +21 -11
  100. package/dist/film-grain.d.ts.map +1 -0
  101. package/dist/film-grain.js +28 -420
  102. package/dist/film-grain.js.map +1 -1
  103. package/dist/form.d.ts +64 -49
  104. package/dist/form.d.ts.map +1 -0
  105. package/dist/form.js +112 -91
  106. package/dist/form.js.map +1 -1
  107. package/dist/gradient-reveal-text.d.ts +35 -18
  108. package/dist/gradient-reveal-text.d.ts.map +1 -0
  109. package/dist/gradient-reveal-text.js +238 -202
  110. package/dist/gradient-reveal-text.js.map +1 -1
  111. package/dist/hooks/use-mobile.d.ts +3 -1
  112. package/dist/hooks/use-mobile.d.ts.map +1 -0
  113. package/dist/hooks/use-mobile.js +28 -2
  114. package/dist/hooks/use-mobile.js.map +1 -1
  115. package/dist/infinite-scroll.d.ts +29 -15
  116. package/dist/infinite-scroll.d.ts.map +1 -0
  117. package/dist/infinite-scroll.js +69 -99
  118. package/dist/infinite-scroll.js.map +1 -1
  119. package/dist/input-group.d.ts +41 -18
  120. package/dist/input-group.d.ts.map +1 -0
  121. package/dist/input-group.js +80 -6
  122. package/dist/input-group.js.map +1 -1
  123. package/dist/input-otp.d.ts +26 -10
  124. package/dist/input-otp.d.ts.map +1 -0
  125. package/dist/input-otp.js +40 -70
  126. package/dist/input-otp.js.map +1 -1
  127. package/dist/input.d.ts +10 -4
  128. package/dist/input.d.ts.map +1 -0
  129. package/dist/input.js +16 -3
  130. package/dist/input.js.map +1 -1
  131. package/dist/item.d.ts +58 -23
  132. package/dist/item.d.ts.map +1 -0
  133. package/dist/item.js +102 -160
  134. package/dist/item.js.map +1 -1
  135. package/dist/kbd.d.ts +12 -4
  136. package/dist/kbd.d.ts.map +1 -0
  137. package/dist/kbd.js +15 -24
  138. package/dist/kbd.js.map +1 -1
  139. package/dist/label.d.ts +9 -4
  140. package/dist/label.d.ts.map +1 -0
  141. package/dist/label.js +12 -16
  142. package/dist/label.js.map +1 -1
  143. package/dist/lib/focus.d.ts +42 -0
  144. package/dist/lib/focus.d.ts.map +1 -0
  145. package/dist/lib/focus.js +21 -0
  146. package/dist/lib/focus.js.map +1 -0
  147. package/dist/lib/internal-icons.d.ts +32 -0
  148. package/dist/lib/internal-icons.d.ts.map +1 -0
  149. package/dist/lib/internal-icons.js +222 -0
  150. package/dist/lib/internal-icons.js.map +1 -0
  151. package/dist/lib/utils.d.ts +4 -2
  152. package/dist/lib/utils.d.ts.map +1 -0
  153. package/dist/lib/utils.js +12 -2
  154. package/dist/lib/utils.js.map +1 -1
  155. package/dist/masonry.d.ts +25 -11
  156. package/dist/masonry.d.ts.map +1 -0
  157. package/dist/masonry.js +188 -229
  158. package/dist/masonry.js.map +1 -1
  159. package/dist/menu.d.ts +84 -26
  160. package/dist/menu.d.ts.map +1 -0
  161. package/dist/menu.js +141 -4
  162. package/dist/menu.js.map +1 -1
  163. package/dist/menubar.d.ts +60 -22
  164. package/dist/menubar.d.ts.map +1 -0
  165. package/dist/menubar.js +80 -52
  166. package/dist/menubar.js.map +1 -1
  167. package/dist/pagination.d.ts +38 -17
  168. package/dist/pagination.d.ts.map +1 -0
  169. package/dist/pagination.js +68 -107
  170. package/dist/pagination.js.map +1 -1
  171. package/dist/popover.d.ts +56 -14
  172. package/dist/popover.d.ts.map +1 -0
  173. package/dist/popover.js +62 -87
  174. package/dist/popover.js.map +1 -1
  175. package/dist/preview-card.d.ts +28 -9
  176. package/dist/preview-card.d.ts.map +1 -0
  177. package/dist/preview-card.js +40 -60
  178. package/dist/preview-card.js.map +1 -1
  179. package/dist/progress.d.ts +28 -9
  180. package/dist/progress.d.ts.map +1 -0
  181. package/dist/progress.js +35 -60
  182. package/dist/progress.js.map +1 -1
  183. package/dist/radio-group.d.ts +14 -8
  184. package/dist/radio-group.d.ts.map +1 -0
  185. package/dist/radio-group.js +18 -22
  186. package/dist/radio-group.js.map +1 -1
  187. package/dist/radio.d.ts +14 -6
  188. package/dist/radio.d.ts.map +1 -0
  189. package/dist/radio.js +24 -3
  190. package/dist/radio.js.map +1 -1
  191. package/dist/scroll-area.d.ts +16 -6
  192. package/dist/scroll-area.d.ts.map +1 -0
  193. package/dist/scroll-area.js +34 -55
  194. package/dist/scroll-area.js.map +1 -1
  195. package/dist/select.d.ts +66 -18
  196. package/dist/select.d.ts.map +1 -0
  197. package/dist/select.js +105 -185
  198. package/dist/select.js.map +1 -1
  199. package/dist/separator.d.ts +11 -5
  200. package/dist/separator.d.ts.map +1 -0
  201. package/dist/separator.js +17 -3
  202. package/dist/separator.js.map +1 -1
  203. package/dist/sidebar.d.ts +172 -79
  204. package/dist/sidebar.d.ts.map +1 -0
  205. package/dist/sidebar.js +363 -585
  206. package/dist/sidebar.js.map +1 -1
  207. package/dist/skeleton.d.ts +8 -3
  208. package/dist/skeleton.d.ts.map +1 -0
  209. package/dist/skeleton.js +13 -3
  210. package/dist/skeleton.js.map +1 -1
  211. package/dist/slider.d.ts +16 -6
  212. package/dist/slider.d.ts.map +1 -0
  213. package/dist/slider.js +40 -67
  214. package/dist/slider.js.map +1 -1
  215. package/dist/spinner.d.ts +8 -3
  216. package/dist/spinner.d.ts.map +1 -0
  217. package/dist/spinner.js +15 -4
  218. package/dist/spinner.js.map +1 -1
  219. package/dist/switch.d.ts +12 -6
  220. package/dist/switch.d.ts.map +1 -0
  221. package/dist/switch.js +18 -25
  222. package/dist/switch.js.map +1 -1
  223. package/dist/table.d.ts +37 -11
  224. package/dist/table.d.ts.map +1 -0
  225. package/dist/table.js +51 -88
  226. package/dist/table.js.map +1 -1
  227. package/dist/tabs.d.ts +28 -12
  228. package/dist/tabs.d.ts.map +1 -0
  229. package/dist/tabs.js +40 -74
  230. package/dist/tabs.js.map +1 -1
  231. package/dist/textarea.d.ts +13 -6
  232. package/dist/textarea.d.ts.map +1 -0
  233. package/dist/textarea.js +19 -3
  234. package/dist/textarea.js.map +1 -1
  235. package/dist/toast.d.ts +63 -39
  236. package/dist/toast.d.ts.map +1 -0
  237. package/dist/toast.js +177 -215
  238. package/dist/toast.js.map +1 -1
  239. package/dist/toggle-group.d.ts +26 -12
  240. package/dist/toggle-group.d.ts.map +1 -0
  241. package/dist/toggle-group.js +49 -73
  242. package/dist/toggle-group.js.map +1 -1
  243. package/dist/toggle.d.ts +17 -10
  244. package/dist/toggle.d.ts.map +1 -0
  245. package/dist/toggle.js +38 -3
  246. package/dist/toggle.js.map +1 -1
  247. package/dist/tooltip.d.ts +35 -14
  248. package/dist/tooltip.d.ts.map +1 -0
  249. package/dist/tooltip.js +52 -3
  250. package/dist/tooltip.js.map +1 -1
  251. package/dist/typewriter.d.ts +44 -31
  252. package/dist/typewriter.d.ts.map +1 -0
  253. package/dist/typewriter.js +185 -185
  254. package/dist/typewriter.js.map +1 -1
  255. package/package.json +6 -6
  256. package/dist/chunk-45VQAWIM.js +0 -228
  257. package/dist/chunk-45VQAWIM.js.map +0 -1
  258. package/dist/chunk-6Y7LPQMO.js +0 -11
  259. package/dist/chunk-6Y7LPQMO.js.map +0 -1
  260. package/dist/chunk-76UQO56T.js +0 -19
  261. package/dist/chunk-76UQO56T.js.map +0 -1
  262. package/dist/chunk-7F4MPMLJ.js +0 -17
  263. package/dist/chunk-7F4MPMLJ.js.map +0 -1
  264. package/dist/chunk-BKTJYX4M.js +0 -143
  265. package/dist/chunk-BKTJYX4M.js.map +0 -1
  266. package/dist/chunk-D5XPEJ6T.js +0 -36
  267. package/dist/chunk-D5XPEJ6T.js.map +0 -1
  268. package/dist/chunk-DIGOLJIR.js +0 -105
  269. package/dist/chunk-DIGOLJIR.js.map +0 -1
  270. package/dist/chunk-IQ7YQ5XA.js +0 -141
  271. package/dist/chunk-IQ7YQ5XA.js.map +0 -1
  272. package/dist/chunk-NCHHHWTB.js +0 -85
  273. package/dist/chunk-NCHHHWTB.js.map +0 -1
  274. package/dist/chunk-OUFYQLVN.js +0 -56
  275. package/dist/chunk-OUFYQLVN.js.map +0 -1
  276. package/dist/chunk-QFSEK4M6.js +0 -22
  277. package/dist/chunk-QFSEK4M6.js.map +0 -1
  278. package/dist/chunk-QRW37LRP.js +0 -25
  279. package/dist/chunk-QRW37LRP.js.map +0 -1
  280. package/dist/chunk-RPQHL6C5.js +0 -26
  281. package/dist/chunk-RPQHL6C5.js.map +0 -1
  282. package/dist/chunk-V4ZX4YCP.js +0 -66
  283. package/dist/chunk-V4ZX4YCP.js.map +0 -1
  284. package/dist/chunk-YTSQQTSF.js +0 -44
  285. package/dist/chunk-YTSQQTSF.js.map +0 -1
  286. package/dist/chunk-ZZZH3JGW.js +0 -23
  287. package/dist/chunk-ZZZH3JGW.js.map +0 -1
  288. package/dist/direction.js.map +0 -1
package/dist/animate.js CHANGED
@@ -1,244 +1,280 @@
1
- import { useRef, useState, useEffect, isValidElement, cloneElement, Children, useId } from 'react';
2
- import { useInView } from 'motion/react';
3
- import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
4
-
5
- var DIRECTION_MAP = {
6
- up: { prop: "translateY", value: -1 },
7
- down: { prop: "translateY", value: 1 },
8
- left: { prop: "translateX", value: -1 },
9
- right: { prop: "translateX", value: 1 }
1
+ "use client";
2
+ import { Children, cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
3
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
4
+ import { useInView } from "motion/react";
5
+ //#region src/animate.tsx
6
+ /**
7
+ * Direction map: `from` means where the element COMES FROM.
8
+ * `from="left"` = starts to the left, slides right into place.
9
+ */
10
+ const DIRECTION_MAP = {
11
+ up: {
12
+ prop: "translateY",
13
+ value: -1
14
+ },
15
+ down: {
16
+ prop: "translateY",
17
+ value: 1
18
+ },
19
+ left: {
20
+ prop: "translateX",
21
+ value: -1
22
+ },
23
+ right: {
24
+ prop: "translateX",
25
+ value: 1
26
+ }
10
27
  };
11
- var FLIP_MAP = {
12
- up: "rotateX(90deg)",
13
- down: "rotateX(-90deg)",
14
- left: "rotateY(-90deg)",
15
- right: "rotateY(90deg)"
28
+ /** Flip axis: vertical directions flip around X, horizontal around Y */
29
+ const FLIP_MAP = {
30
+ up: "rotateX(90deg)",
31
+ down: "rotateX(-90deg)",
32
+ left: "rotateY(-90deg)",
33
+ right: "rotateY(90deg)"
16
34
  };
17
- var SPRING_EASE = "cubic-bezier(0.34, 1.56, 0.64, 1)";
35
+ /** CSS cubic-bezier that overshoots then settles — feels like a spring */
36
+ const SPRING_EASE = "cubic-bezier(0.34, 1.56, 0.64, 1)";
18
37
  function buildStyles(opts) {
19
- const { from, distance, doScale, blur, rotate, flip } = opts;
20
- const dir = DIRECTION_MAP[from];
21
- const hiddenParts = [];
22
- if (flip) hiddenParts.push("perspective(800px)");
23
- hiddenParts.push(`${dir.prop}(${dir.value * distance}px)`);
24
- if (doScale) hiddenParts.push("scale(0.85)");
25
- if (rotate) hiddenParts.push(`rotate(${rotate}deg)`);
26
- if (flip) hiddenParts.push(FLIP_MAP[from]);
27
- const visibleParts = [];
28
- if (flip) visibleParts.push("perspective(800px)");
29
- visibleParts.push("translateX(0) translateY(0)");
30
- if (doScale) visibleParts.push("scale(1)");
31
- if (rotate) visibleParts.push("rotate(0deg)");
32
- if (flip) visibleParts.push(from === "up" || from === "down" ? "rotateX(0deg)" : "rotateY(0deg)");
33
- const blurPx = blur === true ? 10 : typeof blur === "number" ? blur : 0;
34
- const hidden = {
35
- opacity: "0",
36
- transform: hiddenParts.join(" ")
37
- };
38
- const visible = {
39
- opacity: "1",
40
- transform: visibleParts.join(" ")
41
- };
42
- if (blurPx > 0) {
43
- hidden.filter = `blur(${blurPx}px)`;
44
- visible.filter = "blur(0px)";
45
- }
46
- return { hidden, visible, hasFilter: blurPx > 0 };
38
+ const { from, distance, doScale, blur, rotate, flip } = opts;
39
+ const dir = DIRECTION_MAP[from];
40
+ const hiddenParts = [];
41
+ if (flip) hiddenParts.push("perspective(800px)");
42
+ hiddenParts.push(`${dir.prop}(${dir.value * distance}px)`);
43
+ if (doScale) hiddenParts.push("scale(0.85)");
44
+ if (rotate) hiddenParts.push(`rotate(${rotate}deg)`);
45
+ if (flip) hiddenParts.push(FLIP_MAP[from]);
46
+ const visibleParts = [];
47
+ if (flip) visibleParts.push("perspective(800px)");
48
+ visibleParts.push("translateX(0) translateY(0)");
49
+ if (doScale) visibleParts.push("scale(1)");
50
+ if (rotate) visibleParts.push("rotate(0deg)");
51
+ if (flip) visibleParts.push(from === "up" || from === "down" ? "rotateX(0deg)" : "rotateY(0deg)");
52
+ const blurPx = blur === true ? 10 : typeof blur === "number" ? blur : 0;
53
+ const hidden = {
54
+ opacity: "0",
55
+ transform: hiddenParts.join(" ")
56
+ };
57
+ const visible = {
58
+ opacity: "1",
59
+ transform: visibleParts.join(" ")
60
+ };
61
+ if (blurPx > 0) {
62
+ hidden.filter = `blur(${blurPx}px)`;
63
+ visible.filter = "blur(0px)";
64
+ }
65
+ return {
66
+ hidden,
67
+ visible,
68
+ hasFilter: blurPx > 0
69
+ };
47
70
  }
48
71
  function mergeRefs(...refs) {
49
- return (el) => {
50
- refs.forEach((ref) => {
51
- if (typeof ref === "function") ref(el);
52
- else if (ref && typeof ref === "object") {
53
- ref.current = el;
54
- }
55
- });
56
- };
72
+ return (el) => {
73
+ refs.forEach((ref) => {
74
+ if (typeof ref === "function") ref(el);
75
+ else if (ref && typeof ref === "object") ref.current = el;
76
+ });
77
+ };
57
78
  }
58
79
  function getTransitionParams(transition, useSpring) {
59
- const duration = transition?.duration ?? 0.5;
60
- const ease = useSpring ? SPRING_EASE : transition?.ease ?? "ease-out";
61
- return { duration, ease };
80
+ return {
81
+ duration: transition?.duration ?? .5,
82
+ ease: useSpring ? SPRING_EASE : transition?.ease ?? "ease-out"
83
+ };
62
84
  }
63
85
  function buildTransitionStr(duration, ease, delay, hasFilter) {
64
- const parts = [
65
- `opacity ${duration}s ${ease} ${delay}s`,
66
- `transform ${duration}s ${ease} ${delay}s`
67
- ];
68
- if (hasFilter) parts.push(`filter ${duration}s ${ease} ${delay}s`);
69
- return parts.join(", ");
86
+ const parts = [`opacity ${duration}s ${ease} ${delay}s`, `transform ${duration}s ${ease} ${delay}s`];
87
+ if (hasFilter) parts.push(`filter ${duration}s ${ease} ${delay}s`);
88
+ return parts.join(", ");
70
89
  }
71
- function AnimateOnView({
72
- children,
73
- delay = 0,
74
- from = "down",
75
- distance = 20,
76
- scale = false,
77
- blur = false,
78
- rotate = 0,
79
- flip = false,
80
- spring = false,
81
- once = true,
82
- transition
83
- }) {
84
- const ref = useRef(null);
85
- const [hydrated, setHydrated] = useState(false);
86
- const isInView = useInView(ref, { once, margin: "-50px" });
87
- useEffect(() => {
88
- setHydrated(true);
89
- }, []);
90
- if (!isValidElement(children)) return children;
91
- const childProps = children.props;
92
- const existingStyle = childProps.style ?? {};
93
- const existingRef = childProps.ref;
94
- if (!hydrated) {
95
- return cloneElement(children, {
96
- ref: mergeRefs(ref, existingRef)
97
- });
98
- }
99
- const styles = buildStyles({ from, distance, doScale: scale, blur, rotate, flip });
100
- const { duration, ease } = getTransitionParams(transition, spring);
101
- const currentStyle = isInView ? styles.visible : styles.hidden;
102
- const transitionStr = buildTransitionStr(duration, ease, delay, styles.hasFilter);
103
- return cloneElement(children, {
104
- ref: mergeRefs(ref, existingRef),
105
- style: {
106
- ...existingStyle,
107
- ...currentStyle,
108
- ...isInView ? { transition: transitionStr } : {},
109
- willChange: "opacity, transform"
110
- }
111
- });
90
+ /**
91
+ * Animates a child element when it scrolls into view.
92
+ *
93
+ * Zero DOM overhead — applies styles directly to the child via cloneElement.
94
+ * Renders children unchanged on server to avoid hydration mismatch.
95
+ *
96
+ * @example
97
+ * ```tsx
98
+ * <AnimateOnView from="up" blur scale>
99
+ * <Card>Hello</Card>
100
+ * </AnimateOnView>
101
+ * ```
102
+ */
103
+ function AnimateOnView({ children, delay = 0, from = "down", distance = 20, scale = false, blur = false, rotate = 0, flip = false, spring = false, once = true, transition }) {
104
+ const ref = useRef(null);
105
+ const [hydrated, setHydrated] = useState(false);
106
+ const isInView = useInView(ref, {
107
+ once,
108
+ margin: "-50px"
109
+ });
110
+ useEffect(() => {
111
+ setHydrated(true);
112
+ }, []);
113
+ if (!isValidElement(children)) return children;
114
+ const childProps = children.props;
115
+ const existingStyle = childProps.style ?? {};
116
+ const existingRef = childProps.ref;
117
+ if (!hydrated) return cloneElement(children, { ref: mergeRefs(ref, existingRef) });
118
+ const styles = buildStyles({
119
+ from,
120
+ distance,
121
+ doScale: scale,
122
+ blur,
123
+ rotate,
124
+ flip
125
+ });
126
+ const { duration, ease } = getTransitionParams(transition, spring);
127
+ const currentStyle = isInView ? styles.visible : styles.hidden;
128
+ const transitionStr = buildTransitionStr(duration, ease, delay, styles.hasFilter);
129
+ return cloneElement(children, {
130
+ ref: mergeRefs(ref, existingRef),
131
+ style: {
132
+ ...existingStyle,
133
+ ...currentStyle,
134
+ ...isInView ? { transition: transitionStr } : {},
135
+ willChange: "opacity, transform"
136
+ }
137
+ });
112
138
  }
113
- function AnimateIn({
114
- children,
115
- delay = 0,
116
- from = "down",
117
- distance = 20,
118
- scale = false,
119
- blur = false,
120
- rotate = 0,
121
- flip = false,
122
- spring = false,
123
- transition
124
- }) {
125
- const ref = useRef(null);
126
- const [phase, setPhase] = useState("server");
127
- useEffect(() => {
128
- setPhase("hidden");
129
- requestAnimationFrame(() => {
130
- requestAnimationFrame(() => setPhase("visible"));
131
- });
132
- }, []);
133
- if (!isValidElement(children)) return children;
134
- const childProps = children.props;
135
- const existingStyle = childProps.style ?? {};
136
- const existingRef = childProps.ref;
137
- if (phase === "server") {
138
- return cloneElement(children, {
139
- ref: mergeRefs(ref, existingRef)
140
- });
141
- }
142
- const styles = buildStyles({ from, distance, doScale: scale, blur, rotate, flip });
143
- const { duration, ease } = getTransitionParams(transition, spring);
144
- const currentStyle = phase === "visible" ? styles.visible : styles.hidden;
145
- const transitionStr = buildTransitionStr(duration, ease, delay, styles.hasFilter);
146
- return cloneElement(children, {
147
- ref: mergeRefs(ref, existingRef),
148
- style: {
149
- ...existingStyle,
150
- ...currentStyle,
151
- ...phase === "visible" ? { transition: transitionStr } : {},
152
- willChange: "opacity, transform"
153
- }
154
- });
139
+ /**
140
+ * Animates a child element immediately on mount.
141
+ *
142
+ * Zero DOM overhead — applies styles directly to the child via cloneElement.
143
+ * Uses a two-phase approach: hidden → visible with requestAnimationFrame.
144
+ *
145
+ * @example
146
+ * ```tsx
147
+ * <AnimateIn from="up" blur spring>
148
+ * <h1>Welcome</h1>
149
+ * </AnimateIn>
150
+ * ```
151
+ */
152
+ function AnimateIn({ children, delay = 0, from = "down", distance = 20, scale = false, blur = false, rotate = 0, flip = false, spring = false, transition }) {
153
+ const ref = useRef(null);
154
+ const [visible, setVisible] = useState(false);
155
+ useEffect(() => {
156
+ requestAnimationFrame(() => {
157
+ requestAnimationFrame(() => setVisible(true));
158
+ });
159
+ }, []);
160
+ if (!isValidElement(children)) return children;
161
+ const childProps = children.props;
162
+ const existingStyle = childProps.style ?? {};
163
+ const existingRef = childProps.ref;
164
+ const styles = buildStyles({
165
+ from,
166
+ distance,
167
+ doScale: scale,
168
+ blur,
169
+ rotate,
170
+ flip
171
+ });
172
+ const { duration, ease } = getTransitionParams(transition, spring);
173
+ const currentStyle = visible ? styles.visible : styles.hidden;
174
+ const transitionStr = buildTransitionStr(duration, ease, delay, styles.hasFilter);
175
+ return cloneElement(children, {
176
+ ref: mergeRefs(ref, existingRef),
177
+ style: {
178
+ ...existingStyle,
179
+ ...currentStyle,
180
+ ...visible ? { transition: transitionStr } : {},
181
+ willChange: "opacity, transform"
182
+ }
183
+ });
155
184
  }
156
- function Stagger({
157
- children,
158
- interval = 0.08,
159
- baseDelay = 0
160
- }) {
161
- return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (child, index) => {
162
- if (!isValidElement(child)) return child;
163
- return cloneElement(child, {
164
- delay: baseDelay + index * interval
165
- });
166
- }) });
185
+ /**
186
+ * Auto-staggers delay on child AnimateIn/AnimateOnView elements.
187
+ * Eliminates manual `delay={i * 0.08}` math.
188
+ *
189
+ * @example
190
+ * ```tsx
191
+ * <Stagger interval={0.1}>
192
+ * <AnimateIn from="up"><Card>One</Card></AnimateIn>
193
+ * <AnimateIn from="up"><Card>Two</Card></AnimateIn>
194
+ * </Stagger>
195
+ * ```
196
+ */
197
+ function Stagger({ children, interval = .08, baseDelay = 0 }) {
198
+ return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (child, index) => {
199
+ if (!isValidElement(child)) return child;
200
+ return cloneElement(child, { delay: baseDelay + index * interval });
201
+ }) });
167
202
  }
168
- function Pulse({
169
- children,
170
- min = 0.97,
171
- max = 1.03,
172
- duration = 2,
173
- opacity,
174
- paused = false
175
- }) {
176
- const id = useId().replace(/:/g, "");
177
- const [hydrated, setHydrated] = useState(false);
178
- useEffect(() => {
179
- setHydrated(true);
180
- }, []);
181
- if (!isValidElement(children)) return children;
182
- if (!hydrated) return children;
183
- const name = `pulse-${id}`;
184
- const opacityFrom = opacity?.[0] ?? 1;
185
- const opacityTo = opacity?.[1] ?? 1;
186
- const keyframes = `@keyframes ${name} {
187
- 0%, 100% { transform: scale(${min}); opacity: ${opacityFrom}; }
188
- 50% { transform: scale(${max}); opacity: ${opacityTo}; }
203
+ /**
204
+ * Continuous, subtle scale pulse. Great for live indicators and CTAs.
205
+ * Zero DOM overhead — injects a scoped keyframe via `<style>`.
206
+ *
207
+ * @example
208
+ * ```tsx
209
+ * <Pulse>
210
+ * <span className="size-3 rounded-full bg-green-500" />
211
+ * </Pulse>
212
+ * ```
213
+ */
214
+ function Pulse({ children, min = .97, max = 1.03, duration = 2, opacity, paused = false }) {
215
+ const id = useId().replace(/:/g, "");
216
+ const [hydrated, setHydrated] = useState(false);
217
+ useEffect(() => {
218
+ setHydrated(true);
219
+ }, []);
220
+ if (!isValidElement(children)) return children;
221
+ if (!hydrated) return children;
222
+ const name = `pulse-${id}`;
223
+ const keyframes = `@keyframes ${name} {
224
+ 0%, 100% { transform: scale(${min}); opacity: ${opacity?.[0] ?? 1}; }
225
+ 50% { transform: scale(${max}); opacity: ${opacity?.[1] ?? 1}; }
189
226
  }`;
190
- const childProps = children.props;
191
- const existingStyle = childProps.style ?? {};
192
- const existingRef = childProps.ref;
193
- return /* @__PURE__ */ jsxs(Fragment, { children: [
194
- /* @__PURE__ */ jsx("style", { children: keyframes }),
195
- cloneElement(children, {
196
- ref: existingRef ? mergeRefs(existingRef) : void 0,
197
- style: {
198
- ...existingStyle,
199
- animation: `${name} ${duration}s ease-in-out infinite`,
200
- animationPlayState: paused ? "paused" : "running"
201
- }
202
- })
203
- ] });
227
+ const childProps = children.props;
228
+ const existingStyle = childProps.style ?? {};
229
+ const existingRef = childProps.ref;
230
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: keyframes }), cloneElement(children, {
231
+ ref: existingRef ? mergeRefs(existingRef) : void 0,
232
+ style: {
233
+ ...existingStyle,
234
+ animation: `${name} ${duration}s ease-in-out infinite`,
235
+ animationPlayState: paused ? "paused" : "running"
236
+ }
237
+ })] });
204
238
  }
205
- function Float({
206
- children,
207
- distance = 6,
208
- duration = 3,
209
- rotate = 0,
210
- paused = false
211
- }) {
212
- const id = useId().replace(/:/g, "");
213
- const [hydrated, setHydrated] = useState(false);
214
- useEffect(() => {
215
- setHydrated(true);
216
- }, []);
217
- if (!isValidElement(children)) return children;
218
- if (!hydrated) return children;
219
- const name = `float-${id}`;
220
- const rotA = rotate ? ` rotate(${-rotate}deg)` : "";
221
- const rotB = rotate ? ` rotate(${rotate}deg)` : "";
222
- const keyframes = `@keyframes ${name} {
239
+ /**
240
+ * Gentle continuous up/down float. Perfect for decorative elements.
241
+ * Zero DOM overhead — injects a scoped keyframe via `<style>`.
242
+ *
243
+ * @example
244
+ * ```tsx
245
+ * <Float distance={10} duration={4}>
246
+ * <Card>Floating</Card>
247
+ * </Float>
248
+ * ```
249
+ */
250
+ function Float({ children, distance = 6, duration = 3, rotate = 0, paused = false }) {
251
+ const id = useId().replace(/:/g, "");
252
+ const [hydrated, setHydrated] = useState(false);
253
+ useEffect(() => {
254
+ setHydrated(true);
255
+ }, []);
256
+ if (!isValidElement(children)) return children;
257
+ if (!hydrated) return children;
258
+ const name = `float-${id}`;
259
+ const rotA = rotate ? ` rotate(${-rotate}deg)` : "";
260
+ const rotB = rotate ? ` rotate(${rotate}deg)` : "";
261
+ const keyframes = `@keyframes ${name} {
223
262
  0%, 100% { transform: translateY(0px)${rotA}; }
224
263
  50% { transform: translateY(${-distance}px)${rotB}; }
225
264
  }`;
226
- const childProps = children.props;
227
- const existingStyle = childProps.style ?? {};
228
- const existingRef = childProps.ref;
229
- return /* @__PURE__ */ jsxs(Fragment, { children: [
230
- /* @__PURE__ */ jsx("style", { children: keyframes }),
231
- cloneElement(children, {
232
- ...existingRef ? { ref: existingRef } : {},
233
- style: {
234
- ...existingStyle,
235
- animation: `${name} ${duration}s ease-in-out infinite`,
236
- animationPlayState: paused ? "paused" : "running"
237
- }
238
- })
239
- ] });
265
+ const childProps = children.props;
266
+ const existingStyle = childProps.style ?? {};
267
+ const existingRef = childProps.ref;
268
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: keyframes }), cloneElement(children, {
269
+ ...existingRef ? { ref: existingRef } : {},
270
+ style: {
271
+ ...existingStyle,
272
+ animation: `${name} ${duration}s ease-in-out infinite`,
273
+ animationPlayState: paused ? "paused" : "running"
274
+ }
275
+ })] });
240
276
  }
241
-
277
+ //#endregion
242
278
  export { AnimateIn, AnimateOnView, Float, Pulse, Stagger };
243
- //# sourceMappingURL=animate.js.map
279
+
244
280
  //# sourceMappingURL=animate.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/animate.tsx"],"names":[],"mappings":"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","file":"animate.js","sourcesContent":["\"use client\"\n\nimport {\n Children,\n type CSSProperties,\n type ReactElement,\n type Ref,\n cloneElement,\n isValidElement,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\"\nimport { useInView, type Transition } from \"motion/react\"\n\n// ── Types ────────────────────────────────────────────────────────────\n\ntype Direction = \"up\" | \"down\" | \"left\" | \"right\"\n\ninterface AnimateOnViewProps {\n children: ReactElement\n /** Delay in seconds before animation starts. Default: 0 */\n delay?: number\n /** Direction to animate from. Default: 'down' */\n from?: Direction\n /** Distance in px. Default: 20 */\n distance?: number\n /** Also scale in (0.85 → 1). Default: false */\n scale?: boolean\n /** Blur in from a given amount in px. Default: false */\n blur?: boolean | number\n /** Rotate in from a given angle in degrees. Default: 0 */\n rotate?: number\n /** 3D flip entrance along the axis matching `from`. Default: false */\n flip?: boolean\n /** Spring easing with overshoot. Default: false */\n spring?: boolean\n /** Trigger once or every time it enters view. Default: true */\n once?: boolean\n /** Custom transition override */\n transition?: Transition\n}\n\ninterface AnimateInProps {\n children: ReactElement\n /** Delay in seconds before animation starts. Default: 0 */\n delay?: number\n /** Direction to animate from. Default: 'down' */\n from?: Direction\n /** Distance in px. Default: 20 */\n distance?: number\n /** Also scale in (0.85 → 1). Default: false */\n scale?: boolean\n /** Blur in from a given amount in px. Default: false */\n blur?: boolean | number\n /** Rotate in from a given angle in degrees. Default: 0 */\n rotate?: number\n /** 3D flip entrance along the axis matching `from`. Default: false */\n flip?: boolean\n /** Spring easing with overshoot. Default: false */\n spring?: boolean\n /** Custom transition override */\n transition?: Transition\n}\n\ninterface StaggerProps {\n children: ReactElement[]\n /** Delay increment between each child in seconds. Default: 0.08 */\n interval?: number\n /** Base delay before the first child animates in seconds. Default: 0 */\n baseDelay?: number\n}\n\ninterface PulseProps {\n children: ReactElement\n /** Min scale factor. Default: 0.97 */\n min?: number\n /** Max scale factor. Default: 1.03 */\n max?: number\n /** Animation duration in seconds. Default: 2 */\n duration?: number\n /** Also pulse opacity between these bounds [min, max]. Off by default. */\n opacity?: [number, number]\n /** Pause animation. Default: false */\n paused?: boolean\n}\n\ninterface FloatProps {\n children: ReactElement\n /** Vertical float distance in px. Default: 6 */\n distance?: number\n /** Animation duration in seconds. Default: 3 */\n duration?: number\n /** Also rotate slightly while floating (degrees). Default: 0 */\n rotate?: number\n /** Pause animation. Default: false */\n paused?: boolean\n}\n\n// ── Internals ────────────────────────────────────────────────────────\n\n/**\n * Direction map: `from` means where the element COMES FROM.\n * `from=\"left\"` = starts to the left, slides right into place.\n */\nconst DIRECTION_MAP = {\n up: { prop: \"translateY\", value: -1 },\n down: { prop: \"translateY\", value: 1 },\n left: { prop: \"translateX\", value: -1 },\n right: { prop: \"translateX\", value: 1 },\n} as const\n\n/** Flip axis: vertical directions flip around X, horizontal around Y */\nconst FLIP_MAP = {\n up: \"rotateX(90deg)\",\n down: \"rotateX(-90deg)\",\n left: \"rotateY(-90deg)\",\n right: \"rotateY(90deg)\",\n} as const\n\n/** CSS cubic-bezier that overshoots then settles — feels like a spring */\nconst SPRING_EASE = \"cubic-bezier(0.34, 1.56, 0.64, 1)\"\n\ninterface BuildStylesOptions {\n from: Direction\n distance: number\n doScale: boolean\n blur: boolean | number\n rotate: number\n flip: boolean\n}\n\nfunction buildStyles(opts: BuildStylesOptions) {\n const { from, distance, doScale, blur, rotate, flip } = opts\n const dir = DIRECTION_MAP[from]\n\n const hiddenParts: string[] = []\n if (flip) hiddenParts.push(\"perspective(800px)\")\n hiddenParts.push(`${dir.prop}(${dir.value * distance}px)`)\n if (doScale) hiddenParts.push(\"scale(0.85)\")\n if (rotate) hiddenParts.push(`rotate(${rotate}deg)`)\n if (flip) hiddenParts.push(FLIP_MAP[from])\n\n const visibleParts: string[] = []\n if (flip) visibleParts.push(\"perspective(800px)\")\n visibleParts.push(\"translateX(0) translateY(0)\")\n if (doScale) visibleParts.push(\"scale(1)\")\n if (rotate) visibleParts.push(\"rotate(0deg)\")\n if (flip) visibleParts.push(from === \"up\" || from === \"down\" ? \"rotateX(0deg)\" : \"rotateY(0deg)\")\n\n const blurPx = blur === true ? 10 : typeof blur === \"number\" ? blur : 0\n\n const hidden: CSSProperties = {\n opacity: \"0\",\n transform: hiddenParts.join(\" \"),\n }\n\n const visible: CSSProperties = {\n opacity: \"1\",\n transform: visibleParts.join(\" \"),\n }\n\n if (blurPx > 0) {\n hidden.filter = `blur(${blurPx}px)`\n visible.filter = \"blur(0px)\"\n }\n\n return { hidden, visible, hasFilter: blurPx > 0 }\n}\n\nfunction mergeRefs<T>(...refs: (Ref<T> | undefined)[]) {\n return (el: T | null) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") ref(el)\n else if (ref && typeof ref === \"object\") {\n ;(ref as { current: T | null }).current = el\n }\n })\n }\n}\n\nfunction getTransitionParams(transition?: Transition, useSpring?: boolean) {\n const duration =\n (transition as Record<string, number>)?.duration ?? 0.5\n const ease =\n useSpring ? SPRING_EASE : ((transition as Record<string, string>)?.ease ?? \"ease-out\")\n return { duration, ease }\n}\n\nfunction buildTransitionStr(\n duration: number,\n ease: string,\n delay: number,\n hasFilter: boolean,\n) {\n const parts = [\n `opacity ${duration}s ${ease} ${delay}s`,\n `transform ${duration}s ${ease} ${delay}s`,\n ]\n if (hasFilter) parts.push(`filter ${duration}s ${ease} ${delay}s`)\n return parts.join(\", \")\n}\n\n// ── AnimateOnView ────────────────────────────────────────────────────\n\n/**\n * Animates a child element when it scrolls into view.\n *\n * Zero DOM overhead — applies styles directly to the child via cloneElement.\n * Renders children unchanged on server to avoid hydration mismatch.\n *\n * @example\n * ```tsx\n * <AnimateOnView from=\"up\" blur scale>\n * <Card>Hello</Card>\n * </AnimateOnView>\n * ```\n */\nfunction AnimateOnView({\n children,\n delay = 0,\n from = \"down\",\n distance = 20,\n scale = false,\n blur = false,\n rotate = 0,\n flip = false,\n spring = false,\n once = true,\n transition,\n}: AnimateOnViewProps) {\n const ref = useRef<HTMLElement>(null)\n const [hydrated, setHydrated] = useState(false)\n const isInView = useInView(ref, { once, margin: \"-50px\" })\n\n useEffect(() => {\n setHydrated(true)\n }, [])\n\n if (!isValidElement(children)) return children\n\n const childProps = children.props as Record<string, unknown>\n const existingStyle = (childProps.style ?? {}) as CSSProperties\n const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n if (!hydrated) {\n return cloneElement(children, {\n ref: mergeRefs(ref, existingRef),\n } as Record<string, unknown>)\n }\n\n const styles = buildStyles({ from, distance, doScale: scale, blur, rotate, flip })\n const { duration, ease } = getTransitionParams(transition, spring)\n const currentStyle = isInView ? styles.visible : styles.hidden\n const transitionStr = buildTransitionStr(duration, ease, delay, styles.hasFilter)\n\n return cloneElement(children, {\n ref: mergeRefs(ref, existingRef),\n style: {\n ...existingStyle,\n ...currentStyle,\n ...(isInView ? { transition: transitionStr } : {}),\n willChange: \"opacity, transform\",\n },\n } as Record<string, unknown>)\n}\n\n// ── AnimateIn ────────────────────────────────────────────────────────\n\n/**\n * Animates a child element immediately on mount.\n *\n * Zero DOM overhead — applies styles directly to the child via cloneElement.\n * Uses a two-phase approach: hidden → visible with requestAnimationFrame.\n *\n * @example\n * ```tsx\n * <AnimateIn from=\"up\" blur spring>\n * <h1>Welcome</h1>\n * </AnimateIn>\n * ```\n */\nfunction AnimateIn({\n children,\n delay = 0,\n from = \"down\",\n distance = 20,\n scale = false,\n blur = false,\n rotate = 0,\n flip = false,\n spring = false,\n transition,\n}: AnimateInProps) {\n const ref = useRef<HTMLElement>(null)\n const [phase, setPhase] = useState<\"server\" | \"hidden\" | \"visible\">(\"server\")\n\n useEffect(() => {\n setPhase(\"hidden\")\n requestAnimationFrame(() => {\n requestAnimationFrame(() => setPhase(\"visible\"))\n })\n }, [])\n\n if (!isValidElement(children)) return children\n\n const childProps = children.props as Record<string, unknown>\n const existingStyle = (childProps.style ?? {}) as CSSProperties\n const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n if (phase === \"server\") {\n return cloneElement(children, {\n ref: mergeRefs(ref, existingRef),\n } as Record<string, unknown>)\n }\n\n const styles = buildStyles({ from, distance, doScale: scale, blur, rotate, flip })\n const { duration, ease } = getTransitionParams(transition, spring)\n const currentStyle = phase === \"visible\" ? styles.visible : styles.hidden\n const transitionStr = buildTransitionStr(duration, ease, delay, styles.hasFilter)\n\n return cloneElement(children, {\n ref: mergeRefs(ref, existingRef),\n style: {\n ...existingStyle,\n ...currentStyle,\n ...(phase === \"visible\" ? { transition: transitionStr } : {}),\n willChange: \"opacity, transform\",\n },\n } as Record<string, unknown>)\n}\n\n// ── Stagger ──────────────────────────────────────────────────────────\n\n/**\n * Auto-staggers delay on child AnimateIn/AnimateOnView elements.\n * Eliminates manual `delay={i * 0.08}` math.\n *\n * @example\n * ```tsx\n * <Stagger interval={0.1}>\n * <AnimateIn from=\"up\"><Card>One</Card></AnimateIn>\n * <AnimateIn from=\"up\"><Card>Two</Card></AnimateIn>\n * </Stagger>\n * ```\n */\nfunction Stagger({\n children,\n interval = 0.08,\n baseDelay = 0,\n}: StaggerProps) {\n return (\n <>\n {Children.map(children, (child, index) => {\n if (!isValidElement(child)) return child\n return cloneElement(child as ReactElement<{ delay?: number }>, {\n delay: baseDelay + index * interval,\n })\n })}\n </>\n )\n}\n\n// ── Pulse ────────────────────────────────────────────────────────────\n\n/**\n * Continuous, subtle scale pulse. Great for live indicators and CTAs.\n * Zero DOM overhead — injects a scoped keyframe via `<style>`.\n *\n * @example\n * ```tsx\n * <Pulse>\n * <span className=\"size-3 rounded-full bg-green-500\" />\n * </Pulse>\n * ```\n */\nfunction Pulse({\n children,\n min = 0.97,\n max = 1.03,\n duration = 2,\n opacity,\n paused = false,\n}: PulseProps) {\n const id = useId().replace(/:/g, \"\")\n const [hydrated, setHydrated] = useState(false)\n\n useEffect(() => {\n setHydrated(true)\n }, [])\n\n if (!isValidElement(children)) return children\n if (!hydrated) return children\n\n const name = `pulse-${id}`\n const opacityFrom = opacity?.[0] ?? 1\n const opacityTo = opacity?.[1] ?? 1\n\n const keyframes = `@keyframes ${name} {\n 0%, 100% { transform: scale(${min}); opacity: ${opacityFrom}; }\n 50% { transform: scale(${max}); opacity: ${opacityTo}; }\n}`\n\n const childProps = children.props as Record<string, unknown>\n const existingStyle = (childProps.style ?? {}) as CSSProperties\n const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n return (\n <>\n <style>{keyframes}</style>\n {cloneElement(children, {\n ref: existingRef ? mergeRefs(existingRef) : undefined,\n style: {\n ...existingStyle,\n animation: `${name} ${duration}s ease-in-out infinite`,\n animationPlayState: paused ? \"paused\" : \"running\",\n },\n } as Record<string, unknown>)}\n </>\n )\n}\n\n// ── Float ────────────────────────────────────────────────────────────\n\n/**\n * Gentle continuous up/down float. Perfect for decorative elements.\n * Zero DOM overhead — injects a scoped keyframe via `<style>`.\n *\n * @example\n * ```tsx\n * <Float distance={10} duration={4}>\n * <Card>Floating</Card>\n * </Float>\n * ```\n */\nfunction Float({\n children,\n distance = 6,\n duration = 3,\n rotate = 0,\n paused = false,\n}: FloatProps) {\n const id = useId().replace(/:/g, \"\")\n const [hydrated, setHydrated] = useState(false)\n\n useEffect(() => {\n setHydrated(true)\n }, [])\n\n if (!isValidElement(children)) return children\n if (!hydrated) return children\n\n const name = `float-${id}`\n const rotA = rotate ? ` rotate(${-rotate}deg)` : \"\"\n const rotB = rotate ? ` rotate(${rotate}deg)` : \"\"\n\n const keyframes = `@keyframes ${name} {\n 0%, 100% { transform: translateY(0px)${rotA}; }\n 50% { transform: translateY(${-distance}px)${rotB}; }\n}`\n\n const childProps = children.props as Record<string, unknown>\n const existingStyle = (childProps.style ?? {}) as CSSProperties\n const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n return (\n <>\n <style>{keyframes}</style>\n {cloneElement(children, {\n ...(existingRef ? { ref: existingRef } : {}),\n style: {\n ...existingStyle,\n animation: `${name} ${duration}s ease-in-out infinite`,\n animationPlayState: paused ? \"paused\" : \"running\",\n },\n } as Record<string, unknown>)}\n </>\n )\n}\n\n// ── Exports ──────────────────────────────────────────────────────────\n\nexport { AnimateOnView, AnimateIn, Stagger, Pulse, Float }\nexport type {\n AnimateOnViewProps,\n AnimateInProps,\n StaggerProps,\n PulseProps,\n FloatProps,\n Direction,\n}\n"]}
1
+ {"version":3,"file":"animate.js","names":[],"sources":["../src/animate.tsx"],"sourcesContent":["\"use client\"\n\nimport {\n Children,\n type CSSProperties,\n type ReactElement,\n type Ref,\n cloneElement,\n isValidElement,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\"\nimport { useInView, type Transition } from \"motion/react\"\n\n// ── Types ────────────────────────────────────────────────────────────\n\ntype Direction = \"up\" | \"down\" | \"left\" | \"right\"\n\ninterface AnimateOnViewProps {\n children: ReactElement\n /** Delay in seconds before animation starts. Default: 0 */\n delay?: number\n /** Direction to animate from. Default: 'down' */\n from?: Direction\n /** Distance in px. Default: 20 */\n distance?: number\n /** Also scale in (0.85 → 1). Default: false */\n scale?: boolean\n /** Blur in from a given amount in px. Default: false */\n blur?: boolean | number\n /** Rotate in from a given angle in degrees. Default: 0 */\n rotate?: number\n /** 3D flip entrance along the axis matching `from`. Default: false */\n flip?: boolean\n /** Spring easing with overshoot. Default: false */\n spring?: boolean\n /** Trigger once or every time it enters view. Default: true */\n once?: boolean\n /** Custom transition override */\n transition?: Transition\n}\n\ninterface AnimateInProps {\n children: ReactElement\n /** Delay in seconds before animation starts. Default: 0 */\n delay?: number\n /** Direction to animate from. Default: 'down' */\n from?: Direction\n /** Distance in px. Default: 20 */\n distance?: number\n /** Also scale in (0.85 → 1). Default: false */\n scale?: boolean\n /** Blur in from a given amount in px. Default: false */\n blur?: boolean | number\n /** Rotate in from a given angle in degrees. Default: 0 */\n rotate?: number\n /** 3D flip entrance along the axis matching `from`. Default: false */\n flip?: boolean\n /** Spring easing with overshoot. Default: false */\n spring?: boolean\n /** Custom transition override */\n transition?: Transition\n}\n\ninterface StaggerProps {\n children: ReactElement[]\n /** Delay increment between each child in seconds. Default: 0.08 */\n interval?: number\n /** Base delay before the first child animates in seconds. Default: 0 */\n baseDelay?: number\n}\n\ninterface PulseProps {\n children: ReactElement\n /** Min scale factor. Default: 0.97 */\n min?: number\n /** Max scale factor. Default: 1.03 */\n max?: number\n /** Animation duration in seconds. Default: 2 */\n duration?: number\n /** Also pulse opacity between these bounds [min, max]. Off by default. */\n opacity?: [number, number]\n /** Pause animation. Default: false */\n paused?: boolean\n}\n\ninterface FloatProps {\n children: ReactElement\n /** Vertical float distance in px. Default: 6 */\n distance?: number\n /** Animation duration in seconds. Default: 3 */\n duration?: number\n /** Also rotate slightly while floating (degrees). Default: 0 */\n rotate?: number\n /** Pause animation. Default: false */\n paused?: boolean\n}\n\n// ── Internals ────────────────────────────────────────────────────────\n\n/**\n * Direction map: `from` means where the element COMES FROM.\n * `from=\"left\"` = starts to the left, slides right into place.\n */\nconst DIRECTION_MAP = {\n up: { prop: \"translateY\", value: -1 },\n down: { prop: \"translateY\", value: 1 },\n left: { prop: \"translateX\", value: -1 },\n right: { prop: \"translateX\", value: 1 },\n} as const\n\n/** Flip axis: vertical directions flip around X, horizontal around Y */\nconst FLIP_MAP = {\n up: \"rotateX(90deg)\",\n down: \"rotateX(-90deg)\",\n left: \"rotateY(-90deg)\",\n right: \"rotateY(90deg)\",\n} as const\n\n/** CSS cubic-bezier that overshoots then settles — feels like a spring */\nconst SPRING_EASE = \"cubic-bezier(0.34, 1.56, 0.64, 1)\"\n\ninterface BuildStylesOptions {\n from: Direction\n distance: number\n doScale: boolean\n blur: boolean | number\n rotate: number\n flip: boolean\n}\n\nfunction buildStyles(opts: BuildStylesOptions) {\n const { from, distance, doScale, blur, rotate, flip } = opts\n const dir = DIRECTION_MAP[from]\n\n const hiddenParts: string[] = []\n if (flip) hiddenParts.push(\"perspective(800px)\")\n hiddenParts.push(`${dir.prop}(${dir.value * distance}px)`)\n if (doScale) hiddenParts.push(\"scale(0.85)\")\n if (rotate) hiddenParts.push(`rotate(${rotate}deg)`)\n if (flip) hiddenParts.push(FLIP_MAP[from])\n\n const visibleParts: string[] = []\n if (flip) visibleParts.push(\"perspective(800px)\")\n visibleParts.push(\"translateX(0) translateY(0)\")\n if (doScale) visibleParts.push(\"scale(1)\")\n if (rotate) visibleParts.push(\"rotate(0deg)\")\n if (flip) visibleParts.push(from === \"up\" || from === \"down\" ? \"rotateX(0deg)\" : \"rotateY(0deg)\")\n\n const blurPx = blur === true ? 10 : typeof blur === \"number\" ? blur : 0\n\n const hidden: CSSProperties = {\n opacity: \"0\",\n transform: hiddenParts.join(\" \"),\n }\n\n const visible: CSSProperties = {\n opacity: \"1\",\n transform: visibleParts.join(\" \"),\n }\n\n if (blurPx > 0) {\n hidden.filter = `blur(${blurPx}px)`\n visible.filter = \"blur(0px)\"\n }\n\n return { hidden, visible, hasFilter: blurPx > 0 }\n}\n\nfunction mergeRefs<T>(...refs: (Ref<T> | undefined)[]) {\n return (el: T | null) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") ref(el)\n else if (ref && typeof ref === \"object\") {\n ;(ref as { current: T | null }).current = el\n }\n })\n }\n}\n\nfunction getTransitionParams(transition?: Transition, useSpring?: boolean) {\n const duration =\n (transition as Record<string, number>)?.duration ?? 0.5\n const ease =\n useSpring ? SPRING_EASE : ((transition as Record<string, string>)?.ease ?? \"ease-out\")\n return { duration, ease }\n}\n\nfunction buildTransitionStr(\n duration: number,\n ease: string,\n delay: number,\n hasFilter: boolean,\n) {\n const parts = [\n `opacity ${duration}s ${ease} ${delay}s`,\n `transform ${duration}s ${ease} ${delay}s`,\n ]\n if (hasFilter) parts.push(`filter ${duration}s ${ease} ${delay}s`)\n return parts.join(\", \")\n}\n\n// ── AnimateOnView ────────────────────────────────────────────────────\n\n/**\n * Animates a child element when it scrolls into view.\n *\n * Zero DOM overhead — applies styles directly to the child via cloneElement.\n * Renders children unchanged on server to avoid hydration mismatch.\n *\n * @example\n * ```tsx\n * <AnimateOnView from=\"up\" blur scale>\n * <Card>Hello</Card>\n * </AnimateOnView>\n * ```\n */\nfunction AnimateOnView({\n children,\n delay = 0,\n from = \"down\",\n distance = 20,\n scale = false,\n blur = false,\n rotate = 0,\n flip = false,\n spring = false,\n once = true,\n transition,\n}: AnimateOnViewProps) {\n const ref = useRef<HTMLElement>(null)\n const [hydrated, setHydrated] = useState(false)\n const isInView = useInView(ref, { once, margin: \"-50px\" })\n\n useEffect(() => {\n setHydrated(true)\n }, [])\n\n if (!isValidElement(children)) return children\n\n const childProps = children.props as Record<string, unknown>\n const existingStyle = (childProps.style ?? {}) as CSSProperties\n const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n if (!hydrated) {\n return cloneElement(children, {\n ref: mergeRefs(ref, existingRef),\n } as Record<string, unknown>)\n }\n\n const styles = buildStyles({ from, distance, doScale: scale, blur, rotate, flip })\n const { duration, ease } = getTransitionParams(transition, spring)\n const currentStyle = isInView ? styles.visible : styles.hidden\n const transitionStr = buildTransitionStr(duration, ease, delay, styles.hasFilter)\n\n return cloneElement(children, {\n ref: mergeRefs(ref, existingRef),\n style: {\n ...existingStyle,\n ...currentStyle,\n ...(isInView ? { transition: transitionStr } : {}),\n willChange: \"opacity, transform\",\n },\n } as Record<string, unknown>)\n}\n\n// ── AnimateIn ────────────────────────────────────────────────────────\n\n/**\n * Animates a child element immediately on mount.\n *\n * Zero DOM overhead — applies styles directly to the child via cloneElement.\n * Uses a two-phase approach: hidden → visible with requestAnimationFrame.\n *\n * @example\n * ```tsx\n * <AnimateIn from=\"up\" blur spring>\n * <h1>Welcome</h1>\n * </AnimateIn>\n * ```\n */\nfunction AnimateIn({\n children,\n delay = 0,\n from = \"down\",\n distance = 20,\n scale = false,\n blur = false,\n rotate = 0,\n flip = false,\n spring = false,\n transition,\n}: AnimateInProps) {\n const ref = useRef<HTMLElement>(null)\n const [visible, setVisible] = useState(false)\n\n useEffect(() => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => setVisible(true))\n })\n }, [])\n\n if (!isValidElement(children)) return children\n\n const childProps = children.props as Record<string, unknown>\n const existingStyle = (childProps.style ?? {}) as CSSProperties\n const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n const styles = buildStyles({ from, distance, doScale: scale, blur, rotate, flip })\n const { duration, ease } = getTransitionParams(transition, spring)\n const currentStyle = visible ? styles.visible : styles.hidden\n const transitionStr = buildTransitionStr(duration, ease, delay, styles.hasFilter)\n\n return cloneElement(children, {\n ref: mergeRefs(ref, existingRef),\n style: {\n ...existingStyle,\n ...currentStyle,\n ...(visible ? { transition: transitionStr } : {}),\n willChange: \"opacity, transform\",\n },\n } as Record<string, unknown>)\n}\n\n// ── Stagger ──────────────────────────────────────────────────────────\n\n/**\n * Auto-staggers delay on child AnimateIn/AnimateOnView elements.\n * Eliminates manual `delay={i * 0.08}` math.\n *\n * @example\n * ```tsx\n * <Stagger interval={0.1}>\n * <AnimateIn from=\"up\"><Card>One</Card></AnimateIn>\n * <AnimateIn from=\"up\"><Card>Two</Card></AnimateIn>\n * </Stagger>\n * ```\n */\nfunction Stagger({\n children,\n interval = 0.08,\n baseDelay = 0,\n}: StaggerProps) {\n return (\n <>\n {Children.map(children, (child, index) => {\n if (!isValidElement(child)) return child\n return cloneElement(child as ReactElement<{ delay?: number }>, {\n delay: baseDelay + index * interval,\n })\n })}\n </>\n )\n}\n\n// ── Pulse ────────────────────────────────────────────────────────────\n\n/**\n * Continuous, subtle scale pulse. Great for live indicators and CTAs.\n * Zero DOM overhead — injects a scoped keyframe via `<style>`.\n *\n * @example\n * ```tsx\n * <Pulse>\n * <span className=\"size-3 rounded-full bg-green-500\" />\n * </Pulse>\n * ```\n */\nfunction Pulse({\n children,\n min = 0.97,\n max = 1.03,\n duration = 2,\n opacity,\n paused = false,\n}: PulseProps) {\n const id = useId().replace(/:/g, \"\")\n const [hydrated, setHydrated] = useState(false)\n\n useEffect(() => {\n setHydrated(true)\n }, [])\n\n if (!isValidElement(children)) return children\n if (!hydrated) return children\n\n const name = `pulse-${id}`\n const opacityFrom = opacity?.[0] ?? 1\n const opacityTo = opacity?.[1] ?? 1\n\n const keyframes = `@keyframes ${name} {\n 0%, 100% { transform: scale(${min}); opacity: ${opacityFrom}; }\n 50% { transform: scale(${max}); opacity: ${opacityTo}; }\n}`\n\n const childProps = children.props as Record<string, unknown>\n const existingStyle = (childProps.style ?? {}) as CSSProperties\n const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n return (\n <>\n <style>{keyframes}</style>\n {cloneElement(children, {\n ref: existingRef ? mergeRefs(existingRef) : undefined,\n style: {\n ...existingStyle,\n animation: `${name} ${duration}s ease-in-out infinite`,\n animationPlayState: paused ? \"paused\" : \"running\",\n },\n } as Record<string, unknown>)}\n </>\n )\n}\n\n// ── Float ────────────────────────────────────────────────────────────\n\n/**\n * Gentle continuous up/down float. Perfect for decorative elements.\n * Zero DOM overhead — injects a scoped keyframe via `<style>`.\n *\n * @example\n * ```tsx\n * <Float distance={10} duration={4}>\n * <Card>Floating</Card>\n * </Float>\n * ```\n */\nfunction Float({\n children,\n distance = 6,\n duration = 3,\n rotate = 0,\n paused = false,\n}: FloatProps) {\n const id = useId().replace(/:/g, \"\")\n const [hydrated, setHydrated] = useState(false)\n\n useEffect(() => {\n setHydrated(true)\n }, [])\n\n if (!isValidElement(children)) return children\n if (!hydrated) return children\n\n const name = `float-${id}`\n const rotA = rotate ? ` rotate(${-rotate}deg)` : \"\"\n const rotB = rotate ? ` rotate(${rotate}deg)` : \"\"\n\n const keyframes = `@keyframes ${name} {\n 0%, 100% { transform: translateY(0px)${rotA}; }\n 50% { transform: translateY(${-distance}px)${rotB}; }\n}`\n\n const childProps = children.props as Record<string, unknown>\n const existingStyle = (childProps.style ?? {}) as CSSProperties\n const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n return (\n <>\n <style>{keyframes}</style>\n {cloneElement(children, {\n ...(existingRef ? { ref: existingRef } : {}),\n style: {\n ...existingStyle,\n animation: `${name} ${duration}s ease-in-out infinite`,\n animationPlayState: paused ? \"paused\" : \"running\",\n },\n } as Record<string, unknown>)}\n </>\n )\n}\n\n// ── Exports ──────────────────────────────────────────────────────────\n\nexport { AnimateOnView, AnimateIn, Stagger, Pulse, Float }\nexport type {\n AnimateOnViewProps,\n AnimateInProps,\n StaggerProps,\n PulseProps,\n FloatProps,\n Direction,\n}\n"],"mappings":";;;;;;;;;AA0GA,MAAM,gBAAgB;CACpB,IAAI;EAAE,MAAM;EAAc,OAAO;EAAI;CACrC,MAAM;EAAE,MAAM;EAAc,OAAO;EAAG;CACtC,MAAM;EAAE,MAAM;EAAc,OAAO;EAAI;CACvC,OAAO;EAAE,MAAM;EAAc,OAAO;EAAG;CACxC;;AAGD,MAAM,WAAW;CACf,IAAI;CACJ,MAAM;CACN,MAAM;CACN,OAAO;CACR;;AAGD,MAAM,cAAc;AAWpB,SAAS,YAAY,MAA0B;CAC7C,MAAM,EAAE,MAAM,UAAU,SAAS,MAAM,QAAQ,SAAS;CACxD,MAAM,MAAM,cAAc;CAE1B,MAAM,cAAwB,EAAE;AAChC,KAAI,KAAM,aAAY,KAAK,qBAAqB;AAChD,aAAY,KAAK,GAAG,IAAI,KAAK,GAAG,IAAI,QAAQ,SAAS,KAAK;AAC1D,KAAI,QAAS,aAAY,KAAK,cAAc;AAC5C,KAAI,OAAQ,aAAY,KAAK,UAAU,OAAO,MAAM;AACpD,KAAI,KAAM,aAAY,KAAK,SAAS,MAAM;CAE1C,MAAM,eAAyB,EAAE;AACjC,KAAI,KAAM,cAAa,KAAK,qBAAqB;AACjD,cAAa,KAAK,8BAA8B;AAChD,KAAI,QAAS,cAAa,KAAK,WAAW;AAC1C,KAAI,OAAQ,cAAa,KAAK,eAAe;AAC7C,KAAI,KAAM,cAAa,KAAK,SAAS,QAAQ,SAAS,SAAS,kBAAkB,gBAAgB;CAEjG,MAAM,SAAS,SAAS,OAAO,KAAK,OAAO,SAAS,WAAW,OAAO;CAEtE,MAAM,SAAwB;EAC5B,SAAS;EACT,WAAW,YAAY,KAAK,IAAI;EACjC;CAED,MAAM,UAAyB;EAC7B,SAAS;EACT,WAAW,aAAa,KAAK,IAAI;EAClC;AAED,KAAI,SAAS,GAAG;AACd,SAAO,SAAS,QAAQ,OAAO;AAC/B,UAAQ,SAAS;;AAGnB,QAAO;EAAE;EAAQ;EAAS,WAAW,SAAS;EAAG;;AAGnD,SAAS,UAAa,GAAG,MAA8B;AACrD,SAAQ,OAAiB;AACvB,OAAK,SAAS,QAAQ;AACpB,OAAI,OAAO,QAAQ,WAAY,KAAI,GAAG;YAC7B,OAAO,OAAO,QAAQ,SAC3B,KAA8B,UAAU;IAE5C;;;AAIN,SAAS,oBAAoB,YAAyB,WAAqB;AAKzE,QAAO;EAAE,UAHN,YAAuC,YAAY;EAGnC,MADjB,YAAY,cAAgB,YAAuC,QAAQ;EACpD;;AAG3B,SAAS,mBACP,UACA,MACA,OACA,WACA;CACA,MAAM,QAAQ,CACZ,WAAW,SAAS,IAAI,KAAK,GAAG,MAAM,IACtC,aAAa,SAAS,IAAI,KAAK,GAAG,MAAM,GACzC;AACD,KAAI,UAAW,OAAM,KAAK,UAAU,SAAS,IAAI,KAAK,GAAG,MAAM,GAAG;AAClE,QAAO,MAAM,KAAK,KAAK;;;;;;;;;;;;;;;AAkBzB,SAAS,cAAc,EACrB,UACA,QAAQ,GACR,OAAO,QACP,WAAW,IACX,QAAQ,OACR,OAAO,OACP,SAAS,GACT,OAAO,OACP,SAAS,OACT,OAAO,MACP,cACqB;CACrB,MAAM,MAAM,OAAoB,KAAK;CACrC,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,WAAW,UAAU,KAAK;EAAE;EAAM,QAAQ;EAAS,CAAC;AAE1D,iBAAgB;AACd,cAAY,KAAK;IAChB,EAAE,CAAC;AAEN,KAAI,CAAC,eAAe,SAAS,CAAE,QAAO;CAEtC,MAAM,aAAa,SAAS;CAC5B,MAAM,gBAAiB,WAAW,SAAS,EAAE;CAC7C,MAAM,cAAe,WAA0C;AAE/D,KAAI,CAAC,SACH,QAAO,aAAa,UAAU,EAC5B,KAAK,UAAU,KAAK,YAAY,EACjC,CAA4B;CAG/B,MAAM,SAAS,YAAY;EAAE;EAAM;EAAU,SAAS;EAAO;EAAM;EAAQ;EAAM,CAAC;CAClF,MAAM,EAAE,UAAU,SAAS,oBAAoB,YAAY,OAAO;CAClE,MAAM,eAAe,WAAW,OAAO,UAAU,OAAO;CACxD,MAAM,gBAAgB,mBAAmB,UAAU,MAAM,OAAO,OAAO,UAAU;AAEjF,QAAO,aAAa,UAAU;EAC5B,KAAK,UAAU,KAAK,YAAY;EAChC,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAI,WAAW,EAAE,YAAY,eAAe,GAAG,EAAE;GACjD,YAAY;GACb;EACF,CAA4B;;;;;;;;;;;;;;;AAkB/B,SAAS,UAAU,EACjB,UACA,QAAQ,GACR,OAAO,QACP,WAAW,IACX,QAAQ,OACR,OAAO,OACP,SAAS,GACT,OAAO,OACP,SAAS,OACT,cACiB;CACjB,MAAM,MAAM,OAAoB,KAAK;CACrC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,iBAAgB;AACd,8BAA4B;AAC1B,+BAA4B,WAAW,KAAK,CAAC;IAC7C;IACD,EAAE,CAAC;AAEN,KAAI,CAAC,eAAe,SAAS,CAAE,QAAO;CAEtC,MAAM,aAAa,SAAS;CAC5B,MAAM,gBAAiB,WAAW,SAAS,EAAE;CAC7C,MAAM,cAAe,WAA0C;CAE/D,MAAM,SAAS,YAAY;EAAE;EAAM;EAAU,SAAS;EAAO;EAAM;EAAQ;EAAM,CAAC;CAClF,MAAM,EAAE,UAAU,SAAS,oBAAoB,YAAY,OAAO;CAClE,MAAM,eAAe,UAAU,OAAO,UAAU,OAAO;CACvD,MAAM,gBAAgB,mBAAmB,UAAU,MAAM,OAAO,OAAO,UAAU;AAEjF,QAAO,aAAa,UAAU;EAC5B,KAAK,UAAU,KAAK,YAAY;EAChC,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAI,UAAU,EAAE,YAAY,eAAe,GAAG,EAAE;GAChD,YAAY;GACb;EACF,CAA4B;;;;;;;;;;;;;;AAiB/B,SAAS,QAAQ,EACf,UACA,WAAW,KACX,YAAY,KACG;AACf,QACE,oBAAA,UAAA,EAAA,UACG,SAAS,IAAI,WAAW,OAAO,UAAU;AACxC,MAAI,CAAC,eAAe,MAAM,CAAE,QAAO;AACnC,SAAO,aAAa,OAA2C,EAC7D,OAAO,YAAY,QAAQ,UAC5B,CAAC;GACF,EACD,CAAA;;;;;;;;;;;;;AAiBP,SAAS,MAAM,EACb,UACA,MAAM,KACN,MAAM,MACN,WAAW,GACX,SACA,SAAS,SACI;CACb,MAAM,KAAK,OAAO,CAAC,QAAQ,MAAM,GAAG;CACpC,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,iBAAgB;AACd,cAAY,KAAK;IAChB,EAAE,CAAC;AAEN,KAAI,CAAC,eAAe,SAAS,CAAE,QAAO;AACtC,KAAI,CAAC,SAAU,QAAO;CAEtB,MAAM,OAAO,SAAS;CAItB,MAAM,YAAY,cAAc,KAAK;gCACP,IAAI,cAJd,UAAU,MAAM,EAIwB;2BACnC,IAAI,cAJX,UAAU,MAAM,EAImB;;CAGrD,MAAM,aAAa,SAAS;CAC5B,MAAM,gBAAiB,WAAW,SAAS,EAAE;CAC7C,MAAM,cAAe,WAA0C;AAE/D,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD,EAAA,UAAQ,WAAkB,CAAA,EACzB,aAAa,UAAU;EACtB,KAAK,cAAc,UAAU,YAAY,GAAG,KAAA;EAC5C,OAAO;GACL,GAAG;GACH,WAAW,GAAG,KAAK,GAAG,SAAS;GAC/B,oBAAoB,SAAS,WAAW;GACzC;EACF,CAA4B,CAC5B,EAAA,CAAA;;;;;;;;;;;;;AAiBP,SAAS,MAAM,EACb,UACA,WAAW,GACX,WAAW,GACX,SAAS,GACT,SAAS,SACI;CACb,MAAM,KAAK,OAAO,CAAC,QAAQ,MAAM,GAAG;CACpC,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,iBAAgB;AACd,cAAY,KAAK;IAChB,EAAE,CAAC;AAEN,KAAI,CAAC,eAAe,SAAS,CAAE,QAAO;AACtC,KAAI,CAAC,SAAU,QAAO;CAEtB,MAAM,OAAO,SAAS;CACtB,MAAM,OAAO,SAAS,WAAW,CAAC,OAAO,QAAQ;CACjD,MAAM,OAAO,SAAS,WAAW,OAAO,QAAQ;CAEhD,MAAM,YAAY,cAAc,KAAK;yCACE,KAAK;gCACd,CAAC,SAAS,KAAK,KAAK;;CAGlD,MAAM,aAAa,SAAS;CAC5B,MAAM,gBAAiB,WAAW,SAAS,EAAE;CAC7C,MAAM,cAAe,WAA0C;AAE/D,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD,EAAA,UAAQ,WAAkB,CAAA,EACzB,aAAa,UAAU;EACtB,GAAI,cAAc,EAAE,KAAK,aAAa,GAAG,EAAE;EAC3C,OAAO;GACL,GAAG;GACH,WAAW,GAAG,KAAK,GAAG,SAAS;GAC/B,oBAAoB,SAAS,WAAW;GACzC;EACF,CAA4B,CAC5B,EAAA,CAAA"}
@@ -1,10 +1,15 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import * as React from 'react';
1
+ import * as React from "react";
2
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
3
3
 
4
+ //#region src/aspect-ratio.d.ts
4
5
  type AspectRatioProps = React.ComponentProps<"div"> & {
5
- /** The width-to-height ratio (e.g. 16/9, 4/3, 1) */
6
- ratio: number;
6
+ /** The width-to-height ratio (e.g. 16/9, 4/3, 1) */ratio: number;
7
7
  };
8
- declare function AspectRatio({ ratio, className, ...props }: AspectRatioProps): react_jsx_runtime.JSX.Element;
9
-
8
+ declare function AspectRatio({
9
+ ratio,
10
+ className,
11
+ ...props
12
+ }: AspectRatioProps): _$react_jsx_runtime0.JSX.Element;
13
+ //#endregion
10
14
  export { AspectRatio, type AspectRatioProps };
15
+ //# sourceMappingURL=aspect-ratio.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"aspect-ratio.d.ts","names":[],"sources":["../src/aspect-ratio.tsx"],"mappings":";;;;KAMK,gBAAA,GAAmB,KAAA,CAAM,cAAA;sDAE5B,KAAA;AAAA;AAAA,iBAKO,WAAA,CAAA;EAAc,KAAA;EAAO,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA"}