@febkosq8/arc 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/arc.js +151 -194
- package/dist/{grid-loader.d.ts → components/grid-loader.d.ts} +3 -1
- package/dist/components/index.d.ts +44 -0
- package/dist/index.d.ts +2 -47
- package/dist/utilities/index.d.ts +3 -0
- package/package.json +1 -1
- /package/dist/{avatar.d.ts → components/avatar.d.ts} +0 -0
- /package/dist/{button-double-click.d.ts → components/button-double-click.d.ts} +0 -0
- /package/dist/{button-group.d.ts → components/button-group.d.ts} +0 -0
- /package/dist/{button-long-press.d.ts → components/button-long-press.d.ts} +0 -0
- /package/dist/{button.d.ts → components/button.d.ts} +0 -0
- /package/dist/{card.d.ts → components/card.d.ts} +0 -0
- /package/dist/{divider.d.ts → components/divider.d.ts} +0 -0
- /package/dist/{dropdown-multi.d.ts → components/dropdown-multi.d.ts} +0 -0
- /package/dist/{dropdown.d.ts → components/dropdown.d.ts} +0 -0
- /package/dist/{error-text.d.ts → components/error-text.d.ts} +0 -0
- /package/dist/{input-timestamp.d.ts → components/input-timestamp.d.ts} +0 -0
- /package/dist/{input.d.ts → components/input.d.ts} +0 -0
- /package/dist/{label-field.d.ts → components/label-field.d.ts} +0 -0
- /package/dist/{menu.d.ts → components/menu.d.ts} +0 -0
- /package/dist/{modal.d.ts → components/modal.d.ts} +0 -0
- /package/dist/{pill-link.d.ts → components/pill-link.d.ts} +0 -0
- /package/dist/{pill.d.ts → components/pill.d.ts} +0 -0
- /package/dist/{preview-card.d.ts → components/preview-card.d.ts} +0 -0
- /package/dist/{select.d.ts → components/select.d.ts} +0 -0
- /package/dist/{switch.d.ts → components/switch.d.ts} +0 -0
- /package/dist/{table.d.ts → components/table.d.ts} +0 -0
- /package/dist/{tag.d.ts → components/tag.d.ts} +0 -0
- /package/dist/{text-link.d.ts → components/text-link.d.ts} +0 -0
- /package/dist/{theme-switcher.d.ts → components/theme-switcher.d.ts} +0 -0
- /package/dist/{typing-animation.d.ts → components/typing-animation.d.ts} +0 -0
- /package/dist/{date-handler.d.ts → utilities/date-handler.d.ts} +0 -0
- /package/dist/{hash-navigation.d.ts → utilities/hash-navigation.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -64,6 +64,7 @@ export function Example() {
|
|
|
64
64
|
- [npm package](https://www.npmjs.com/package/@febkosq8/arc)
|
|
65
65
|
- [GitHub repository](https://github.com/febkosq8/arc)
|
|
66
66
|
- [Component source](./components/)
|
|
67
|
+
- [Utility source](./utilities/)
|
|
67
68
|
- [Storybook stories](./stories/)
|
|
68
69
|
|
|
69
70
|
Arc is primarily built to meet my own projects' needs. It's shared publicly for anyone who might find the code useful, but it isn't intended as a polished, general-purpose replacement for a larger UI framework.
|
package/dist/arc.js
CHANGED
|
@@ -190,45 +190,7 @@ var Se = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
|
|
|
190
190
|
}
|
|
191
191
|
})]
|
|
192
192
|
});
|
|
193
|
-
}
|
|
194
|
-
//#endregion
|
|
195
|
-
//#region components/hash-navigation.ts
|
|
196
|
-
function Ee({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth", block: r } = {}) {
|
|
197
|
-
if (typeof window > "u") return () => {};
|
|
198
|
-
let i = 0, a = setInterval(() => {
|
|
199
|
-
i += 1;
|
|
200
|
-
let { hash: e } = window.location;
|
|
201
|
-
if (!e || i > t) clearInterval(a);
|
|
202
|
-
else try {
|
|
203
|
-
let t = document.querySelector(e);
|
|
204
|
-
t && (t.scrollIntoView({
|
|
205
|
-
behavior: n,
|
|
206
|
-
block: r
|
|
207
|
-
}), clearInterval(a));
|
|
208
|
-
} catch (t) {
|
|
209
|
-
console.error(`Invalid hash in URL: ${e}`, t), clearInterval(a);
|
|
210
|
-
}
|
|
211
|
-
}, e);
|
|
212
|
-
return () => clearInterval(a);
|
|
213
|
-
}
|
|
214
|
-
function De(e) {
|
|
215
|
-
o(() => Ee(e), []);
|
|
216
|
-
}
|
|
217
|
-
function Oe({ container: e, sectionIds: t, hashFirstSection: n = !0, onActiveChange: r }) {
|
|
218
|
-
let i = t.map((e) => document.getElementById(e)).filter((e) => e !== null), a = window.location.hash.toLowerCase().slice(1) || null, o = () => {
|
|
219
|
-
let t = e.getBoundingClientRect(), o = t.top + t.height / 2, s = i.find((e) => {
|
|
220
|
-
let t = e.getBoundingClientRect();
|
|
221
|
-
return t.top <= o && t.bottom > o;
|
|
222
|
-
}), c = s ? i.indexOf(s) : -1;
|
|
223
|
-
if (r?.(c, i), !s || (a === s.id.toLowerCase() && (a = null), c === 0 && a)) return;
|
|
224
|
-
let l = c === 0 && !n ? "" : `#${s.id}`;
|
|
225
|
-
window.location.hash !== l && (window.history.replaceState(window.history.state, "", `${window.location.pathname}${window.location.search}${l}`), window.dispatchEvent(new HashChangeEvent("hashchange")));
|
|
226
|
-
};
|
|
227
|
-
return o(), e.addEventListener("scroll", o, { passive: !0 }), () => e.removeEventListener("scroll", o);
|
|
228
|
-
}
|
|
229
|
-
//#endregion
|
|
230
|
-
//#region components/avatar.tsx
|
|
231
|
-
var ke = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted ring-1 ring-border transition-all", {
|
|
193
|
+
}, Ee = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted ring-1 ring-border transition-all", {
|
|
232
194
|
variants: { size: {
|
|
233
195
|
xs: "size-6 text-xs",
|
|
234
196
|
sm: "size-7 text-sm",
|
|
@@ -237,12 +199,12 @@ var ke = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow
|
|
|
237
199
|
xl: "size-12 text-xl"
|
|
238
200
|
} },
|
|
239
201
|
defaultVariants: { size: "md" }
|
|
240
|
-
}),
|
|
202
|
+
}), De = ({ name: e, image: n, size: r, className: i, ...a }) => {
|
|
241
203
|
let [s, l] = u(!1), d = n?.trim(), p = !!d && !s, m = c(() => e?.split(" ", 3)?.map((e) => e[0])?.filter((e) => /[A-Za-z]/.test(e))?.join("") || "U", [e]);
|
|
242
204
|
return o(() => {
|
|
243
205
|
l(!1);
|
|
244
206
|
}, [d]), /* @__PURE__ */ f("span", {
|
|
245
|
-
className: t(
|
|
207
|
+
className: t(Ee({
|
|
246
208
|
size: r,
|
|
247
209
|
className: i
|
|
248
210
|
})),
|
|
@@ -259,11 +221,11 @@ var ke = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow
|
|
|
259
221
|
children: m
|
|
260
222
|
})
|
|
261
223
|
});
|
|
262
|
-
},
|
|
224
|
+
}, Oe = ({ className: e, ...n }) => /* @__PURE__ */ f("div", {
|
|
263
225
|
role: "separator",
|
|
264
226
|
className: t("arc-divider w-full border-b border-border", e),
|
|
265
227
|
...n
|
|
266
|
-
}),
|
|
228
|
+
}), ke = ({ items: e, value: n, onChange: r, className: i, placeholder: a = "Select an option", disabled: o, name: s, preventEmpty: c = !1, "data-name": l, "data-required": u }) => {
|
|
267
229
|
let d = e.find((e) => String(e.key) === String(n)) ?? null;
|
|
268
230
|
return /* @__PURE__ */ f(m.Root, {
|
|
269
231
|
items: e,
|
|
@@ -333,33 +295,7 @@ var ke = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow
|
|
|
333
295
|
...r,
|
|
334
296
|
children: i
|
|
335
297
|
});
|
|
336
|
-
},
|
|
337
|
-
"(,,> ᴗ <,,)",
|
|
338
|
-
"≽^•⩊•^≼",
|
|
339
|
-
"(╥﹏╥)",
|
|
340
|
-
"(˶ᵔ ᵕ ᵔ˶)",
|
|
341
|
-
"•⩊•",
|
|
342
|
-
"˚₊‧꒰ა ₍ᐢ. ̫.ᐢ₎ ໒꒱ ‧₊˚",
|
|
343
|
-
"٩(ˊᗜˋ )و",
|
|
344
|
-
"(≧◡≦)",
|
|
345
|
-
"⸜(。˃ ᵕ ˂ )⸝♡",
|
|
346
|
-
"(˶˃⤙˂˶)",
|
|
347
|
-
"(˶′◡‵˶)",
|
|
348
|
-
"(^▽^)",
|
|
349
|
-
"˚₊‧꒰ა. .໒꒱ ‧₊˚",
|
|
350
|
-
"( ˶ˆᗜˆ˵ )",
|
|
351
|
-
"⊹ ₊ ⁺‧₊˚ ♡ ପ(๑•ᴗ•๑)ଓ ♡˚₊‧⁺ ₊ ⊹",
|
|
352
|
-
"(つ﹏⊂)",
|
|
353
|
-
"ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ•̫͡ʕ•̫͡•ʕ•̫͡•ʔ•̫͡ʔ•̫͡•",
|
|
354
|
-
"(´・` )♡",
|
|
355
|
-
"(╥_╥)",
|
|
356
|
-
"(♡ˊ͈ ꒳ ˋ͈)",
|
|
357
|
-
"(⸝⸝๑ ̫ ๑⸝⸝⸝)",
|
|
358
|
-
"(˶º⤙º˶)",
|
|
359
|
-
"૮₍。´ᴖ ˔ ᴖ`。₎ა",
|
|
360
|
-
"(•̀ᴗ•́)و ̑̑",
|
|
361
|
-
"(─‿‿─)"
|
|
362
|
-
];
|
|
298
|
+
}, Ae = /* @__PURE__ */ "*.+.×.÷.=.~.!.?.@.#.%.&.§.¶.※.◇.◆.○.●.△.▽.□.■.♠.♣.♦.♤.♧.♢.♪.♫.∴.∵".split(".");
|
|
363
299
|
function U(e, t, n) {
|
|
364
300
|
let r = Math.sin((e + 1) * 12.9898 + t * 78.233 + n * 37.719) * 43758.5453;
|
|
365
301
|
return r - Math.floor(r);
|
|
@@ -371,7 +307,7 @@ var W = [
|
|
|
371
307
|
"star",
|
|
372
308
|
"heart",
|
|
373
309
|
"hexagon"
|
|
374
|
-
],
|
|
310
|
+
], je = e("arc-grid-loader__cell grid aspect-square w-full place-items-center overflow-hidden text-center leading-none break-all", {
|
|
375
311
|
variants: { shape: {
|
|
376
312
|
circle: "rounded-full",
|
|
377
313
|
square: "rounded-md",
|
|
@@ -381,59 +317,39 @@ var W = [
|
|
|
381
317
|
hexagon: "arc-grid-loader__cell--hexagon"
|
|
382
318
|
} },
|
|
383
319
|
defaultVariants: { shape: "circle" }
|
|
384
|
-
}),
|
|
385
|
-
let [
|
|
320
|
+
}), Me = ({ className: e, rows: n = 3, columns: r = 3, size: i = 120, maxSize: a = 24, shape: s = "circle", shapes: c = W, colors: l = [], label: d = "Loading", symbols: p = Ae, style: m, ...h }) => {
|
|
321
|
+
let [g, _] = u([]), [v, y] = u([]), [b, x] = u([]), S = c.length > 0 ? c : W, [C, w] = u(() => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
|
|
386
322
|
if (o(() => {
|
|
387
|
-
s === "mixed" &&
|
|
388
|
-
}, [
|
|
389
|
-
r,
|
|
390
|
-
n,
|
|
391
|
-
s
|
|
392
|
-
]), o(() => {
|
|
393
|
-
s === "mixed" && c.length !== 0 && b(Array.from({ length: n * r }, () => Math.floor(Math.random() * c.length)));
|
|
323
|
+
s === "mixed" && y(Array.from({ length: n * r }, () => S[Math.floor(Math.random() * S.length)]));
|
|
394
324
|
}, [
|
|
325
|
+
S,
|
|
395
326
|
r,
|
|
396
|
-
c.length,
|
|
397
327
|
n,
|
|
398
328
|
s
|
|
399
329
|
]), o(() => {
|
|
400
|
-
let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = () =>
|
|
330
|
+
let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = () => w(e.matches);
|
|
401
331
|
return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
|
|
402
332
|
}, []), o(() => {
|
|
403
|
-
|
|
404
|
-
let e = () => {
|
|
405
|
-
let e = Array.from({ length: d.length }, (e, t) => t);
|
|
406
|
-
for (let t = e.length - 1; t > 0; --t) {
|
|
407
|
-
let n = Math.floor(Math.random() * (t + 1));
|
|
408
|
-
[e[t], e[n]] = [e[n], e[t]];
|
|
409
|
-
}
|
|
410
|
-
g(Array.from({ length: n * r }, (t, n) => e[n % e.length]));
|
|
411
|
-
};
|
|
412
|
-
if (e(), d.length < 2) return;
|
|
413
|
-
let t = window.setInterval(() => {
|
|
414
|
-
e();
|
|
415
|
-
}, 900);
|
|
416
|
-
return () => window.clearInterval(t);
|
|
333
|
+
C || p.length === 0 || _(Array.from({ length: n * r }, () => Math.floor(Math.random() * p.length)));
|
|
417
334
|
}, [
|
|
418
335
|
r,
|
|
419
|
-
|
|
336
|
+
C,
|
|
420
337
|
n,
|
|
421
|
-
|
|
338
|
+
p
|
|
422
339
|
]), !Number.isInteger(n) || n < 1) throw RangeError("GridLoader rows must be a positive integer.");
|
|
423
340
|
if (!Number.isInteger(r) || r < 1) throw RangeError("GridLoader columns must be a positive integer.");
|
|
424
341
|
if (!Number.isFinite(i) || i <= 0) throw RangeError("GridLoader size must be a positive number.");
|
|
425
342
|
if (!Number.isFinite(a) || a <= 0) throw RangeError("GridLoader maxSize must be a positive number.");
|
|
426
|
-
if (d.length === 0) throw RangeError("GridLoader symbols must contain at least one item.");
|
|
427
343
|
return /* @__PURE__ */ f("span", {
|
|
428
|
-
...
|
|
344
|
+
...h,
|
|
429
345
|
role: "status",
|
|
430
346
|
"aria-live": "polite",
|
|
431
|
-
"aria-label":
|
|
347
|
+
"aria-label": d,
|
|
432
348
|
className: t("arc-grid-loader inline-flex shrink-0 items-center justify-center align-middle", e),
|
|
433
349
|
style: {
|
|
434
350
|
width: i,
|
|
435
351
|
height: i,
|
|
436
|
-
...
|
|
352
|
+
...m
|
|
437
353
|
},
|
|
438
354
|
children: /* @__PURE__ */ f("span", {
|
|
439
355
|
"aria-hidden": "true",
|
|
@@ -444,25 +360,31 @@ var W = [
|
|
|
444
360
|
gridTemplateRows: `repeat(${n}, minmax(0, 1fr))`
|
|
445
361
|
},
|
|
446
362
|
children: Array.from({ length: n * r }, (e, o) => /* @__PURE__ */ f("span", {
|
|
447
|
-
className: t(
|
|
363
|
+
className: t(je({ shape: s === "mixed" ? v[o] ?? S[Math.floor(U(o, n, r) * S.length)] : s })),
|
|
448
364
|
onAnimationIteration: () => {
|
|
449
|
-
s === "mixed" && (
|
|
450
|
-
let t = [...e], i = t[o] ??
|
|
451
|
-
return t[o] = a[Math.floor(Math.random() * a.length)], t;
|
|
452
|
-
}),
|
|
365
|
+
s === "mixed" && y((e) => {
|
|
366
|
+
let t = [...e], i = t[o] ?? S[Math.floor(U(o, n, r) * S.length)], a = S.filter((e) => e !== i);
|
|
367
|
+
return t[o] = a.length > 0 ? a[Math.floor(Math.random() * a.length)] : i, t;
|
|
368
|
+
}), l.length > 1 && x((e) => {
|
|
369
|
+
let t = [...e];
|
|
370
|
+
return t[o] = (t[o] ?? 0) + 1, t;
|
|
371
|
+
}), p.length > 1 && _((e) => {
|
|
453
372
|
let t = [...e];
|
|
454
|
-
return t[o] = ((t[o] ?? o %
|
|
455
|
-
})
|
|
373
|
+
return t[o] = ((t[o] ?? o % p.length) + (1 + Math.floor(Math.random() * (p.length - 1)))) % p.length, t;
|
|
374
|
+
});
|
|
456
375
|
},
|
|
457
376
|
style: {
|
|
458
|
-
animationDelay: `${-U(o, n, r) * 1200}ms`,
|
|
459
|
-
animationDuration: `${900 + U(o, n, r) * 600}ms`,
|
|
460
|
-
backgroundColor:
|
|
461
|
-
fontSize: `${Math.min(i / Math.max(n, r), a) * .
|
|
377
|
+
animationDelay: l.length > 1 ? `${o / (n * r) * 1200}ms` : `${-U(o, n, r) * 1200}ms`,
|
|
378
|
+
animationDuration: l.length > 1 ? "1200ms" : `${900 + U(o, n, r) * 600}ms`,
|
|
379
|
+
backgroundColor: l.length > 0 ? l[(o + (b[o] ?? 0)) % l.length] : void 0,
|
|
380
|
+
fontSize: `${Math.min(i / Math.max(n, r), a) * .4}px`,
|
|
462
381
|
maxWidth: a,
|
|
463
382
|
maxHeight: a
|
|
464
383
|
},
|
|
465
|
-
children:
|
|
384
|
+
children: p.length > 0 && /* @__PURE__ */ f("span", {
|
|
385
|
+
className: "grid h-full w-full place-items-center text-center leading-none",
|
|
386
|
+
children: p[g[o] ?? o % p.length]
|
|
387
|
+
})
|
|
466
388
|
}, o))
|
|
467
389
|
})
|
|
468
390
|
});
|
|
@@ -484,7 +406,7 @@ var W = [
|
|
|
484
406
|
children: [/* @__PURE__ */ f(A.Arrow, { className: t("border-border bg-popover h-3 w-3 rotate-45", "data-[side=bottom]:-top-1.5 data-[side=bottom]:border-t data-[side=bottom]:border-l", "data-[side=top]:-bottom-1.5 data-[side=top]:border-r data-[side=top]:border-b", "data-[side=left]:-right-1.5 data-[side=left]:border-t data-[side=left]:border-r", "data-[side=right]:-left-1.5 data-[side=right]:border-b data-[side=right]:border-l") }), e]
|
|
485
407
|
})
|
|
486
408
|
}) })]
|
|
487
|
-
}),
|
|
409
|
+
}), Ne = ({ id: e, label: n, help: r, errors: i, className: a, ...o }) => {
|
|
488
410
|
let s = Array.isArray(i) ? i.map((e) => e == null ? "" : String(e)) : typeof i == "string" ? i : null;
|
|
489
411
|
return /* @__PURE__ */ p("div", {
|
|
490
412
|
...o,
|
|
@@ -515,7 +437,7 @@ var W = [
|
|
|
515
437
|
s && (Array.isArray(s) ? s.length > 0 && /* @__PURE__ */ f(H, { data: s }) : /* @__PURE__ */ f(H, { data: s }))
|
|
516
438
|
]
|
|
517
439
|
});
|
|
518
|
-
},
|
|
440
|
+
}, Pe = e("arc-input rounded border text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-hidden focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:border-muted disabled:bg-muted", {
|
|
519
441
|
variants: {
|
|
520
442
|
variant: {
|
|
521
443
|
default: "border-border bg-background",
|
|
@@ -531,7 +453,7 @@ var W = [
|
|
|
531
453
|
as: "input"
|
|
532
454
|
}
|
|
533
455
|
}), K = ({ as: e = "input", className: n, variant: r, ...i }) => {
|
|
534
|
-
let a = t(
|
|
456
|
+
let a = t(Pe({
|
|
535
457
|
as: e,
|
|
536
458
|
variant: r
|
|
537
459
|
}), n);
|
|
@@ -540,7 +462,7 @@ var W = [
|
|
|
540
462
|
autoComplete: "off",
|
|
541
463
|
className: a
|
|
542
464
|
});
|
|
543
|
-
},
|
|
465
|
+
}, Fe = e("arc-card group relative rounded-lg border border-foreground/40 bg-card/90 p-3 shadow-xs", {
|
|
544
466
|
variants: { variant: {
|
|
545
467
|
primary: "border-primary bg-primary text-primary-foreground",
|
|
546
468
|
secondary: "border-secondary bg-secondary text-secondary-foreground",
|
|
@@ -555,7 +477,7 @@ var W = [
|
|
|
555
477
|
}), q = (e) => {
|
|
556
478
|
let { className: n, variant: r, hoverable: i = !0, hoverLift: a = !0, hoverBorder: o = !0, hoverGradient: s = !0, postHeaderBorder: c = !0, preFooterBorder: l = !0, onPointerMove: u, ...d } = e, p = i && a, m = i && o, h = i && s;
|
|
557
479
|
return /* @__PURE__ */ f("div", {
|
|
558
|
-
className: t(
|
|
480
|
+
className: t(Fe({ variant: r }), h && "arc-card-cursor-border", c && "[&_.arc-card-header]:border-b", !c && "[&_.arc-card-header]:border-b-0", l && "[&_.arc-card-footer]:border-t", !l && "[&_.arc-card-footer]:border-t-0", (p || m) && "transition-[border-color,transform] duration-300 ease-out", p && "hover:-translate-y-1", m && "hover:border-primary", n),
|
|
559
481
|
onPointerMove: h ? (e) => {
|
|
560
482
|
if (u?.(e), !h) return;
|
|
561
483
|
let t = e.currentTarget.getBoundingClientRect();
|
|
@@ -584,8 +506,8 @@ q.Header = (e) => {
|
|
|
584
506
|
});
|
|
585
507
|
};
|
|
586
508
|
//#endregion
|
|
587
|
-
//#region
|
|
588
|
-
var
|
|
509
|
+
//#region utilities/date-handler.ts
|
|
510
|
+
var J = class e {
|
|
589
511
|
static toDateTime(e) {
|
|
590
512
|
if (e == null || e === "") return j.invalid("missing date");
|
|
591
513
|
if (e instanceof Date) return j.fromJSDate(e);
|
|
@@ -602,7 +524,7 @@ var ze = class e {
|
|
|
602
524
|
}
|
|
603
525
|
return j.fromJSDate(new Date(String(e)));
|
|
604
526
|
}
|
|
605
|
-
static getDateTime(t, n = "dd/
|
|
527
|
+
static getDateTime(t, n = "dd/MMM/yyyy hh:mm:ss a") {
|
|
606
528
|
let r = e.toDateTime(t);
|
|
607
529
|
return r.isValid ? r.toFormat(n) : "";
|
|
608
530
|
}
|
|
@@ -643,8 +565,8 @@ var ze = class e {
|
|
|
643
565
|
let r = e.getDateTime(t), i = e.getRelativeTime(t);
|
|
644
566
|
return n.replace("$ISO$", r).replace("$RELATIVE$", i);
|
|
645
567
|
}
|
|
646
|
-
},
|
|
647
|
-
let r = c(() => e ?
|
|
568
|
+
}, Ie = ({ value: e, format: t = "$ISO$ ($RELATIVE$)", ...n }) => {
|
|
569
|
+
let r = c(() => e ? J.getFormattedTime(e, t) : "", [e, t]);
|
|
648
570
|
return /* @__PURE__ */ f(K, {
|
|
649
571
|
type: "text",
|
|
650
572
|
disabled: !0,
|
|
@@ -653,7 +575,7 @@ var ze = class e {
|
|
|
653
575
|
size: Math.max(r.length, 1),
|
|
654
576
|
...n
|
|
655
577
|
});
|
|
656
|
-
},
|
|
578
|
+
}, Le = e("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", {
|
|
657
579
|
variants: {
|
|
658
580
|
variant: {
|
|
659
581
|
pill: "arc-pill-link min-w-fit border border-transparent text-base text-muted-foreground transition hover:text-primary hover:outline-none hover:ring-0 focus:outline-none focus-visible:ring-opacity-75",
|
|
@@ -674,8 +596,8 @@ var ze = class e {
|
|
|
674
596
|
variant: "pill",
|
|
675
597
|
size: "md"
|
|
676
598
|
}
|
|
677
|
-
}),
|
|
678
|
-
className: t(
|
|
599
|
+
}), Re = ({ active: e = !1, className: n, size: r = "md", variant: i = "pill", ...a }) => /* @__PURE__ */ f("a", {
|
|
600
|
+
className: t(Le({
|
|
679
601
|
variant: i,
|
|
680
602
|
size: r
|
|
681
603
|
}), e && {
|
|
@@ -685,15 +607,15 @@ var ze = class e {
|
|
|
685
607
|
}[i], n),
|
|
686
608
|
"aria-current": e ? "page" : void 0,
|
|
687
609
|
...a
|
|
688
|
-
}),
|
|
610
|
+
}), Y = ({ active: e = !1, className: n, ...r }) => /* @__PURE__ */ f("button", {
|
|
689
611
|
type: "button",
|
|
690
612
|
className: t("arc-pill", "inline-flex h-10 pointer-coarse:h-11 w-full items-center justify-center whitespace-nowrap rounded-md border border-transparent px-3 py-2 text-base font-medium text-foreground transition hover:text-primary hover:outline-none hover:ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-opacity-75", e ? "text-primary!" : "text-muted-foreground", n),
|
|
691
613
|
"aria-pressed": e,
|
|
692
614
|
...r
|
|
693
|
-
}),
|
|
615
|
+
}), ze = ({ children: e }) => n.toArray(e).map((e, t) => /* @__PURE__ */ p(r, { children: [t > 0 && /* @__PURE__ */ f(M.Separator, { className: "mx-2 h-px bg-border" }), e] }, t)), X = Object.assign(({ className: e, contentClassName: n, active: r, activeClassName: i, buttonText: a, children: o }) => /* @__PURE__ */ p(M.Root, {
|
|
694
616
|
loopFocus: !0,
|
|
695
617
|
children: [/* @__PURE__ */ p(M.Trigger, {
|
|
696
|
-
render: /* @__PURE__ */ f(
|
|
618
|
+
render: /* @__PURE__ */ f(Y, {
|
|
697
619
|
active: r,
|
|
698
620
|
className: t("w-fit", r && i, e)
|
|
699
621
|
}),
|
|
@@ -707,7 +629,7 @@ var ze = class e {
|
|
|
707
629
|
collisionPadding: 8,
|
|
708
630
|
children: /* @__PURE__ */ f(M.Popup, {
|
|
709
631
|
className: t("arc-menu-content z-50 flex bg-popover w-fit min-w-40 max-w-[calc(100vw-1rem)] origin-top-right flex-col overflow-hidden rounded-md border border-border text-foreground shadow-lg ring-1 ring-foreground/10 focus:outline-none", n),
|
|
710
|
-
children: /* @__PURE__ */ f(
|
|
632
|
+
children: /* @__PURE__ */ f(ze, { children: o })
|
|
711
633
|
})
|
|
712
634
|
}) })]
|
|
713
635
|
}), {
|
|
@@ -748,12 +670,12 @@ var ze = class e {
|
|
|
748
670
|
collisionPadding: 8,
|
|
749
671
|
children: /* @__PURE__ */ f(M.Popup, {
|
|
750
672
|
className: "arc-menu-content z-50 flex bg-popover w-fit min-w-40 max-w-[calc(100vw-1rem)] origin-top-right flex-col overflow-hidden rounded-md border border-border text-foreground shadow-lg ring-1 ring-foreground/10 focus:outline-none",
|
|
751
|
-
children: /* @__PURE__ */ f(
|
|
673
|
+
children: /* @__PURE__ */ f(ze, { children: i })
|
|
752
674
|
})
|
|
753
675
|
}) })]
|
|
754
676
|
});
|
|
755
677
|
}
|
|
756
|
-
}),
|
|
678
|
+
}), Be = ({ open: e = !1, setOpen: n, children: r, initialFocus: i, headerContent: a, footerContent: s, width: c, height: l, className: u, customKeyHandler: d }) => (o(() => {
|
|
757
679
|
if (!e) return;
|
|
758
680
|
let t = (e) => {
|
|
759
681
|
let t = e.key === "Escape" ? "esc" : (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s" ? "ctrl+s" : null;
|
|
@@ -792,7 +714,7 @@ var ze = class e {
|
|
|
792
714
|
]
|
|
793
715
|
})
|
|
794
716
|
})] })
|
|
795
|
-
})),
|
|
717
|
+
})), Ve = ({ id: e, items: n, value: r, onChange: i, className: a, placeholder: o = "Select options", disabled: s, name: c, preventEmpty: l = !1, "data-name": u, "data-required": d }) => {
|
|
796
718
|
let h = n.filter((e) => r?.includes(String(e.key)));
|
|
797
719
|
return /* @__PURE__ */ f(m.Root, {
|
|
798
720
|
multiple: !0,
|
|
@@ -872,7 +794,7 @@ var ze = class e {
|
|
|
872
794
|
}) })]
|
|
873
795
|
})
|
|
874
796
|
});
|
|
875
|
-
},
|
|
797
|
+
}, Z = ({ id: e, value: n, onChange: r, data: i, className: a, disabled: o, placeholder: s, ...c }) => /* @__PURE__ */ p(B.Root, {
|
|
876
798
|
value: n,
|
|
877
799
|
onValueChange: (e) => {
|
|
878
800
|
e !== null && r(e);
|
|
@@ -924,7 +846,7 @@ var ze = class e {
|
|
|
924
846
|
})
|
|
925
847
|
})
|
|
926
848
|
}) })]
|
|
927
|
-
}),
|
|
849
|
+
}), He = e("arc-tag inline-flex w-fit items-center rounded-full border border-transparent px-1.5 py-0.5 text-xs font-bold", {
|
|
928
850
|
variants: { variant: {
|
|
929
851
|
primary: "bg-primary text-primary-foreground",
|
|
930
852
|
secondary: "border-border bg-secondary text-secondary-foreground",
|
|
@@ -934,23 +856,23 @@ var ze = class e {
|
|
|
934
856
|
outline: "border-border bg-transparent text-foreground"
|
|
935
857
|
} },
|
|
936
858
|
defaultVariants: { variant: "primary" }
|
|
937
|
-
}),
|
|
938
|
-
className: t(
|
|
859
|
+
}), Ue = ({ className: e, variant: n, ...r }) => /* @__PURE__ */ f("div", {
|
|
860
|
+
className: t(He({
|
|
939
861
|
variant: n,
|
|
940
862
|
className: e
|
|
941
863
|
})),
|
|
942
864
|
...r
|
|
943
|
-
}),
|
|
865
|
+
}), We = (e, t, n, r) => {
|
|
944
866
|
let i = e.getValue(t), a = ee(i, n);
|
|
945
867
|
return r({ itemRank: a }), a.passed;
|
|
946
|
-
},
|
|
947
|
-
fuzzy:
|
|
868
|
+
}, Q = {
|
|
869
|
+
fuzzy: We,
|
|
948
870
|
includesString: le,
|
|
949
871
|
select: (e, t, n) => {
|
|
950
872
|
let r = e.getValue(t);
|
|
951
873
|
return Array.isArray(r) ? r.some((e) => String(e) === String(n)) : typeof r == "string" && r.includes(",") ? r.split(",").map((e) => e.trim()).includes(String(n)) : String(r) === String(n);
|
|
952
874
|
}
|
|
953
|
-
},
|
|
875
|
+
}, Ge = ye({
|
|
954
876
|
columnMeta: {},
|
|
955
877
|
columnFilteringFeature: te,
|
|
956
878
|
columnResizingFeature: ne,
|
|
@@ -970,23 +892,23 @@ var ze = class e {
|
|
|
970
892
|
text: _e,
|
|
971
893
|
textCaseSensitive: ve
|
|
972
894
|
},
|
|
973
|
-
filterFns:
|
|
895
|
+
filterFns: Q
|
|
974
896
|
});
|
|
975
|
-
function
|
|
976
|
-
return Object.prototype.hasOwnProperty.call(
|
|
897
|
+
function Ke(e) {
|
|
898
|
+
return Object.prototype.hasOwnProperty.call(Q, e);
|
|
977
899
|
}
|
|
978
|
-
function
|
|
900
|
+
function qe(e, t) {
|
|
979
901
|
if (e !== !1) {
|
|
980
902
|
if (e === void 0) return t ? "select" : void 0;
|
|
981
|
-
if (typeof e == "function" || e === "auto" ||
|
|
982
|
-
throw Error(`Unsupported table filterFn "${e}". Use "auto" or one of: ${Object.keys(
|
|
903
|
+
if (typeof e == "function" || e === "auto" || Ke(e)) return e;
|
|
904
|
+
throw Error(`Unsupported table filterFn "${e}". Use "auto" or one of: ${Object.keys(Q).join(", ")}.`);
|
|
983
905
|
}
|
|
984
906
|
}
|
|
985
|
-
var
|
|
907
|
+
var Je = ae(), Ye = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a = !0, showFilters: o = !0, showSorting: l = !0 }) => {
|
|
986
908
|
let d = s(), [m, b] = u({
|
|
987
909
|
pageIndex: 0,
|
|
988
910
|
pageSize: r
|
|
989
|
-
}), [x, w] = u([]), [T, D] = u(""), [O, k] = u([]), [A, j] = u({}), M = x.length > 0 || T !== "", N = c(() => n?.map((e) =>
|
|
911
|
+
}), [x, w] = u([]), [T, D] = u(""), [O, k] = u([]), [A, j] = u({}), M = x.length > 0 || T !== "", N = c(() => n?.map((e) => Je.accessor(e.accessorKey, {
|
|
990
912
|
id: e.id,
|
|
991
913
|
enableResizing: e.enableResizing,
|
|
992
914
|
enableColumnFilter: e.filterFn !== !1 && e.enableColumnFilter,
|
|
@@ -995,7 +917,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
|
|
|
995
917
|
size: e.size,
|
|
996
918
|
minSize: e.minSize ?? 50,
|
|
997
919
|
maxSize: e.maxSize ?? 1e3,
|
|
998
|
-
filterFn:
|
|
920
|
+
filterFn: qe(e.filterFn, e.filterSelectOptions),
|
|
999
921
|
meta: {
|
|
1000
922
|
headerLabel: e.header,
|
|
1001
923
|
filterSelectOptions: e.filterSelectOptions,
|
|
@@ -1039,8 +961,8 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
|
|
|
1039
961
|
onSortingChange: k,
|
|
1040
962
|
onColumnFiltersChange: w,
|
|
1041
963
|
onGlobalFilterChange: D,
|
|
1042
|
-
globalFilterFn:
|
|
1043
|
-
features:
|
|
964
|
+
globalFilterFn: We,
|
|
965
|
+
features: Ge,
|
|
1044
966
|
defaultColumn: {
|
|
1045
967
|
size: 200,
|
|
1046
968
|
minSize: 50,
|
|
@@ -1065,7 +987,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
|
|
|
1065
987
|
title: "Clear filters and sorting",
|
|
1066
988
|
type: "button",
|
|
1067
989
|
children: [/* @__PURE__ */ f(E, { className: "mr-1.5 h-3 w-3" }), "Clear filters and sorting"]
|
|
1068
|
-
}), /* @__PURE__ */ f(
|
|
990
|
+
}), /* @__PURE__ */ f(Qe, { table: P })]
|
|
1069
991
|
}),
|
|
1070
992
|
/* @__PURE__ */ p("nav", {
|
|
1071
993
|
"aria-label": "Table pagination",
|
|
@@ -1174,7 +1096,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
|
|
|
1174
1096
|
/* @__PURE__ */ p("label", {
|
|
1175
1097
|
htmlFor: `${d}-page-size`,
|
|
1176
1098
|
className: "text-muted-foreground flex w-full items-center justify-between gap-2 text-xs md:w-auto",
|
|
1177
|
-
children: ["Rows per page", /* @__PURE__ */ f(
|
|
1099
|
+
children: ["Rows per page", /* @__PURE__ */ f(Z, {
|
|
1178
1100
|
id: `${d}-page-size`,
|
|
1179
1101
|
value: P.state.pagination.pageSize.toString(),
|
|
1180
1102
|
onChange: (e) => {
|
|
@@ -1213,7 +1135,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
|
|
|
1213
1135
|
htmlFor: `${d}-sort`,
|
|
1214
1136
|
className: "text-muted-foreground mb-1 block text-xs font-medium",
|
|
1215
1137
|
children: "Sort by"
|
|
1216
|
-
}), /* @__PURE__ */ f(
|
|
1138
|
+
}), /* @__PURE__ */ f(Z, {
|
|
1217
1139
|
id: `${d}-sort`,
|
|
1218
1140
|
value: O[0]?.id ?? "__none__",
|
|
1219
1141
|
onChange: (e) => {
|
|
@@ -1257,7 +1179,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
|
|
|
1257
1179
|
htmlFor: n,
|
|
1258
1180
|
className: "text-muted-foreground mb-1 block text-xs font-medium",
|
|
1259
1181
|
children: t
|
|
1260
|
-
}), /* @__PURE__ */ f(
|
|
1182
|
+
}), /* @__PURE__ */ f(Ze, {
|
|
1261
1183
|
column: e,
|
|
1262
1184
|
idPrefix: `${d}-`
|
|
1263
1185
|
})]
|
|
@@ -1327,7 +1249,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
|
|
|
1327
1249
|
]
|
|
1328
1250
|
});
|
|
1329
1251
|
};
|
|
1330
|
-
function
|
|
1252
|
+
function Xe({ value: e, onChange: t, debounce: n = 500, ...r }) {
|
|
1331
1253
|
let [i, a] = u(e);
|
|
1332
1254
|
return o(() => {
|
|
1333
1255
|
a(e);
|
|
@@ -1347,7 +1269,7 @@ function et({ value: e, onChange: t, debounce: n = 500, ...r }) {
|
|
|
1347
1269
|
autoComplete: "off"
|
|
1348
1270
|
});
|
|
1349
1271
|
}
|
|
1350
|
-
function
|
|
1272
|
+
function Ze({ column: e, idPrefix: t = "" }) {
|
|
1351
1273
|
let n = `${t}${e.id}-filter`, r = {
|
|
1352
1274
|
includesString: "Includes string",
|
|
1353
1275
|
equalsString: "Equals string",
|
|
@@ -1355,7 +1277,7 @@ function tt({ column: e, idPrefix: t = "" }) {
|
|
|
1355
1277
|
equals: "Equals",
|
|
1356
1278
|
fuzzy: "Fuzzy"
|
|
1357
1279
|
}, i = e.getFilterValue(), a = e.columnDef.meta?.filterSelectOptions;
|
|
1358
|
-
return a ? /* @__PURE__ */ f(
|
|
1280
|
+
return a ? /* @__PURE__ */ f(Z, {
|
|
1359
1281
|
id: n,
|
|
1360
1282
|
value: i ?? "__all__",
|
|
1361
1283
|
onChange: (t) => e.setFilterValue(t === "__all__" ? void 0 : t),
|
|
@@ -1367,7 +1289,7 @@ function tt({ column: e, idPrefix: t = "" }) {
|
|
|
1367
1289
|
key: e.value,
|
|
1368
1290
|
label: e.label
|
|
1369
1291
|
}))]
|
|
1370
|
-
}) : /* @__PURE__ */ f(
|
|
1292
|
+
}) : /* @__PURE__ */ f(Xe, {
|
|
1371
1293
|
id: n,
|
|
1372
1294
|
type: "text",
|
|
1373
1295
|
name: e.id,
|
|
@@ -1378,7 +1300,7 @@ function tt({ column: e, idPrefix: t = "" }) {
|
|
|
1378
1300
|
className: "border-border text-foreground placeholder:text-muted-foreground focus:ring-ring w-full rounded border bg-transparent px-2 py-1 text-xs shadow-sm focus:border-transparent focus:ring-1 focus:outline-hidden"
|
|
1379
1301
|
});
|
|
1380
1302
|
}
|
|
1381
|
-
function
|
|
1303
|
+
function Qe({ table: e }) {
|
|
1382
1304
|
return /* @__PURE__ */ p(G, {
|
|
1383
1305
|
trigger: "click",
|
|
1384
1306
|
triggerRender: /* @__PURE__ */ f(V, {
|
|
@@ -1410,31 +1332,31 @@ function nt({ table: e }) {
|
|
|
1410
1332
|
}
|
|
1411
1333
|
//#endregion
|
|
1412
1334
|
//#region components/text-link.tsx
|
|
1413
|
-
var
|
|
1335
|
+
var $e = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }) => /* @__PURE__ */ f("a", {
|
|
1414
1336
|
className: t("arc-text-link rounded-md text-primary underline transition hover:text-primary/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-opacity-75", e),
|
|
1415
1337
|
href: n,
|
|
1416
1338
|
target: i,
|
|
1417
1339
|
rel: a ?? (i === "_blank" ? "noopener noreferrer" : void 0),
|
|
1418
1340
|
...o,
|
|
1419
1341
|
children: r
|
|
1420
|
-
}),
|
|
1342
|
+
}), et = ({ checked: e = !1, onChange: n, disabled: r = !1, variant: i = "primary", children: a, ...o }) => /* @__PURE__ */ f(xe.Root, {
|
|
1421
1343
|
checked: e,
|
|
1422
1344
|
disabled: r,
|
|
1423
1345
|
onCheckedChange: n,
|
|
1424
|
-
className: t("arc-switch",
|
|
1346
|
+
className: t("arc-switch", tt({
|
|
1425
1347
|
variant: i,
|
|
1426
1348
|
disabled: r
|
|
1427
1349
|
})),
|
|
1428
1350
|
...o,
|
|
1429
1351
|
children: a ? a(e) : /* @__PURE__ */ f(xe.Thumb, {
|
|
1430
1352
|
"aria-hidden": "true",
|
|
1431
|
-
className:
|
|
1353
|
+
className: nt({
|
|
1432
1354
|
variant: i,
|
|
1433
1355
|
checked: e,
|
|
1434
1356
|
disabled: r
|
|
1435
1357
|
})
|
|
1436
1358
|
})
|
|
1437
|
-
}),
|
|
1359
|
+
}), tt = e("relative inline-flex h-7 w-12 items-center rounded-full border border-border bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:not-data-disabled:ring-2 hover:not-data-disabled:ring-ring/60 data-disabled:cursor-not-allowed data-disabled:opacity-60", { variants: {
|
|
1438
1360
|
variant: {
|
|
1439
1361
|
danger: "data-checked:bg-destructive",
|
|
1440
1362
|
success: "data-checked:bg-success",
|
|
@@ -1445,7 +1367,7 @@ var rt = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
|
|
|
1445
1367
|
true: "ring-2 ring-border",
|
|
1446
1368
|
false: ""
|
|
1447
1369
|
}
|
|
1448
|
-
} }),
|
|
1370
|
+
} }), nt = e("absolute top-1/2 inline-block h-5 w-5 -translate-y-1/2 transform rounded-full border shadow-sm transition-[left,background-color,border-color] duration-300 ease-out", {
|
|
1449
1371
|
variants: {
|
|
1450
1372
|
variant: {
|
|
1451
1373
|
primary: "",
|
|
@@ -1538,7 +1460,7 @@ var rt = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
|
|
|
1538
1460
|
className: "border-success bg-success/70"
|
|
1539
1461
|
}
|
|
1540
1462
|
]
|
|
1541
|
-
}),
|
|
1463
|
+
}), rt = {
|
|
1542
1464
|
light: L,
|
|
1543
1465
|
dark: I,
|
|
1544
1466
|
system: F
|
|
@@ -1546,25 +1468,25 @@ var rt = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
|
|
|
1546
1468
|
light: "Light",
|
|
1547
1469
|
dark: "Dark",
|
|
1548
1470
|
system: "System"
|
|
1549
|
-
},
|
|
1471
|
+
}, it = "theme", at = (e) => e === "dark" || e === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, ot = () => {
|
|
1550
1472
|
if (typeof window > "u") return "system";
|
|
1551
|
-
let e = window.localStorage.getItem(
|
|
1473
|
+
let e = window.localStorage.getItem(it);
|
|
1552
1474
|
return e === "light" || e === "dark" || e === "system" ? e : "system";
|
|
1553
|
-
},
|
|
1554
|
-
function
|
|
1555
|
-
let [r, i] = u(
|
|
1475
|
+
}, st = (e) => e === "system" ? "light" : e === "light" ? "dark" : "system";
|
|
1476
|
+
function ct({ variant: e = "dropdown", showLabel: n = !1 }) {
|
|
1477
|
+
let [r, i] = u(ot);
|
|
1556
1478
|
o(() => {
|
|
1557
|
-
typeof window < "u" && (document.documentElement.classList.toggle("dark",
|
|
1479
|
+
typeof window < "u" && (document.documentElement.classList.toggle("dark", at(r)), window.localStorage.setItem(it, r));
|
|
1558
1480
|
}, [r]);
|
|
1559
1481
|
let a = () => {
|
|
1560
|
-
i(
|
|
1482
|
+
i(st(r));
|
|
1561
1483
|
};
|
|
1562
1484
|
if (e === "toggle") {
|
|
1563
|
-
let e =
|
|
1485
|
+
let e = rt[r], t = st(r);
|
|
1564
1486
|
return /* @__PURE__ */ f("div", {
|
|
1565
1487
|
className: "arc-theme-switcher",
|
|
1566
|
-
children: /* @__PURE__ */ p(
|
|
1567
|
-
active:
|
|
1488
|
+
children: /* @__PURE__ */ p(Y, {
|
|
1489
|
+
active: at(r),
|
|
1568
1490
|
"aria-label": `Switch to ${t} theme`,
|
|
1569
1491
|
title: `Switch to ${t} theme`,
|
|
1570
1492
|
onClick: a,
|
|
@@ -1573,18 +1495,18 @@ function dt({ variant: e = "dropdown", showLabel: n = !1 }) {
|
|
|
1573
1495
|
})
|
|
1574
1496
|
});
|
|
1575
1497
|
}
|
|
1576
|
-
let s =
|
|
1498
|
+
let s = rt[r];
|
|
1577
1499
|
return /* @__PURE__ */ f("div", {
|
|
1578
1500
|
className: "arc-theme-switcher",
|
|
1579
|
-
children: /* @__PURE__ */ p(
|
|
1501
|
+
children: /* @__PURE__ */ p(X, {
|
|
1580
1502
|
className: "gap-3",
|
|
1581
1503
|
contentClassName: "min-w-(--anchor-width)",
|
|
1582
1504
|
buttonText: /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(s, { "aria-hidden": "true" }), n && $[r]] }),
|
|
1583
1505
|
children: [
|
|
1584
|
-
/* @__PURE__ */ f(
|
|
1506
|
+
/* @__PURE__ */ f(X.Item, {
|
|
1585
1507
|
asChild: !0,
|
|
1586
1508
|
className: t("border-0! focus-visible:outline-none", n ? "px-3!" : "justify-center! p-0!"),
|
|
1587
|
-
children: /* @__PURE__ */ p(
|
|
1509
|
+
children: /* @__PURE__ */ p(Y, {
|
|
1588
1510
|
active: r === "system",
|
|
1589
1511
|
title: "System Theme",
|
|
1590
1512
|
onClick: () => {
|
|
@@ -1597,10 +1519,10 @@ function dt({ variant: e = "dropdown", showLabel: n = !1 }) {
|
|
|
1597
1519
|
}), n && $.system]
|
|
1598
1520
|
})
|
|
1599
1521
|
}),
|
|
1600
|
-
/* @__PURE__ */ f(
|
|
1522
|
+
/* @__PURE__ */ f(X.Item, {
|
|
1601
1523
|
asChild: !0,
|
|
1602
1524
|
className: t("border-0! focus-visible:outline-none", n ? "px-3!" : "justify-center! p-0!"),
|
|
1603
|
-
children: /* @__PURE__ */ p(
|
|
1525
|
+
children: /* @__PURE__ */ p(Y, {
|
|
1604
1526
|
active: r === "light",
|
|
1605
1527
|
title: "Light Theme",
|
|
1606
1528
|
onClick: () => {
|
|
@@ -1613,10 +1535,10 @@ function dt({ variant: e = "dropdown", showLabel: n = !1 }) {
|
|
|
1613
1535
|
}), n && $.light]
|
|
1614
1536
|
})
|
|
1615
1537
|
}),
|
|
1616
|
-
/* @__PURE__ */ f(
|
|
1538
|
+
/* @__PURE__ */ f(X.Item, {
|
|
1617
1539
|
asChild: !0,
|
|
1618
1540
|
className: t("border-0! focus-visible:outline-none", n ? "px-3!" : "justify-center! p-0!"),
|
|
1619
|
-
children: /* @__PURE__ */ p(
|
|
1541
|
+
children: /* @__PURE__ */ p(Y, {
|
|
1620
1542
|
active: r === "dark",
|
|
1621
1543
|
title: "Dark Theme",
|
|
1622
1544
|
onClick: () => {
|
|
@@ -1635,16 +1557,16 @@ function dt({ variant: e = "dropdown", showLabel: n = !1 }) {
|
|
|
1635
1557
|
}
|
|
1636
1558
|
//#endregion
|
|
1637
1559
|
//#region components/typing-animation.tsx
|
|
1638
|
-
function
|
|
1560
|
+
function lt(e) {
|
|
1639
1561
|
return e === "newline" ? "\n" : e === "comma" ? ", " : "";
|
|
1640
1562
|
}
|
|
1641
|
-
function
|
|
1563
|
+
function ut(e, t, n, r, i) {
|
|
1642
1564
|
if (r === "character") return Math.max(0, Math.min(e.length, t + n * i));
|
|
1643
1565
|
let a = [...e.matchAll(/\S+\s*/g)].map((e) => e.index + e[0].length), o = t;
|
|
1644
1566
|
for (let t = 0; t < n; t += 1) o = i === 1 ? a.find((e) => e > o) ?? e.length : [...a].reverse().find((e) => e < o) ?? 0;
|
|
1645
1567
|
return o;
|
|
1646
1568
|
}
|
|
1647
|
-
function
|
|
1569
|
+
function dt({ strings: e, placeholder: t, perTick: n = {
|
|
1648
1570
|
amount: 1,
|
|
1649
1571
|
unit: "character"
|
|
1650
1572
|
}, msDelay: r = {
|
|
@@ -1689,9 +1611,9 @@ function mt({ strings: e, placeholder: t, perTick: n = {
|
|
|
1689
1611
|
T([]), C(""), N.current += 1, P.current = 0, t = setTimeout(r, _);
|
|
1690
1612
|
return;
|
|
1691
1613
|
}
|
|
1692
|
-
if (L.current) P.current =
|
|
1614
|
+
if (L.current) P.current = ut(i, P.current, b, x, -1), C(i.slice(0, P.current)), P.current === 0 && (L.current = !1, N.current = (N.current + 1) % e.length);
|
|
1693
1615
|
else {
|
|
1694
|
-
if (P.current =
|
|
1616
|
+
if (P.current = ut(i, P.current, b, x, 1), C(i.slice(0, P.current)), L.current = !n && P.current === i.length && (s || N.current < e.length - 1), !n && P.current === i.length && !L.current && !s) {
|
|
1695
1617
|
k(!0);
|
|
1696
1618
|
return;
|
|
1697
1619
|
}
|
|
@@ -1724,7 +1646,7 @@ function mt({ strings: e, placeholder: t, perTick: n = {
|
|
|
1724
1646
|
O,
|
|
1725
1647
|
v
|
|
1726
1648
|
]);
|
|
1727
|
-
let R = A ? "." : "", z = d !== "clear", B =
|
|
1649
|
+
let R = A ? "." : "", z = d !== "clear", B = lt(d), ee = w.reduce((e, t) => e + t.split("\n").length, 0);
|
|
1728
1650
|
return z ? /* @__PURE__ */ f("div", {
|
|
1729
1651
|
ref: (e) => {
|
|
1730
1652
|
M.current = e;
|
|
@@ -1755,4 +1677,39 @@ function mt({ strings: e, placeholder: t, perTick: n = {
|
|
|
1755
1677
|
});
|
|
1756
1678
|
}
|
|
1757
1679
|
//#endregion
|
|
1758
|
-
|
|
1680
|
+
//#region utilities/hash-navigation.ts
|
|
1681
|
+
function ft({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth", block: r } = {}) {
|
|
1682
|
+
if (typeof window > "u") return () => {};
|
|
1683
|
+
let i = 0, a = setInterval(() => {
|
|
1684
|
+
i += 1;
|
|
1685
|
+
let { hash: e } = window.location;
|
|
1686
|
+
if (!e || i > t) clearInterval(a);
|
|
1687
|
+
else try {
|
|
1688
|
+
let t = document.querySelector(e);
|
|
1689
|
+
t && (t.scrollIntoView({
|
|
1690
|
+
behavior: n,
|
|
1691
|
+
block: r
|
|
1692
|
+
}), clearInterval(a));
|
|
1693
|
+
} catch (t) {
|
|
1694
|
+
console.error(`Invalid hash in URL: ${e}`, t), clearInterval(a);
|
|
1695
|
+
}
|
|
1696
|
+
}, e);
|
|
1697
|
+
return () => clearInterval(a);
|
|
1698
|
+
}
|
|
1699
|
+
function pt(e) {
|
|
1700
|
+
o(() => ft(e), []);
|
|
1701
|
+
}
|
|
1702
|
+
function mt({ container: e, sectionIds: t, hashFirstSection: n = !0, onActiveChange: r }) {
|
|
1703
|
+
let i = t.map((e) => document.getElementById(e)).filter((e) => e !== null), a = window.location.hash.toLowerCase().slice(1) || null, o = () => {
|
|
1704
|
+
let t = e.getBoundingClientRect(), o = t.top + t.height / 2, s = i.find((e) => {
|
|
1705
|
+
let t = e.getBoundingClientRect();
|
|
1706
|
+
return t.top <= o && t.bottom > o;
|
|
1707
|
+
}), c = s ? i.indexOf(s) : -1;
|
|
1708
|
+
if (r?.(c, i), !s || (a === s.id.toLowerCase() && (a = null), c === 0 && a)) return;
|
|
1709
|
+
let l = c === 0 && !n ? "" : `#${s.id}`;
|
|
1710
|
+
window.location.hash !== l && (window.history.replaceState(window.history.state, "", `${window.location.pathname}${window.location.search}${l}`), window.dispatchEvent(new HashChangeEvent("hashchange")));
|
|
1711
|
+
};
|
|
1712
|
+
return o(), e.addEventListener("scroll", o, { passive: !0 }), () => e.removeEventListener("scroll", o);
|
|
1713
|
+
}
|
|
1714
|
+
//#endregion
|
|
1715
|
+
export { De as Avatar, V as Button, Se as ButtonGroup, q as Card, J as DateHandler, Oe as Divider, we as DoubleClickButton, ke as Dropdown, H as ErrorText, Me as GridLoader, K as Input, Ie as InputTimestamp, Ne as LabelField, Te as LongPressButton, X as Menu, Be as Modal, Ve as MultiDropdown, Y as Pill, Re as PillLink, G as PreviewCard, Z as Select, et as Switch, Ye as Table, Ue as Tag, $e as TextLink, ct as ThemeSwitcher, dt as TypingAnimation, ft as navigateToHashOnLoad, mt as updateHashOnScroll, pt as useHashNavigationOnLoad };
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
declare const gridLoaderShapes: readonly ["circle", "square", "diamond", "star", "heart", "hexagon"];
|
|
2
2
|
export type GridLoaderShape = (typeof gridLoaderShapes)[number] | "mixed";
|
|
3
|
+
export type GridLoaderCellShape = Exclude<GridLoaderShape, "mixed">;
|
|
3
4
|
export interface GridLoaderProps extends React.ComponentPropsWithoutRef<"span"> {
|
|
4
5
|
rows?: number;
|
|
5
6
|
columns?: number;
|
|
6
7
|
size?: number;
|
|
7
8
|
maxSize?: number;
|
|
8
9
|
shape?: GridLoaderShape;
|
|
10
|
+
shapes?: readonly GridLoaderCellShape[];
|
|
9
11
|
colors?: string[];
|
|
10
12
|
label?: string;
|
|
11
13
|
symbols?: string[];
|
|
12
14
|
}
|
|
13
|
-
declare const GridLoader: ({ className, rows, columns, size, maxSize, shape, colors, label, symbols, style, ...props }: GridLoaderProps) => import('react').JSX.Element;
|
|
15
|
+
declare const GridLoader: ({ className, rows, columns, size, maxSize, shape, shapes, colors, label, symbols, style, ...props }: GridLoaderProps) => import('react').JSX.Element;
|
|
14
16
|
export default GridLoader;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
export { default as Button } from './button';
|
|
2
|
+
export { default as ButtonGroup } from './button-group';
|
|
3
|
+
export { default as DoubleClickButton } from './button-double-click';
|
|
4
|
+
export type { DoubleClickButtonFeedbackContent, DoubleClickButtonFeedbackContext, DoubleClickButtonProps, } from './button-double-click';
|
|
5
|
+
export { default as LongPressButton } from './button-long-press';
|
|
6
|
+
export type { LongPressButtonFeedbackContent, LongPressButtonFeedbackContext, LongPressButtonProps, } from './button-long-press';
|
|
7
|
+
export { default as Avatar } from './avatar';
|
|
8
|
+
export type { AvatarProps, AvatarSize } from './avatar';
|
|
9
|
+
export { default as Divider } from './divider';
|
|
10
|
+
export { default as Dropdown } from './dropdown';
|
|
11
|
+
export type { DropdownItem, DropdownProps } from './dropdown';
|
|
12
|
+
export { default as ErrorText } from './error-text';
|
|
13
|
+
export type { ErrorTextProps } from './error-text';
|
|
14
|
+
export { default as GridLoader } from './grid-loader';
|
|
15
|
+
export type { GridLoaderCellShape, GridLoaderProps, GridLoaderShape } from './grid-loader';
|
|
16
|
+
export { default as LabelField } from './label-field';
|
|
17
|
+
export type { LabelFieldProps } from './label-field';
|
|
18
|
+
export { default as Input } from './input';
|
|
19
|
+
export { default as Card } from './card';
|
|
20
|
+
export { default as InputTimestamp } from './input-timestamp';
|
|
21
|
+
export type { InputTimestampProps } from './input-timestamp';
|
|
22
|
+
export { default as PillLink } from './pill-link';
|
|
23
|
+
export type { PillLinkProps } from './pill-link';
|
|
24
|
+
export { default as Menu } from './menu';
|
|
25
|
+
export { default as Modal } from './modal';
|
|
26
|
+
export type { ModalProps } from './modal';
|
|
27
|
+
export { default as MultiDropdown } from './dropdown-multi';
|
|
28
|
+
export type { MultiDropdownProps } from './dropdown-multi';
|
|
29
|
+
export { default as Pill } from './pill';
|
|
30
|
+
export { default as PreviewCard } from './preview-card';
|
|
31
|
+
export type { PreviewCardProps } from './preview-card';
|
|
32
|
+
export { default as Select } from './select';
|
|
33
|
+
export type { SelectItem, SelectProps } from './select';
|
|
34
|
+
export { default as Tag } from './tag';
|
|
35
|
+
export type { TagProps, TagVariant } from './tag';
|
|
36
|
+
export { default as Table } from './table';
|
|
37
|
+
export type { TableColumnDef, TableProps } from './table';
|
|
38
|
+
export { default as TextLink } from './text-link';
|
|
39
|
+
export type { TextLinkProps } from './text-link';
|
|
40
|
+
export { default as Switch } from './switch';
|
|
41
|
+
export { default as ThemeSwitcher } from './theme-switcher';
|
|
42
|
+
export type { ThemeSwitcherProps } from './theme-switcher';
|
|
43
|
+
export { default as TypingAnimation } from './typing-animation';
|
|
44
|
+
export type { TypingAnimationPerTickUnit, TypingAnimationAfterString, TypingAnimationProps } from './typing-animation';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,47 +1,2 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export { default as DoubleClickButton } from './button-double-click';
|
|
4
|
-
export type { DoubleClickButtonFeedbackContent, DoubleClickButtonFeedbackContext, DoubleClickButtonProps, } from './button-double-click';
|
|
5
|
-
export { default as LongPressButton } from './button-long-press';
|
|
6
|
-
export type { LongPressButtonFeedbackContent, LongPressButtonFeedbackContext, LongPressButtonProps, } from './button-long-press';
|
|
7
|
-
export { navigateToHashOnLoad, updateHashOnScroll, useHashNavigationOnLoad } from './hash-navigation';
|
|
8
|
-
export type { HashNavigationOptions, UpdateHashOnScrollOptions } from './hash-navigation';
|
|
9
|
-
export { default as Avatar } from './avatar';
|
|
10
|
-
export type { AvatarProps, AvatarSize } from './avatar';
|
|
11
|
-
export { default as Divider } from './divider';
|
|
12
|
-
export { default as Dropdown } from './dropdown';
|
|
13
|
-
export type { DropdownItem, DropdownProps } from './dropdown';
|
|
14
|
-
export { default as ErrorText } from './error-text';
|
|
15
|
-
export type { ErrorTextProps } from './error-text';
|
|
16
|
-
export { default as GridLoader } from './grid-loader';
|
|
17
|
-
export type { GridLoaderProps, GridLoaderShape } from './grid-loader';
|
|
18
|
-
export { default as LabelField } from './label-field';
|
|
19
|
-
export type { LabelFieldProps } from './label-field';
|
|
20
|
-
export { default as Input } from './input';
|
|
21
|
-
export { default as Card } from './card';
|
|
22
|
-
export { DateHandler } from './date-handler';
|
|
23
|
-
export { default as InputTimestamp } from './input-timestamp';
|
|
24
|
-
export type { InputTimestampProps } from './input-timestamp';
|
|
25
|
-
export { default as PillLink } from './pill-link';
|
|
26
|
-
export type { PillLinkProps } from './pill-link';
|
|
27
|
-
export { default as Menu } from './menu';
|
|
28
|
-
export { default as Modal } from './modal';
|
|
29
|
-
export type { ModalProps } from './modal';
|
|
30
|
-
export { default as MultiDropdown } from './dropdown-multi';
|
|
31
|
-
export type { MultiDropdownProps } from './dropdown-multi';
|
|
32
|
-
export { default as Pill } from './pill';
|
|
33
|
-
export { default as PreviewCard } from './preview-card';
|
|
34
|
-
export type { PreviewCardProps } from './preview-card';
|
|
35
|
-
export { default as Select } from './select';
|
|
36
|
-
export type { SelectItem, SelectProps } from './select';
|
|
37
|
-
export { default as Tag } from './tag';
|
|
38
|
-
export type { TagProps, TagVariant } from './tag';
|
|
39
|
-
export { default as Table } from './table';
|
|
40
|
-
export type { TableColumnDef, TableProps } from './table';
|
|
41
|
-
export { default as TextLink } from './text-link';
|
|
42
|
-
export type { TextLinkProps } from './text-link';
|
|
43
|
-
export { default as Switch } from './switch';
|
|
44
|
-
export { default as ThemeSwitcher } from './theme-switcher';
|
|
45
|
-
export type { ThemeSwitcherProps } from './theme-switcher';
|
|
46
|
-
export { default as TypingAnimation } from './typing-animation';
|
|
47
|
-
export type { TypingAnimationPerTickUnit, TypingAnimationAfterString, TypingAnimationProps } from './typing-animation';
|
|
1
|
+
export * from './components';
|
|
2
|
+
export * from './utilities';
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|