@underverse-ui/underverse 0.1.35 → 0.1.37
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/dist/index.cjs +536 -241
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +33 -1
- package/dist/index.d.ts +33 -1
- package/dist/index.js +522 -228
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -56,6 +56,7 @@ __export(index_exports, {
|
|
|
56
56
|
DropdownMenu: () => DropdownMenu_default,
|
|
57
57
|
DropdownMenuItem: () => DropdownMenuItem,
|
|
58
58
|
DropdownMenuSeparator: () => DropdownMenuSeparator,
|
|
59
|
+
FallingIcons: () => FallingIcons,
|
|
59
60
|
FloatingContacts: () => FloatingContacts,
|
|
60
61
|
Form: () => Form,
|
|
61
62
|
FormActions: () => FormActions,
|
|
@@ -6924,9 +6925,9 @@ function Carousel({
|
|
|
6924
6925
|
const [startPos, setStartPos] = React27.useState(0);
|
|
6925
6926
|
const [currentTranslate, setCurrentTranslate] = React27.useState(0);
|
|
6926
6927
|
const [prevTranslate, setPrevTranslate] = React27.useState(0);
|
|
6927
|
-
const
|
|
6928
|
+
const progressElRef = React27.useRef(null);
|
|
6928
6929
|
const carouselRef = React27.useRef(null);
|
|
6929
|
-
const
|
|
6930
|
+
const rafRef = React27.useRef(null);
|
|
6930
6931
|
const totalSlides = React27.Children.count(children);
|
|
6931
6932
|
const maxIndex = Math.max(0, totalSlides - slidesToShow);
|
|
6932
6933
|
const isHorizontal = orientation === "horizontal";
|
|
@@ -6975,29 +6976,32 @@ function Carousel({
|
|
|
6975
6976
|
}
|
|
6976
6977
|
}, [scrollPrev, scrollNext, scrollTo, maxIndex]);
|
|
6977
6978
|
React27.useEffect(() => {
|
|
6978
|
-
|
|
6979
|
-
|
|
6980
|
-
|
|
6981
|
-
|
|
6979
|
+
const stop = () => {
|
|
6980
|
+
if (rafRef.current != null) {
|
|
6981
|
+
cancelAnimationFrame(rafRef.current);
|
|
6982
|
+
rafRef.current = null;
|
|
6982
6983
|
}
|
|
6984
|
+
if (progressElRef.current) progressElRef.current.style.width = "0%";
|
|
6985
|
+
};
|
|
6986
|
+
if (!autoScroll || isPaused || totalSlides <= slidesToShow) {
|
|
6987
|
+
stop();
|
|
6983
6988
|
return;
|
|
6984
6989
|
}
|
|
6985
|
-
|
|
6986
|
-
const
|
|
6987
|
-
|
|
6988
|
-
|
|
6989
|
-
|
|
6990
|
-
|
|
6991
|
-
|
|
6992
|
-
|
|
6993
|
-
|
|
6994
|
-
|
|
6995
|
-
}, 50);
|
|
6996
|
-
return () => {
|
|
6997
|
-
if (progressIntervalRef.current) {
|
|
6998
|
-
clearInterval(progressIntervalRef.current);
|
|
6990
|
+
let start = performance.now();
|
|
6991
|
+
const tick = (now) => {
|
|
6992
|
+
const elapsed = now - start;
|
|
6993
|
+
const ratio = Math.min(1, elapsed / autoScrollInterval);
|
|
6994
|
+
if (progressElRef.current) {
|
|
6995
|
+
progressElRef.current.style.width = `${ratio * 100}%`;
|
|
6996
|
+
}
|
|
6997
|
+
if (ratio >= 1) {
|
|
6998
|
+
scrollNext();
|
|
6999
|
+
start = performance.now();
|
|
6999
7000
|
}
|
|
7001
|
+
rafRef.current = requestAnimationFrame(tick);
|
|
7000
7002
|
};
|
|
7003
|
+
rafRef.current = requestAnimationFrame(tick);
|
|
7004
|
+
return stop;
|
|
7001
7005
|
}, [autoScroll, isPaused, totalSlides, slidesToShow, autoScrollInterval, scrollNext]);
|
|
7002
7006
|
const getPositionX = (event) => {
|
|
7003
7007
|
return event.type.includes("mouse") ? event.pageX : event.touches[0].clientX;
|
|
@@ -7064,7 +7068,7 @@ function Carousel({
|
|
|
7064
7068
|
"aria-roledescription": "carousel",
|
|
7065
7069
|
tabIndex: 0,
|
|
7066
7070
|
children: [
|
|
7067
|
-
showProgress && autoScroll && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute top-0 left-0 right-0 h-1 bg-muted z-20", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-full bg-primary
|
|
7071
|
+
showProgress && autoScroll && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute top-0 left-0 right-0 h-1 bg-muted z-20", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: progressElRef, className: "h-full bg-primary", style: { width: "0%" } }) }),
|
|
7068
7072
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
7069
7073
|
"div",
|
|
7070
7074
|
{
|
|
@@ -7190,23 +7194,313 @@ function Carousel({
|
|
|
7190
7194
|
);
|
|
7191
7195
|
}
|
|
7192
7196
|
|
|
7193
|
-
// ../../components/ui/
|
|
7194
|
-
var import_react19 = require("react");
|
|
7197
|
+
// ../../components/ui/FallingIcons.tsx
|
|
7198
|
+
var import_react19 = __toESM(require("react"), 1);
|
|
7195
7199
|
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
7200
|
+
var DEFAULT_COUNT = 24;
|
|
7201
|
+
var DEFAULT_SPEED_RANGE = [6, 14];
|
|
7202
|
+
var DEFAULT_SIZE_RANGE = [14, 28];
|
|
7203
|
+
function FallingIcons({
|
|
7204
|
+
icon: Icon,
|
|
7205
|
+
imageUrl,
|
|
7206
|
+
count = DEFAULT_COUNT,
|
|
7207
|
+
className,
|
|
7208
|
+
areaClassName,
|
|
7209
|
+
colorClassName,
|
|
7210
|
+
zIndex = 10,
|
|
7211
|
+
speedRange = DEFAULT_SPEED_RANGE,
|
|
7212
|
+
sizeRange = DEFAULT_SIZE_RANGE,
|
|
7213
|
+
horizontalDrift = 24,
|
|
7214
|
+
spin = true,
|
|
7215
|
+
fullScreen = false,
|
|
7216
|
+
randomizeEachLoop = true,
|
|
7217
|
+
// Modern UI enhancements
|
|
7218
|
+
glow = false,
|
|
7219
|
+
glowColor = "currentColor",
|
|
7220
|
+
glowIntensity = 0.5,
|
|
7221
|
+
trail = false,
|
|
7222
|
+
trailLength = 3,
|
|
7223
|
+
physics,
|
|
7224
|
+
easingFunction = "linear"
|
|
7225
|
+
}) {
|
|
7226
|
+
const uid = import_react19.default.useId().replace(/[:]/g, "");
|
|
7227
|
+
const containerRef = import_react19.default.useRef(null);
|
|
7228
|
+
const [fallDist, setFallDist] = import_react19.default.useState(null);
|
|
7229
|
+
const idRef = import_react19.default.useRef(1);
|
|
7230
|
+
const gravity = physics?.gravity ?? 1;
|
|
7231
|
+
const windDirection = physics?.windDirection ?? 0;
|
|
7232
|
+
const windStrength = physics?.windStrength ?? 0;
|
|
7233
|
+
const physicsRotation = physics?.rotation ?? false;
|
|
7234
|
+
const easingMap = {
|
|
7235
|
+
linear: "linear",
|
|
7236
|
+
ease: "ease",
|
|
7237
|
+
"ease-in": "ease-in",
|
|
7238
|
+
"ease-out": "ease-out",
|
|
7239
|
+
"ease-in-out": "ease-in-out",
|
|
7240
|
+
bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
|
|
7241
|
+
elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
|
|
7242
|
+
};
|
|
7243
|
+
const makeParticle = import_react19.default.useCallback(() => {
|
|
7244
|
+
const rnd = (min, max) => min + Math.random() * (max - min);
|
|
7245
|
+
return {
|
|
7246
|
+
leftPct: rnd(0, 100),
|
|
7247
|
+
size: rnd(sizeRange[0], sizeRange[1]),
|
|
7248
|
+
fallDur: rnd(speedRange[0], speedRange[1]) / gravity,
|
|
7249
|
+
// Apply gravity to speed
|
|
7250
|
+
delay: rnd(-10, 0),
|
|
7251
|
+
driftAmp: rnd(horizontalDrift * 0.5, horizontalDrift) + windDirection * windStrength * 50,
|
|
7252
|
+
// Apply wind
|
|
7253
|
+
spinDur: rnd(2, 6),
|
|
7254
|
+
key: idRef.current++
|
|
7255
|
+
};
|
|
7256
|
+
}, [sizeRange, speedRange, horizontalDrift, gravity, windDirection, windStrength]);
|
|
7257
|
+
const [particles, setParticles] = import_react19.default.useState([]);
|
|
7258
|
+
import_react19.default.useEffect(() => {
|
|
7259
|
+
const arr = Array.from({ length: Math.max(0, count) }).map(() => makeParticle());
|
|
7260
|
+
setParticles(arr);
|
|
7261
|
+
}, [count, makeParticle]);
|
|
7262
|
+
import_react19.default.useEffect(() => {
|
|
7263
|
+
if (fullScreen) {
|
|
7264
|
+
const measure2 = () => setFallDist(window.innerHeight + 200);
|
|
7265
|
+
measure2();
|
|
7266
|
+
window.addEventListener("resize", measure2);
|
|
7267
|
+
return () => window.removeEventListener("resize", measure2);
|
|
7268
|
+
}
|
|
7269
|
+
const el = containerRef.current;
|
|
7270
|
+
if (!el) return;
|
|
7271
|
+
const measure = () => setFallDist(el.offsetHeight + 200);
|
|
7272
|
+
measure();
|
|
7273
|
+
const ResizeObserverCtor = window.ResizeObserver;
|
|
7274
|
+
if (ResizeObserverCtor) {
|
|
7275
|
+
const ro = new ResizeObserverCtor(measure);
|
|
7276
|
+
ro.observe(el);
|
|
7277
|
+
return () => ro.disconnect();
|
|
7278
|
+
}
|
|
7279
|
+
window.addEventListener("resize", measure);
|
|
7280
|
+
return () => window.removeEventListener("resize", measure);
|
|
7281
|
+
}, [fullScreen]);
|
|
7282
|
+
const FallName = `uv-fall-${uid}`;
|
|
7283
|
+
const SwayName = `uv-sway-${uid}`;
|
|
7284
|
+
const SpinName = `uv-spin-${uid}`;
|
|
7285
|
+
const PopName = `uv-pop-${uid}`;
|
|
7286
|
+
const PhysicsSpinName = `uv-physics-spin-${uid}`;
|
|
7287
|
+
const glowStyles = import_react19.default.useMemo(() => {
|
|
7288
|
+
if (!glow) return {};
|
|
7289
|
+
const intensity = Math.max(0, Math.min(1, glowIntensity));
|
|
7290
|
+
return {
|
|
7291
|
+
filter: `drop-shadow(0 0 ${4 * intensity}px ${glowColor}) drop-shadow(0 0 ${8 * intensity}px ${glowColor})`
|
|
7292
|
+
};
|
|
7293
|
+
}, [glow, glowColor, glowIntensity]);
|
|
7294
|
+
const FallbackIcon = import_react19.default.useMemo(() => (props) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "12", cy: "12", r: "10" }) }), []);
|
|
7295
|
+
const TheIcon = imageUrl ? ({ className: imgClassName }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7296
|
+
"img",
|
|
7297
|
+
{
|
|
7298
|
+
src: imageUrl,
|
|
7299
|
+
alt: "",
|
|
7300
|
+
className: cn("w-full h-full object-cover rounded-sm", imgClassName),
|
|
7301
|
+
draggable: false
|
|
7302
|
+
}
|
|
7303
|
+
) : Icon || FallbackIcon;
|
|
7304
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
7305
|
+
"div",
|
|
7306
|
+
{
|
|
7307
|
+
ref: containerRef,
|
|
7308
|
+
className: cn(
|
|
7309
|
+
fullScreen ? "fixed inset-0 overflow-hidden pointer-events-none" : "relative w-full h-full overflow-hidden",
|
|
7310
|
+
areaClassName
|
|
7311
|
+
),
|
|
7312
|
+
style: { zIndex },
|
|
7313
|
+
children: [
|
|
7314
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("style", { children: `
|
|
7315
|
+
@keyframes ${FallName} {
|
|
7316
|
+
0% { transform: translate3d(0, -10vh, 0); opacity: 0; }
|
|
7317
|
+
10% { opacity: 1; }
|
|
7318
|
+
100% { transform: translate3d(0, var(--fall, 120vh), 0); opacity: 0.95; }
|
|
7319
|
+
}
|
|
7320
|
+
@keyframes ${SwayName} {
|
|
7321
|
+
0% { transform: translateX(0); }
|
|
7322
|
+
50% { transform: translateX(var(--amp, 16px)); }
|
|
7323
|
+
100% { transform: translateX(0); }
|
|
7324
|
+
}
|
|
7325
|
+
@keyframes ${SpinName} {
|
|
7326
|
+
0% { transform: rotate(0deg); }
|
|
7327
|
+
100% { transform: rotate(360deg); }
|
|
7328
|
+
}
|
|
7329
|
+
@keyframes ${PopName} {
|
|
7330
|
+
0% { opacity: 1; transform: scale(1); }
|
|
7331
|
+
100% { opacity: 0; transform: scale(0.3); }
|
|
7332
|
+
}
|
|
7333
|
+
@keyframes ${PhysicsSpinName} {
|
|
7334
|
+
0% { transform: rotate(0deg) scale(1); }
|
|
7335
|
+
25% { transform: rotate(90deg) scale(1.05); }
|
|
7336
|
+
50% { transform: rotate(180deg) scale(1); }
|
|
7337
|
+
75% { transform: rotate(270deg) scale(1.05); }
|
|
7338
|
+
100% { transform: rotate(360deg) scale(1); }
|
|
7339
|
+
}
|
|
7340
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7341
|
+
.uv-falling-particle {
|
|
7342
|
+
animation-duration: 0.01ms !important;
|
|
7343
|
+
animation-iteration-count: 1 !important;
|
|
7344
|
+
}
|
|
7345
|
+
}
|
|
7346
|
+
` }),
|
|
7347
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7348
|
+
"div",
|
|
7349
|
+
{
|
|
7350
|
+
className: cn(
|
|
7351
|
+
"absolute inset-0 pointer-events-none",
|
|
7352
|
+
className
|
|
7353
|
+
),
|
|
7354
|
+
"aria-hidden": true,
|
|
7355
|
+
children: particles.map((p, i) => {
|
|
7356
|
+
const swayDuration = p.fallDur * (0.8 + i % 5 * 0.05);
|
|
7357
|
+
const spinDuration = Math.max(1, p.spinDur);
|
|
7358
|
+
const handlePop = () => {
|
|
7359
|
+
setParticles((prev) => {
|
|
7360
|
+
const next = prev.slice();
|
|
7361
|
+
const np = makeParticle();
|
|
7362
|
+
np.delay = -Math.random() * 8;
|
|
7363
|
+
next[i] = np;
|
|
7364
|
+
return next;
|
|
7365
|
+
});
|
|
7366
|
+
};
|
|
7367
|
+
const trailParticles = trail ? Array.from({ length: Math.min(5, Math.max(1, trailLength)) }) : [];
|
|
7368
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react19.default.Fragment, { children: [
|
|
7369
|
+
trail && trailParticles.map((_, trailIndex) => {
|
|
7370
|
+
const trailDelay = p.delay - (trailIndex + 1) * 0.15;
|
|
7371
|
+
const trailOpacity = 1 - (trailIndex + 1) * (1 / (trailParticles.length + 1));
|
|
7372
|
+
const trailScale = 1 - (trailIndex + 1) * 0.15;
|
|
7373
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7374
|
+
"span",
|
|
7375
|
+
{
|
|
7376
|
+
className: cn("absolute top-0 will-change-transform pointer-events-none uv-falling-particle", colorClassName),
|
|
7377
|
+
style: {
|
|
7378
|
+
left: `${p.leftPct}%`,
|
|
7379
|
+
animationDelay: `${trailDelay}s`,
|
|
7380
|
+
animationDuration: `${p.fallDur}s`,
|
|
7381
|
+
animationName: FallName,
|
|
7382
|
+
animationTimingFunction: easingMap[easingFunction] || "linear",
|
|
7383
|
+
animationIterationCount: "infinite",
|
|
7384
|
+
opacity: trailOpacity * 0.4,
|
|
7385
|
+
["--fall"]: `${fallDist ?? (typeof window !== "undefined" ? window.innerHeight + 200 : 1200)}px`
|
|
7386
|
+
},
|
|
7387
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7388
|
+
"span",
|
|
7389
|
+
{
|
|
7390
|
+
className: "inline-block uv-sway",
|
|
7391
|
+
style: {
|
|
7392
|
+
transform: `translateX(-50%) scale(${trailScale})`,
|
|
7393
|
+
animationName: SwayName,
|
|
7394
|
+
animationDuration: `${swayDuration}s`,
|
|
7395
|
+
animationTimingFunction: "ease-in-out",
|
|
7396
|
+
animationIterationCount: "infinite",
|
|
7397
|
+
["--amp"]: `${Math.round(p.driftAmp)}px`
|
|
7398
|
+
},
|
|
7399
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7400
|
+
"span",
|
|
7401
|
+
{
|
|
7402
|
+
className: "block",
|
|
7403
|
+
style: {
|
|
7404
|
+
width: p.size,
|
|
7405
|
+
height: p.size,
|
|
7406
|
+
...glowStyles
|
|
7407
|
+
},
|
|
7408
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
|
|
7409
|
+
}
|
|
7410
|
+
)
|
|
7411
|
+
}
|
|
7412
|
+
)
|
|
7413
|
+
},
|
|
7414
|
+
`${p.key}-trail-${trailIndex}`
|
|
7415
|
+
);
|
|
7416
|
+
}),
|
|
7417
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7418
|
+
"span",
|
|
7419
|
+
{
|
|
7420
|
+
className: cn("absolute top-0 will-change-transform pointer-events-auto uv-falling-particle", colorClassName),
|
|
7421
|
+
style: {
|
|
7422
|
+
left: `${p.leftPct}%`,
|
|
7423
|
+
animationDelay: `${p.delay}s`,
|
|
7424
|
+
animationDuration: `${p.fallDur}s`,
|
|
7425
|
+
animationName: FallName,
|
|
7426
|
+
animationTimingFunction: easingMap[easingFunction] || "linear",
|
|
7427
|
+
animationIterationCount: "infinite",
|
|
7428
|
+
["--fall"]: `${fallDist ?? (typeof window !== "undefined" ? window.innerHeight + 200 : 1200)}px`
|
|
7429
|
+
},
|
|
7430
|
+
onMouseEnter: handlePop,
|
|
7431
|
+
onAnimationIteration: (ev) => {
|
|
7432
|
+
if (ev.currentTarget !== ev.target) return;
|
|
7433
|
+
if (!randomizeEachLoop) return;
|
|
7434
|
+
if (ev.animationName !== FallName) return;
|
|
7435
|
+
setParticles((prev) => {
|
|
7436
|
+
const next = prev.slice();
|
|
7437
|
+
const np = makeParticle();
|
|
7438
|
+
np.delay = -Math.random() * 4;
|
|
7439
|
+
next[i] = np;
|
|
7440
|
+
return next;
|
|
7441
|
+
});
|
|
7442
|
+
},
|
|
7443
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7444
|
+
"span",
|
|
7445
|
+
{
|
|
7446
|
+
className: "inline-block uv-sway",
|
|
7447
|
+
style: {
|
|
7448
|
+
transform: `translateX(-50%)`,
|
|
7449
|
+
animationName: SwayName,
|
|
7450
|
+
animationDuration: `${swayDuration}s`,
|
|
7451
|
+
animationTimingFunction: "ease-in-out",
|
|
7452
|
+
animationIterationCount: "infinite",
|
|
7453
|
+
["--amp"]: `${Math.round(p.driftAmp)}px`
|
|
7454
|
+
},
|
|
7455
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7456
|
+
"span",
|
|
7457
|
+
{
|
|
7458
|
+
className: cn(
|
|
7459
|
+
"block uv-spin hover:[animation:var(--popName)_0.35s_ease-out_forwards]",
|
|
7460
|
+
physicsRotation ? "[animation:var(--physicsSpinName)_var(--spinDur)_ease-in-out_infinite]" : spin && "[animation:var(--spinName)_var(--spinDur)_linear_infinite]"
|
|
7461
|
+
),
|
|
7462
|
+
style: {
|
|
7463
|
+
width: p.size,
|
|
7464
|
+
height: p.size,
|
|
7465
|
+
["--spinName"]: SpinName,
|
|
7466
|
+
["--physicsSpinName"]: PhysicsSpinName,
|
|
7467
|
+
["--spinDur"]: `${spinDuration}s`,
|
|
7468
|
+
["--popName"]: PopName,
|
|
7469
|
+
...glowStyles
|
|
7470
|
+
},
|
|
7471
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
|
|
7472
|
+
}
|
|
7473
|
+
)
|
|
7474
|
+
}
|
|
7475
|
+
)
|
|
7476
|
+
}
|
|
7477
|
+
)
|
|
7478
|
+
] }, p.key);
|
|
7479
|
+
})
|
|
7480
|
+
}
|
|
7481
|
+
)
|
|
7482
|
+
]
|
|
7483
|
+
}
|
|
7484
|
+
);
|
|
7485
|
+
}
|
|
7486
|
+
|
|
7487
|
+
// ../../components/ui/ClientOnly.tsx
|
|
7488
|
+
var import_react20 = require("react");
|
|
7489
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
7196
7490
|
function ClientOnly({ children, fallback = null }) {
|
|
7197
|
-
const [hasMounted, setHasMounted] = (0,
|
|
7198
|
-
(0,
|
|
7491
|
+
const [hasMounted, setHasMounted] = (0, import_react20.useState)(false);
|
|
7492
|
+
(0, import_react20.useEffect)(() => {
|
|
7199
7493
|
setHasMounted(true);
|
|
7200
7494
|
}, []);
|
|
7201
7495
|
if (!hasMounted) {
|
|
7202
|
-
return /* @__PURE__ */ (0,
|
|
7496
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: fallback });
|
|
7203
7497
|
}
|
|
7204
|
-
return /* @__PURE__ */ (0,
|
|
7498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
|
|
7205
7499
|
}
|
|
7206
7500
|
|
|
7207
7501
|
// ../../components/ui/Loading.tsx
|
|
7208
7502
|
var import_lucide_react20 = require("lucide-react");
|
|
7209
|
-
var
|
|
7503
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
7210
7504
|
var LoadingSpinner = ({
|
|
7211
7505
|
size = "md",
|
|
7212
7506
|
className,
|
|
@@ -7222,7 +7516,7 @@ var LoadingSpinner = ({
|
|
|
7222
7516
|
foreground: "text-foreground",
|
|
7223
7517
|
muted: "text-muted-foreground"
|
|
7224
7518
|
};
|
|
7225
|
-
return /* @__PURE__ */ (0,
|
|
7519
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7226
7520
|
import_lucide_react20.Activity,
|
|
7227
7521
|
{
|
|
7228
7522
|
className: cn(
|
|
@@ -7243,7 +7537,7 @@ var LoadingDots = ({
|
|
|
7243
7537
|
foreground: "bg-foreground",
|
|
7244
7538
|
muted: "bg-muted-foreground"
|
|
7245
7539
|
};
|
|
7246
|
-
return /* @__PURE__ */ (0,
|
|
7540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7247
7541
|
"div",
|
|
7248
7542
|
{
|
|
7249
7543
|
className: cn(
|
|
@@ -7265,7 +7559,7 @@ var LoadingBar = ({
|
|
|
7265
7559
|
label
|
|
7266
7560
|
}) => {
|
|
7267
7561
|
const pct = progress ? Math.min(Math.max(progress, 0), 100) : void 0;
|
|
7268
|
-
return /* @__PURE__ */ (0,
|
|
7562
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7269
7563
|
"div",
|
|
7270
7564
|
{
|
|
7271
7565
|
className: cn("w-full bg-muted rounded-full h-2", className),
|
|
@@ -7274,7 +7568,7 @@ var LoadingBar = ({
|
|
|
7274
7568
|
"aria-valuemax": pct === void 0 ? void 0 : 100,
|
|
7275
7569
|
"aria-valuenow": pct === void 0 ? void 0 : Math.round(pct),
|
|
7276
7570
|
"aria-label": label || "Loading",
|
|
7277
|
-
children: /* @__PURE__ */ (0,
|
|
7571
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7278
7572
|
"div",
|
|
7279
7573
|
{
|
|
7280
7574
|
className: cn(
|
|
@@ -7291,10 +7585,10 @@ var LoadingBar = ({
|
|
|
7291
7585
|
};
|
|
7292
7586
|
|
|
7293
7587
|
// ../../components/ui/Table.tsx
|
|
7294
|
-
var
|
|
7295
|
-
var
|
|
7296
|
-
var Table =
|
|
7297
|
-
({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0,
|
|
7588
|
+
var import_react21 = __toESM(require("react"), 1);
|
|
7589
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
7590
|
+
var Table = import_react21.default.forwardRef(
|
|
7591
|
+
({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
7298
7592
|
"div",
|
|
7299
7593
|
{
|
|
7300
7594
|
className: cn(
|
|
@@ -7304,7 +7598,7 @@ var Table = import_react20.default.forwardRef(
|
|
|
7304
7598
|
"backdrop-blur-sm transition-all duration-300",
|
|
7305
7599
|
containerClassName
|
|
7306
7600
|
),
|
|
7307
|
-
children: /* @__PURE__ */ (0,
|
|
7601
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
7308
7602
|
"table",
|
|
7309
7603
|
{
|
|
7310
7604
|
ref,
|
|
@@ -7316,8 +7610,8 @@ var Table = import_react20.default.forwardRef(
|
|
|
7316
7610
|
)
|
|
7317
7611
|
);
|
|
7318
7612
|
Table.displayName = "Table";
|
|
7319
|
-
var TableHeader =
|
|
7320
|
-
({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0,
|
|
7613
|
+
var TableHeader = import_react21.default.forwardRef(
|
|
7614
|
+
({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
7321
7615
|
"thead",
|
|
7322
7616
|
{
|
|
7323
7617
|
ref,
|
|
@@ -7335,7 +7629,7 @@ var TableHeader = import_react20.default.forwardRef(
|
|
|
7335
7629
|
)
|
|
7336
7630
|
);
|
|
7337
7631
|
TableHeader.displayName = "TableHeader";
|
|
7338
|
-
var TableBody =
|
|
7632
|
+
var TableBody = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
7339
7633
|
"tbody",
|
|
7340
7634
|
{
|
|
7341
7635
|
ref,
|
|
@@ -7344,7 +7638,7 @@ var TableBody = import_react20.default.forwardRef(({ className, ...props }, ref)
|
|
|
7344
7638
|
}
|
|
7345
7639
|
));
|
|
7346
7640
|
TableBody.displayName = "TableBody";
|
|
7347
|
-
var TableFooter =
|
|
7641
|
+
var TableFooter = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
7348
7642
|
"tfoot",
|
|
7349
7643
|
{
|
|
7350
7644
|
ref,
|
|
@@ -7356,7 +7650,7 @@ var TableFooter = import_react20.default.forwardRef(({ className, ...props }, re
|
|
|
7356
7650
|
}
|
|
7357
7651
|
));
|
|
7358
7652
|
TableFooter.displayName = "TableFooter";
|
|
7359
|
-
var TableRow =
|
|
7653
|
+
var TableRow = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
7360
7654
|
"tr",
|
|
7361
7655
|
{
|
|
7362
7656
|
ref,
|
|
@@ -7370,7 +7664,7 @@ var TableRow = import_react20.default.forwardRef(({ className, ...props }, ref)
|
|
|
7370
7664
|
}
|
|
7371
7665
|
));
|
|
7372
7666
|
TableRow.displayName = "TableRow";
|
|
7373
|
-
var TableHead =
|
|
7667
|
+
var TableHead = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
7374
7668
|
"th",
|
|
7375
7669
|
{
|
|
7376
7670
|
ref,
|
|
@@ -7382,7 +7676,7 @@ var TableHead = import_react20.default.forwardRef(({ className, ...props }, ref)
|
|
|
7382
7676
|
}
|
|
7383
7677
|
));
|
|
7384
7678
|
TableHead.displayName = "TableHead";
|
|
7385
|
-
var TableCell =
|
|
7679
|
+
var TableCell = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
7386
7680
|
"td",
|
|
7387
7681
|
{
|
|
7388
7682
|
ref,
|
|
@@ -7391,7 +7685,7 @@ var TableCell = import_react20.default.forwardRef(({ className, ...props }, ref)
|
|
|
7391
7685
|
}
|
|
7392
7686
|
));
|
|
7393
7687
|
TableCell.displayName = "TableCell";
|
|
7394
|
-
var TableCaption =
|
|
7688
|
+
var TableCaption = import_react21.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
7395
7689
|
"caption",
|
|
7396
7690
|
{
|
|
7397
7691
|
ref,
|
|
@@ -7403,12 +7697,12 @@ TableCaption.displayName = "TableCaption";
|
|
|
7403
7697
|
|
|
7404
7698
|
// ../../components/ui/DataTable.tsx
|
|
7405
7699
|
var import_lucide_react21 = require("lucide-react");
|
|
7406
|
-
var
|
|
7700
|
+
var import_react22 = __toESM(require("react"), 1);
|
|
7407
7701
|
var import_next_intl7 = require("next-intl");
|
|
7408
|
-
var
|
|
7702
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
7409
7703
|
function useDebounced(value, delay = 300) {
|
|
7410
|
-
const [debounced, setDebounced] =
|
|
7411
|
-
|
|
7704
|
+
const [debounced, setDebounced] = import_react22.default.useState(value);
|
|
7705
|
+
import_react22.default.useEffect(() => {
|
|
7412
7706
|
const id = setTimeout(() => setDebounced(value), delay);
|
|
7413
7707
|
return () => clearTimeout(id);
|
|
7414
7708
|
}, [value, delay]);
|
|
@@ -7435,20 +7729,20 @@ function DataTable({
|
|
|
7435
7729
|
labels
|
|
7436
7730
|
}) {
|
|
7437
7731
|
const t = (0, import_next_intl7.useTranslations)("Common");
|
|
7438
|
-
const [visibleCols, setVisibleCols] =
|
|
7439
|
-
const [filters, setFilters] =
|
|
7440
|
-
const [sort, setSort] =
|
|
7441
|
-
const [density, setDensity] =
|
|
7442
|
-
const [curPage, setCurPage] =
|
|
7443
|
-
const [curPageSize, setCurPageSize] =
|
|
7732
|
+
const [visibleCols, setVisibleCols] = import_react22.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
|
|
7733
|
+
const [filters, setFilters] = import_react22.default.useState({});
|
|
7734
|
+
const [sort, setSort] = import_react22.default.useState(null);
|
|
7735
|
+
const [density, setDensity] = import_react22.default.useState("normal");
|
|
7736
|
+
const [curPage, setCurPage] = import_react22.default.useState(page);
|
|
7737
|
+
const [curPageSize, setCurPageSize] = import_react22.default.useState(pageSize);
|
|
7444
7738
|
const debouncedFilters = useDebounced(filters, 350);
|
|
7445
|
-
|
|
7739
|
+
import_react22.default.useEffect(() => {
|
|
7446
7740
|
setCurPage(page);
|
|
7447
7741
|
}, [page]);
|
|
7448
|
-
|
|
7742
|
+
import_react22.default.useEffect(() => {
|
|
7449
7743
|
setCurPageSize(pageSize);
|
|
7450
7744
|
}, [pageSize]);
|
|
7451
|
-
|
|
7745
|
+
import_react22.default.useEffect(() => {
|
|
7452
7746
|
if (!onQueryChange) return;
|
|
7453
7747
|
onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
|
|
7454
7748
|
}, [debouncedFilters, sort, curPage, curPageSize]);
|
|
@@ -7467,7 +7761,7 @@ function DataTable({
|
|
|
7467
7761
|
className: "h-8 w-full text-sm"
|
|
7468
7762
|
};
|
|
7469
7763
|
if (col.filter.type === "text") {
|
|
7470
|
-
return /* @__PURE__ */ (0,
|
|
7764
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7471
7765
|
Input_default,
|
|
7472
7766
|
{
|
|
7473
7767
|
...commonProps,
|
|
@@ -7482,7 +7776,7 @@ function DataTable({
|
|
|
7482
7776
|
}
|
|
7483
7777
|
if (col.filter.type === "select") {
|
|
7484
7778
|
const options = col.filter.options || [];
|
|
7485
|
-
return /* @__PURE__ */ (0,
|
|
7779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7486
7780
|
Combobox,
|
|
7487
7781
|
{
|
|
7488
7782
|
options: ["", ...options],
|
|
@@ -7498,7 +7792,7 @@ function DataTable({
|
|
|
7498
7792
|
);
|
|
7499
7793
|
}
|
|
7500
7794
|
if (col.filter.type === "date") {
|
|
7501
|
-
return /* @__PURE__ */ (0,
|
|
7795
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7502
7796
|
DatePicker,
|
|
7503
7797
|
{
|
|
7504
7798
|
placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
|
|
@@ -7512,7 +7806,7 @@ function DataTable({
|
|
|
7512
7806
|
}
|
|
7513
7807
|
return null;
|
|
7514
7808
|
};
|
|
7515
|
-
const renderHeader = /* @__PURE__ */ (0,
|
|
7809
|
+
const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7516
7810
|
TableHead,
|
|
7517
7811
|
{
|
|
7518
7812
|
style: { width: col.width },
|
|
@@ -7521,10 +7815,10 @@ function DataTable({
|
|
|
7521
7815
|
col.align === "center" && "text-center",
|
|
7522
7816
|
columnDividers && colIdx > 0 && "border-l border-border/60"
|
|
7523
7817
|
),
|
|
7524
|
-
children: /* @__PURE__ */ (0,
|
|
7525
|
-
/* @__PURE__ */ (0,
|
|
7526
|
-
/* @__PURE__ */ (0,
|
|
7527
|
-
col.sortable && /* @__PURE__ */ (0,
|
|
7818
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
|
|
7819
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
|
|
7820
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
|
|
7821
|
+
col.sortable && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7528
7822
|
"button",
|
|
7529
7823
|
{
|
|
7530
7824
|
className: cn(
|
|
@@ -7541,8 +7835,8 @@ function DataTable({
|
|
|
7541
7835
|
},
|
|
7542
7836
|
"aria-label": "Sort",
|
|
7543
7837
|
title: `Sort by ${String(col.title)}`,
|
|
7544
|
-
children: /* @__PURE__ */ (0,
|
|
7545
|
-
/* @__PURE__ */ (0,
|
|
7838
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
|
|
7839
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7546
7840
|
"path",
|
|
7547
7841
|
{
|
|
7548
7842
|
d: "M7 8l3-3 3 3",
|
|
@@ -7553,7 +7847,7 @@ function DataTable({
|
|
|
7553
7847
|
opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
|
|
7554
7848
|
}
|
|
7555
7849
|
),
|
|
7556
|
-
/* @__PURE__ */ (0,
|
|
7850
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7557
7851
|
"path",
|
|
7558
7852
|
{
|
|
7559
7853
|
d: "M7 12l3 3 3-3",
|
|
@@ -7568,11 +7862,11 @@ function DataTable({
|
|
|
7568
7862
|
}
|
|
7569
7863
|
)
|
|
7570
7864
|
] }),
|
|
7571
|
-
col.filter && /* @__PURE__ */ (0,
|
|
7865
|
+
col.filter && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7572
7866
|
Popover,
|
|
7573
7867
|
{
|
|
7574
7868
|
placement: "bottom-start",
|
|
7575
|
-
trigger: /* @__PURE__ */ (0,
|
|
7869
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7576
7870
|
"button",
|
|
7577
7871
|
{
|
|
7578
7872
|
className: cn(
|
|
@@ -7582,16 +7876,16 @@ function DataTable({
|
|
|
7582
7876
|
),
|
|
7583
7877
|
"aria-label": "Filter",
|
|
7584
7878
|
title: "Filter",
|
|
7585
|
-
children: /* @__PURE__ */ (0,
|
|
7879
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react21.Filter, { className: "h-4 w-4" })
|
|
7586
7880
|
}
|
|
7587
7881
|
),
|
|
7588
|
-
children: /* @__PURE__ */ (0,
|
|
7589
|
-
/* @__PURE__ */ (0,
|
|
7882
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "w-48 p-2 space-y-2", children: [
|
|
7883
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
|
|
7590
7884
|
"Filter ",
|
|
7591
7885
|
col.title
|
|
7592
7886
|
] }),
|
|
7593
7887
|
renderFilterControl(col),
|
|
7594
|
-
filters[col.key] && /* @__PURE__ */ (0,
|
|
7888
|
+
filters[col.key] && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7595
7889
|
"button",
|
|
7596
7890
|
{
|
|
7597
7891
|
onClick: () => {
|
|
@@ -7614,20 +7908,20 @@ function DataTable({
|
|
|
7614
7908
|
col.key
|
|
7615
7909
|
)) });
|
|
7616
7910
|
const isServerMode = Boolean(onQueryChange);
|
|
7617
|
-
const displayedData = isServerMode ? data :
|
|
7911
|
+
const displayedData = isServerMode ? data : import_react22.default.useMemo(() => {
|
|
7618
7912
|
const start = (curPage - 1) * curPageSize;
|
|
7619
7913
|
return data.slice(start, start + curPageSize);
|
|
7620
7914
|
}, [data, curPage, curPageSize]);
|
|
7621
7915
|
const totalItems = isServerMode ? total : data.length;
|
|
7622
|
-
return /* @__PURE__ */ (0,
|
|
7623
|
-
/* @__PURE__ */ (0,
|
|
7624
|
-
/* @__PURE__ */ (0,
|
|
7625
|
-
/* @__PURE__ */ (0,
|
|
7626
|
-
enableDensityToggle && /* @__PURE__ */ (0,
|
|
7916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("space-y-2", className), children: [
|
|
7917
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
|
|
7918
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
|
|
7919
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
7920
|
+
enableDensityToggle && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7627
7921
|
DropdownMenu_default,
|
|
7628
7922
|
{
|
|
7629
|
-
trigger: /* @__PURE__ */ (0,
|
|
7630
|
-
/* @__PURE__ */ (0,
|
|
7923
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
|
|
7924
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
|
|
7631
7925
|
labels?.density || t("density")
|
|
7632
7926
|
] }),
|
|
7633
7927
|
items: [
|
|
@@ -7637,11 +7931,11 @@ function DataTable({
|
|
|
7637
7931
|
]
|
|
7638
7932
|
}
|
|
7639
7933
|
),
|
|
7640
|
-
enableColumnVisibilityToggle && /* @__PURE__ */ (0,
|
|
7934
|
+
enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7641
7935
|
DropdownMenu_default,
|
|
7642
7936
|
{
|
|
7643
|
-
trigger: /* @__PURE__ */ (0,
|
|
7644
|
-
/* @__PURE__ */ (0,
|
|
7937
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
|
|
7938
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7645
7939
|
"path",
|
|
7646
7940
|
{
|
|
7647
7941
|
strokeLinecap: "round",
|
|
@@ -7652,15 +7946,15 @@ function DataTable({
|
|
|
7652
7946
|
) }),
|
|
7653
7947
|
labels?.columns || t("columns")
|
|
7654
7948
|
] }),
|
|
7655
|
-
children: columns.map((c) => /* @__PURE__ */ (0,
|
|
7949
|
+
children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
7656
7950
|
DropdownMenuItem,
|
|
7657
7951
|
{
|
|
7658
7952
|
onClick: () => {
|
|
7659
7953
|
setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
|
|
7660
7954
|
},
|
|
7661
7955
|
children: [
|
|
7662
|
-
/* @__PURE__ */ (0,
|
|
7663
|
-
/* @__PURE__ */ (0,
|
|
7956
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
|
|
7957
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "truncate", children: c.title })
|
|
7664
7958
|
]
|
|
7665
7959
|
},
|
|
7666
7960
|
c.key
|
|
@@ -7670,17 +7964,17 @@ function DataTable({
|
|
|
7670
7964
|
toolbar
|
|
7671
7965
|
] })
|
|
7672
7966
|
] }),
|
|
7673
|
-
/* @__PURE__ */ (0,
|
|
7967
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
7674
7968
|
Table,
|
|
7675
7969
|
{
|
|
7676
7970
|
containerClassName: "border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent",
|
|
7677
7971
|
className: "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-[5] [&_thead]:bg-background [&_thead]:backdrop-blur-sm",
|
|
7678
7972
|
children: [
|
|
7679
|
-
/* @__PURE__ */ (0,
|
|
7680
|
-
/* @__PURE__ */ (0,
|
|
7681
|
-
/* @__PURE__ */ (0,
|
|
7682
|
-
/* @__PURE__ */ (0,
|
|
7683
|
-
/* @__PURE__ */ (0,
|
|
7973
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableHeader, { children: renderHeader }),
|
|
7974
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
|
|
7975
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
|
|
7976
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
7977
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7684
7978
|
"path",
|
|
7685
7979
|
{
|
|
7686
7980
|
className: "opacity-75",
|
|
@@ -7689,10 +7983,10 @@ function DataTable({
|
|
|
7689
7983
|
}
|
|
7690
7984
|
)
|
|
7691
7985
|
] }),
|
|
7692
|
-
/* @__PURE__ */ (0,
|
|
7693
|
-
] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0,
|
|
7986
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-sm", children: "Loading..." })
|
|
7987
|
+
] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col, colIdx) => {
|
|
7694
7988
|
const value = col.dataIndex ? row[col.dataIndex] : void 0;
|
|
7695
|
-
return /* @__PURE__ */ (0,
|
|
7989
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7696
7990
|
TableCell,
|
|
7697
7991
|
{
|
|
7698
7992
|
className: cn(
|
|
@@ -7711,7 +8005,7 @@ function DataTable({
|
|
|
7711
8005
|
]
|
|
7712
8006
|
}
|
|
7713
8007
|
) }),
|
|
7714
|
-
totalItems > 0 && /* @__PURE__ */ (0,
|
|
8008
|
+
totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
7715
8009
|
Pagination,
|
|
7716
8010
|
{
|
|
7717
8011
|
page: curPage,
|
|
@@ -7733,10 +8027,10 @@ function DataTable({
|
|
|
7733
8027
|
var DataTable_default = DataTable;
|
|
7734
8028
|
|
|
7735
8029
|
// ../../components/ui/Form.tsx
|
|
7736
|
-
var
|
|
8030
|
+
var React32 = __toESM(require("react"), 1);
|
|
7737
8031
|
|
|
7738
8032
|
// ../../node_modules/react-hook-form/dist/index.esm.mjs
|
|
7739
|
-
var
|
|
8033
|
+
var import_react23 = __toESM(require("react"), 1);
|
|
7740
8034
|
var isCheckBoxInput = (element) => element.type === "checkbox";
|
|
7741
8035
|
var isDateObject = (value) => value instanceof Date;
|
|
7742
8036
|
var isNullOrUndefined = (value) => value == null;
|
|
@@ -7824,12 +8118,12 @@ var INPUT_VALIDATION_RULES = {
|
|
|
7824
8118
|
required: "required",
|
|
7825
8119
|
validate: "validate"
|
|
7826
8120
|
};
|
|
7827
|
-
var HookFormContext =
|
|
8121
|
+
var HookFormContext = import_react23.default.createContext(null);
|
|
7828
8122
|
HookFormContext.displayName = "HookFormContext";
|
|
7829
|
-
var useFormContext = () =>
|
|
8123
|
+
var useFormContext = () => import_react23.default.useContext(HookFormContext);
|
|
7830
8124
|
var FormProvider = (props) => {
|
|
7831
8125
|
const { children, ...data } = props;
|
|
7832
|
-
return
|
|
8126
|
+
return import_react23.default.createElement(HookFormContext.Provider, { value: data }, children);
|
|
7833
8127
|
};
|
|
7834
8128
|
var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
|
|
7835
8129
|
const result = {
|
|
@@ -7849,12 +8143,12 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
|
|
|
7849
8143
|
}
|
|
7850
8144
|
return result;
|
|
7851
8145
|
};
|
|
7852
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
8146
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react23.default.useLayoutEffect : import_react23.default.useEffect;
|
|
7853
8147
|
function useFormState(props) {
|
|
7854
8148
|
const methods = useFormContext();
|
|
7855
8149
|
const { control = methods.control, disabled, name, exact } = props || {};
|
|
7856
|
-
const [formState, updateFormState] =
|
|
7857
|
-
const _localProxyFormState =
|
|
8150
|
+
const [formState, updateFormState] = import_react23.default.useState(control._formState);
|
|
8151
|
+
const _localProxyFormState = import_react23.default.useRef({
|
|
7858
8152
|
isDirty: false,
|
|
7859
8153
|
isLoading: false,
|
|
7860
8154
|
dirtyFields: false,
|
|
@@ -7875,10 +8169,10 @@ function useFormState(props) {
|
|
|
7875
8169
|
});
|
|
7876
8170
|
}
|
|
7877
8171
|
}), [name, disabled, exact]);
|
|
7878
|
-
|
|
8172
|
+
import_react23.default.useEffect(() => {
|
|
7879
8173
|
_localProxyFormState.current.isValid && control._setValid(true);
|
|
7880
8174
|
}, [control]);
|
|
7881
|
-
return
|
|
8175
|
+
return import_react23.default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
|
|
7882
8176
|
}
|
|
7883
8177
|
var isString = (value) => typeof value === "string";
|
|
7884
8178
|
var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
|
|
@@ -7927,12 +8221,12 @@ function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new Wea
|
|
|
7927
8221
|
function useWatch(props) {
|
|
7928
8222
|
const methods = useFormContext();
|
|
7929
8223
|
const { control = methods.control, name, defaultValue, disabled, exact, compute } = props || {};
|
|
7930
|
-
const _defaultValue =
|
|
7931
|
-
const _compute =
|
|
7932
|
-
const _computeFormValues =
|
|
8224
|
+
const _defaultValue = import_react23.default.useRef(defaultValue);
|
|
8225
|
+
const _compute = import_react23.default.useRef(compute);
|
|
8226
|
+
const _computeFormValues = import_react23.default.useRef(void 0);
|
|
7933
8227
|
_compute.current = compute;
|
|
7934
|
-
const defaultValueMemo =
|
|
7935
|
-
const [value, updateValue] =
|
|
8228
|
+
const defaultValueMemo = import_react23.default.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
|
|
8229
|
+
const [value, updateValue] = import_react23.default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
|
|
7936
8230
|
useIsomorphicLayoutEffect(() => control._subscribe({
|
|
7937
8231
|
name,
|
|
7938
8232
|
formState: {
|
|
@@ -7954,14 +8248,14 @@ function useWatch(props) {
|
|
|
7954
8248
|
}
|
|
7955
8249
|
}
|
|
7956
8250
|
}), [control, disabled, name, exact]);
|
|
7957
|
-
|
|
8251
|
+
import_react23.default.useEffect(() => control._removeUnmounted());
|
|
7958
8252
|
return value;
|
|
7959
8253
|
}
|
|
7960
8254
|
function useController(props) {
|
|
7961
8255
|
const methods = useFormContext();
|
|
7962
8256
|
const { name, disabled, control = methods.control, shouldUnregister, defaultValue } = props;
|
|
7963
8257
|
const isArrayField = isNameInFieldArray(control._names.array, name);
|
|
7964
|
-
const defaultValueMemo =
|
|
8258
|
+
const defaultValueMemo = import_react23.default.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
|
|
7965
8259
|
const value = useWatch({
|
|
7966
8260
|
control,
|
|
7967
8261
|
name,
|
|
@@ -7973,15 +8267,15 @@ function useController(props) {
|
|
|
7973
8267
|
name,
|
|
7974
8268
|
exact: true
|
|
7975
8269
|
});
|
|
7976
|
-
const _props =
|
|
7977
|
-
const _previousNameRef =
|
|
7978
|
-
const _registerProps =
|
|
8270
|
+
const _props = import_react23.default.useRef(props);
|
|
8271
|
+
const _previousNameRef = import_react23.default.useRef(void 0);
|
|
8272
|
+
const _registerProps = import_react23.default.useRef(control.register(name, {
|
|
7979
8273
|
...props.rules,
|
|
7980
8274
|
value,
|
|
7981
8275
|
...isBoolean(props.disabled) ? { disabled: props.disabled } : {}
|
|
7982
8276
|
}));
|
|
7983
8277
|
_props.current = props;
|
|
7984
|
-
const fieldState =
|
|
8278
|
+
const fieldState = import_react23.default.useMemo(() => Object.defineProperties({}, {
|
|
7985
8279
|
invalid: {
|
|
7986
8280
|
enumerable: true,
|
|
7987
8281
|
get: () => !!get(formState.errors, name)
|
|
@@ -8003,21 +8297,21 @@ function useController(props) {
|
|
|
8003
8297
|
get: () => get(formState.errors, name)
|
|
8004
8298
|
}
|
|
8005
8299
|
}), [formState, name]);
|
|
8006
|
-
const onChange =
|
|
8300
|
+
const onChange = import_react23.default.useCallback((event) => _registerProps.current.onChange({
|
|
8007
8301
|
target: {
|
|
8008
8302
|
value: getEventValue(event),
|
|
8009
8303
|
name
|
|
8010
8304
|
},
|
|
8011
8305
|
type: EVENTS.CHANGE
|
|
8012
8306
|
}), [name]);
|
|
8013
|
-
const onBlur =
|
|
8307
|
+
const onBlur = import_react23.default.useCallback(() => _registerProps.current.onBlur({
|
|
8014
8308
|
target: {
|
|
8015
8309
|
value: get(control._formValues, name),
|
|
8016
8310
|
name
|
|
8017
8311
|
},
|
|
8018
8312
|
type: EVENTS.BLUR
|
|
8019
8313
|
}), [name, control._formValues]);
|
|
8020
|
-
const ref =
|
|
8314
|
+
const ref = import_react23.default.useCallback((elm) => {
|
|
8021
8315
|
const field2 = get(control._fields, name);
|
|
8022
8316
|
if (field2 && elm) {
|
|
8023
8317
|
field2._f.ref = {
|
|
@@ -8028,7 +8322,7 @@ function useController(props) {
|
|
|
8028
8322
|
};
|
|
8029
8323
|
}
|
|
8030
8324
|
}, [control._fields, name]);
|
|
8031
|
-
const field =
|
|
8325
|
+
const field = import_react23.default.useMemo(() => ({
|
|
8032
8326
|
name,
|
|
8033
8327
|
value,
|
|
8034
8328
|
...isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {},
|
|
@@ -8036,7 +8330,7 @@ function useController(props) {
|
|
|
8036
8330
|
onBlur,
|
|
8037
8331
|
ref
|
|
8038
8332
|
}), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
|
|
8039
|
-
|
|
8333
|
+
import_react23.default.useEffect(() => {
|
|
8040
8334
|
const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
|
|
8041
8335
|
const previousName = _previousNameRef.current;
|
|
8042
8336
|
if (previousName && previousName !== name && !isArrayField) {
|
|
@@ -8066,13 +8360,13 @@ function useController(props) {
|
|
|
8066
8360
|
(isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
|
|
8067
8361
|
};
|
|
8068
8362
|
}, [name, control, isArrayField, shouldUnregister]);
|
|
8069
|
-
|
|
8363
|
+
import_react23.default.useEffect(() => {
|
|
8070
8364
|
control._setDisabledField({
|
|
8071
8365
|
disabled,
|
|
8072
8366
|
name
|
|
8073
8367
|
});
|
|
8074
8368
|
}, [disabled, name, control]);
|
|
8075
|
-
return
|
|
8369
|
+
return import_react23.default.useMemo(() => ({
|
|
8076
8370
|
field,
|
|
8077
8371
|
formState,
|
|
8078
8372
|
fieldState
|
|
@@ -9391,9 +9685,9 @@ function createFormControl(props = {}) {
|
|
|
9391
9685
|
};
|
|
9392
9686
|
}
|
|
9393
9687
|
function useForm(props = {}) {
|
|
9394
|
-
const _formControl =
|
|
9395
|
-
const _values =
|
|
9396
|
-
const [formState, updateFormState] =
|
|
9688
|
+
const _formControl = import_react23.default.useRef(void 0);
|
|
9689
|
+
const _values = import_react23.default.useRef(void 0);
|
|
9690
|
+
const [formState, updateFormState] = import_react23.default.useState({
|
|
9397
9691
|
isDirty: false,
|
|
9398
9692
|
isValidating: false,
|
|
9399
9693
|
isLoading: isFunction(props.defaultValues),
|
|
@@ -9442,8 +9736,8 @@ function useForm(props = {}) {
|
|
|
9442
9736
|
control._formState.isReady = true;
|
|
9443
9737
|
return sub;
|
|
9444
9738
|
}, [control]);
|
|
9445
|
-
|
|
9446
|
-
|
|
9739
|
+
import_react23.default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
|
|
9740
|
+
import_react23.default.useEffect(() => {
|
|
9447
9741
|
if (props.mode) {
|
|
9448
9742
|
control._options.mode = props.mode;
|
|
9449
9743
|
}
|
|
@@ -9451,18 +9745,18 @@ function useForm(props = {}) {
|
|
|
9451
9745
|
control._options.reValidateMode = props.reValidateMode;
|
|
9452
9746
|
}
|
|
9453
9747
|
}, [control, props.mode, props.reValidateMode]);
|
|
9454
|
-
|
|
9748
|
+
import_react23.default.useEffect(() => {
|
|
9455
9749
|
if (props.errors) {
|
|
9456
9750
|
control._setErrors(props.errors);
|
|
9457
9751
|
control._focusError();
|
|
9458
9752
|
}
|
|
9459
9753
|
}, [control, props.errors]);
|
|
9460
|
-
|
|
9754
|
+
import_react23.default.useEffect(() => {
|
|
9461
9755
|
props.shouldUnregister && control._subjects.state.next({
|
|
9462
9756
|
values: control._getWatch()
|
|
9463
9757
|
});
|
|
9464
9758
|
}, [control, props.shouldUnregister]);
|
|
9465
|
-
|
|
9759
|
+
import_react23.default.useEffect(() => {
|
|
9466
9760
|
if (control._proxyFormState.isDirty) {
|
|
9467
9761
|
const isDirty = control._getDirty();
|
|
9468
9762
|
if (isDirty !== formState.isDirty) {
|
|
@@ -9472,7 +9766,7 @@ function useForm(props = {}) {
|
|
|
9472
9766
|
}
|
|
9473
9767
|
}
|
|
9474
9768
|
}, [control, formState.isDirty]);
|
|
9475
|
-
|
|
9769
|
+
import_react23.default.useEffect(() => {
|
|
9476
9770
|
if (props.values && !deepEqual(props.values, _values.current)) {
|
|
9477
9771
|
control._reset(props.values, {
|
|
9478
9772
|
keepFieldsRef: true,
|
|
@@ -9484,7 +9778,7 @@ function useForm(props = {}) {
|
|
|
9484
9778
|
control._resetDefaultValues();
|
|
9485
9779
|
}
|
|
9486
9780
|
}, [control, props.values]);
|
|
9487
|
-
|
|
9781
|
+
import_react23.default.useEffect(() => {
|
|
9488
9782
|
if (!control._state.mount) {
|
|
9489
9783
|
control._setValid();
|
|
9490
9784
|
control._state.mount = true;
|
|
@@ -9501,8 +9795,8 @@ function useForm(props = {}) {
|
|
|
9501
9795
|
|
|
9502
9796
|
// ../../components/ui/Form.tsx
|
|
9503
9797
|
var import_next_intl8 = require("next-intl");
|
|
9504
|
-
var
|
|
9505
|
-
var FormConfigContext =
|
|
9798
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
9799
|
+
var FormConfigContext = React32.createContext({ size: "md" });
|
|
9506
9800
|
var FormWrapper = ({
|
|
9507
9801
|
children,
|
|
9508
9802
|
onSubmit,
|
|
@@ -9515,24 +9809,24 @@ var FormWrapper = ({
|
|
|
9515
9809
|
const methods = useForm({
|
|
9516
9810
|
defaultValues: initialValues
|
|
9517
9811
|
});
|
|
9518
|
-
|
|
9812
|
+
React32.useEffect(() => {
|
|
9519
9813
|
if (initialValues) {
|
|
9520
9814
|
methods.reset(initialValues);
|
|
9521
9815
|
}
|
|
9522
9816
|
}, [JSON.stringify(initialValues)]);
|
|
9523
9817
|
const { validationSchema: _, ...formProps } = props;
|
|
9524
|
-
return /* @__PURE__ */ (0,
|
|
9818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
|
|
9525
9819
|
};
|
|
9526
9820
|
var Form = FormWrapper;
|
|
9527
|
-
var FormFieldContext =
|
|
9821
|
+
var FormFieldContext = React32.createContext({});
|
|
9528
9822
|
var FormField = ({
|
|
9529
9823
|
...props
|
|
9530
9824
|
}) => {
|
|
9531
|
-
return /* @__PURE__ */ (0,
|
|
9825
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Controller, { ...props }) });
|
|
9532
9826
|
};
|
|
9533
9827
|
var useFormField = () => {
|
|
9534
|
-
const fieldContext =
|
|
9535
|
-
const itemContext =
|
|
9828
|
+
const fieldContext = React32.useContext(FormFieldContext);
|
|
9829
|
+
const itemContext = React32.useContext(FormItemContext);
|
|
9536
9830
|
const { getFieldState, formState } = useFormContext();
|
|
9537
9831
|
if (!fieldContext) {
|
|
9538
9832
|
try {
|
|
@@ -9553,22 +9847,22 @@ var useFormField = () => {
|
|
|
9553
9847
|
...fieldState
|
|
9554
9848
|
};
|
|
9555
9849
|
};
|
|
9556
|
-
var FormItemContext =
|
|
9557
|
-
var FormItem =
|
|
9558
|
-
const id =
|
|
9559
|
-
return /* @__PURE__ */ (0,
|
|
9850
|
+
var FormItemContext = React32.createContext({});
|
|
9851
|
+
var FormItem = React32.forwardRef(({ className, ...props }, ref) => {
|
|
9852
|
+
const id = React32.useId();
|
|
9853
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
|
|
9560
9854
|
});
|
|
9561
9855
|
FormItem.displayName = "FormItem";
|
|
9562
|
-
var FormLabel =
|
|
9856
|
+
var FormLabel = React32.forwardRef(({ className, ...props }, ref) => {
|
|
9563
9857
|
const { error, formItemId } = useFormField();
|
|
9564
|
-
const config =
|
|
9858
|
+
const config = React32.useContext(FormConfigContext);
|
|
9565
9859
|
const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
|
|
9566
|
-
return /* @__PURE__ */ (0,
|
|
9860
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props });
|
|
9567
9861
|
});
|
|
9568
9862
|
FormLabel.displayName = "FormLabel";
|
|
9569
|
-
var FormControl =
|
|
9863
|
+
var FormControl = React32.forwardRef(({ ...props }, ref) => {
|
|
9570
9864
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
9571
|
-
return /* @__PURE__ */ (0,
|
|
9865
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
9572
9866
|
"div",
|
|
9573
9867
|
{
|
|
9574
9868
|
ref,
|
|
@@ -9580,37 +9874,37 @@ var FormControl = React31.forwardRef(({ ...props }, ref) => {
|
|
|
9580
9874
|
);
|
|
9581
9875
|
});
|
|
9582
9876
|
FormControl.displayName = "FormControl";
|
|
9583
|
-
var FormDescription =
|
|
9877
|
+
var FormDescription = React32.forwardRef(({ className, ...props }, ref) => {
|
|
9584
9878
|
const { formDescriptionId } = useFormField();
|
|
9585
|
-
return /* @__PURE__ */ (0,
|
|
9879
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
|
|
9586
9880
|
});
|
|
9587
9881
|
FormDescription.displayName = "FormDescription";
|
|
9588
|
-
var FormMessage =
|
|
9882
|
+
var FormMessage = React32.forwardRef(({ className, children, ...props }, ref) => {
|
|
9589
9883
|
const { error, formMessageId } = useFormField();
|
|
9590
9884
|
const body = error ? String(error?.message) : children;
|
|
9591
9885
|
if (!body) {
|
|
9592
9886
|
return null;
|
|
9593
9887
|
}
|
|
9594
|
-
return /* @__PURE__ */ (0,
|
|
9888
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
|
|
9595
9889
|
});
|
|
9596
9890
|
FormMessage.displayName = "FormMessage";
|
|
9597
|
-
var FormInput =
|
|
9891
|
+
var FormInput = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
9598
9892
|
FormField,
|
|
9599
9893
|
{
|
|
9600
9894
|
name,
|
|
9601
|
-
render: ({ field }) => /* @__PURE__ */ (0,
|
|
9602
|
-
/* @__PURE__ */ (0,
|
|
9603
|
-
/* @__PURE__ */ (0,
|
|
9895
|
+
render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(FormItem, { children: [
|
|
9896
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
|
|
9897
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormMessage, {})
|
|
9604
9898
|
] })
|
|
9605
9899
|
}
|
|
9606
9900
|
) }));
|
|
9607
9901
|
FormInput.displayName = "FormInput";
|
|
9608
|
-
var FormCheckbox =
|
|
9902
|
+
var FormCheckbox = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
9609
9903
|
FormField,
|
|
9610
9904
|
{
|
|
9611
9905
|
name,
|
|
9612
|
-
render: ({ field }) => /* @__PURE__ */ (0,
|
|
9613
|
-
/* @__PURE__ */ (0,
|
|
9906
|
+
render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(FormItem, { children: [
|
|
9907
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
9614
9908
|
Checkbox,
|
|
9615
9909
|
{
|
|
9616
9910
|
ref,
|
|
@@ -9624,20 +9918,20 @@ var FormCheckbox = React31.forwardRef(({ name, ...props }, ref) => /* @__PURE__
|
|
|
9624
9918
|
...props
|
|
9625
9919
|
}
|
|
9626
9920
|
) }),
|
|
9627
|
-
/* @__PURE__ */ (0,
|
|
9921
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormMessage, {})
|
|
9628
9922
|
] })
|
|
9629
9923
|
}
|
|
9630
9924
|
) }));
|
|
9631
9925
|
FormCheckbox.displayName = "FormCheckbox";
|
|
9632
|
-
var FormActions =
|
|
9926
|
+
var FormActions = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
|
|
9633
9927
|
FormActions.displayName = "FormActions";
|
|
9634
|
-
var FormSubmitButton =
|
|
9928
|
+
var FormSubmitButton = React32.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
|
|
9635
9929
|
FormSubmitButton.displayName = "FormSubmitButton";
|
|
9636
9930
|
|
|
9637
9931
|
// ../../components/ui/NotificationModal.tsx
|
|
9638
9932
|
var import_lucide_react22 = require("lucide-react");
|
|
9639
9933
|
var import_next_intl9 = require("next-intl");
|
|
9640
|
-
var
|
|
9934
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
9641
9935
|
function NotificationModal({ isOpen, onClose, notification, titleText, openLinkText, closeText }) {
|
|
9642
9936
|
const t = (0, import_next_intl9.useTranslations)("Common");
|
|
9643
9937
|
if (!notification) return null;
|
|
@@ -9658,26 +9952,26 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
|
|
|
9658
9952
|
onClose();
|
|
9659
9953
|
}
|
|
9660
9954
|
};
|
|
9661
|
-
return /* @__PURE__ */ (0,
|
|
9955
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
9662
9956
|
Modal_default,
|
|
9663
9957
|
{
|
|
9664
9958
|
isOpen,
|
|
9665
9959
|
onClose,
|
|
9666
9960
|
title: titleText || t("notifications"),
|
|
9667
9961
|
size: "md",
|
|
9668
|
-
children: /* @__PURE__ */ (0,
|
|
9669
|
-
/* @__PURE__ */ (0,
|
|
9670
|
-
/* @__PURE__ */ (0,
|
|
9962
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-4", children: [
|
|
9963
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
|
|
9964
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cn(
|
|
9671
9965
|
"w-2 h-2 rounded-full",
|
|
9672
9966
|
!notification.is_read ? "bg-primary" : "bg-border"
|
|
9673
9967
|
) }),
|
|
9674
|
-
/* @__PURE__ */ (0,
|
|
9968
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
|
|
9675
9969
|
] }),
|
|
9676
|
-
notification.title && /* @__PURE__ */ (0,
|
|
9677
|
-
notification.body && /* @__PURE__ */ (0,
|
|
9678
|
-
/* @__PURE__ */ (0,
|
|
9679
|
-
/* @__PURE__ */ (0,
|
|
9680
|
-
hasLink && /* @__PURE__ */ (0,
|
|
9970
|
+
notification.title && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
|
|
9971
|
+
notification.body && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
|
|
9972
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime2(notification.created_at) }),
|
|
9973
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
|
|
9974
|
+
hasLink && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
9681
9975
|
Button_default,
|
|
9682
9976
|
{
|
|
9683
9977
|
variant: "primary",
|
|
@@ -9685,12 +9979,12 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
|
|
|
9685
9979
|
onClick: handleLinkClick,
|
|
9686
9980
|
className: "gap-2",
|
|
9687
9981
|
children: [
|
|
9688
|
-
/* @__PURE__ */ (0,
|
|
9982
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react22.ExternalLink, { className: "w-4 h-4" }),
|
|
9689
9983
|
openLinkText || t("openLink")
|
|
9690
9984
|
]
|
|
9691
9985
|
}
|
|
9692
9986
|
),
|
|
9693
|
-
/* @__PURE__ */ (0,
|
|
9987
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
9694
9988
|
Button_default,
|
|
9695
9989
|
{
|
|
9696
9990
|
variant: "ghost",
|
|
@@ -9712,10 +10006,10 @@ var import_navigation = require("next/navigation");
|
|
|
9712
10006
|
var import_lucide_react23 = require("lucide-react");
|
|
9713
10007
|
|
|
9714
10008
|
// ../../node_modules/react-icons/lib/iconBase.mjs
|
|
9715
|
-
var
|
|
10009
|
+
var import_react25 = __toESM(require("react"), 1);
|
|
9716
10010
|
|
|
9717
10011
|
// ../../node_modules/react-icons/lib/iconContext.mjs
|
|
9718
|
-
var
|
|
10012
|
+
var import_react24 = __toESM(require("react"), 1);
|
|
9719
10013
|
var DefaultContext = {
|
|
9720
10014
|
color: void 0,
|
|
9721
10015
|
size: void 0,
|
|
@@ -9723,7 +10017,7 @@ var DefaultContext = {
|
|
|
9723
10017
|
style: void 0,
|
|
9724
10018
|
attr: void 0
|
|
9725
10019
|
};
|
|
9726
|
-
var IconContext =
|
|
10020
|
+
var IconContext = import_react24.default.createContext && /* @__PURE__ */ import_react24.default.createContext(DefaultContext);
|
|
9727
10021
|
|
|
9728
10022
|
// ../../node_modules/react-icons/lib/iconBase.mjs
|
|
9729
10023
|
var _excluded = ["attr", "size", "title"];
|
|
@@ -9812,12 +10106,12 @@ function _toPrimitive(t, r) {
|
|
|
9812
10106
|
return ("string" === r ? String : Number)(t);
|
|
9813
10107
|
}
|
|
9814
10108
|
function Tree2Element(tree) {
|
|
9815
|
-
return tree && tree.map((node, i) => /* @__PURE__ */
|
|
10109
|
+
return tree && tree.map((node, i) => /* @__PURE__ */ import_react25.default.createElement(node.tag, _objectSpread({
|
|
9816
10110
|
key: i
|
|
9817
10111
|
}, node.attr), Tree2Element(node.child)));
|
|
9818
10112
|
}
|
|
9819
10113
|
function GenIcon(data) {
|
|
9820
|
-
return (props) => /* @__PURE__ */
|
|
10114
|
+
return (props) => /* @__PURE__ */ import_react25.default.createElement(IconBase, _extends({
|
|
9821
10115
|
attr: _objectSpread({}, data.attr)
|
|
9822
10116
|
}, props), Tree2Element(data.child));
|
|
9823
10117
|
}
|
|
@@ -9832,7 +10126,7 @@ function IconBase(props) {
|
|
|
9832
10126
|
var className;
|
|
9833
10127
|
if (conf.className) className = conf.className;
|
|
9834
10128
|
if (props.className) className = (className ? className + " " : "") + props.className;
|
|
9835
|
-
return /* @__PURE__ */
|
|
10129
|
+
return /* @__PURE__ */ import_react25.default.createElement("svg", _extends({
|
|
9836
10130
|
stroke: "currentColor",
|
|
9837
10131
|
fill: "currentColor",
|
|
9838
10132
|
strokeWidth: "0"
|
|
@@ -9844,9 +10138,9 @@ function IconBase(props) {
|
|
|
9844
10138
|
height: computedSize,
|
|
9845
10139
|
width: computedSize,
|
|
9846
10140
|
xmlns: "http://www.w3.org/2000/svg"
|
|
9847
|
-
}), title && /* @__PURE__ */
|
|
10141
|
+
}), title && /* @__PURE__ */ import_react25.default.createElement("title", null, title), props.children);
|
|
9848
10142
|
};
|
|
9849
|
-
return IconContext !== void 0 ? /* @__PURE__ */
|
|
10143
|
+
return IconContext !== void 0 ? /* @__PURE__ */ import_react25.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
|
|
9850
10144
|
}
|
|
9851
10145
|
|
|
9852
10146
|
// ../../node_modules/react-icons/fa/index.mjs
|
|
@@ -9860,9 +10154,9 @@ function SiZalo(props) {
|
|
|
9860
10154
|
}
|
|
9861
10155
|
|
|
9862
10156
|
// ../../components/ui/FloatingContacts.tsx
|
|
9863
|
-
var
|
|
10157
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
9864
10158
|
function MessengerIcon(props) {
|
|
9865
|
-
return /* @__PURE__ */ (0,
|
|
10159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
9866
10160
|
"path",
|
|
9867
10161
|
{
|
|
9868
10162
|
d: "M12 2C6.477 2 2 6.145 2 11.235c0 2.93 1.35 5.542 3.464 7.25v3.515l3.344-1.836c.894.247 1.843.375 2.192.375 5.523 0 10-4.145 10-9.235S17.523 2 12 2zm.994 12.444l-2.563-2.73-5.004 2.73 5.507-5.84 2.626 2.729 4.942-2.729-5.508 5.84z",
|
|
@@ -9871,10 +10165,10 @@ function MessengerIcon(props) {
|
|
|
9871
10165
|
) });
|
|
9872
10166
|
}
|
|
9873
10167
|
function ZaloIcon(props) {
|
|
9874
|
-
return /* @__PURE__ */ (0,
|
|
10168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SiZalo, { size: 20, ...props });
|
|
9875
10169
|
}
|
|
9876
10170
|
function InstagramIcon(props) {
|
|
9877
|
-
return /* @__PURE__ */ (0,
|
|
10171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FaInstagram, { size: 20, ...props });
|
|
9878
10172
|
}
|
|
9879
10173
|
function FloatingContacts({ className }) {
|
|
9880
10174
|
const pathname = (0, import_navigation.usePathname)();
|
|
@@ -9909,8 +10203,8 @@ function FloatingContacts({ className }) {
|
|
|
9909
10203
|
external: true
|
|
9910
10204
|
}
|
|
9911
10205
|
];
|
|
9912
|
-
return /* @__PURE__ */ (0,
|
|
9913
|
-
/* @__PURE__ */ (0,
|
|
10206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("fixed bottom-6 right-4 z-[100000]", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
|
|
10207
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
9914
10208
|
import_link2.default,
|
|
9915
10209
|
{
|
|
9916
10210
|
href: `tel:${hotline.replace(/\D/g, "")}`,
|
|
@@ -9921,10 +10215,10 @@ function FloatingContacts({ className }) {
|
|
|
9921
10215
|
"hover:scale-105 active:scale-95 transition-transform",
|
|
9922
10216
|
"bg-[#22c55e]"
|
|
9923
10217
|
),
|
|
9924
|
-
children: /* @__PURE__ */ (0,
|
|
10218
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react23.Phone, { className: "w-6 h-6" })
|
|
9925
10219
|
}
|
|
9926
10220
|
),
|
|
9927
|
-
moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0,
|
|
10221
|
+
moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
9928
10222
|
import_link2.default,
|
|
9929
10223
|
{
|
|
9930
10224
|
href,
|
|
@@ -9936,7 +10230,7 @@ function FloatingContacts({ className }) {
|
|
|
9936
10230
|
"hover:scale-105 active:scale-95 transition-transform",
|
|
9937
10231
|
bg
|
|
9938
10232
|
),
|
|
9939
|
-
children: /* @__PURE__ */ (0,
|
|
10233
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { className: "w-6 h-6" })
|
|
9940
10234
|
},
|
|
9941
10235
|
key
|
|
9942
10236
|
))
|
|
@@ -9945,7 +10239,7 @@ function FloatingContacts({ className }) {
|
|
|
9945
10239
|
|
|
9946
10240
|
// ../../components/ui/AccessDenied.tsx
|
|
9947
10241
|
var import_lucide_react24 = require("lucide-react");
|
|
9948
|
-
var
|
|
10242
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
9949
10243
|
var VARIANT_STYLES = {
|
|
9950
10244
|
destructive: { bg: "bg-destructive/5", border: "border-destructive/20", text: "text-destructive" },
|
|
9951
10245
|
warning: { bg: "bg-warning/5", border: "border-warning/20", text: "text-warning" },
|
|
@@ -9966,32 +10260,32 @@ function AccessDenied({
|
|
|
9966
10260
|
}) {
|
|
9967
10261
|
const styles = VARIANT_STYLES[variant];
|
|
9968
10262
|
const UsedIcon = Icon || DEFAULT_ICONS[variant];
|
|
9969
|
-
return /* @__PURE__ */ (0,
|
|
9970
|
-
/* @__PURE__ */ (0,
|
|
9971
|
-
/* @__PURE__ */ (0,
|
|
9972
|
-
/* @__PURE__ */ (0,
|
|
9973
|
-
/* @__PURE__ */ (0,
|
|
10263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
|
|
10264
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
|
|
10265
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
|
|
10266
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
|
|
10267
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
|
|
9974
10268
|
] }),
|
|
9975
|
-
children && /* @__PURE__ */ (0,
|
|
10269
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
|
|
9976
10270
|
] }) });
|
|
9977
10271
|
}
|
|
9978
10272
|
|
|
9979
10273
|
// ../../components/ui/ThemeToggleHeadless.tsx
|
|
9980
10274
|
var import_lucide_react25 = require("lucide-react");
|
|
9981
|
-
var
|
|
10275
|
+
var import_react26 = require("react");
|
|
9982
10276
|
var import_react_dom9 = require("react-dom");
|
|
9983
|
-
var
|
|
10277
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
9984
10278
|
function ThemeToggleHeadless({
|
|
9985
10279
|
theme,
|
|
9986
10280
|
onChange,
|
|
9987
10281
|
labels,
|
|
9988
10282
|
className
|
|
9989
10283
|
}) {
|
|
9990
|
-
const [isOpen, setIsOpen] = (0,
|
|
9991
|
-
const [mounted, setMounted] = (0,
|
|
9992
|
-
const triggerRef = (0,
|
|
9993
|
-
const [dropdownPosition, setDropdownPosition] = (0,
|
|
9994
|
-
(0,
|
|
10284
|
+
const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
|
|
10285
|
+
const [mounted, setMounted] = (0, import_react26.useState)(false);
|
|
10286
|
+
const triggerRef = (0, import_react26.useRef)(null);
|
|
10287
|
+
const [dropdownPosition, setDropdownPosition] = (0, import_react26.useState)(null);
|
|
10288
|
+
(0, import_react26.useEffect)(() => setMounted(true), []);
|
|
9995
10289
|
const themes = [
|
|
9996
10290
|
{ value: "light", label: labels?.light ?? "Light", icon: import_lucide_react25.Sun },
|
|
9997
10291
|
{ value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react25.Moon },
|
|
@@ -10009,8 +10303,8 @@ function ThemeToggleHeadless({
|
|
|
10009
10303
|
const top = rect.bottom + scrollTop + 8;
|
|
10010
10304
|
return { top, left, width };
|
|
10011
10305
|
};
|
|
10012
|
-
return /* @__PURE__ */ (0,
|
|
10013
|
-
/* @__PURE__ */ (0,
|
|
10306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("relative", className), children: [
|
|
10307
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
10014
10308
|
Button_default,
|
|
10015
10309
|
{
|
|
10016
10310
|
variant: "ghost",
|
|
@@ -10028,25 +10322,25 @@ function ThemeToggleHeadless({
|
|
|
10028
10322
|
"aria-haspopup": "menu",
|
|
10029
10323
|
"aria-expanded": isOpen,
|
|
10030
10324
|
"aria-label": labels?.heading ?? "Theme",
|
|
10031
|
-
children: /* @__PURE__ */ (0,
|
|
10325
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CurrentIcon, { className: "h-5 w-5" })
|
|
10032
10326
|
}
|
|
10033
10327
|
),
|
|
10034
|
-
isOpen && /* @__PURE__ */ (0,
|
|
10035
|
-
typeof window !== "undefined" && (0, import_react_dom9.createPortal)(/* @__PURE__ */ (0,
|
|
10328
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
|
|
10329
|
+
typeof window !== "undefined" && (0, import_react_dom9.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
|
|
10036
10330
|
typeof window !== "undefined" && dropdownPosition && (0, import_react_dom9.createPortal)(
|
|
10037
|
-
/* @__PURE__ */ (0,
|
|
10331
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
10038
10332
|
"div",
|
|
10039
10333
|
{
|
|
10040
10334
|
className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
|
|
10041
10335
|
style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
|
|
10042
10336
|
onMouseDown: (e) => e.stopPropagation(),
|
|
10043
10337
|
role: "menu",
|
|
10044
|
-
children: /* @__PURE__ */ (0,
|
|
10045
|
-
/* @__PURE__ */ (0,
|
|
10338
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "p-2", children: [
|
|
10339
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
|
|
10046
10340
|
themes.map((opt) => {
|
|
10047
10341
|
const Icon = opt.icon;
|
|
10048
10342
|
const active = theme === opt.value;
|
|
10049
|
-
return /* @__PURE__ */ (0,
|
|
10343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
10050
10344
|
Button_default,
|
|
10051
10345
|
{
|
|
10052
10346
|
variant: "ghost",
|
|
@@ -10062,9 +10356,9 @@ function ThemeToggleHeadless({
|
|
|
10062
10356
|
role: "menuitemradio",
|
|
10063
10357
|
"aria-checked": active,
|
|
10064
10358
|
children: [
|
|
10065
|
-
/* @__PURE__ */ (0,
|
|
10066
|
-
/* @__PURE__ */ (0,
|
|
10067
|
-
active && /* @__PURE__ */ (0,
|
|
10359
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { className: "h-4 w-4" }),
|
|
10360
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
|
|
10361
|
+
active && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
|
|
10068
10362
|
]
|
|
10069
10363
|
},
|
|
10070
10364
|
opt.value
|
|
@@ -10080,10 +10374,10 @@ function ThemeToggleHeadless({
|
|
|
10080
10374
|
}
|
|
10081
10375
|
|
|
10082
10376
|
// ../../components/ui/LanguageSwitcherHeadless.tsx
|
|
10083
|
-
var
|
|
10377
|
+
var import_react27 = require("react");
|
|
10084
10378
|
var import_react_dom10 = require("react-dom");
|
|
10085
10379
|
var import_lucide_react26 = require("lucide-react");
|
|
10086
|
-
var
|
|
10380
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
10087
10381
|
function LanguageSwitcherHeadless({
|
|
10088
10382
|
locales,
|
|
10089
10383
|
currentLocale,
|
|
@@ -10091,9 +10385,9 @@ function LanguageSwitcherHeadless({
|
|
|
10091
10385
|
labels,
|
|
10092
10386
|
className
|
|
10093
10387
|
}) {
|
|
10094
|
-
const [isOpen, setIsOpen] = (0,
|
|
10095
|
-
const [dropdownPosition, setDropdownPosition] = (0,
|
|
10096
|
-
const triggerButtonRef = (0,
|
|
10388
|
+
const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
|
|
10389
|
+
const [dropdownPosition, setDropdownPosition] = (0, import_react27.useState)(null);
|
|
10390
|
+
const triggerButtonRef = (0, import_react27.useRef)(null);
|
|
10097
10391
|
const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
|
|
10098
10392
|
const calculatePosition = () => {
|
|
10099
10393
|
const rect = triggerButtonRef.current?.getBoundingClientRect();
|
|
@@ -10105,8 +10399,8 @@ function LanguageSwitcherHeadless({
|
|
|
10105
10399
|
const top = rect.bottom + scrollTop + 8;
|
|
10106
10400
|
return { top, left, width };
|
|
10107
10401
|
};
|
|
10108
|
-
return /* @__PURE__ */ (0,
|
|
10109
|
-
/* @__PURE__ */ (0,
|
|
10402
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("relative", className), children: [
|
|
10403
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
10110
10404
|
Button_default,
|
|
10111
10405
|
{
|
|
10112
10406
|
variant: "ghost",
|
|
@@ -10125,22 +10419,22 @@ function LanguageSwitcherHeadless({
|
|
|
10125
10419
|
"aria-expanded": isOpen,
|
|
10126
10420
|
"aria-label": labels?.heading ?? "Language",
|
|
10127
10421
|
title: labels?.heading ?? "Language",
|
|
10128
|
-
children: /* @__PURE__ */ (0,
|
|
10422
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.Globe, { className: "h-5 w-5" })
|
|
10129
10423
|
}
|
|
10130
10424
|
),
|
|
10131
|
-
isOpen && /* @__PURE__ */ (0,
|
|
10132
|
-
typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0,
|
|
10425
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
|
|
10426
|
+
typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
|
|
10133
10427
|
typeof window !== "undefined" && dropdownPosition && (0, import_react_dom10.createPortal)(
|
|
10134
|
-
/* @__PURE__ */ (0,
|
|
10428
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
10135
10429
|
"div",
|
|
10136
10430
|
{
|
|
10137
10431
|
className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
|
|
10138
10432
|
style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
|
|
10139
10433
|
onMouseDown: (e) => e.stopPropagation(),
|
|
10140
10434
|
role: "menu",
|
|
10141
|
-
children: /* @__PURE__ */ (0,
|
|
10142
|
-
/* @__PURE__ */ (0,
|
|
10143
|
-
locales.map((language) => /* @__PURE__ */ (0,
|
|
10435
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "p-2", children: [
|
|
10436
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
|
|
10437
|
+
locales.map((language) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
10144
10438
|
Button_default,
|
|
10145
10439
|
{
|
|
10146
10440
|
variant: "ghost",
|
|
@@ -10153,9 +10447,9 @@ function LanguageSwitcherHeadless({
|
|
|
10153
10447
|
role: "menuitemradio",
|
|
10154
10448
|
"aria-checked": currentLocale === language.code,
|
|
10155
10449
|
children: [
|
|
10156
|
-
language.flag && /* @__PURE__ */ (0,
|
|
10157
|
-
/* @__PURE__ */ (0,
|
|
10158
|
-
currentLocale === language.code && /* @__PURE__ */ (0,
|
|
10450
|
+
language.flag && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-lg", children: language.flag }),
|
|
10451
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "flex-1 text-left", children: language.name }),
|
|
10452
|
+
currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
|
|
10159
10453
|
]
|
|
10160
10454
|
},
|
|
10161
10455
|
language.code
|
|
@@ -10328,6 +10622,7 @@ function getUnderverseMessages(locale = "en") {
|
|
|
10328
10622
|
DropdownMenu,
|
|
10329
10623
|
DropdownMenuItem,
|
|
10330
10624
|
DropdownMenuSeparator,
|
|
10625
|
+
FallingIcons,
|
|
10331
10626
|
FloatingContacts,
|
|
10332
10627
|
Form,
|
|
10333
10628
|
FormActions,
|