@versaur/react 1.0.15 → 1.0.16

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.
@@ -1,364 +0,0 @@
1
- import { jsxs as N, jsx as p } from "react/jsx-runtime";
2
- import { buttonStyles as M, headingStyles as _, textStyles as $, avatarStyles as I, hrStyles as q, loaderStyles as F, badgeStyles as K, bannerStyles as A, dotStyles as O, kbdStyles as z, tooltipStyles as P } from "@versaur/core/primitive";
3
- import { LoaderIcon as w, UserIcon as U, XIcon as G } from "@versaur/icons";
4
- import { forwardRef as h, useState as X, useRef as x, useEffect as L } from "react";
5
- import { u as T, I as E, B as J, f as Q, c as V } from "./helpers-D23F5WBX.js";
6
- import { c as v } from "./cx-B9vmfsc1.js";
7
- const W = h(
8
- ({
9
- variant: t = "primary",
10
- size: n = "medium",
11
- loading: e = !1,
12
- disabled: o = !1,
13
- pressed: s = !1,
14
- leftIcon: i,
15
- rightIcon: r,
16
- children: a,
17
- type: c = "button",
18
- onClick: l,
19
- className: u,
20
- ...d
21
- }, m) => {
22
- const g = !!i, f = !!r, b = !!a;
23
- let y;
24
- g && f && b ? y = "both-text" : g && b ? y = "left-text" : f && b ? y = "right-text" : g && f ? y = "both" : g ? y = "left" : f && (y = "right");
25
- const C = T({
26
- disabled: o || e,
27
- loading: e,
28
- size: n,
29
- variant: t,
30
- ...y && { iconConfig: y }
31
- }), j = (S) => {
32
- if (o || e) {
33
- S.preventDefault();
34
- return;
35
- }
36
- l == null || l(S);
37
- };
38
- return /* @__PURE__ */ N(
39
- "button",
40
- {
41
- ref: m,
42
- type: c,
43
- className: v(M.button, u),
44
- "aria-pressed": s ? "true" : void 0,
45
- "aria-busy": e ? "true" : void 0,
46
- "aria-disabled": o || e ? "true" : void 0,
47
- ...C,
48
- ...d,
49
- onClick: j,
50
- children: [
51
- e ? /* @__PURE__ */ p(E, { as: w, "aria-label": "Loading", "data-loading-icon": "loader" }) : null,
52
- i,
53
- a,
54
- r
55
- ]
56
- }
57
- );
58
- }
59
- );
60
- W.displayName = "Button";
61
- const Y = h(
62
- ({ as: t = "h2", size: n, weight: e, intent: o = "default", case: s, transform: i, children: r, className: a, ...c }, l) => {
63
- const u = t, d = T({
64
- as: t,
65
- case: s,
66
- intent: o,
67
- size: n,
68
- transform: i,
69
- weight: e
70
- });
71
- return /* @__PURE__ */ p(u, { ref: l, className: v(_.heading, a), ...d, ...c, children: r });
72
- }
73
- );
74
- Y.displayName = "Heading";
75
- const Z = h(
76
- ({ as: t = "p", size: n, weight: e, intent: o = "default", case: s, transform: i, children: r, className: a, ...c }, l) => {
77
- const u = t, d = T({
78
- as: t,
79
- case: s,
80
- intent: o,
81
- size: n,
82
- transform: i,
83
- weight: e
84
- });
85
- return /* @__PURE__ */ p(u, { ref: l, className: v($.text, a), ...d, ...c, children: r });
86
- }
87
- );
88
- Z.displayName = "Text";
89
- const k = h(
90
- ({ variant: t = "primary", size: n = "md", shape: e = "circle", children: o, className: s, ...i }, r) => {
91
- const a = T({ shape: e, size: n, variant: t }), c = o || /* @__PURE__ */ p(E, { as: U });
92
- return /* @__PURE__ */ p("span", { ref: r, className: v(I.avatar, s), role: "img", ...a, ...i, children: c });
93
- }
94
- );
95
- k.displayName = "Avatar";
96
- const R = h(({ src: t, alt: n, onError: e, className: o, ...s }, i) => {
97
- const [r, a] = X(!1);
98
- return r ? null : /* @__PURE__ */ p(
99
- "img",
100
- {
101
- ref: i,
102
- className: v(I["avatar-image"], o),
103
- src: t,
104
- alt: n,
105
- onError: (c) => {
106
- a(!0), e == null || e(c);
107
- },
108
- ...s
109
- }
110
- );
111
- });
112
- R.displayName = "Avatar.Image";
113
- const Te = Object.assign(k, {
114
- Image: R
115
- }), ee = h(
116
- ({ orientation: t, variant: n, size: e, spacing: o, className: s, ...i }, r) => {
117
- const a = T({
118
- orientation: t,
119
- size: e,
120
- spacing: o,
121
- variant: n
122
- });
123
- return /* @__PURE__ */ p(
124
- "hr",
125
- {
126
- ref: r,
127
- className: v(q.hr, s),
128
- role: "separator",
129
- "aria-orientation": t === "vertical" ? "vertical" : void 0,
130
- ...a,
131
- ...i
132
- }
133
- );
134
- }
135
- );
136
- ee.displayName = "Hr";
137
- const te = h(
138
- ({ type: t = "spinner", size: n = "sm", children: e, className: o, ...s }, i) => {
139
- const r = T({
140
- size: n,
141
- type: t
142
- });
143
- return /* @__PURE__ */ N("div", { ref: i, className: v(F.loader, o), ...r, ...s, children: [
144
- t === "spinner" && /* @__PURE__ */ p(E, { as: w, "aria-hidden": "true" }),
145
- e
146
- ] });
147
- }
148
- );
149
- te.displayName = "Loader";
150
- const oe = h(
151
- ({
152
- variant: t = "primary",
153
- size: n = "medium",
154
- shape: e = "rounded",
155
- iconLeft: o,
156
- iconRight: s,
157
- maxWidth: i,
158
- children: r,
159
- style: a,
160
- className: c,
161
- ...l
162
- }, u) => {
163
- const d = !!o, m = !!s, g = !!r;
164
- let f;
165
- d && m && g ? f = "both-text" : d && g ? f = "left-text" : m && g ? f = "right-text" : d && m ? f = "both" : d ? f = "left" : m && (f = "right");
166
- const b = T({
167
- shape: e,
168
- size: n,
169
- variant: t,
170
- ...f && { iconConfig: f }
171
- }), y = {
172
- ...a,
173
- ...i && { "--vers-comp-badge-max-width": i }
174
- };
175
- return /* @__PURE__ */ N("div", { ref: u, className: v(K.badge, c), ...b, ...l, style: y, children: [
176
- o,
177
- r,
178
- s
179
- ] });
180
- }
181
- );
182
- oe.displayName = "Badge";
183
- const ne = h(
184
- ({ variant: t = "info", icon: n, onDismiss: e, children: o, className: s, ...i }, r) => {
185
- const a = T({
186
- variant: t
187
- });
188
- return /* @__PURE__ */ N("div", { ref: r, className: v(A.banner, s), ...a, ...i, children: [
189
- n && /* @__PURE__ */ p("div", { className: A.icon, children: n }),
190
- /* @__PURE__ */ p("div", { className: A.content, children: o }),
191
- e && /* @__PURE__ */ p(J, { as: G, variant: "ghost", size: "small", onClick: e, "aria-label": "Dismiss banner" })
192
- ] });
193
- }
194
- );
195
- ne.displayName = "Banner";
196
- const re = h(
197
- ({ variant: t = "primary", size: n = "medium", className: e, ...o }, s) => {
198
- const i = T({
199
- size: n,
200
- variant: t
201
- });
202
- return /* @__PURE__ */ p("span", { ref: s, className: v(O.dot, e), ...i, ...o });
203
- }
204
- );
205
- re.displayName = "Dot";
206
- const se = h(
207
- ({ variant: t = "filled", size: n = "md", children: e, className: o, ...s }, i) => {
208
- const r = T({ size: n, variant: t });
209
- return /* @__PURE__ */ p("kbd", { ref: i, className: v(z.kbd, o), ...r, ...s, children: e });
210
- }
211
- );
212
- se.displayName = "Kbd";
213
- function ae(...t) {
214
- return (n) => {
215
- t.forEach((e) => {
216
- if (typeof e == "function")
217
- e(n);
218
- else if (e && "current" in e)
219
- try {
220
- e.current = n;
221
- } catch {
222
- }
223
- });
224
- };
225
- }
226
- function ie(t, n, e) {
227
- let o = null;
228
- const s = () => new Promise((c) => {
229
- t.matches(":popover-open") || t.showPopover(), requestAnimationFrame(() => {
230
- const l = t.getBoundingClientRect(), u = { width: l.width, height: l.height }, d = e || V(n.getBoundingClientRect(), u);
231
- c(d);
232
- });
233
- }), i = async () => {
234
- a();
235
- const c = await s();
236
- t.dataset.placement = c;
237
- }, r = (c) => {
238
- o && (clearTimeout(o), o = null), c ? o = setTimeout(() => {
239
- t.matches(":popover-open") && t.hidePopover(), o = null;
240
- }, 100) : t.matches(":popover-open") && t.hidePopover();
241
- }, a = () => {
242
- o && (clearTimeout(o), o = null);
243
- };
244
- return { showTooltip: i, hideTooltip: r, cancelHide: a, cleanup: () => clearTimeout(o ?? void 0) };
245
- }
246
- function ce({ id: t, tooltipRef: n, placement: e, type: o }) {
247
- const s = x(null), i = x(null);
248
- L(() => {
249
- const r = n.current;
250
- if (!r || !t)
251
- return;
252
- const a = Q(r, t);
253
- if (a)
254
- return i.current = a, s.current = ie(r, a, e), () => {
255
- var c;
256
- (c = s.current) == null || c.cleanup(), s.current = null;
257
- };
258
- }, [t, e, n]), L(() => {
259
- if (o !== "hover" || !s.current || !i.current) return;
260
- const r = i.current, a = s.current, c = n.current;
261
- if (!c) return;
262
- const l = () => {
263
- a.showTooltip();
264
- }, u = () => {
265
- a.hideTooltip(!0);
266
- }, d = () => {
267
- a.cancelHide();
268
- }, m = () => {
269
- a.hideTooltip(!0);
270
- };
271
- return r.addEventListener("mouseenter", l), r.addEventListener("mouseleave", u), c.addEventListener("mouseenter", d), c.addEventListener("mouseleave", m), () => {
272
- r.removeEventListener("mouseenter", l), r.removeEventListener("mouseleave", u), c.removeEventListener("mouseenter", d), c.removeEventListener("mouseleave", m);
273
- };
274
- }, [o, n]), L(() => {
275
- if (o !== "persisted" || !s.current || !i.current) return;
276
- const r = i.current, a = s.current, c = n.current;
277
- if (!c) return;
278
- const l = (m) => {
279
- m.stopPropagation(), c.matches(":popover-open") ? a.hideTooltip(!1) : a.showTooltip();
280
- }, u = (m) => {
281
- const g = m.target;
282
- c.matches(":popover-open") && !r.contains(g) && !c.contains(g) && a.hideTooltip(!1);
283
- }, d = (m) => {
284
- m.key === "Escape" && c.matches(":popover-open") && a.hideTooltip(!1);
285
- };
286
- return r.addEventListener("click", l), document.addEventListener("click", u), document.addEventListener("keydown", d), () => {
287
- r.removeEventListener("click", l), document.removeEventListener("click", u), document.removeEventListener("keydown", d);
288
- };
289
- }, [o, n]);
290
- }
291
- const le = 8, D = h(
292
- ({ id: t, children: n, placement: e, gap: o = le, type: s = "hover", style: i, className: r, ...a }, c) => {
293
- const l = x(null), u = T({
294
- placement: e
295
- });
296
- return ce({
297
- id: t,
298
- placement: e,
299
- tooltipRef: l,
300
- type: s
301
- }), /* @__PURE__ */ p(
302
- "div",
303
- {
304
- ref: ae(l, c),
305
- id: t,
306
- className: v(P.tooltip, r),
307
- ...u,
308
- style: {
309
- "--_gap": `${o}px`,
310
- positionAnchor: `--tooltip-${t}`,
311
- ...i
312
- },
313
- ...a,
314
- popover: "auto",
315
- children: n
316
- }
317
- );
318
- }
319
- );
320
- D.displayName = "Tooltip";
321
- const H = h(
322
- ({ children: t, maxWidth: n, maxLines: e = 2, style: o, className: s, ...i }, r) => {
323
- const a = {
324
- "--_lines": e,
325
- "--_max-width": n,
326
- ...o
327
- };
328
- return /* @__PURE__ */ p("div", { ref: r, className: v(P["tooltip-text"], s), style: a, ...i, children: t });
329
- }
330
- );
331
- H.displayName = "Tooltip.Text";
332
- function de(t) {
333
- const { id: n, ...e } = t;
334
- return {
335
- "data-tooltip-trigger": n,
336
- style: { anchorName: `--tooltip-${n}` },
337
- ...Object.fromEntries(Object.entries(e).map(([o, s]) => [o, String(s)]))
338
- };
339
- }
340
- function ue(t) {
341
- const { id: n } = t, e = document.getElementById(n);
342
- e && e.matches(":popover-open") && requestAnimationFrame(() => {
343
- const o = document.querySelector(`[data-tooltip-trigger="${n}"]`);
344
- o && document.activeElement === o && o.blur(), e.matches(":popover-open") && e.hidePopover();
345
- });
346
- }
347
- const B = D;
348
- B.Text = H;
349
- B.getTooltipTriggerProps = de;
350
- B.close = ue;
351
- export {
352
- Te as A,
353
- oe as B,
354
- re as D,
355
- Y as H,
356
- se as K,
357
- te as L,
358
- Z as T,
359
- ne as a,
360
- W as b,
361
- ee as c,
362
- B as d,
363
- ae as e
364
- };