@shlinkio/shlink-frontend-kit 0.8.4 → 0.8.5

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 (8) hide show
  1. package/dist/index.d.ts +17 -1
  2. package/dist/index.js +164 -161
  3. package/dist/tailwind.d.ts +7 -1
  4. package/dist/tailwind.js +203 -196
  5. package/dist/tailwind.preset.css +13 -0
  6. package/dist/use-timeout-BbfWTbuj.js +17 -0
  7. package/package.json +1 -1
  8. package/dist/use-timeout-mQ792qNj.js +0 -17
package/dist/tailwind.js CHANGED
@@ -1,53 +1,53 @@
1
- import { jsx as n, jsxs as i, Fragment as T } from "react/jsx-runtime";
2
- import w, { clsx as f } from "clsx";
3
- import { createContext as S, useContext as g, useCallback as F, useId as H, useMemo as O, useRef as $, useEffect as L, useState as Q } from "react";
4
- import { Link as U, NavLink as V } from "react-router";
5
- import { faClose as X, faSearch as Y, faChevronLeft as M, faChevronRight as R, faCircleNotch as Z } from "@fortawesome/free-solid-svg-icons";
6
- import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
7
- import { createPortal as tt } from "react-dom";
8
- import { u as et } from "./use-timeout-mQ792qNj.js";
9
- const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className: e }) => {
10
- const { responsive: r } = g(x);
1
+ import { jsx as n, jsxs as i, Fragment as S } from "react/jsx-runtime";
2
+ import s, { clsx as x } from "clsx";
3
+ import { createContext as M, useContext as g, useCallback as L, useId as U, useMemo as z, useRef as _, useEffect as F, useState as et } from "react";
4
+ import { Link as W, NavLink as rt } from "react-router";
5
+ import { faClose as ot, faSearch as nt, faChevronLeft as H, faChevronRight as O, faCircleNotch as dt } from "@fortawesome/free-solid-svg-icons";
6
+ import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
7
+ import { createPortal as lt } from "react-dom";
8
+ import { u as at } from "./use-timeout-BbfWTbuj.js";
9
+ const N = M(void 0), y = M({ responsive: !0 }), st = ({ children: t, className: e }) => {
10
+ const { responsive: r } = g(y);
11
11
  return /* @__PURE__ */ n(N.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
12
12
  "thead",
13
13
  {
14
- className: w(
14
+ className: s(
15
15
  { "tw:hidden tw:lg:table-header-group": r },
16
16
  e
17
17
  ),
18
18
  children: t
19
19
  }
20
20
  ) });
21
- }, ot = ({ children: t, className: e }) => {
22
- const { responsive: r } = g(x);
21
+ }, wt = ({ children: t, className: e }) => {
22
+ const { responsive: r } = g(y);
23
23
  return /* @__PURE__ */ n(N.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
24
24
  "tbody",
25
25
  {
26
- className: w(
26
+ className: s(
27
27
  { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": r },
28
28
  e
29
29
  ),
30
30
  children: t
31
31
  }
32
32
  ) });
33
- }, nt = ({ children: t, className: e }) => {
34
- const { responsive: r } = g(x);
33
+ }, it = ({ children: t, className: e }) => {
34
+ const { responsive: r } = g(y);
35
35
  return /* @__PURE__ */ n(N.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
36
36
  "tfoot",
37
37
  {
38
- className: w(
38
+ className: s(
39
39
  { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": r },
40
40
  e
41
41
  ),
42
42
  children: t
43
43
  }
44
44
  ) });
45
- }, dt = ({ children: t, className: e, ...r }) => {
46
- const o = g(N), d = (o == null ? void 0 : o.section) === "body", { responsive: a } = g(x);
45
+ }, ct = ({ children: t, className: e, ...r }) => {
46
+ const o = g(N), d = (o == null ? void 0 : o.section) === "body", { responsive: a } = g(y);
47
47
  return /* @__PURE__ */ n(
48
48
  "tr",
49
49
  {
50
- className: w(
50
+ className: s(
51
51
  "tw:group",
52
52
  {
53
53
  "tw:lg:table-row tw:flex tw:flex-col": a,
@@ -62,19 +62,19 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
62
62
  children: t
63
63
  }
64
64
  );
65
- }, lt = ({ children: t, className: e, columnName: r, type: o, ...d }) => {
66
- const a = g(N), l = o ?? ((a == null ? void 0 : a.section) !== "body" ? "th" : "td"), { responsive: s } = g(x);
65
+ }, mt = ({ children: t, className: e, columnName: r, type: o, ...d }) => {
66
+ const a = g(N), l = o ?? ((a == null ? void 0 : a.section) !== "body" ? "th" : "td"), { responsive: w } = g(y);
67
67
  return /* @__PURE__ */ n(
68
68
  l,
69
69
  {
70
- "data-column": s ? r : void 0,
71
- className: w(
70
+ "data-column": w ? r : void 0,
71
+ className: s(
72
72
  "tw:p-2 tw:border-lm-border tw:dark:border-dm-border",
73
73
  {
74
- "tw:border-b-1": !s,
75
- "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": s,
74
+ "tw:border-b-1": !w,
75
+ "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": w,
76
76
  // For md and lower, display the content in data-column attribute as before
77
- "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": s && l === "td"
77
+ "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": w && l === "td"
78
78
  },
79
79
  e
80
80
  ),
@@ -82,11 +82,11 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
82
82
  children: t
83
83
  }
84
84
  );
85
- }, at = ({ header: t, footer: e, children: r, responsive: o = !0, ...d }) => /* @__PURE__ */ n(x.Provider, { value: { responsive: o }, children: /* @__PURE__ */ i("table", { className: "tw:w-full", ...d, children: [
86
- /* @__PURE__ */ n(rt, { children: t }),
87
- /* @__PURE__ */ n(ot, { children: r }),
88
- e && /* @__PURE__ */ n(nt, { children: e })
89
- ] }) }), Rt = Object.assign(at, { Row: dt, Cell: lt }), wt = ({
85
+ }, gt = ({ header: t, footer: e, children: r, responsive: o = !0, ...d }) => /* @__PURE__ */ n(y.Provider, { value: { responsive: o }, children: /* @__PURE__ */ i("table", { className: "tw:w-full", ...d, children: [
86
+ /* @__PURE__ */ n(st, { children: t }),
87
+ /* @__PURE__ */ n(wt, { children: r }),
88
+ e && /* @__PURE__ */ n(it, { children: e })
89
+ ] }) }), At = Object.assign(gt, { Row: ct, Cell: mt }), bt = ({
90
90
  children: t,
91
91
  className: e,
92
92
  disabled: r,
@@ -94,15 +94,15 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
94
94
  size: d = "md",
95
95
  inline: a = !1,
96
96
  solid: l = !1,
97
- ...s
97
+ ...w
98
98
  }) => {
99
- const c = "to" in s ? U : "button";
99
+ const c = "to" in w ? W : "button";
100
100
  return (
101
101
  // @ts-expect-error We are explicitly checking for the `to` prop before using Link
102
102
  /* @__PURE__ */ n(
103
103
  c,
104
104
  {
105
- className: w(
105
+ className: s(
106
106
  {
107
107
  "tw:inline-flex": a,
108
108
  "tw:flex": !a
@@ -147,18 +147,18 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
147
147
  e
148
148
  ),
149
149
  disabled: r,
150
- ...s,
150
+ ...w,
151
151
  children: t
152
152
  }
153
153
  )
154
154
  );
155
- }, z = ({ className: t, onChange: e, ...r }) => {
156
- const o = F((d) => e == null ? void 0 : e(d.target.checked, d), [e]);
155
+ }, q = ({ className: t, onChange: e, ...r }) => {
156
+ const o = L((d) => e == null ? void 0 : e(d.target.checked, d), [e]);
157
157
  return /* @__PURE__ */ n(
158
158
  "input",
159
159
  {
160
160
  type: "checkbox",
161
- className: f(
161
+ className: x(
162
162
  "tw:appearance-none tw:focus-ring",
163
163
  "tw:border-1 tw:border-lm-input-border tw:dark:border-dm-input-border",
164
164
  "tw:bg-lm-primary tw:dark:bg-dm-primary tw:checked:bg-brand tw:bg-no-repeat",
@@ -170,24 +170,24 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
170
170
  ...r
171
171
  }
172
172
  );
173
- }, jt = ({ className: t, ...e }) => /* @__PURE__ */ n(
174
- z,
173
+ }, Ut = ({ className: t, ...e }) => /* @__PURE__ */ n(
174
+ q,
175
175
  {
176
- className: f("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
176
+ className: x("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
177
177
  ...e
178
178
  }
179
- ), j = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
179
+ ), $ = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
180
180
  "button",
181
181
  {
182
182
  onClick: t,
183
- className: w(
183
+ className: s(
184
184
  "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
185
185
  "tw:rounded-md tw:focus-ring"
186
186
  ),
187
187
  "aria-label": e,
188
- children: /* @__PURE__ */ n(b, { icon: X, size: "xl" })
188
+ children: /* @__PURE__ */ n(p, { icon: ot, size: "xl" })
189
189
  }
190
- ), A = ({
190
+ ), G = ({
191
191
  borderless: t = !1,
192
192
  size: e = "md",
193
193
  feedback: r,
@@ -196,11 +196,11 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
196
196
  readOnly: a,
197
197
  ...l
198
198
  }) => {
199
- const s = !d && !a;
199
+ const w = !d && !a;
200
200
  return /* @__PURE__ */ n(
201
201
  "input",
202
202
  {
203
- className: w(
203
+ className: s(
204
204
  "tw:w-full",
205
205
  {
206
206
  "tw:focus-ring": !r,
@@ -215,10 +215,10 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
215
215
  "tw:rounded-md tw:border": !t,
216
216
  "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !r,
217
217
  "tw:border-danger": !t && r === "error",
218
- "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !s,
219
- "tw:bg-lm-primary tw:dark:bg-dm-primary": s,
218
+ "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !w,
219
+ "tw:bg-lm-primary tw:dark:bg-dm-primary": w,
220
220
  // Use different background color when rendered inside a card
221
- "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": s
221
+ "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": w
222
222
  },
223
223
  o
224
224
  ),
@@ -227,15 +227,15 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
227
227
  ...l
228
228
  }
229
229
  );
230
- }, W = ({ required: t, children: e, ...r }) => /* @__PURE__ */ i("label", { ...r, children: [
230
+ }, J = ({ required: t, children: e, ...r }) => /* @__PURE__ */ i("label", { ...r, children: [
231
231
  e,
232
232
  t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
233
- ] }), Dt = ({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: d, ...a }) => {
234
- const l = H();
233
+ ] }), zt = ({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: d, ...a }) => {
234
+ const l = U();
235
235
  return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
236
- /* @__PURE__ */ n(W, { htmlFor: l, required: r, children: t }),
236
+ /* @__PURE__ */ n(J, { htmlFor: l, required: r, children: t }),
237
237
  /* @__PURE__ */ n(
238
- A,
238
+ G,
239
239
  {
240
240
  id: l,
241
241
  className: e,
@@ -246,7 +246,7 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
246
246
  ),
247
247
  d && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: d })
248
248
  ] });
249
- }, st = ({
249
+ }, ut = ({
250
250
  className: t,
251
251
  size: e = "md",
252
252
  feedback: r,
@@ -256,7 +256,7 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
256
256
  }) => /* @__PURE__ */ n(
257
257
  "select",
258
258
  {
259
- className: w(
259
+ className: s(
260
260
  "tw:w-full tw:appearance-none tw:pr-9",
261
261
  "tw:bg-(image:--chevron-down) tw:bg-no-repeat",
262
262
  {
@@ -285,13 +285,13 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
285
285
  disabled: d,
286
286
  ...a
287
287
  }
288
- ), Ht = ({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...d }) => {
289
- const a = H();
288
+ ), Wt = ({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...d }) => {
289
+ const a = U();
290
290
  return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
291
- /* @__PURE__ */ n(W, { htmlFor: a, required: r, children: e }),
292
- /* @__PURE__ */ n(st, { id: a, className: t, required: r || o, ...d })
291
+ /* @__PURE__ */ n(J, { htmlFor: a, required: r, children: e }),
292
+ /* @__PURE__ */ n(ut, { id: a, className: t, required: r || o, ...d })
293
293
  ] });
294
- }, Ot = ({
294
+ }, qt = ({
295
295
  onChange: t,
296
296
  containerClassName: e,
297
297
  inputClassName: r,
@@ -299,15 +299,15 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
299
299
  size: o = "lg",
300
300
  ...d
301
301
  }) => {
302
- const { setTimeout: a, clearCurrentTimeout: l } = et(500), s = F((c) => {
302
+ const { setTimeout: a, clearCurrentTimeout: l } = at(500), w = L((c) => {
303
303
  c ? a(() => t(c)) : (l(), t(c));
304
304
  }, [l, t, a]);
305
- return /* @__PURE__ */ i("div", { className: w("tw:group tw:relative tw:focus-within:z-10", e), children: [
305
+ return /* @__PURE__ */ i("div", { className: s("tw:group tw:relative tw:focus-within:z-10", e), children: [
306
306
  /* @__PURE__ */ n(
307
- b,
307
+ p,
308
308
  {
309
- icon: Y,
310
- className: w(
309
+ icon: nt,
310
+ className: s(
311
311
  "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:transition-colors",
312
312
  "tw:text-placeholder tw:group-focus-within:text-lm-text tw:dark:group-focus-within:text-dm-text",
313
313
  {
@@ -318,10 +318,10 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
318
318
  }
319
319
  ),
320
320
  /* @__PURE__ */ n(
321
- A,
321
+ G,
322
322
  {
323
323
  type: "search",
324
- className: w(
324
+ className: s(
325
325
  {
326
326
  "tw:pl-9": o !== "sm",
327
327
  "tw:pl-7": o === "sm"
@@ -329,16 +329,16 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
329
329
  r
330
330
  ),
331
331
  placeholder: "Search...",
332
- onChange: (c) => s(c.target.value),
332
+ onChange: (c) => w(c.target.value),
333
333
  size: o,
334
334
  ...d
335
335
  }
336
336
  )
337
337
  ] });
338
- }, $t = ({ className: t, ...e }) => /* @__PURE__ */ n(
339
- z,
338
+ }, Gt = ({ className: t, ...e }) => /* @__PURE__ */ n(
339
+ q,
340
340
  {
341
- className: f(
341
+ className: x(
342
342
  "tw:rounded-full tw:w-8 tw:h-4",
343
343
  "tw:bg-(image:--circle-grey-dark) tw:dark:bg-(image:--circle-grey-light) tw:checked:bg-(image:--circle-white)",
344
344
  "tw:focus-visible:not-checked:bg-(image:--circle-light-blue)",
@@ -347,10 +347,10 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
347
347
  ),
348
348
  ...e
349
349
  }
350
- ), it = ({ className: t, disabled: e, size: r = "md", ...o }) => /* @__PURE__ */ n(
350
+ ), pt = ({ className: t, disabled: e, size: r = "md", ...o }) => /* @__PURE__ */ n(
351
351
  "button",
352
352
  {
353
- className: w(
353
+ className: s(
354
354
  "tw:inline-flex tw:rounded-md tw:focus-ring",
355
355
  "tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline",
356
356
  {
@@ -364,47 +364,47 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
364
364
  disabled: e,
365
365
  ...o
366
366
  }
367
- ), ct = ({ className: t, ...e }) => /* @__PURE__ */ n(
367
+ ), ht = ({ className: t, ...e }) => /* @__PURE__ */ n(
368
368
  "div",
369
369
  {
370
- className: w(
370
+ className: s(
371
371
  "tw:px-4 tw:py-3 tw:rounded-t-md",
372
372
  "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border",
373
373
  t
374
374
  ),
375
375
  ...e
376
376
  }
377
- ), mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
377
+ ), ft = ({ className: t, ...e }) => /* @__PURE__ */ n(
378
378
  "div",
379
379
  {
380
- className: w(
380
+ className: s(
381
381
  "tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md",
382
382
  "tw:first:rounded-t-md tw:last:rounded-b-md",
383
383
  t
384
384
  ),
385
385
  ...e
386
386
  }
387
- ), gt = ({ className: t, ...e }) => /* @__PURE__ */ n(
387
+ ), xt = ({ className: t, ...e }) => /* @__PURE__ */ n(
388
388
  "div",
389
389
  {
390
- className: w(
390
+ className: s(
391
391
  "tw:px-4 tw:py-3 tw:rounded-b-md",
392
392
  "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border",
393
393
  t
394
394
  ),
395
395
  ...e
396
396
  }
397
- ), bt = ({ className: t, ...e }) => /* @__PURE__ */ n(
397
+ ), yt = ({ className: t, ...e }) => /* @__PURE__ */ n(
398
398
  "div",
399
399
  {
400
- className: w(
400
+ className: s(
401
401
  "tw:group/card tw:rounded-md tw:shadow-md",
402
402
  "tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary",
403
403
  t
404
404
  ),
405
405
  ...e
406
406
  }
407
- ), m = Object.assign(bt, { Body: mt, Header: ct, Footer: gt }), pt = ({ bodyClassName: t, children: e, ...r }) => {
407
+ ), m = Object.assign(yt, { Body: ft, Header: ht, Footer: xt }), kt = ({ bodyClassName: t, children: e, ...r }) => {
408
408
  const { title: o, titleSize: d = "md", ...a } = "title" in r ? r : {
409
409
  ...r,
410
410
  title: void 0,
@@ -418,14 +418,14 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
418
418
  ] }),
419
419
  /* @__PURE__ */ n(m.Body, { className: t, children: e })
420
420
  ] });
421
- }, q = S(null), ht = ({ className: t, to: e, ...r }) => {
422
- const o = g(q);
421
+ }, K = M(null), Nt = ({ className: t, to: e, ...r }) => {
422
+ const o = g(K);
423
423
  return /* @__PURE__ */ n(
424
- V,
424
+ rt,
425
425
  {
426
426
  role: "menuitem",
427
427
  to: e,
428
- className: ({ isActive: d }) => w(
428
+ className: ({ isActive: d }) => s(
429
429
  "tw:px-4 tw:pt-2 tw:pb-[calc(0.5rem-3px)] tw:border-b-3",
430
430
  "tw:font-bold tw:no-underline tw:text-center tw:highlight:text-brand tw:transition-colors",
431
431
  "tw:rounded-none tw:outline-none tw:focus-visible:inset-ring-2 tw:focus-visible:inset-ring-brand/50",
@@ -439,76 +439,76 @@ const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className:
439
439
  ...r
440
440
  }
441
441
  );
442
- }, ut = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(q.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(m, { role: "menubar", className: w("tw:flex tw:overflow-hidden", e), children: t }) }), Ut = Object.assign(ut, { Pill: ht }), ft = new Intl.NumberFormat("en-US"), xt = (t) => ft.format(Number(t)), D = 10, zt = (t) => Math.ceil(t / D) * D, u = 2, C = "...", yt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), kt = (t, e) => {
443
- const r = yt(
444
- Math.max(u, t - u),
445
- Math.min(e - 1, t + u) + 1
442
+ }, vt = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(K.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(m, { role: "menubar", className: s("tw:flex tw:overflow-hidden", e), children: t }) }), Jt = Object.assign(vt, { Pill: Nt }), Pt = new Intl.NumberFormat("en-US"), Ct = (t) => Pt.format(Number(t)), A = 10, Kt = (t) => Math.ceil(t / A) * A, f = 2, I = "...", Tt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), It = (t, e) => {
443
+ const r = Tt(
444
+ Math.max(f, t - f),
445
+ Math.min(e - 1, t + f) + 1
446
446
  );
447
- return t - u > u && r.unshift(C), t + u < e - 1 && r.push(C), r.unshift(1), r.push(e), r;
448
- }, k = (t) => t === C, Nt = (t) => k(t) ? t : xt(t), vt = (t, e) => k(t) ? `${t}_${e}` : `${t}`, G = [
447
+ return t - f > f && r.unshift(I), t + f < e - 1 && r.push(I), r.unshift(1), r.push(e), r;
448
+ }, k = (t) => t === I, Lt = (t) => k(t) ? t : Ct(t), Bt = (t, e) => k(t) ? `${t}_${e}` : `${t}`, Q = [
449
449
  "tw:border tw:border-r-0 tw:last:border-r tw:border-lm-border tw:dark:border-dm-border",
450
450
  "tw:rounded-none tw:first:rounded-l tw:last:rounded-r"
451
- ], J = (t = !1) => w(
452
- G,
451
+ ], V = (t = !1) => s(
452
+ Q,
453
453
  "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
454
454
  "tw:focus-ring tw:focus-visible:z-1",
455
455
  {
456
456
  "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:text-brand": !t,
457
457
  "tw:bg-lm-brand tw:dark:bg-dm-brand tw:text-white": t
458
458
  }
459
- ), B = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: w(G, "tw:px-3 py-2 tw:text-gray-400"), children: t }), K = () => /* @__PURE__ */ n(B, { children: C });
460
- function Pt({ children: t, active: e, isEllipsis: r, href: o, ...d }) {
461
- const a = O(() => J(e), [e]);
462
- return r ? /* @__PURE__ */ n(K, {}) : /* @__PURE__ */ n(U, { className: a, to: o, ...d, children: t });
459
+ ), E = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: s(Q, "tw:px-3 py-2 tw:text-gray-400"), children: t }), X = () => /* @__PURE__ */ n(E, { children: I });
460
+ function St({ children: t, active: e, isEllipsis: r, href: o, ...d }) {
461
+ const a = z(() => V(e), [e]);
462
+ return r ? /* @__PURE__ */ n(X, {}) : /* @__PURE__ */ n(W, { className: a, to: o, ...d, children: t });
463
463
  }
464
- function Ct({ children: t, active: e, isEllipsis: r, ...o }) {
465
- const d = O(() => J(e), [e]);
466
- return r ? /* @__PURE__ */ n(K, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
464
+ function _t({ children: t, active: e, isEllipsis: r, ...o }) {
465
+ const d = z(() => V(e), [e]);
466
+ return r ? /* @__PURE__ */ n(X, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
467
467
  }
468
- const At = ({ currentPage: t, pagesCount: e, ...r }) => {
469
- const o = "urlForPage" in r, d = o ? Pt : Ct, a = F(
468
+ const Qt = ({ currentPage: t, pagesCount: e, ...r }) => {
469
+ const o = "urlForPage" in r, d = o ? St : _t, a = L(
470
470
  (l) => o ? { href: k(l) ? void 0 : r.urlForPage(l) } : { onClick: () => !k(l) && r.onPageChange(l) },
471
471
  [o, r]
472
472
  );
473
473
  return e < 2 ? null : /* @__PURE__ */ i("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
474
- t === 1 ? /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(b, { size: "xs", icon: M }) }) : /* @__PURE__ */ n(d, { ...a(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(b, { size: "xs", icon: M }) }),
475
- kt(t, e).map((l, s) => /* @__PURE__ */ n(
474
+ t === 1 ? /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(p, { size: "xs", icon: H }) }) : /* @__PURE__ */ n(d, { ...a(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(p, { size: "xs", icon: H }) }),
475
+ It(t, e).map((l, w) => /* @__PURE__ */ n(
476
476
  d,
477
477
  {
478
478
  active: l === t,
479
479
  isEllipsis: k(l),
480
480
  ...a(l),
481
- children: Nt(l)
481
+ children: Lt(l)
482
482
  },
483
- vt(l, s)
483
+ Bt(l, w)
484
484
  )),
485
- t === e ? /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(b, { size: "xs", icon: R }) }) : /* @__PURE__ */ n(d, { ...a(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(b, { size: "xs", icon: R }) })
485
+ t === e ? /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(p, { size: "xs", icon: O }) }) : /* @__PURE__ */ n(d, { ...a(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(p, { size: "xs", icon: O }) })
486
486
  ] });
487
- }, It = ({
487
+ }, Ft = ({
488
488
  open: t,
489
489
  children: e,
490
490
  className: r,
491
491
  onClose: o,
492
492
  ...d
493
493
  }) => {
494
- const a = $(null);
495
- return L(() => {
496
- var v, y;
497
- const l = document.body, s = l.style.overflow, c = l.style.paddingRight;
494
+ const a = _(null);
495
+ return F(() => {
496
+ var v, P;
497
+ const l = document.body, w = l.style.overflow, c = l.style.paddingRight;
498
498
  if (t) {
499
- const I = window.outerWidth - l.clientWidth, p = l.scrollHeight > l.clientHeight;
500
- l.style.overflow = "hidden", p && (l.style.paddingRight = `${I}px`), (v = a.current) == null || v.showModal();
499
+ const b = window.outerWidth - l.clientWidth, h = l.scrollHeight > l.clientHeight;
500
+ l.style.overflow = "hidden", h && (l.style.paddingRight = `${b}px`), (v = a.current) == null || v.showModal();
501
501
  } else
502
- (y = a.current) == null || y.close();
502
+ (P = a.current) == null || P.close();
503
503
  return () => {
504
- l.style.overflow = s, l.style.paddingRight = c;
504
+ l.style.overflow = w, l.style.paddingRight = c;
505
505
  };
506
- }, [t]), tt(
506
+ }, [t]), lt(
507
507
  /* @__PURE__ */ n(
508
508
  "dialog",
509
509
  {
510
510
  ref: a,
511
- className: w("tw:bg-transparent tw:backdrop:bg-black/50", r),
511
+ className: s("tw:bg-transparent tw:backdrop:bg-black/50", r),
512
512
  onCancel: (l) => {
513
513
  l.preventDefault(), o();
514
514
  },
@@ -518,7 +518,7 @@ const At = ({ currentPage: t, pagesCount: e, ...r }) => {
518
518
  ),
519
519
  document.body
520
520
  );
521
- }, Wt = ({
521
+ }, Vt = ({
522
522
  open: t,
523
523
  onClose: e,
524
524
  variant: r = "default",
@@ -528,68 +528,75 @@ const At = ({ currentPage: t, pagesCount: e, ...r }) => {
528
528
  ...l
529
529
  }) => {
530
530
  const {
531
- size: s = "md",
531
+ size: w = "md",
532
532
  confirmText: c = "Confirm",
533
- confirmDisabled: v,
534
- onConfirm: y,
535
- ...I
536
- } = "onConfirm" in l ? l : { ...l }, [p, _] = Q(t), P = $(null);
537
- return L(() => {
533
+ cancelText: v = "Cancel",
534
+ confirmDisabled: P,
535
+ onConfirm: b,
536
+ onClosed: h,
537
+ ...Y
538
+ } = "onConfirm" in l ? l : { ...l }, [C, R] = et(t), T = _(null), B = _("cancel"), Z = L(() => {
539
+ B.current = "confirm", b == null || b();
540
+ }, [b]);
541
+ return F(() => {
538
542
  if (t) {
539
- _(!0);
543
+ B.current = "cancel", R(!0);
540
544
  return;
541
545
  }
542
- const h = P.current;
543
- if (h) {
544
- delete P.current.dataset.open;
545
- const E = () => _(!1);
546
- return h.addEventListener("transitionend", E, { once: !0 }), () => {
547
- h.removeEventListener("transitionend", E);
546
+ const u = T.current;
547
+ if (u) {
548
+ delete T.current.dataset.open;
549
+ let j = !1;
550
+ const D = (tt) => {
551
+ j || tt.target !== u || (j = !0, R(!1), h == null || h(B.current));
552
+ };
553
+ return u.addEventListener("transitionend", D), () => {
554
+ u.removeEventListener("transitionend", D);
548
555
  };
549
556
  }
550
- }, [t]), L(() => {
551
- const h = P.current;
552
- p && h && (h.dataset.open = "");
553
- }, [p]), /* @__PURE__ */ n(
554
- It,
557
+ }, [h, t]), F(() => {
558
+ const u = T.current;
559
+ C && u && (u.dataset.open = "");
560
+ }, [C]), /* @__PURE__ */ n(
561
+ Ft,
555
562
  {
556
- open: p,
563
+ open: C,
557
564
  onClose: e,
558
- className: w(
565
+ className: s(
559
566
  {
560
- "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": p,
567
+ "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": C,
561
568
  "tw:overflow-hidden": r === "cover"
562
569
  },
563
570
  a
564
571
  ),
565
- ...I,
572
+ ...Y,
566
573
  children: /* @__PURE__ */ n(
567
574
  "div",
568
575
  {
569
576
  "data-testid": "transition-container",
570
- ref: P,
571
- className: w(
577
+ ref: T,
578
+ className: s(
572
579
  "tw:w-full tw:m-auto tw:p-4 tw:sm:p-6",
573
580
  // CSS transitions are based on the presence of the `data-open` attribute
574
581
  "tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100",
575
- "tw:transition-[opacity_transform] tw:duration-300",
582
+ "tw:transition-[opacity_,_translate] tw:duration-300",
576
583
  // Handle modal dimensions for different variants and sizes
577
584
  r !== "cover" && {
578
- "tw:sm:w-sm": s === "sm",
579
- "tw:md:w-lg": s === "md",
580
- "tw:md:w-4xl": s === "lg",
581
- "tw:md:w-6xl": s === "xl"
585
+ "tw:sm:w-sm": w === "sm",
586
+ "tw:md:w-lg": w === "md",
587
+ "tw:md:w-4xl": w === "lg",
588
+ "tw:md:w-6xl": w === "xl"
582
589
  },
583
590
  { "tw:h-full": r === "cover" }
584
591
  ),
585
- children: /* @__PURE__ */ n(m, { className: w(
592
+ children: /* @__PURE__ */ n(m, { className: s(
586
593
  "tw:w-full",
587
594
  { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
588
- ), children: r === "cover" ? /* @__PURE__ */ i(T, { children: [
595
+ ), children: r === "cover" ? /* @__PURE__ */ i(S, { children: [
589
596
  /* @__PURE__ */ i(
590
597
  "div",
591
598
  {
592
- className: w(
599
+ className: s(
593
600
  "tw:px-4 tw:py-3 tw:absolute tw:top-0 tw:left-0 tw:right-0",
594
601
  "tw:flex tw:items-center tw:justify-between",
595
602
  "tw:text-white tw:bg-linear-to-b tw:from-black/70 tw:to-black/10",
@@ -597,37 +604,37 @@ const At = ({ currentPage: t, pagesCount: e, ...r }) => {
597
604
  ),
598
605
  children: [
599
606
  /* @__PURE__ */ n("h5", { children: o }),
600
- /* @__PURE__ */ n(j, { onClick: e, label: "Close dialog" })
607
+ /* @__PURE__ */ n($, { onClick: e, label: "Close dialog" })
601
608
  ]
602
609
  }
603
610
  ),
604
611
  /* @__PURE__ */ n("div", { children: d })
605
- ] }) : /* @__PURE__ */ i(T, { children: [
606
- /* @__PURE__ */ i(m.Header, { className: w(
612
+ ] }) : /* @__PURE__ */ i(S, { children: [
613
+ /* @__PURE__ */ i(m.Header, { className: s(
607
614
  "tw:sticky tw:top-0",
608
615
  "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
609
616
  ), children: [
610
- /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": r === "danger" }), children: o }),
611
- /* @__PURE__ */ n(j, { onClick: e, label: "Close dialog" })
617
+ /* @__PURE__ */ n("h5", { className: s({ "tw:text-danger": r === "danger" }), children: o }),
618
+ /* @__PURE__ */ n($, { onClick: e, label: "Close dialog" })
612
619
  ] }),
613
620
  /* @__PURE__ */ n(m.Body, { children: d }),
614
- y && /* @__PURE__ */ i(
621
+ b && /* @__PURE__ */ i(
615
622
  m.Footer,
616
623
  {
617
624
  "data-testid": "footer",
618
- className: w(
625
+ className: s(
619
626
  "tw:flex tw:justify-end tw:items-center tw:gap-x-2",
620
627
  "tw:[&]:px-3 tw:sticky tw:bottom-0"
621
628
  ),
622
629
  children: [
623
- /* @__PURE__ */ n(it, { onClick: e, children: "Cancel" }),
630
+ /* @__PURE__ */ n(pt, { onClick: e, children: v }),
624
631
  /* @__PURE__ */ n(
625
- wt,
632
+ bt,
626
633
  {
627
634
  solid: !0,
628
635
  variant: r === "danger" ? "danger" : "primary",
629
- disabled: v,
630
- onClick: y,
636
+ disabled: P,
637
+ onClick: Z,
631
638
  children: c
632
639
  }
633
640
  )
@@ -639,19 +646,19 @@ const At = ({ currentPage: t, pagesCount: e, ...r }) => {
639
646
  )
640
647
  }
641
648
  );
642
- }, qt = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(pt, { className: f({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ i("h3", { className: f("tw:text-center", {
649
+ }, Xt = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(kt, { className: x({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ i("h3", { className: x("tw:text-center", {
643
650
  "tw:text-gray-500 tw:dark:text-gray-400": o === "default",
644
651
  "tw:text-danger": o === "error"
645
652
  }), children: [
646
- r && /* @__PURE__ */ i(T, { children: [
647
- /* @__PURE__ */ n(b, { icon: Z, spin: !0 }),
653
+ r && /* @__PURE__ */ i(S, { children: [
654
+ /* @__PURE__ */ n(p, { icon: dt, spin: !0 }),
648
655
  /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
649
656
  ] }),
650
657
  !r && e
651
- ] }) }), Gt = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
658
+ ] }) }), Yt = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
652
659
  "div",
653
660
  {
654
- className: f(
661
+ className: x(
655
662
  "tw:rounded-md tw:text-center",
656
663
  {
657
664
  "tw:p-2": r === "sm",
@@ -668,31 +675,31 @@ const At = ({ currentPage: t, pagesCount: e, ...r }) => {
668
675
  }
669
676
  );
670
677
  export {
671
- wt as Button,
678
+ bt as Button,
672
679
  m as Card,
673
- Wt as CardModal,
674
- jt as Checkbox,
675
- j as CloseButton,
676
- C as ELLIPSIS,
677
- A as Input,
678
- W as Label,
679
- Dt as LabelledInput,
680
- Ht as LabelledSelect,
681
- it as LinkButton,
682
- qt as Message,
683
- It as ModalDialog,
684
- Ut as NavPills,
685
- At as Paginator,
686
- Gt as Result,
687
- Ot as SearchInput,
688
- st as Select,
689
- pt as SimpleCard,
690
- Rt as Table,
691
- $t as ToggleSwitch,
692
- xt as formatNumber,
693
- vt as keyForPage,
680
+ Vt as CardModal,
681
+ Ut as Checkbox,
682
+ $ as CloseButton,
683
+ I as ELLIPSIS,
684
+ G as Input,
685
+ J as Label,
686
+ zt as LabelledInput,
687
+ Wt as LabelledSelect,
688
+ pt as LinkButton,
689
+ Xt as Message,
690
+ Ft as ModalDialog,
691
+ Jt as NavPills,
692
+ Qt as Paginator,
693
+ Yt as Result,
694
+ qt as SearchInput,
695
+ ut as Select,
696
+ kt as SimpleCard,
697
+ At as Table,
698
+ Gt as ToggleSwitch,
699
+ Ct as formatNumber,
700
+ Bt as keyForPage,
694
701
  k as pageIsEllipsis,
695
- Nt as prettifyPageNumber,
696
- kt as progressivePagination,
697
- zt as roundTen
702
+ Lt as prettifyPageNumber,
703
+ It as progressivePagination,
704
+ Kt as roundTen
698
705
  };