@szum-tech/design-system 3.16.0 → 3.18.1

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 (295) hide show
  1. package/dist/chunk-D5PAWOAZ.cjs +1 -0
  2. package/dist/chunk-JUNHRB4B.js +1 -0
  3. package/dist/chunk-P7BFOJLM.cjs +3 -0
  4. package/dist/chunk-ZYG2KYKK.js +3 -0
  5. package/dist/components/index.cjs +1 -924
  6. package/dist/components/index.d.cts +1650 -56
  7. package/dist/components/index.d.ts +1650 -56
  8. package/dist/components/index.js +1 -43
  9. package/dist/hooks/index.cjs +1 -35
  10. package/dist/hooks/index.js +1 -2
  11. package/dist/icons/index.cjs +2 -93
  12. package/dist/icons/index.js +2 -88
  13. package/dist/utils/index.cjs +1 -10
  14. package/dist/utils/index.js +1 -1
  15. package/package.json +30 -38
  16. package/dist/chunk-2WQJ36RD.cjs +0 -78
  17. package/dist/chunk-2Y2ZCPNV.cjs +0 -61
  18. package/dist/chunk-375QAB65.cjs +0 -145
  19. package/dist/chunk-3DP3VMPN.js +0 -173
  20. package/dist/chunk-3GNVQFCK.cjs +0 -50
  21. package/dist/chunk-3RK5PCIC.js +0 -86
  22. package/dist/chunk-3WSQRFUY.cjs +0 -11
  23. package/dist/chunk-4LNGZHF2.cjs +0 -33
  24. package/dist/chunk-4TRADSTP.js +0 -34
  25. package/dist/chunk-5F2Y65JH.js +0 -32
  26. package/dist/chunk-5MJPZUTO.js +0 -38
  27. package/dist/chunk-5MV54MWS.js +0 -46
  28. package/dist/chunk-6BSR3O2J.js +0 -53
  29. package/dist/chunk-6HX7ETL3.cjs +0 -183
  30. package/dist/chunk-6X26XC6P.cjs +0 -17
  31. package/dist/chunk-7OD2NBSV.cjs +0 -50
  32. package/dist/chunk-A72LE53B.js +0 -21
  33. package/dist/chunk-A7SBXO2Y.cjs +0 -40
  34. package/dist/chunk-B4M7Q5KX.cjs +0 -25
  35. package/dist/chunk-B7RHEMZH.js +0 -48
  36. package/dist/chunk-BTSHACKG.js +0 -123
  37. package/dist/chunk-BUJO4FB6.js +0 -252
  38. package/dist/chunk-CL2C6STG.cjs +0 -278
  39. package/dist/chunk-CXHDWIGF.cjs +0 -89
  40. package/dist/chunk-DGWBE2Y3.cjs +0 -205
  41. package/dist/chunk-DUAM4RTP.cjs +0 -23
  42. package/dist/chunk-EOTQVIA5.js +0 -993
  43. package/dist/chunk-EUH466AL.cjs +0 -179
  44. package/dist/chunk-F7NFSDOD.cjs +0 -91
  45. package/dist/chunk-G24PWQKG.js +0 -20
  46. package/dist/chunk-GEDBA3JU.cjs +0 -49
  47. package/dist/chunk-GYXQUTWZ.cjs +0 -59
  48. package/dist/chunk-H2BWO3SI.cjs +0 -11
  49. package/dist/chunk-H5NHGMSQ.js +0 -136
  50. package/dist/chunk-HCHVDUI6.cjs +0 -34
  51. package/dist/chunk-HNRVLRMN.js +0 -82
  52. package/dist/chunk-HPICKLBZ.cjs +0 -204
  53. package/dist/chunk-I3RSTJP6.js +0 -20
  54. package/dist/chunk-IWF52DDE.js +0 -55
  55. package/dist/chunk-IZU3KULT.js +0 -41
  56. package/dist/chunk-K5AURCK5.js +0 -183
  57. package/dist/chunk-KTAIBRTH.cjs +0 -10
  58. package/dist/chunk-L2TRMQNN.js +0 -130
  59. package/dist/chunk-M7NIRB3U.js +0 -43
  60. package/dist/chunk-MFTNHVPZ.cjs +0 -2906
  61. package/dist/chunk-MNDQXDV4.cjs +0 -607
  62. package/dist/chunk-N4TYSZSU.cjs +0 -44
  63. package/dist/chunk-NU5UQPBX.cjs +0 -25
  64. package/dist/chunk-NXEZE7LG.js +0 -15
  65. package/dist/chunk-OCOCENE6.js +0 -42
  66. package/dist/chunk-OIM2X2NK.js +0 -2825
  67. package/dist/chunk-OQCNPNPS.js +0 -23
  68. package/dist/chunk-OXZQGDTR.js +0 -208
  69. package/dist/chunk-OZSNSRLV.cjs +0 -1027
  70. package/dist/chunk-P4IL77YC.js +0 -66
  71. package/dist/chunk-P4JIMFSL.js +0 -51
  72. package/dist/chunk-P5IUC7HJ.js +0 -9
  73. package/dist/chunk-PBEZZMAB.js +0 -25
  74. package/dist/chunk-RKFU4DS3.cjs +0 -1064
  75. package/dist/chunk-S3ANEJJ7.cjs +0 -22
  76. package/dist/chunk-S3ZUFD6U.js +0 -23
  77. package/dist/chunk-SHPJGB2L.cjs +0 -19
  78. package/dist/chunk-TH44JYXB.cjs +0 -27
  79. package/dist/chunk-TMXVL5CV.cjs +0 -48
  80. package/dist/chunk-U3QKV7I4.js +0 -54
  81. package/dist/chunk-U7XZJQ4O.js +0 -36
  82. package/dist/chunk-UJX74PFK.cjs +0 -46
  83. package/dist/chunk-ULEEQ723.cjs +0 -108
  84. package/dist/chunk-UNOMGKAZ.cjs +0 -141
  85. package/dist/chunk-USIW3VT5.cjs +0 -73
  86. package/dist/chunk-VK2FJ65F.js +0 -575
  87. package/dist/chunk-VK5EX3OG.cjs +0 -132
  88. package/dist/chunk-VT5GDGZJ.js +0 -15
  89. package/dist/chunk-WCQ5WKCQ.js +0 -1042
  90. package/dist/chunk-WMGJCB7O.js +0 -157
  91. package/dist/chunk-X3ZT3KGX.cjs +0 -53
  92. package/dist/chunk-X5O7GP4S.js +0 -48
  93. package/dist/chunk-X7WREEFD.js +0 -8
  94. package/dist/chunk-XENOUBSI.cjs +0 -37
  95. package/dist/chunk-XKCLVPUC.js +0 -176
  96. package/dist/chunk-XTKD76O5.js +0 -29
  97. package/dist/chunk-YBFG2IRJ.cjs +0 -225
  98. package/dist/chunk-YEFLGE3L.cjs +0 -47
  99. package/dist/chunk-YUMKV5TH.js +0 -56
  100. package/dist/chunk-ZD2QRAOX.js +0 -9
  101. package/dist/chunk-ZVF7J4EI.cjs +0 -58
  102. package/dist/color-picker.types-GI7dq2Ig.d.cts +0 -42
  103. package/dist/color-picker.types-GI7dq2Ig.d.ts +0 -42
  104. package/dist/components/accordion/index.cjs +0 -23
  105. package/dist/components/accordion/index.d.cts +0 -17
  106. package/dist/components/accordion/index.d.ts +0 -17
  107. package/dist/components/accordion/index.js +0 -2
  108. package/dist/components/alert/index.cjs +0 -19
  109. package/dist/components/alert/index.d.cts +0 -24
  110. package/dist/components/alert/index.d.ts +0 -24
  111. package/dist/components/alert/index.js +0 -2
  112. package/dist/components/alert-dialog/index.cjs +0 -43
  113. package/dist/components/alert-dialog/index.d.cts +0 -32
  114. package/dist/components/alert-dialog/index.d.ts +0 -32
  115. package/dist/components/alert-dialog/index.js +0 -2
  116. package/dist/components/avatar/index.cjs +0 -19
  117. package/dist/components/avatar/index.d.cts +0 -14
  118. package/dist/components/avatar/index.d.ts +0 -14
  119. package/dist/components/avatar/index.js +0 -2
  120. package/dist/components/badge/index.cjs +0 -19
  121. package/dist/components/badge/index.d.cts +0 -28
  122. package/dist/components/badge/index.d.ts +0 -28
  123. package/dist/components/badge/index.js +0 -2
  124. package/dist/components/badge-overflow/index.cjs +0 -183
  125. package/dist/components/badge-overflow/index.d.cts +0 -21
  126. package/dist/components/badge-overflow/index.d.ts +0 -21
  127. package/dist/components/badge-overflow/index.js +0 -161
  128. package/dist/components/button/index.cjs +0 -52
  129. package/dist/components/button/index.d.cts +0 -58
  130. package/dist/components/button/index.d.ts +0 -58
  131. package/dist/components/button/index.js +0 -43
  132. package/dist/components/card/index.cjs +0 -35
  133. package/dist/components/card/index.d.cts +0 -25
  134. package/dist/components/card/index.d.ts +0 -25
  135. package/dist/components/card/index.js +0 -2
  136. package/dist/components/carousel/index.cjs +0 -269
  137. package/dist/components/carousel/index.d.cts +0 -48
  138. package/dist/components/carousel/index.d.ts +0 -48
  139. package/dist/components/carousel/index.js +0 -238
  140. package/dist/components/checkbox/index.cjs +0 -11
  141. package/dist/components/checkbox/index.d.cts +0 -8
  142. package/dist/components/checkbox/index.d.ts +0 -8
  143. package/dist/components/checkbox/index.js +0 -2
  144. package/dist/components/collapsible/index.cjs +0 -18
  145. package/dist/components/collapsible/index.d.cts +0 -12
  146. package/dist/components/collapsible/index.d.ts +0 -12
  147. package/dist/components/collapsible/index.js +0 -1
  148. package/dist/components/color-picker/index.cjs +0 -92
  149. package/dist/components/color-picker/index.d.cts +0 -71
  150. package/dist/components/color-picker/index.d.ts +0 -71
  151. package/dist/components/color-picker/index.js +0 -43
  152. package/dist/components/color-swatch/index.cjs +0 -11
  153. package/dist/components/color-swatch/index.d.cts +0 -22
  154. package/dist/components/color-swatch/index.d.ts +0 -22
  155. package/dist/components/color-swatch/index.js +0 -2
  156. package/dist/components/counting-number/index.cjs +0 -11
  157. package/dist/components/counting-number/index.d.cts +0 -57
  158. package/dist/components/counting-number/index.d.ts +0 -57
  159. package/dist/components/counting-number/index.js +0 -2
  160. package/dist/components/dialog/index.cjs +0 -39
  161. package/dist/components/dialog/index.d.cts +0 -42
  162. package/dist/components/dialog/index.d.ts +0 -42
  163. package/dist/components/dialog/index.js +0 -2
  164. package/dist/components/dropdown-menu/index.cjs +0 -71
  165. package/dist/components/dropdown-menu/index.d.cts +0 -67
  166. package/dist/components/dropdown-menu/index.d.ts +0 -67
  167. package/dist/components/dropdown-menu/index.js +0 -2
  168. package/dist/components/empty/index.cjs +0 -31
  169. package/dist/components/empty/index.d.cts +0 -29
  170. package/dist/components/empty/index.d.ts +0 -29
  171. package/dist/components/empty/index.js +0 -2
  172. package/dist/components/field/index.cjs +0 -49
  173. package/dist/components/field/index.d.cts +0 -50
  174. package/dist/components/field/index.d.ts +0 -50
  175. package/dist/components/field/index.js +0 -4
  176. package/dist/components/file-upload/index.cjs +0 -60
  177. package/dist/components/file-upload/index.d.cts +0 -131
  178. package/dist/components/file-upload/index.d.ts +0 -131
  179. package/dist/components/file-upload/index.js +0 -3
  180. package/dist/components/header/index.cjs +0 -10
  181. package/dist/components/header/index.d.cts +0 -9
  182. package/dist/components/header/index.d.ts +0 -9
  183. package/dist/components/header/index.js +0 -1
  184. package/dist/components/input/index.cjs +0 -11
  185. package/dist/components/input/index.d.cts +0 -9
  186. package/dist/components/input/index.d.ts +0 -9
  187. package/dist/components/input/index.js +0 -2
  188. package/dist/components/item/index.cjs +0 -48
  189. package/dist/components/item/index.d.cts +0 -61
  190. package/dist/components/item/index.d.ts +0 -61
  191. package/dist/components/item/index.js +0 -3
  192. package/dist/components/label/index.cjs +0 -11
  193. package/dist/components/label/index.d.cts +0 -8
  194. package/dist/components/label/index.d.ts +0 -8
  195. package/dist/components/label/index.js +0 -2
  196. package/dist/components/marquee/index.cjs +0 -11
  197. package/dist/components/marquee/index.d.cts +0 -48
  198. package/dist/components/marquee/index.d.ts +0 -48
  199. package/dist/components/marquee/index.js +0 -2
  200. package/dist/components/masonry/index.cjs +0 -16
  201. package/dist/components/masonry/index.d.cts +0 -181
  202. package/dist/components/masonry/index.d.ts +0 -181
  203. package/dist/components/masonry/index.js +0 -3
  204. package/dist/components/popover/index.cjs +0 -35
  205. package/dist/components/popover/index.d.cts +0 -18
  206. package/dist/components/popover/index.d.ts +0 -18
  207. package/dist/components/popover/index.js +0 -2
  208. package/dist/components/progress/index.cjs +0 -11
  209. package/dist/components/progress/index.d.cts +0 -8
  210. package/dist/components/progress/index.d.ts +0 -8
  211. package/dist/components/progress/index.js +0 -2
  212. package/dist/components/radio-group/index.cjs +0 -15
  213. package/dist/components/radio-group/index.d.cts +0 -22
  214. package/dist/components/radio-group/index.d.ts +0 -22
  215. package/dist/components/radio-group/index.js +0 -2
  216. package/dist/components/scroll-area/index.cjs +0 -15
  217. package/dist/components/scroll-area/index.d.cts +0 -11
  218. package/dist/components/scroll-area/index.d.ts +0 -11
  219. package/dist/components/scroll-area/index.js +0 -2
  220. package/dist/components/select/index.cjs +0 -31
  221. package/dist/components/select/index.d.cts +0 -22
  222. package/dist/components/select/index.d.ts +0 -22
  223. package/dist/components/select/index.js +0 -2
  224. package/dist/components/separator/index.cjs +0 -11
  225. package/dist/components/separator/index.d.cts +0 -8
  226. package/dist/components/separator/index.d.ts +0 -8
  227. package/dist/components/separator/index.js +0 -2
  228. package/dist/components/sheet/index.cjs +0 -39
  229. package/dist/components/sheet/index.d.cts +0 -42
  230. package/dist/components/sheet/index.d.ts +0 -42
  231. package/dist/components/sheet/index.js +0 -2
  232. package/dist/components/sidebar/index.cjs +0 -148
  233. package/dist/components/sidebar/index.d.cts +0 -135
  234. package/dist/components/sidebar/index.d.ts +0 -135
  235. package/dist/components/sidebar/index.js +0 -43
  236. package/dist/components/skeleton/index.cjs +0 -11
  237. package/dist/components/skeleton/index.d.cts +0 -7
  238. package/dist/components/skeleton/index.d.ts +0 -7
  239. package/dist/components/skeleton/index.js +0 -2
  240. package/dist/components/sortable/index.cjs +0 -27
  241. package/dist/components/sortable/index.d.cts +0 -50
  242. package/dist/components/sortable/index.d.ts +0 -50
  243. package/dist/components/sortable/index.js +0 -2
  244. package/dist/components/spinner/index.cjs +0 -11
  245. package/dist/components/spinner/index.d.cts +0 -7
  246. package/dist/components/spinner/index.d.ts +0 -7
  247. package/dist/components/spinner/index.js +0 -2
  248. package/dist/components/status/index.cjs +0 -19
  249. package/dist/components/status/index.d.cts +0 -25
  250. package/dist/components/status/index.d.ts +0 -25
  251. package/dist/components/status/index.js +0 -2
  252. package/dist/components/stepper/index.cjs +0 -124
  253. package/dist/components/stepper/index.d.cts +0 -164
  254. package/dist/components/stepper/index.d.ts +0 -164
  255. package/dist/components/stepper/index.js +0 -43
  256. package/dist/components/switch/index.cjs +0 -11
  257. package/dist/components/switch/index.d.cts +0 -19
  258. package/dist/components/switch/index.d.ts +0 -19
  259. package/dist/components/switch/index.js +0 -2
  260. package/dist/components/tabs/index.cjs +0 -23
  261. package/dist/components/tabs/index.d.cts +0 -17
  262. package/dist/components/tabs/index.d.ts +0 -17
  263. package/dist/components/tabs/index.js +0 -2
  264. package/dist/components/textarea/index.cjs +0 -11
  265. package/dist/components/textarea/index.d.cts +0 -9
  266. package/dist/components/textarea/index.d.ts +0 -9
  267. package/dist/components/textarea/index.js +0 -2
  268. package/dist/components/timeline/index.cjs +0 -45
  269. package/dist/components/timeline/index.d.cts +0 -63
  270. package/dist/components/timeline/index.d.ts +0 -63
  271. package/dist/components/timeline/index.js +0 -4
  272. package/dist/components/toaster/index.cjs +0 -56
  273. package/dist/components/toaster/index.d.cts +0 -8
  274. package/dist/components/toaster/index.d.ts +0 -8
  275. package/dist/components/toaster/index.js +0 -43
  276. package/dist/components/tooltip/index.cjs +0 -19
  277. package/dist/components/tooltip/index.d.cts +0 -12
  278. package/dist/components/tooltip/index.d.ts +0 -12
  279. package/dist/components/tooltip/index.js +0 -2
  280. package/dist/components/typing-text/index.cjs +0 -11
  281. package/dist/components/typing-text/index.d.cts +0 -41
  282. package/dist/components/typing-text/index.d.ts +0 -41
  283. package/dist/components/typing-text/index.js +0 -2
  284. package/dist/components/word-rotate/index.cjs +0 -11
  285. package/dist/components/word-rotate/index.d.cts +0 -30
  286. package/dist/components/word-rotate/index.d.ts +0 -30
  287. package/dist/components/word-rotate/index.js +0 -2
  288. package/dist/direction-CUOPDLCj.d.cts +0 -7
  289. package/dist/direction-CUOPDLCj.d.ts +0 -7
  290. package/dist/popover-trigger-Cf4PPj0z.d.cts +0 -14
  291. package/dist/popover-trigger-Cf4PPj0z.d.ts +0 -14
  292. package/dist/select-Bf6XQtt-.d.cts +0 -12
  293. package/dist/select-Bf6XQtt-.d.ts +0 -12
  294. package/dist/tooltip-content-DqtogPBq.d.cts +0 -8
  295. package/dist/tooltip-content-DqtogPBq.d.ts +0 -8
@@ -1,1042 +0,0 @@
1
- import { useComposedRefs } from './chunk-P4IL77YC.js';
2
- import { useIsomorphicLayoutEffect } from './chunk-G24PWQKG.js';
3
- import * as React3 from 'react';
4
- import React3__default from 'react';
5
- import { Slot } from '@radix-ui/react-slot';
6
- import { jsx } from 'react/jsx-runtime';
7
-
8
- function MasonryItem({ asChild, ref, ...props }) {
9
- const ItemPrimitive = asChild ? Slot : "div";
10
- return /* @__PURE__ */ jsx(ItemPrimitive, { "data-slot": "masonry-item", ref, ...props });
11
- }
12
-
13
- // src/components/masonry/masonry.constants.ts
14
- var COLUMN_WIDTH = 200;
15
- var GAP = 0;
16
- var ITEM_HEIGHT = 300;
17
- var OVERSCAN = 2;
18
- var SCROLL_FPS = 12;
19
- var DEBOUNCE_DELAY = 300;
20
- var ROOT_NAME = "MasonryRoot";
21
- var VIEWPORT_NAME = "MasonryViewport";
22
- var ITEM_NAME = "MasonryItem";
23
- var MASONRY_ERROR = {
24
- [ROOT_NAME]: `\`${ROOT_NAME}\` components must be within \`${ROOT_NAME}\``,
25
- [VIEWPORT_NAME]: `\`${VIEWPORT_NAME}\` components must be within \`${ROOT_NAME}\``,
26
- [ITEM_NAME]: `\`${ITEM_NAME}\` must be within \`${VIEWPORT_NAME}\``
27
- };
28
- var NODE_COLOR = {
29
- RED: 0,
30
- BLACK: 1,
31
- SENTINEL: 2
32
- };
33
- var NODE_OPERATION = {
34
- REMOVE: 0,
35
- PRESERVE: 1
36
- };
37
- var MasonryContext = React3__default.createContext(null);
38
- function useMasonryContext(name) {
39
- const context = React3__default.useContext(MasonryContext);
40
- if (!context) {
41
- throw new Error(MASONRY_ERROR[name]);
42
- }
43
- return context;
44
- }
45
- function MasonryViewport({ children, style, ref, ...props }) {
46
- const context = useMasonryContext(VIEWPORT_NAME);
47
- const [layoutVersion, setLayoutVersion] = React3.useState(0);
48
- const rafId = React3.useRef(null);
49
- const [mounted, setMounted] = React3.useState(false);
50
- useIsomorphicLayoutEffect(() => {
51
- setMounted(true);
52
- }, []);
53
- const validChildren = React3.Children.toArray(children).filter(
54
- (child) => React3.isValidElement(child) && (child.type === MasonryItem || child.type === MasonryItem)
55
- );
56
- const itemCount = validChildren.length;
57
- const shortestColumnSize = context.positioner.shortestColumn();
58
- const measuredCount = context.positioner.size();
59
- const overscanPixels = context.windowHeight * context.overscan;
60
- const rangeStart = Math.max(0, context.scrollTop - overscanPixels / 2);
61
- const rangeEnd = context.scrollTop + overscanPixels;
62
- const layoutOutdated = shortestColumnSize < rangeEnd && measuredCount < itemCount;
63
- const positionedChildren = [];
64
- const visibleItemStyle = React3.useMemo(
65
- () => ({
66
- position: "absolute",
67
- writingMode: "horizontal-tb",
68
- visibility: "visible",
69
- width: context.columnWidth,
70
- transform: context.isScrolling ? "translateZ(0)" : void 0,
71
- willChange: context.isScrolling ? "transform" : void 0
72
- }),
73
- [context.columnWidth, context.isScrolling]
74
- );
75
- const hiddenItemStyle = React3.useMemo(
76
- () => ({
77
- position: "absolute",
78
- writingMode: "horizontal-tb",
79
- visibility: "hidden",
80
- width: context.columnWidth,
81
- zIndex: -1e3
82
- }),
83
- [context.columnWidth]
84
- );
85
- context.positioner.range(rangeStart, rangeEnd, (index, left, top) => {
86
- const child = validChildren[index];
87
- if (!child) return;
88
- const itemStyle = {
89
- ...visibleItemStyle,
90
- top,
91
- left,
92
- ...child.props.style
93
- };
94
- positionedChildren.push(
95
- React3.cloneElement(child, {
96
- key: child.key ?? index,
97
- ref: context.onItemRegister(index),
98
- style: itemStyle
99
- })
100
- );
101
- });
102
- if (layoutOutdated && mounted) {
103
- const batchSize = Math.min(
104
- itemCount - measuredCount,
105
- Math.ceil(
106
- (context.scrollTop + overscanPixels - shortestColumnSize) / context.itemHeight * context.positioner.columnCount
107
- )
108
- );
109
- for (let index = measuredCount; index < measuredCount + batchSize; index++) {
110
- const child = validChildren[index];
111
- if (!child) continue;
112
- const itemStyle = {
113
- ...hiddenItemStyle,
114
- ...child.props.style
115
- };
116
- positionedChildren.push(
117
- React3.cloneElement(child, {
118
- key: child.key ?? index,
119
- ref: context.onItemRegister(index),
120
- style: itemStyle
121
- })
122
- );
123
- }
124
- }
125
- React3.useEffect(() => {
126
- if (layoutOutdated && mounted) {
127
- if (rafId.current) {
128
- cancelAnimationFrame(rafId.current);
129
- }
130
- rafId.current = requestAnimationFrame(() => {
131
- setLayoutVersion((v) => v + 1);
132
- });
133
- }
134
- return () => {
135
- if (rafId.current) {
136
- cancelAnimationFrame(rafId.current);
137
- }
138
- };
139
- }, [layoutOutdated, mounted]);
140
- const estimatedHeight = React3.useMemo(() => {
141
- const measuredHeight = context.positioner.estimateHeight(measuredCount, context.itemHeight);
142
- if (measuredCount === itemCount) {
143
- return measuredHeight;
144
- }
145
- const remainingItems = itemCount - measuredCount;
146
- const estimatedRemainingHeight = Math.ceil(remainingItems / context.positioner.columnCount * context.itemHeight);
147
- return measuredHeight + estimatedRemainingHeight;
148
- }, [context.positioner, context.itemHeight, measuredCount, itemCount]);
149
- const containerStyle = React3.useMemo(
150
- () => ({
151
- position: "relative",
152
- width: "100%",
153
- maxWidth: "100%",
154
- height: Math.ceil(estimatedHeight),
155
- maxHeight: Math.ceil(estimatedHeight),
156
- willChange: context.isScrolling ? "contents" : void 0,
157
- pointerEvents: context.isScrolling ? "none" : void 0,
158
- ...style
159
- }),
160
- [context.isScrolling, estimatedHeight, style]
161
- );
162
- if (!mounted && context.fallback) {
163
- return context.fallback;
164
- }
165
- return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, "data-version": mounted ? layoutVersion : void 0, ...props, children: positionedChildren });
166
- }
167
-
168
- // src/components/masonry/masonry.utils.ts
169
- function addInterval(treeNode, high, index) {
170
- let node = treeNode.list;
171
- let prevNode;
172
- while (node) {
173
- if (node.index === index) return false;
174
- if (high > node.high) break;
175
- prevNode = node;
176
- node = node.next;
177
- }
178
- if (!prevNode) treeNode.list = { index, high, next: node };
179
- if (prevNode) prevNode.next = { index, high, next: prevNode.next };
180
- return true;
181
- }
182
- function removeInterval(treeNode, index) {
183
- let node = treeNode.list;
184
- if (node.index === index) {
185
- if (node.next === null) return NODE_OPERATION.REMOVE;
186
- treeNode.list = node.next;
187
- return NODE_OPERATION.PRESERVE;
188
- }
189
- let prevNode = node;
190
- node = node.next;
191
- while (node !== null) {
192
- if (node.index === index) {
193
- prevNode.next = node.next;
194
- return NODE_OPERATION.PRESERVE;
195
- }
196
- prevNode = node;
197
- node = node.next;
198
- }
199
- }
200
- var SENTINEL_NODE = {
201
- low: 0,
202
- max: 0,
203
- high: 0,
204
- color: NODE_COLOR.SENTINEL,
205
- parent: void 0,
206
- right: void 0,
207
- left: void 0,
208
- list: void 0
209
- };
210
- SENTINEL_NODE.parent = SENTINEL_NODE;
211
- SENTINEL_NODE.left = SENTINEL_NODE;
212
- SENTINEL_NODE.right = SENTINEL_NODE;
213
- function updateMax(node) {
214
- const max = node.high;
215
- if (node.left === SENTINEL_NODE && node.right === SENTINEL_NODE) node.max = max;
216
- else if (node.left === SENTINEL_NODE) node.max = Math.max(node.right.max, max);
217
- else if (node.right === SENTINEL_NODE) node.max = Math.max(node.left.max, max);
218
- else node.max = Math.max(Math.max(node.left.max, node.right.max), max);
219
- }
220
- function updateMaxUp(node) {
221
- let x = node;
222
- while (x.parent !== SENTINEL_NODE) {
223
- updateMax(x.parent);
224
- x = x.parent;
225
- }
226
- }
227
- function rotateLeft(tree, x) {
228
- if (x.right === SENTINEL_NODE) return;
229
- const y = x.right;
230
- x.right = y.left;
231
- if (y.left !== SENTINEL_NODE) y.left.parent = x;
232
- y.parent = x.parent;
233
- if (x.parent === SENTINEL_NODE) tree.root = y;
234
- else if (x === x.parent.left) x.parent.left = y;
235
- else x.parent.right = y;
236
- y.left = x;
237
- x.parent = y;
238
- updateMax(x);
239
- updateMax(y);
240
- }
241
- function rotateRight(tree, x) {
242
- if (x.left === SENTINEL_NODE) return;
243
- const y = x.left;
244
- x.left = y.right;
245
- if (y.right !== SENTINEL_NODE) y.right.parent = x;
246
- y.parent = x.parent;
247
- if (x.parent === SENTINEL_NODE) tree.root = y;
248
- else if (x === x.parent.right) x.parent.right = y;
249
- else x.parent.left = y;
250
- y.right = x;
251
- x.parent = y;
252
- updateMax(x);
253
- updateMax(y);
254
- }
255
- function replaceNode(tree, x, y) {
256
- if (x.parent === SENTINEL_NODE) {
257
- tree.root = y;
258
- } else if (x === x.parent.left) {
259
- x.parent.left = y;
260
- } else {
261
- x.parent.right = y;
262
- }
263
- y.parent = x.parent;
264
- }
265
- function fixRemove(tree, node) {
266
- let x = node;
267
- let w;
268
- while (x !== SENTINEL_NODE && x.color === NODE_COLOR.BLACK) {
269
- if (x === x.parent.left) {
270
- w = x.parent.right;
271
- if (w.color === NODE_COLOR.RED) {
272
- w.color = NODE_COLOR.BLACK;
273
- x.parent.color = NODE_COLOR.RED;
274
- rotateLeft(tree, x.parent);
275
- w = x.parent.right;
276
- }
277
- if (w.left.color === NODE_COLOR.BLACK && w.right.color === NODE_COLOR.BLACK) {
278
- w.color = NODE_COLOR.RED;
279
- x = x.parent;
280
- } else {
281
- if (w.right.color === NODE_COLOR.BLACK) {
282
- w.left.color = NODE_COLOR.BLACK;
283
- w.color = NODE_COLOR.RED;
284
- rotateRight(tree, w);
285
- w = x.parent.right;
286
- }
287
- w.color = x.parent.color;
288
- x.parent.color = NODE_COLOR.BLACK;
289
- w.right.color = NODE_COLOR.BLACK;
290
- rotateLeft(tree, x.parent);
291
- x = tree.root;
292
- }
293
- } else {
294
- w = x.parent.left;
295
- if (w.color === NODE_COLOR.RED) {
296
- w.color = NODE_COLOR.BLACK;
297
- x.parent.color = NODE_COLOR.RED;
298
- rotateRight(tree, x.parent);
299
- w = x.parent.left;
300
- }
301
- if (w.right.color === NODE_COLOR.BLACK && w.left.color === NODE_COLOR.BLACK) {
302
- w.color = NODE_COLOR.RED;
303
- x = x.parent;
304
- } else {
305
- if (w.left.color === NODE_COLOR.BLACK) {
306
- w.right.color = NODE_COLOR.BLACK;
307
- w.color = NODE_COLOR.RED;
308
- rotateLeft(tree, w);
309
- w = x.parent.left;
310
- }
311
- w.color = x.parent.color;
312
- x.parent.color = NODE_COLOR.BLACK;
313
- w.left.color = NODE_COLOR.BLACK;
314
- rotateRight(tree, x.parent);
315
- x = tree.root;
316
- }
317
- }
318
- }
319
- x.color = NODE_COLOR.BLACK;
320
- }
321
- function minimumTree(node) {
322
- let current = node;
323
- while (current.left !== SENTINEL_NODE) {
324
- current = current.left;
325
- }
326
- return current;
327
- }
328
- function fixInsert(tree, node) {
329
- let current = node;
330
- let y;
331
- while (current.parent.color === NODE_COLOR.RED) {
332
- if (current.parent === current.parent.parent.left) {
333
- y = current.parent.parent.right;
334
- if (y.color === NODE_COLOR.RED) {
335
- current.parent.color = NODE_COLOR.BLACK;
336
- y.color = NODE_COLOR.BLACK;
337
- current.parent.parent.color = NODE_COLOR.RED;
338
- current = current.parent.parent;
339
- } else {
340
- if (current === current.parent.right) {
341
- current = current.parent;
342
- rotateLeft(tree, current);
343
- }
344
- current.parent.color = NODE_COLOR.BLACK;
345
- current.parent.parent.color = NODE_COLOR.RED;
346
- rotateRight(tree, current.parent.parent);
347
- }
348
- } else {
349
- y = current.parent.parent.left;
350
- if (y.color === NODE_COLOR.RED) {
351
- current.parent.color = NODE_COLOR.BLACK;
352
- y.color = NODE_COLOR.BLACK;
353
- current.parent.parent.color = NODE_COLOR.RED;
354
- current = current.parent.parent;
355
- } else {
356
- if (current === current.parent.left) {
357
- current = current.parent;
358
- rotateRight(tree, current);
359
- }
360
- current.parent.color = NODE_COLOR.BLACK;
361
- current.parent.parent.color = NODE_COLOR.RED;
362
- rotateLeft(tree, current.parent.parent);
363
- }
364
- }
365
- }
366
- tree.root.color = NODE_COLOR.BLACK;
367
- }
368
- function createIntervalTree() {
369
- const tree = {
370
- root: SENTINEL_NODE,
371
- size: 0
372
- };
373
- const indexMap = {};
374
- return {
375
- insert(low, high, index) {
376
- let x = tree.root;
377
- let y = SENTINEL_NODE;
378
- while (x !== SENTINEL_NODE) {
379
- y = x;
380
- if (low === y.low) break;
381
- if (low < x.low) x = x.left;
382
- else x = x.right;
383
- }
384
- if (low === y.low && y !== SENTINEL_NODE) {
385
- if (!addInterval(y, high, index)) return;
386
- y.high = Math.max(y.high, high);
387
- updateMax(y);
388
- updateMaxUp(y);
389
- indexMap[index] = y;
390
- tree.size++;
391
- return;
392
- }
393
- const z = {
394
- low,
395
- high,
396
- max: high,
397
- color: NODE_COLOR.RED,
398
- parent: y,
399
- left: SENTINEL_NODE,
400
- right: SENTINEL_NODE,
401
- list: { index, high, next: null }
402
- };
403
- if (y === SENTINEL_NODE) {
404
- tree.root = z;
405
- } else {
406
- if (z.low < y.low) y.left = z;
407
- else y.right = z;
408
- updateMaxUp(z);
409
- }
410
- fixInsert(tree, z);
411
- indexMap[index] = z;
412
- tree.size++;
413
- },
414
- remove(index) {
415
- const z = indexMap[index];
416
- if (z === void 0) return;
417
- delete indexMap[index];
418
- const intervalResult = removeInterval(z, index);
419
- if (intervalResult === void 0) return;
420
- if (intervalResult === NODE_OPERATION.PRESERVE) {
421
- z.high = z.list.high;
422
- updateMax(z);
423
- updateMaxUp(z);
424
- tree.size--;
425
- return;
426
- }
427
- let y = z;
428
- let originalYColor = y.color;
429
- let x;
430
- if (z.left === SENTINEL_NODE) {
431
- x = z.right;
432
- replaceNode(tree, z, z.right);
433
- } else if (z.right === SENTINEL_NODE) {
434
- x = z.left;
435
- replaceNode(tree, z, z.left);
436
- } else {
437
- y = minimumTree(z.right);
438
- originalYColor = y.color;
439
- x = y.right;
440
- if (y.parent === z) {
441
- x.parent = y;
442
- } else {
443
- replaceNode(tree, y, y.right);
444
- y.right = z.right;
445
- y.right.parent = y;
446
- }
447
- replaceNode(tree, z, y);
448
- y.left = z.left;
449
- y.left.parent = y;
450
- y.color = z.color;
451
- }
452
- updateMax(x);
453
- updateMaxUp(x);
454
- if (originalYColor === NODE_COLOR.BLACK) fixRemove(tree, x);
455
- tree.size--;
456
- },
457
- search(low, high, onCallback) {
458
- const stack = [tree.root];
459
- while (stack.length !== 0) {
460
- const node = stack.pop();
461
- if (!node) continue;
462
- if (node === SENTINEL_NODE || low > node.max) continue;
463
- if (node.left !== SENTINEL_NODE) stack.push(node.left);
464
- if (node.right !== SENTINEL_NODE) stack.push(node.right);
465
- if (node.low <= high && node.high >= low) {
466
- let curr = node.list;
467
- while (curr !== null) {
468
- if (curr.high >= low) onCallback(curr.index, node.low);
469
- curr = curr.next;
470
- }
471
- }
472
- }
473
- },
474
- get size() {
475
- return tree.size;
476
- }
477
- };
478
- }
479
- function onDeepMemo(constructors, fn) {
480
- if (!constructors.length || !constructors[0]) {
481
- throw new Error("At least one constructor is required");
482
- }
483
- function createCache(obj) {
484
- let cache;
485
- if (typeof obj === "function") {
486
- try {
487
- cache = new obj();
488
- } catch (_err) {
489
- cache = /* @__PURE__ */ new Map();
490
- }
491
- } else {
492
- cache = obj;
493
- }
494
- return {
495
- set(k, v) {
496
- cache.set(k, v);
497
- return v;
498
- },
499
- get(k) {
500
- return cache.get(k);
501
- }
502
- };
503
- }
504
- const depth = constructors.length;
505
- const baseCache = createCache(constructors[0]);
506
- let base;
507
- let map;
508
- let node;
509
- let i;
510
- const one = depth === 1;
511
- function get(args) {
512
- if (depth < 3) {
513
- const key = args[0];
514
- base = baseCache.get(key);
515
- return one ? base : base?.get(args[1]);
516
- }
517
- node = baseCache;
518
- for (i = 0; i < depth; i++) {
519
- const next = node.get(args[i]);
520
- if (!next) return void 0;
521
- node = next;
522
- }
523
- return node;
524
- }
525
- function set(args, value) {
526
- if (depth < 3) {
527
- if (one) {
528
- baseCache.set(args[0], value);
529
- } else {
530
- base = baseCache.get(args[0]);
531
- if (!base) {
532
- if (!constructors[1]) {
533
- throw new Error("Second constructor is required for non-single depth cache");
534
- }
535
- map = createCache(constructors[1]);
536
- map.set(args[1], value);
537
- baseCache.set(args[0], map);
538
- } else {
539
- base.set(args[1], value);
540
- }
541
- }
542
- return value;
543
- }
544
- node = baseCache;
545
- for (i = 0; i < depth - 1; i++) {
546
- map = node.get(args[i]);
547
- if (!map) {
548
- const nextConstructor = constructors[i + 1];
549
- if (!nextConstructor) {
550
- throw new Error(`Constructor at index ${i + 1} is required`);
551
- }
552
- map = createCache(nextConstructor);
553
- node.set(args[i], map);
554
- node = map;
555
- } else {
556
- node = map;
557
- }
558
- }
559
- node.set(args[depth - 1], value);
560
- return value;
561
- }
562
- return (...args) => {
563
- const cached = get(args);
564
- if (cached === void 0) {
565
- return set(args, fn(...args));
566
- }
567
- return cached;
568
- };
569
- }
570
- function onRafSchedule(callback) {
571
- function onCallback(...args) {
572
- }
573
- onCallback.cancel = () => {
574
- return;
575
- };
576
- return onCallback;
577
- }
578
-
579
- // src/components/masonry/masonry.hooks.tsx
580
- function useMasonryPositioner({
581
- width,
582
- columnWidth,
583
- columnGap = 0,
584
- rowGap,
585
- columnCount,
586
- maxColumnCount,
587
- linear = false
588
- }, deps = []) {
589
- const initPositioner = React3__default.useCallback(() => {
590
- function binarySearch(a, y) {
591
- let l = 0;
592
- let h = a.length - 1;
593
- while (l <= h) {
594
- const m = l + h >>> 1;
595
- const x = a[m];
596
- if (x === y) return m;
597
- if (x === void 0 || x <= y) l = m + 1;
598
- else h = m - 1;
599
- }
600
- return -1;
601
- }
602
- const computedColumnCount = columnCount || Math.min(
603
- Math.floor((width + columnGap) / ((columnWidth ?? 0) + columnGap)),
604
- maxColumnCount || Number.POSITIVE_INFINITY
605
- ) || 1;
606
- const computedColumnWidth = Math.floor((width - columnGap * (computedColumnCount - 1)) / computedColumnCount);
607
- const intervalTree = createIntervalTree();
608
- const columnHeights = new Array(computedColumnCount).fill(0);
609
- const items = [];
610
- const columnItems = new Array(computedColumnCount).fill(0).map(() => []);
611
- for (let i = 0; i < computedColumnCount; i++) {
612
- columnHeights[i] = 0;
613
- columnItems[i] = [];
614
- }
615
- return {
616
- columnCount: computedColumnCount,
617
- columnWidth: computedColumnWidth,
618
- set: (index, height = 0) => {
619
- let columnIndex = 0;
620
- if (linear) {
621
- const preferredColumn = index % computedColumnCount;
622
- let shortestHeight = columnHeights[0] ?? 0;
623
- let shortestIndex = 0;
624
- for (let i = 0; i < columnHeights.length; i++) {
625
- const currentHeight = columnHeights[i] ?? 0;
626
- if (currentHeight < shortestHeight) {
627
- shortestHeight = currentHeight;
628
- shortestIndex = i;
629
- }
630
- }
631
- const preferredHeight = (columnHeights[preferredColumn] ?? 0) + height;
632
- const maxAllowedHeight = shortestHeight + height * 2.5;
633
- columnIndex = preferredHeight <= maxAllowedHeight ? preferredColumn : shortestIndex;
634
- } else {
635
- for (let i = 1; i < columnHeights.length; i++) {
636
- const currentHeight = columnHeights[i];
637
- const shortestHeight = columnHeights[columnIndex];
638
- if (currentHeight !== void 0 && shortestHeight !== void 0 && currentHeight < shortestHeight) {
639
- columnIndex = i;
640
- }
641
- }
642
- }
643
- const columnHeight = columnHeights[columnIndex];
644
- if (columnHeight === void 0) return;
645
- const top = columnHeight;
646
- columnHeights[columnIndex] = top + height + (rowGap ?? columnGap);
647
- const columnItemsList = columnItems[columnIndex];
648
- if (!columnItemsList) return;
649
- columnItemsList.push(index);
650
- items[index] = {
651
- left: columnIndex * (computedColumnWidth + columnGap),
652
- top,
653
- height,
654
- columnIndex
655
- };
656
- intervalTree.insert(top, top + height, index);
657
- },
658
- get: (index) => items[index],
659
- update: (updates) => {
660
- const columns = new Array(computedColumnCount);
661
- let i = 0;
662
- let j = 0;
663
- for (; i < updates.length - 1; i++) {
664
- const currentIndex = updates[i];
665
- if (typeof currentIndex !== "number") continue;
666
- const item = items[currentIndex];
667
- if (!item) continue;
668
- const nextHeight = updates[++i];
669
- if (typeof nextHeight !== "number") continue;
670
- item.height = nextHeight;
671
- intervalTree.remove(currentIndex);
672
- intervalTree.insert(item.top, item.top + item.height, currentIndex);
673
- columns[item.columnIndex] = columns[item.columnIndex] === void 0 ? currentIndex : Math.min(currentIndex, columns[item.columnIndex] ?? currentIndex);
674
- }
675
- for (i = 0; i < columns.length; i++) {
676
- const currentColumn = columns[i];
677
- if (currentColumn === void 0) continue;
678
- const itemsInColumn = columnItems[i];
679
- if (!itemsInColumn) continue;
680
- const startIndex = binarySearch(itemsInColumn, currentColumn);
681
- if (startIndex === -1) continue;
682
- const currentItemIndex = itemsInColumn[startIndex];
683
- if (typeof currentItemIndex !== "number") continue;
684
- const startItem = items[currentItemIndex];
685
- if (!startItem) continue;
686
- const currentHeight = columnHeights[i];
687
- if (typeof currentHeight !== "number") continue;
688
- columnHeights[i] = startItem.top + startItem.height + (rowGap ?? columnGap);
689
- for (j = startIndex + 1; j < itemsInColumn.length; j++) {
690
- const currentIndex = itemsInColumn[j];
691
- if (typeof currentIndex !== "number") continue;
692
- const item = items[currentIndex];
693
- if (!item) continue;
694
- const columnHeight = columnHeights[i];
695
- if (typeof columnHeight !== "number") continue;
696
- item.top = columnHeight;
697
- columnHeights[i] = item.top + item.height + (rowGap ?? columnGap);
698
- intervalTree.remove(currentIndex);
699
- intervalTree.insert(item.top, item.top + item.height, currentIndex);
700
- }
701
- }
702
- },
703
- range: (low, high, onItemRender) => intervalTree.search(low, high, (index, top) => {
704
- const item = items[index];
705
- if (!item) return;
706
- onItemRender(index, item.left, top);
707
- }),
708
- estimateHeight: (itemCount, defaultItemHeight) => {
709
- const tallestColumn = Math.max(0, Math.max.apply(null, columnHeights));
710
- return itemCount === intervalTree.size ? tallestColumn : tallestColumn + Math.ceil((itemCount - intervalTree.size) / computedColumnCount) * defaultItemHeight;
711
- },
712
- shortestColumn: () => {
713
- if (columnHeights.length > 1) return Math.min.apply(null, columnHeights);
714
- return columnHeights[0] ?? 0;
715
- },
716
- size() {
717
- return intervalTree.size;
718
- },
719
- all() {
720
- return items.filter(Boolean);
721
- }
722
- };
723
- }, [width, columnWidth, columnGap, rowGap, columnCount, maxColumnCount, linear]);
724
- const positionerRef = React3__default.useRef(null);
725
- if (positionerRef.current === null) positionerRef.current = initPositioner();
726
- const prevDepsRef = React3__default.useRef(deps);
727
- const opts = [width, columnWidth, columnGap, rowGap, columnCount, maxColumnCount, linear];
728
- const prevOptsRef = React3__default.useRef(opts);
729
- const optsChanged = !opts.every((item, i) => prevOptsRef.current[i] === item);
730
- if (optsChanged || !deps.every((item, i) => prevDepsRef.current[i] === item)) {
731
- const prevPositioner = positionerRef.current;
732
- const positioner = initPositioner();
733
- prevDepsRef.current = deps;
734
- prevOptsRef.current = opts;
735
- if (optsChanged) {
736
- const cacheSize = prevPositioner.size();
737
- for (let index = 0; index < cacheSize; index++) {
738
- const pos = prevPositioner.get(index);
739
- positioner.set(index, pos !== void 0 ? pos.height : 0);
740
- }
741
- }
742
- positionerRef.current = positioner;
743
- }
744
- return positionerRef.current;
745
- }
746
- function useDebouncedWindowSize(options) {
747
- const { containerRef, defaultWidth = 0, defaultHeight = 0, delayMs = DEBOUNCE_DELAY } = options;
748
- const getDocumentSize = React3__default.useCallback(() => {
749
- if (typeof document === "undefined") {
750
- return { width: defaultWidth, height: defaultHeight };
751
- }
752
- return {
753
- width: document.documentElement.clientWidth,
754
- height: document.documentElement.clientHeight
755
- };
756
- }, [defaultWidth, defaultHeight]);
757
- const [size, setSize] = React3__default.useState(getDocumentSize());
758
- const timeoutRef = React3__default.useRef(null);
759
- const setDebouncedSize = React3__default.useCallback(
760
- (value) => {
761
- if (timeoutRef.current) {
762
- clearTimeout(timeoutRef.current);
763
- }
764
- timeoutRef.current = setTimeout(() => {
765
- setSize(value);
766
- }, delayMs);
767
- },
768
- [delayMs]
769
- );
770
- React3__default.useEffect(() => {
771
- function onResize() {
772
- if (containerRef.current) {
773
- setDebouncedSize({
774
- width: containerRef.current.offsetWidth,
775
- height: document.documentElement.clientHeight
776
- });
777
- } else {
778
- setDebouncedSize(getDocumentSize());
779
- }
780
- }
781
- window?.addEventListener("resize", onResize, { passive: true });
782
- window?.addEventListener("orientationchange", onResize);
783
- window.visualViewport?.addEventListener("resize", onResize);
784
- return () => {
785
- window?.removeEventListener("resize", onResize);
786
- window?.removeEventListener("orientationchange", onResize);
787
- window.visualViewport?.removeEventListener("resize", onResize);
788
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
789
- };
790
- }, [setDebouncedSize, containerRef, getDocumentSize]);
791
- return size;
792
- }
793
- function useResizeObserver(positioner) {
794
- const [, setLayoutVersion] = React3__default.useState(0);
795
- const createResizeObserver = React3__default.useMemo(() => {
796
- if (typeof window === "undefined") {
797
- return () => ({
798
- disconnect: () => {
799
- },
800
- observe: () => {
801
- },
802
- unobserve: () => {
803
- }
804
- });
805
- }
806
- return onDeepMemo([WeakMap], (positioner2, onUpdate) => {
807
- const itemMap = /* @__PURE__ */ new WeakMap();
808
- onRafSchedule();
809
- const scheduledItemMap = /* @__PURE__ */ new Map();
810
- function onResizeObserver(entries) {
811
- for (const entry of entries) {
812
- if (!entry) continue;
813
- const index = itemMap.get(entry.target);
814
- if (index === void 0) continue;
815
- let handler = scheduledItemMap.get(index);
816
- if (!handler) {
817
- handler = onRafSchedule();
818
- scheduledItemMap.set(index, handler);
819
- }
820
- handler(entry.target);
821
- }
822
- }
823
- const observer = new ResizeObserver(onResizeObserver);
824
- const disconnect = observer.disconnect.bind(observer);
825
- observer.disconnect = () => {
826
- disconnect();
827
- for (const [, scheduleItem] of scheduledItemMap) {
828
- scheduleItem.cancel();
829
- }
830
- };
831
- return observer;
832
- });
833
- }, []);
834
- const resizeObserver = createResizeObserver(positioner, () => setLayoutVersion((prev) => prev + 1));
835
- React3__default.useEffect(() => () => resizeObserver.disconnect(), [resizeObserver]);
836
- return resizeObserver;
837
- }
838
- function useScroller({
839
- offset = 0,
840
- fps = SCROLL_FPS
841
- } = {}) {
842
- const [scrollY, setScrollY] = useThrottle(
843
- typeof globalThis.window === "undefined" ? 0 : globalThis.window.scrollY ?? document.documentElement.scrollTop ?? 0,
844
- { fps, leading: true }
845
- );
846
- const onScroll = React3__default.useCallback(() => {
847
- setScrollY(globalThis.window.scrollY ?? document.documentElement.scrollTop ?? 0);
848
- }, [setScrollY]);
849
- React3__default.useEffect(() => {
850
- if (typeof globalThis.window === "undefined") return;
851
- globalThis.window.addEventListener("scroll", onScroll, { passive: true });
852
- return () => globalThis.window.removeEventListener("scroll", onScroll);
853
- }, [onScroll]);
854
- const [isScrolling, setIsScrolling] = React3__default.useState(false);
855
- const hasMountedRef = React3__default.useRef(0);
856
- React3__default.useEffect(() => {
857
- if (hasMountedRef.current === 1) setIsScrolling(true);
858
- let didUnsubscribe = false;
859
- function requestTimeout(fn, delay) {
860
- const start = performance.now();
861
- const handle = {
862
- id: requestAnimationFrame(function tick(timestamp) {
863
- if (timestamp - start >= delay) {
864
- fn();
865
- } else {
866
- handle.id = requestAnimationFrame(tick);
867
- }
868
- })
869
- };
870
- return handle;
871
- }
872
- const timeout = requestTimeout(
873
- () => {
874
- if (didUnsubscribe) return;
875
- setIsScrolling(false);
876
- },
877
- 40 + 1e3 / fps
878
- );
879
- hasMountedRef.current = 1;
880
- return () => {
881
- didUnsubscribe = true;
882
- cancelAnimationFrame(timeout.id);
883
- };
884
- }, [fps]);
885
- return { scrollTop: Math.max(0, scrollY - offset), isScrolling };
886
- }
887
- function useThrottle(initialState, options = {}) {
888
- const { fps = 30, leading = false } = options;
889
- const [state, setState] = React3__default.useState(initialState);
890
- const latestSetState = React3__default.useRef(setState);
891
- latestSetState.current = setState;
892
- const ms = 1e3 / fps;
893
- const prevCountRef = React3__default.useRef(0);
894
- const trailingTimeout = React3__default.useRef(null);
895
- const clearTrailing = React3__default.useCallback(() => {
896
- if (trailingTimeout.current) {
897
- clearTimeout(trailingTimeout.current);
898
- }
899
- }, []);
900
- React3__default.useEffect(() => {
901
- return () => {
902
- prevCountRef.current = 0;
903
- clearTrailing();
904
- };
905
- }, [clearTrailing]);
906
- const throttledSetState = React3__default.useCallback(
907
- (action) => {
908
- const perf = typeof performance !== "undefined" ? performance : Date;
909
- const now = () => perf.now();
910
- const rightNow = now();
911
- const call = () => {
912
- prevCountRef.current = rightNow;
913
- clearTrailing();
914
- latestSetState.current(action);
915
- };
916
- const current = prevCountRef.current;
917
- if (leading && current === 0) {
918
- return call();
919
- }
920
- if (rightNow - current > ms) {
921
- if (current > 0) {
922
- return call();
923
- }
924
- prevCountRef.current = rightNow;
925
- }
926
- clearTrailing();
927
- trailingTimeout.current = setTimeout(() => {
928
- call();
929
- prevCountRef.current = 0;
930
- }, ms);
931
- },
932
- [leading, ms, clearTrailing]
933
- );
934
- return [state, throttledSetState];
935
- }
936
- function Masonry(props) {
937
- const {
938
- columnWidth = COLUMN_WIDTH,
939
- columnCount,
940
- maxColumnCount,
941
- gap = GAP,
942
- itemHeight = ITEM_HEIGHT,
943
- defaultWidth,
944
- defaultHeight,
945
- overscan = OVERSCAN,
946
- scrollFps = SCROLL_FPS,
947
- fallback,
948
- linear = false,
949
- asChild,
950
- children,
951
- style,
952
- ref,
953
- ...rootProps
954
- } = props;
955
- const gapValue = typeof gap === "object" ? gap : { column: gap, row: gap };
956
- const columnGap = gapValue.column;
957
- const rowGap = gapValue.row;
958
- const containerRef = React3.useRef(null);
959
- const composedRef = useComposedRefs(ref, containerRef);
960
- const size = useDebouncedWindowSize({
961
- containerRef,
962
- defaultWidth,
963
- defaultHeight
964
- });
965
- const [containerPosition, setContainerPosition] = React3.useState({ offset: 0, width: 0 });
966
- useIsomorphicLayoutEffect(() => {
967
- if (!containerRef.current) return;
968
- let offset = 0;
969
- let container = containerRef.current;
970
- do {
971
- offset += container.offsetTop ?? 0;
972
- container = container.offsetParent;
973
- } while (container);
974
- if (offset !== containerPosition.offset || containerRef.current.offsetWidth !== containerPosition.width) {
975
- setContainerPosition({
976
- offset,
977
- width: containerRef.current.offsetWidth
978
- });
979
- }
980
- }, [containerPosition, size]);
981
- const positioner = useMasonryPositioner({
982
- width: containerPosition.width ?? size.width,
983
- columnWidth,
984
- columnGap,
985
- rowGap,
986
- columnCount,
987
- maxColumnCount,
988
- linear
989
- });
990
- const resizeObserver = useResizeObserver(positioner);
991
- const { scrollTop, isScrolling } = useScroller({
992
- offset: containerPosition.offset,
993
- fps: scrollFps
994
- });
995
- const itemMap = React3.useRef(/* @__PURE__ */ new WeakMap()).current;
996
- const onItemRegister = React3.useCallback(
997
- (index) => (node) => {
998
- if (!node) return;
999
- itemMap.set(node, index);
1000
- if (resizeObserver) {
1001
- resizeObserver.observe(node);
1002
- }
1003
- if (positioner.get(index) === void 0) {
1004
- positioner.set(index, node.offsetHeight);
1005
- }
1006
- },
1007
- [itemMap, positioner, resizeObserver]
1008
- );
1009
- const contextValue = React3.useMemo(
1010
- () => ({
1011
- positioner,
1012
- resizeObserver,
1013
- columnWidth: positioner.columnWidth,
1014
- onItemRegister,
1015
- scrollTop,
1016
- windowHeight: size.height,
1017
- itemHeight,
1018
- overscan,
1019
- fallback,
1020
- isScrolling
1021
- }),
1022
- [positioner, resizeObserver, onItemRegister, scrollTop, size.height, itemHeight, overscan, fallback, isScrolling]
1023
- );
1024
- const RootPrimitive = asChild ? Slot : "div";
1025
- return /* @__PURE__ */ jsx(MasonryContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
1026
- RootPrimitive,
1027
- {
1028
- ...rootProps,
1029
- "data-slot": "masonry",
1030
- ref: composedRef,
1031
- style: {
1032
- position: "relative",
1033
- width: "100%",
1034
- height: "100%",
1035
- ...style
1036
- },
1037
- children: /* @__PURE__ */ jsx(MasonryViewport, { children })
1038
- }
1039
- ) });
1040
- }
1041
-
1042
- export { Masonry, MasonryItem };