asterui 0.12.13 → 0.12.14

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 (177) hide show
  1. package/dist/components/Button.d.ts +4 -0
  2. package/dist/components/Drawer.d.ts +47 -6
  3. package/dist/components/Dropdown.d.ts +65 -9
  4. package/dist/components/Input.d.ts +15 -1
  5. package/dist/components/Modal.d.ts +5 -1
  6. package/dist/components/Navbar.d.ts +15 -1
  7. package/dist/components/SidebarDrawer.d.ts +21 -0
  8. package/dist/components/Tabs.d.ts +30 -4
  9. package/dist/index.d.ts +6 -4
  10. package/dist/index.js +169 -167
  11. package/dist/index.js.map +1 -1
  12. package/dist/index100.js +44 -11
  13. package/dist/index100.js.map +1 -1
  14. package/dist/index101.js +10 -12
  15. package/dist/index101.js.map +1 -1
  16. package/dist/index102.js +14 -7
  17. package/dist/index102.js.map +1 -1
  18. package/dist/index103.js +7 -12
  19. package/dist/index103.js.map +1 -1
  20. package/dist/index104.js +11 -29
  21. package/dist/index104.js.map +1 -1
  22. package/dist/index105.js +29 -16
  23. package/dist/index105.js.map +1 -1
  24. package/dist/index106.js +21 -0
  25. package/dist/index106.js.map +1 -0
  26. package/dist/index21.js +1 -1
  27. package/dist/index26.js +171 -40
  28. package/dist/index26.js.map +1 -1
  29. package/dist/index27.js +41 -17
  30. package/dist/index27.js.map +1 -1
  31. package/dist/index28.js +17 -33
  32. package/dist/index28.js.map +1 -1
  33. package/dist/index29.js +33 -52
  34. package/dist/index29.js.map +1 -1
  35. package/dist/index30.js +50 -61
  36. package/dist/index30.js.map +1 -1
  37. package/dist/index31.js +60 -181
  38. package/dist/index31.js.map +1 -1
  39. package/dist/index32.js +184 -18
  40. package/dist/index32.js.map +1 -1
  41. package/dist/index33.js +15 -217
  42. package/dist/index33.js.map +1 -1
  43. package/dist/index34.js +216 -1083
  44. package/dist/index34.js.map +1 -1
  45. package/dist/index35.js +1086 -16
  46. package/dist/index35.js.map +1 -1
  47. package/dist/index36.js +16 -121
  48. package/dist/index36.js.map +1 -1
  49. package/dist/index37.js +119 -37
  50. package/dist/index37.js.map +1 -1
  51. package/dist/index38.js +34 -208
  52. package/dist/index38.js.map +1 -1
  53. package/dist/index39.js +390 -89
  54. package/dist/index39.js.map +1 -1
  55. package/dist/index40.js +93 -158
  56. package/dist/index40.js.map +1 -1
  57. package/dist/index41.js +211 -135
  58. package/dist/index41.js.map +1 -1
  59. package/dist/index42.js +146 -15
  60. package/dist/index42.js.map +1 -1
  61. package/dist/index43.js +15 -17
  62. package/dist/index43.js.map +1 -1
  63. package/dist/index44.js +17 -21
  64. package/dist/index44.js.map +1 -1
  65. package/dist/index45.js +18 -134
  66. package/dist/index45.js.map +1 -1
  67. package/dist/index46.js +134 -10
  68. package/dist/index46.js.map +1 -1
  69. package/dist/index47.js +13 -35
  70. package/dist/index47.js.map +1 -1
  71. package/dist/index48.js +35 -34
  72. package/dist/index48.js.map +1 -1
  73. package/dist/index49.js +34 -81
  74. package/dist/index49.js.map +1 -1
  75. package/dist/index50.js +71 -166
  76. package/dist/index50.js.map +1 -1
  77. package/dist/index51.js +167 -144
  78. package/dist/index51.js.map +1 -1
  79. package/dist/index52.js +152 -11
  80. package/dist/index52.js.map +1 -1
  81. package/dist/index53.js +10 -20
  82. package/dist/index53.js.map +1 -1
  83. package/dist/index54.js +22 -14
  84. package/dist/index54.js.map +1 -1
  85. package/dist/index55.js +14 -7
  86. package/dist/index55.js.map +1 -1
  87. package/dist/index56.js +6 -310
  88. package/dist/index56.js.map +1 -1
  89. package/dist/index57.js +334 -17
  90. package/dist/index57.js.map +1 -1
  91. package/dist/index58.js +47 -122
  92. package/dist/index58.js.map +1 -1
  93. package/dist/index59.js +120 -108
  94. package/dist/index59.js.map +1 -1
  95. package/dist/index60.js +107 -167
  96. package/dist/index60.js.map +1 -1
  97. package/dist/index61.js +167 -29
  98. package/dist/index61.js.map +1 -1
  99. package/dist/index62.js +30 -120
  100. package/dist/index62.js.map +1 -1
  101. package/dist/index63.js +116 -80
  102. package/dist/index63.js.map +1 -1
  103. package/dist/index64.js +85 -19
  104. package/dist/index64.js.map +1 -1
  105. package/dist/index65.js +19 -73
  106. package/dist/index65.js.map +1 -1
  107. package/dist/index66.js +71 -54
  108. package/dist/index66.js.map +1 -1
  109. package/dist/index67.js +56 -44
  110. package/dist/index67.js.map +1 -1
  111. package/dist/index68.js +42 -49
  112. package/dist/index68.js.map +1 -1
  113. package/dist/index69.js +52 -62
  114. package/dist/index69.js.map +1 -1
  115. package/dist/index70.js +56 -101
  116. package/dist/index70.js.map +1 -1
  117. package/dist/index71.js +107 -41
  118. package/dist/index71.js.map +1 -1
  119. package/dist/index72.js +41 -68
  120. package/dist/index72.js.map +1 -1
  121. package/dist/index73.js +66 -19
  122. package/dist/index73.js.map +1 -1
  123. package/dist/index74.js +18 -55
  124. package/dist/index74.js.map +1 -1
  125. package/dist/index75.js +55 -251
  126. package/dist/index75.js.map +1 -1
  127. package/dist/index76.js +254 -22
  128. package/dist/index76.js.map +1 -1
  129. package/dist/index77.js +22 -31
  130. package/dist/index77.js.map +1 -1
  131. package/dist/index78.js +30 -93
  132. package/dist/index78.js.map +1 -1
  133. package/dist/index79.js +89 -324
  134. package/dist/index79.js.map +1 -1
  135. package/dist/index80.js +323 -50
  136. package/dist/index80.js.map +1 -1
  137. package/dist/index81.js +79 -39
  138. package/dist/index81.js.map +1 -1
  139. package/dist/index82.js +40 -23
  140. package/dist/index82.js.map +1 -1
  141. package/dist/index83.js +21 -93
  142. package/dist/index83.js.map +1 -1
  143. package/dist/index84.js +87 -148
  144. package/dist/index84.js.map +1 -1
  145. package/dist/index85.js +147 -152
  146. package/dist/index85.js.map +1 -1
  147. package/dist/index86.js +159 -63
  148. package/dist/index86.js.map +1 -1
  149. package/dist/index87.js +65 -35
  150. package/dist/index87.js.map +1 -1
  151. package/dist/index88.js +35 -234
  152. package/dist/index88.js.map +1 -1
  153. package/dist/index89.js +231 -31
  154. package/dist/index89.js.map +1 -1
  155. package/dist/index9.js +69 -44
  156. package/dist/index9.js.map +1 -1
  157. package/dist/index90.js +34 -210
  158. package/dist/index90.js.map +1 -1
  159. package/dist/index91.js +195 -198
  160. package/dist/index91.js.map +1 -1
  161. package/dist/index92.js +159 -241
  162. package/dist/index92.js.map +1 -1
  163. package/dist/index93.js +283 -166
  164. package/dist/index93.js.map +1 -1
  165. package/dist/index94.js +173 -253
  166. package/dist/index94.js.map +1 -1
  167. package/dist/index95.js +258 -14
  168. package/dist/index95.js.map +1 -1
  169. package/dist/index96.js +12 -31
  170. package/dist/index96.js.map +1 -1
  171. package/dist/index97.js +32 -5
  172. package/dist/index97.js.map +1 -1
  173. package/dist/index98.js +5 -13
  174. package/dist/index98.js.map +1 -1
  175. package/dist/index99.js +11 -43
  176. package/dist/index99.js.map +1 -1
  177. package/package.json +1 -1
package/dist/index50.js CHANGED
@@ -1,179 +1,84 @@
1
- import { jsx as a, jsxs as K } from "react/jsx-runtime";
2
- import { useState as f, useRef as $, useCallback as A, useEffect as C } from "react";
3
- import { createPortal as oe } from "react-dom";
4
- const fe = ({
5
- value: p,
6
- defaultValue: q = "",
7
- onChange: E,
8
- onSelect: U,
9
- onSearch: W,
10
- options: R = [],
11
- loading: X = !1,
12
- prefix: k = "@",
13
- split: v = " ",
14
- placeholder: Y,
15
- disabled: G = !1,
16
- readOnly: J = !1,
17
- rows: V = 3,
18
- autoSize: o = !1,
19
- notFoundContent: Q = "No matches found",
20
- filterOption: x = !0,
21
- className: Z = "",
22
- dropdownClassName: _ = "",
23
- ...z
1
+ import { jsx as H } from "react/jsx-runtime";
2
+ import I, { useRef as R, useState as b, useCallback as K, useLayoutEffect as A } from "react";
3
+ const d = {
4
+ sm: 640,
5
+ md: 768,
6
+ lg: 1024,
7
+ xl: 1280,
8
+ "2xl": 1536
9
+ };
10
+ function L(t, e) {
11
+ return typeof t == "number" ? t : t ? t["2xl"] !== void 0 && e >= d["2xl"] ? t["2xl"] : t.xl !== void 0 && e >= d.xl ? t.xl : t.lg !== void 0 && e >= d.lg ? t.lg : t.md !== void 0 && e >= d.md ? t.md : t.sm !== void 0 && e >= d.sm ? t.sm : t.xs !== void 0 ? t.xs : 3 : 3;
12
+ }
13
+ const O = ({
14
+ children: t,
15
+ columns: e = 3,
16
+ gap: r = 16,
17
+ className: z = "",
18
+ style: M,
19
+ ...P
24
20
  }) => {
25
- const [ee, T] = f(q), h = p !== void 0 ? p : ee, [u, m] = f(!1), [I, N] = f(null), [D, M] = f(""), [d, y] = f(0), [g, H] = f(null), [j, te] = f({ top: 0, left: 0 }), l = $(null), b = $(null), B = $(null), ne = Array.isArray(k) ? k : [k], c = A(() => {
26
- if (!x) return R;
27
- const e = typeof x == "function" ? x : (t, n) => (n.label || n.value).toLowerCase().includes(t.toLowerCase());
28
- return R.filter((t) => e(D, t));
29
- }, [R, D, x])(), L = A(() => {
30
- const e = l.current;
31
- if (!e || !o) return;
32
- e.style.height = "auto";
33
- const t = e.scrollHeight;
34
- if (typeof o == "object") {
35
- const n = parseInt(getComputedStyle(e).lineHeight) || 20, r = o.minRows ? o.minRows * n : 0, s = o.maxRows ? o.maxRows * n : 1 / 0;
36
- e.style.height = `${Math.min(Math.max(t, r), s)}px`;
37
- } else
38
- e.style.height = `${t}px`;
39
- }, [o]);
40
- C(() => {
41
- L();
42
- }, [h, L]);
43
- const O = A(() => {
44
- const e = l.current, t = B.current;
45
- if (!e || !t || g === null) return;
46
- const n = h.substring(0, g);
47
- t.textContent = n;
48
- const r = e.getBoundingClientRect(), s = t.getBoundingClientRect(), w = parseInt(getComputedStyle(e).lineHeight) || 20;
49
- te({
50
- top: r.top + window.scrollY + w + 4,
51
- left: r.left + window.scrollX + Math.min(s.width % r.width, r.width - 200)
52
- });
53
- }, [h, g]);
54
- C(() => {
55
- u && O();
56
- }, [u, O, D]);
57
- const re = (e) => {
58
- const t = e.target.value, n = e.target.selectionStart;
59
- p === void 0 && T(t), E?.(t), se(t, n);
60
- }, se = (e, t) => {
61
- let n = null, r = null;
62
- for (const s of ne) {
63
- const i = e.substring(0, t).lastIndexOf(s);
64
- if (i !== -1) {
65
- const S = i > 0 ? e[i - 1] : v;
66
- if (S === v || S === `
67
- ` || i === 0) {
68
- const F = e.substring(i + s.length, t);
69
- if (!F.includes(v) && !F.includes(`
70
- `)) {
71
- n = s, r = i;
72
- break;
73
- }
74
- }
75
- }
76
- }
77
- if (n !== null && r !== null) {
78
- const s = e.substring(r + n.length, t);
79
- N(n), M(s), H(r), m(!0), y(0), W?.(s, n);
80
- } else
81
- m(!1), N(null), M(""), H(null);
82
- }, P = (e) => {
83
- if (e.disabled || g === null || I === null) return;
84
- const t = l.current;
85
- if (!t) return;
86
- const n = h.substring(0, g), r = h.substring(t.selectionStart), s = `${I}${e.value}${v}`, w = n + s + r;
87
- p === void 0 && T(w), E?.(w), U?.(e, I), m(!1), N(null), M(""), H(null), setTimeout(() => {
88
- const i = n.length + s.length;
89
- t.focus(), t.setSelectionRange(i, i);
90
- }, 0);
91
- }, ae = (e) => {
92
- if (u)
93
- switch (e.key) {
94
- case "ArrowDown":
95
- e.preventDefault(), y((t) => (t + 1) % Math.max(c.length, 1));
96
- break;
97
- case "ArrowUp":
98
- e.preventDefault(), y((t) => (t - 1 + c.length) % Math.max(c.length, 1));
99
- break;
100
- case "Enter":
101
- c[d] && (e.preventDefault(), P(c[d]));
102
- break;
103
- case "Escape":
104
- e.preventDefault(), m(!1);
105
- break;
106
- case "Tab":
107
- c[d] && (e.preventDefault(), P(c[d]));
108
- break;
109
- }
110
- };
111
- C(() => {
112
- const e = (t) => {
113
- b.current && !b.current.contains(t.target) && l.current && !l.current.contains(t.target) && m(!1);
21
+ const u = R(null), [l, T] = b([]), [y, N] = b(0), w = R([]), c = I.Children.toArray(t), s = K(() => {
22
+ const i = u.current;
23
+ if (!i || c.length === 0) return;
24
+ const n = i.offsetWidth, m = typeof window < "u" ? window.innerWidth : n, a = L(e, m), j = (n - r * (a - 1)) / a, o = new Array(a).fill(0), W = [];
25
+ c.forEach((_, x) => {
26
+ const C = w.current[x];
27
+ if (!C) return;
28
+ let h = 0, E = o[0];
29
+ for (let f = 1; f < a; f++)
30
+ o[f] < E && (E = o[f], h = f);
31
+ const k = h * (j + r), B = o[h];
32
+ W[x] = { left: k, top: B };
33
+ const F = C.offsetHeight;
34
+ o[h] += F + r;
35
+ }), T(W), N(Math.max(...o) - r);
36
+ }, [t, e, r, c.length]);
37
+ A(() => {
38
+ s();
39
+ const i = () => {
40
+ s();
114
41
  };
115
- return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
116
- }, []), C(() => {
117
- u && b.current && b.current.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
118
- }, [d, u]);
119
- const le = u && /* @__PURE__ */ a(
42
+ return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
43
+ }, [s]), A(() => {
44
+ const i = setTimeout(s, 0);
45
+ return () => clearTimeout(i);
46
+ }, [t, s]);
47
+ const v = u.current?.offsetWidth ?? 0, S = typeof window < "u" ? window.innerWidth : v, g = L(e, S), p = v > 0 ? (v - r * (g - 1)) / g : 0;
48
+ return /* @__PURE__ */ H(
120
49
  "div",
121
50
  {
122
- ref: b,
123
- className: `fixed z-50 bg-base-100 border border-base-300 rounded-lg shadow-lg
124
- min-w-48 max-h-60 overflow-auto ${_}`,
51
+ ref: u,
52
+ className: z,
125
53
  style: {
126
- top: j.top,
127
- left: j.left
54
+ position: "relative",
55
+ height: y > 0 ? y : void 0,
56
+ ...M
128
57
  },
129
- children: X ? /* @__PURE__ */ a("div", { className: "p-3 text-center text-base-content/60", children: /* @__PURE__ */ a("span", { className: "loading loading-spinner loading-sm" }) }) : c.length === 0 ? /* @__PURE__ */ a("div", { className: "p-3 text-center text-base-content/60 text-sm", children: Q }) : /* @__PURE__ */ a("ul", { className: "menu menu-sm p-1", children: c.map((e, t) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ K(
130
- "button",
58
+ ...P,
59
+ children: c.map((i, n) => /* @__PURE__ */ H(
60
+ "div",
131
61
  {
132
- type: "button",
133
- "data-active": t === d,
134
- className: `flex items-center gap-2 ${t === d ? "active" : ""} ${e.disabled ? "disabled opacity-50 cursor-not-allowed" : ""}`,
135
- onClick: () => P(e),
136
- onMouseEnter: () => y(t),
137
- children: [
138
- e.avatar && /* @__PURE__ */ a("div", { className: "avatar", children: /* @__PURE__ */ a("div", { className: "w-6 h-6 rounded-full", children: /* @__PURE__ */ a("img", { src: e.avatar, alt: "" }) }) }),
139
- /* @__PURE__ */ a("span", { children: e.label || e.value })
140
- ]
141
- }
142
- ) }, e.value)) })
62
+ ref: (m) => {
63
+ w.current[n] = m;
64
+ },
65
+ style: {
66
+ position: l.length > 0 ? "absolute" : "relative",
67
+ left: l[n]?.left ?? 0,
68
+ top: l[n]?.top ?? 0,
69
+ width: p > 0 ? p : "100%",
70
+ visibility: l.length > 0 ? "visible" : "hidden"
71
+ },
72
+ children: i
73
+ },
74
+ n
75
+ ))
143
76
  }
144
77
  );
145
- return /* @__PURE__ */ K("div", { className: `relative ${Z}`, "data-state": u ? "open" : "closed", ...z, children: [
146
- /* @__PURE__ */ a(
147
- "div",
148
- {
149
- ref: B,
150
- className: "invisible absolute whitespace-pre-wrap break-words",
151
- style: {
152
- font: l.current ? getComputedStyle(l.current).font : void 0,
153
- width: l.current?.clientWidth,
154
- padding: l.current ? getComputedStyle(l.current).padding : void 0
155
- },
156
- "aria-hidden": "true"
157
- }
158
- ),
159
- /* @__PURE__ */ a(
160
- "textarea",
161
- {
162
- ref: l,
163
- value: h,
164
- onChange: re,
165
- onKeyDown: ae,
166
- placeholder: Y,
167
- disabled: G,
168
- readOnly: J,
169
- rows: typeof o == "object" ? o.minRows || V : o ? 1 : V,
170
- className: "textarea textarea-bordered w-full resize-none"
171
- }
172
- ),
173
- oe(le, document.body)
174
- ] });
175
78
  };
79
+ O.displayName = "Masonry";
176
80
  export {
177
- fe as Mention
81
+ O as Masonry,
82
+ O as default
178
83
  };
179
84
  //# sourceMappingURL=index50.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index50.js","sources":["../src/components/Mention.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport interface MentionOption {\n value: string\n label?: string\n avatar?: string\n disabled?: boolean\n}\n\nexport interface MentionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSelect' | 'defaultValue' | 'prefix'> {\n value?: string\n defaultValue?: string\n onChange?: (value: string) => void\n onSelect?: (option: MentionOption, prefix: string) => void\n onSearch?: (text: string, prefix: string) => void\n options?: MentionOption[]\n loading?: boolean\n prefix?: string | string[]\n split?: string\n placeholder?: string\n disabled?: boolean\n readOnly?: boolean\n rows?: number\n autoSize?: boolean | { minRows?: number; maxRows?: number }\n notFoundContent?: React.ReactNode\n filterOption?: boolean | ((input: string, option: MentionOption) => boolean)\n dropdownClassName?: string\n}\n\nexport const Mention: React.FC<MentionProps> = ({\n value,\n defaultValue = '',\n onChange,\n onSelect,\n onSearch,\n options = [],\n loading = false,\n prefix = '@',\n split = ' ',\n placeholder,\n disabled = false,\n readOnly = false,\n rows = 3,\n autoSize = false,\n notFoundContent = 'No matches found',\n filterOption = true,\n className = '',\n dropdownClassName = '',\n ...rest\n}) => {\n const [internalValue, setInternalValue] = useState(defaultValue)\n const currentValue = value !== undefined ? value : internalValue\n\n const [isOpen, setIsOpen] = useState(false)\n const [activePrefix, setActivePrefix] = useState<string | null>(null)\n const [searchText, setSearchText] = useState('')\n const [activeIndex, setActiveIndex] = useState(0)\n const [mentionStart, setMentionStart] = useState<number | null>(null)\n const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 })\n\n const textareaRef = useRef<HTMLTextAreaElement>(null)\n const dropdownRef = useRef<HTMLDivElement>(null)\n const measureRef = useRef<HTMLDivElement>(null)\n\n const prefixes = Array.isArray(prefix) ? prefix : [prefix]\n\n // Filter options based on search text\n const filteredOptions = useCallback(() => {\n if (!filterOption) return options\n\n const filterFn =\n typeof filterOption === 'function'\n ? filterOption\n : (input: string, option: MentionOption) => {\n const label = option.label || option.value\n return label.toLowerCase().includes(input.toLowerCase())\n }\n\n return options.filter((opt) => filterFn(searchText, opt))\n }, [options, searchText, filterOption])\n\n const filtered = filteredOptions()\n\n // Update textarea height for autoSize\n const updateHeight = useCallback(() => {\n const textarea = textareaRef.current\n if (!textarea || !autoSize) return\n\n textarea.style.height = 'auto'\n const scrollHeight = textarea.scrollHeight\n\n if (typeof autoSize === 'object') {\n const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20\n const minHeight = autoSize.minRows ? autoSize.minRows * lineHeight : 0\n const maxHeight = autoSize.maxRows ? autoSize.maxRows * lineHeight : Infinity\n\n textarea.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`\n } else {\n textarea.style.height = `${scrollHeight}px`\n }\n }, [autoSize])\n\n useEffect(() => {\n updateHeight()\n }, [currentValue, updateHeight])\n\n // Calculate dropdown position\n const updateDropdownPosition = useCallback(() => {\n const textarea = textareaRef.current\n const measure = measureRef.current\n if (!textarea || !measure || mentionStart === null) return\n\n // Get text before cursor to measure position\n const textBeforeCursor = currentValue.substring(0, mentionStart)\n\n // Create a temporary element to measure text position\n measure.textContent = textBeforeCursor\n\n const textareaRect = textarea.getBoundingClientRect()\n const measureRect = measure.getBoundingClientRect()\n\n // Calculate position relative to viewport\n const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20\n\n setDropdownPosition({\n top: textareaRect.top + window.scrollY + lineHeight + 4,\n left: textareaRect.left + window.scrollX + Math.min(measureRect.width % textareaRect.width, textareaRect.width - 200),\n })\n }, [currentValue, mentionStart])\n\n useEffect(() => {\n if (isOpen) {\n updateDropdownPosition()\n }\n }, [isOpen, updateDropdownPosition, searchText])\n\n // Handle text change\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.target.value\n const cursorPos = e.target.selectionStart\n\n if (value === undefined) {\n setInternalValue(newValue)\n }\n onChange?.(newValue)\n\n // Check if we should open the mention dropdown\n checkForMention(newValue, cursorPos)\n }\n\n const checkForMention = (text: string, cursorPos: number) => {\n // Look backwards from cursor for a prefix\n let foundPrefix: string | null = null\n let foundStart: number | null = null\n\n for (const p of prefixes) {\n // Find the last occurrence of prefix before cursor\n const beforeCursor = text.substring(0, cursorPos)\n const lastPrefixIndex = beforeCursor.lastIndexOf(p)\n\n if (lastPrefixIndex !== -1) {\n // Check if prefix is at start or preceded by whitespace/split\n const charBefore = lastPrefixIndex > 0 ? text[lastPrefixIndex - 1] : split\n if (charBefore === split || charBefore === '\\n' || lastPrefixIndex === 0) {\n // Check if there's no space between prefix and cursor\n const textAfterPrefix = text.substring(lastPrefixIndex + p.length, cursorPos)\n if (!textAfterPrefix.includes(split) && !textAfterPrefix.includes('\\n')) {\n foundPrefix = p\n foundStart = lastPrefixIndex\n break\n }\n }\n }\n }\n\n if (foundPrefix !== null && foundStart !== null) {\n const search = text.substring(foundStart + foundPrefix.length, cursorPos)\n setActivePrefix(foundPrefix)\n setSearchText(search)\n setMentionStart(foundStart)\n setIsOpen(true)\n setActiveIndex(0)\n onSearch?.(search, foundPrefix)\n } else {\n setIsOpen(false)\n setActivePrefix(null)\n setSearchText('')\n setMentionStart(null)\n }\n }\n\n // Handle option selection\n const selectOption = (option: MentionOption) => {\n if (option.disabled || mentionStart === null || activePrefix === null) return\n\n const textarea = textareaRef.current\n if (!textarea) return\n\n const beforeMention = currentValue.substring(0, mentionStart)\n const afterCursor = currentValue.substring(textarea.selectionStart)\n\n const mentionText = `${activePrefix}${option.value}${split}`\n const newValue = beforeMention + mentionText + afterCursor\n\n if (value === undefined) {\n setInternalValue(newValue)\n }\n onChange?.(newValue)\n onSelect?.(option, activePrefix)\n\n setIsOpen(false)\n setActivePrefix(null)\n setSearchText('')\n setMentionStart(null)\n\n // Set cursor position after mention\n setTimeout(() => {\n const newCursorPos = beforeMention.length + mentionText.length\n textarea.focus()\n textarea.setSelectionRange(newCursorPos, newCursorPos)\n }, 0)\n }\n\n // Handle keyboard navigation\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (!isOpen) return\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault()\n setActiveIndex((prev) => (prev + 1) % Math.max(filtered.length, 1))\n break\n case 'ArrowUp':\n e.preventDefault()\n setActiveIndex((prev) => (prev - 1 + filtered.length) % Math.max(filtered.length, 1))\n break\n case 'Enter':\n if (filtered[activeIndex]) {\n e.preventDefault()\n selectOption(filtered[activeIndex])\n }\n break\n case 'Escape':\n e.preventDefault()\n setIsOpen(false)\n break\n case 'Tab':\n if (filtered[activeIndex]) {\n e.preventDefault()\n selectOption(filtered[activeIndex])\n }\n break\n }\n }\n\n // Close dropdown on outside click\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (\n dropdownRef.current &&\n !dropdownRef.current.contains(e.target as Node) &&\n textareaRef.current &&\n !textareaRef.current.contains(e.target as Node)\n ) {\n setIsOpen(false)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }, [])\n\n // Scroll active item into view\n useEffect(() => {\n if (isOpen && dropdownRef.current) {\n const activeItem = dropdownRef.current.querySelector('[data-active=\"true\"]')\n activeItem?.scrollIntoView({ block: 'nearest' })\n }\n }, [activeIndex, isOpen])\n\n const dropdown = isOpen && (\n <div\n ref={dropdownRef}\n className={`fixed z-50 bg-base-100 border border-base-300 rounded-lg shadow-lg\n min-w-48 max-h-60 overflow-auto ${dropdownClassName}`}\n style={{\n top: dropdownPosition.top,\n left: dropdownPosition.left,\n }}\n >\n {loading ? (\n <div className=\"p-3 text-center text-base-content/60\">\n <span className=\"loading loading-spinner loading-sm\"></span>\n </div>\n ) : filtered.length === 0 ? (\n <div className=\"p-3 text-center text-base-content/60 text-sm\">\n {notFoundContent}\n </div>\n ) : (\n <ul className=\"menu menu-sm p-1\">\n {filtered.map((option, index) => (\n <li key={option.value}>\n <button\n type=\"button\"\n data-active={index === activeIndex}\n className={`flex items-center gap-2 ${\n index === activeIndex ? 'active' : ''\n } ${option.disabled ? 'disabled opacity-50 cursor-not-allowed' : ''}`}\n onClick={() => selectOption(option)}\n onMouseEnter={() => setActiveIndex(index)}\n >\n {option.avatar && (\n <div className=\"avatar\">\n <div className=\"w-6 h-6 rounded-full\">\n <img src={option.avatar} alt=\"\" />\n </div>\n </div>\n )}\n <span>{option.label || option.value}</span>\n </button>\n </li>\n ))}\n </ul>\n )}\n </div>\n )\n\n return (\n <div className={`relative ${className}`} data-state={isOpen ? 'open' : 'closed'} {...rest}>\n {/* Hidden measure element for cursor position */}\n <div\n ref={measureRef}\n className=\"invisible absolute whitespace-pre-wrap break-words\"\n style={{\n font: textareaRef.current ? getComputedStyle(textareaRef.current).font : undefined,\n width: textareaRef.current?.clientWidth,\n padding: textareaRef.current ? getComputedStyle(textareaRef.current).padding : undefined,\n }}\n aria-hidden=\"true\"\n />\n\n <textarea\n ref={textareaRef}\n value={currentValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n rows={typeof autoSize === 'object' ? autoSize.minRows || rows : autoSize ? 1 : rows}\n className=\"textarea textarea-bordered w-full resize-none\"\n />\n\n {createPortal(dropdown, document.body)}\n </div>\n )\n}\n"],"names":["Mention","value","defaultValue","onChange","onSelect","onSearch","options","loading","prefix","split","placeholder","disabled","readOnly","rows","autoSize","notFoundContent","filterOption","className","dropdownClassName","rest","internalValue","setInternalValue","useState","currentValue","isOpen","setIsOpen","activePrefix","setActivePrefix","searchText","setSearchText","activeIndex","setActiveIndex","mentionStart","setMentionStart","dropdownPosition","setDropdownPosition","textareaRef","useRef","dropdownRef","measureRef","prefixes","filtered","useCallback","filterFn","input","option","opt","updateHeight","textarea","scrollHeight","lineHeight","minHeight","maxHeight","useEffect","updateDropdownPosition","measure","textBeforeCursor","textareaRect","measureRect","handleChange","newValue","cursorPos","checkForMention","text","foundPrefix","foundStart","p","lastPrefixIndex","charBefore","textAfterPrefix","search","selectOption","beforeMention","afterCursor","mentionText","newCursorPos","handleKeyDown","prev","handleClickOutside","e","dropdown","jsx","index","jsxs","createPortal"],"mappings":"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"}
1
+ {"version":3,"file":"index50.js","sources":["../src/components/Masonry.tsx"],"sourcesContent":["import React, { useRef, useState, useLayoutEffect, useCallback } from 'react'\n\nexport interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode\n columns?:\n | number\n | {\n xs?: number\n sm?: number\n md?: number\n lg?: number\n xl?: number\n '2xl'?: number\n }\n gap?: number\n}\n\n// Tailwind breakpoints in pixels\nconst BREAKPOINTS = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n '2xl': 1536,\n}\n\nfunction getColumnsForWidth(\n columns: MasonryProps['columns'],\n width: number\n): number {\n if (typeof columns === 'number') {\n return columns\n }\n\n if (!columns) return 3\n\n // Find the appropriate column count for current width\n // Start from largest breakpoint and work down\n if (columns['2xl'] !== undefined && width >= BREAKPOINTS['2xl']) {\n return columns['2xl']\n }\n if (columns.xl !== undefined && width >= BREAKPOINTS.xl) {\n return columns.xl\n }\n if (columns.lg !== undefined && width >= BREAKPOINTS.lg) {\n return columns.lg\n }\n if (columns.md !== undefined && width >= BREAKPOINTS.md) {\n return columns.md\n }\n if (columns.sm !== undefined && width >= BREAKPOINTS.sm) {\n return columns.sm\n }\n if (columns.xs !== undefined) {\n return columns.xs\n }\n\n // Default fallback\n return 3\n}\n\nexport const Masonry: React.FC<MasonryProps> = ({\n children,\n columns = 3,\n gap = 16,\n className = '',\n style,\n ...rest\n}) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const [positions, setPositions] = useState<\n Array<{ left: number; top: number }>\n >([])\n const [containerHeight, setContainerHeight] = useState(0)\n const itemRefs = useRef<(HTMLDivElement | null)[]>([])\n\n const childArray = React.Children.toArray(children)\n\n const calculateLayout = useCallback(() => {\n const container = containerRef.current\n if (!container || childArray.length === 0) return\n\n const containerWidth = container.offsetWidth\n // Use viewport width for responsive breakpoints (matches Tailwind behavior)\n const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : containerWidth\n const numColumns = getColumnsForWidth(columns, viewportWidth)\n const columnWidth = (containerWidth - gap * (numColumns - 1)) / numColumns\n\n // Track height of each column\n const columnHeights = new Array(numColumns).fill(0)\n const newPositions: Array<{ left: number; top: number }> = []\n\n // Place each item in the shortest column\n childArray.forEach((_, index) => {\n const itemEl = itemRefs.current[index]\n if (!itemEl) return\n\n // Find shortest column\n let shortestColumn = 0\n let minHeight = columnHeights[0]\n for (let i = 1; i < numColumns; i++) {\n if (columnHeights[i] < minHeight) {\n minHeight = columnHeights[i]\n shortestColumn = i\n }\n }\n\n // Calculate position\n const left = shortestColumn * (columnWidth + gap)\n const top = columnHeights[shortestColumn]\n\n newPositions[index] = { left, top }\n\n // Update column height\n const itemHeight = itemEl.offsetHeight\n columnHeights[shortestColumn] += itemHeight + gap\n })\n\n setPositions(newPositions)\n setContainerHeight(Math.max(...columnHeights) - gap)\n }, [children, columns, gap, childArray.length])\n\n // Calculate layout after render and on resize\n useLayoutEffect(() => {\n calculateLayout()\n\n const handleResize = () => {\n calculateLayout()\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [calculateLayout])\n\n // Recalculate when children change\n useLayoutEffect(() => {\n // Small delay to ensure refs are populated\n const timer = setTimeout(calculateLayout, 0)\n return () => clearTimeout(timer)\n }, [children, calculateLayout])\n\n const containerWidth = containerRef.current?.offsetWidth ?? 0\n const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : containerWidth\n const numColumns = getColumnsForWidth(columns, viewportWidth)\n const columnWidth =\n containerWidth > 0\n ? (containerWidth - gap * (numColumns - 1)) / numColumns\n : 0\n\n return (\n <div\n ref={containerRef}\n className={className}\n style={{\n position: 'relative',\n height: containerHeight > 0 ? containerHeight : undefined,\n ...style,\n }}\n {...rest}\n >\n {childArray.map((child, index) => (\n <div\n key={index}\n ref={(el) => {\n itemRefs.current[index] = el\n }}\n style={{\n position: positions.length > 0 ? 'absolute' : 'relative',\n left: positions[index]?.left ?? 0,\n top: positions[index]?.top ?? 0,\n width: columnWidth > 0 ? columnWidth : '100%',\n visibility: positions.length > 0 ? 'visible' : 'hidden',\n }}\n >\n {child}\n </div>\n ))}\n </div>\n )\n}\n\nMasonry.displayName = 'Masonry'\n\nexport default Masonry\n"],"names":["BREAKPOINTS","getColumnsForWidth","columns","width","Masonry","children","gap","className","style","rest","containerRef","useRef","positions","setPositions","useState","containerHeight","setContainerHeight","itemRefs","childArray","React","calculateLayout","useCallback","container","containerWidth","viewportWidth","numColumns","columnWidth","columnHeights","newPositions","index","itemEl","shortestColumn","minHeight","i","left","top","itemHeight","useLayoutEffect","handleResize","timer","jsx","child","el"],"mappings":"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"}