@underverse-ui/underverse 1.0.60 → 1.0.62
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/api-reference.json +16 -2
- package/dist/index.cjs +189 -75
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +20 -4
- package/dist/index.d.ts +20 -4
- package/dist/index.js +199 -85
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3535,29 +3535,25 @@ var ToastComponent = ({ toast, onRemove }) => {
|
|
|
3535
3535
|
icon: CheckCircle2,
|
|
3536
3536
|
containerClassName: "bg-success/5 border-success/30",
|
|
3537
3537
|
iconClassName: "text-success",
|
|
3538
|
-
iconBgClassName: "bg-success/15"
|
|
3539
|
-
accentBarClassName: "bg-success"
|
|
3538
|
+
iconBgClassName: "bg-success/15"
|
|
3540
3539
|
},
|
|
3541
3540
|
error: {
|
|
3542
3541
|
icon: AlertCircle2,
|
|
3543
3542
|
containerClassName: "bg-destructive/5 border-destructive/30",
|
|
3544
3543
|
iconClassName: "text-destructive",
|
|
3545
|
-
iconBgClassName: "bg-destructive/15"
|
|
3546
|
-
accentBarClassName: "bg-destructive"
|
|
3544
|
+
iconBgClassName: "bg-destructive/15"
|
|
3547
3545
|
},
|
|
3548
3546
|
warning: {
|
|
3549
3547
|
icon: AlertTriangle2,
|
|
3550
3548
|
containerClassName: "bg-warning/5 border-warning/30",
|
|
3551
3549
|
iconClassName: "text-warning",
|
|
3552
|
-
iconBgClassName: "bg-warning/15"
|
|
3553
|
-
accentBarClassName: "bg-warning"
|
|
3550
|
+
iconBgClassName: "bg-warning/15"
|
|
3554
3551
|
},
|
|
3555
3552
|
info: {
|
|
3556
3553
|
icon: Info,
|
|
3557
3554
|
containerClassName: "bg-info/5 border-info/30",
|
|
3558
3555
|
iconClassName: "text-info",
|
|
3559
|
-
iconBgClassName: "bg-info/15"
|
|
3560
|
-
accentBarClassName: "bg-info"
|
|
3556
|
+
iconBgClassName: "bg-info/15"
|
|
3561
3557
|
}
|
|
3562
3558
|
};
|
|
3563
3559
|
const config = typeConfig[toast.type];
|
|
@@ -3566,7 +3562,7 @@ var ToastComponent = ({ toast, onRemove }) => {
|
|
|
3566
3562
|
"div",
|
|
3567
3563
|
{
|
|
3568
3564
|
className: cn(
|
|
3569
|
-
"relative w-80 rounded-
|
|
3565
|
+
"relative w-80 rounded-xl border backdrop-blur-md transition-all duration-300 pointer-events-auto overflow-hidden",
|
|
3570
3566
|
"bg-card shadow-xl",
|
|
3571
3567
|
"animate-in slide-in-from-right-full",
|
|
3572
3568
|
config.containerClassName,
|
|
@@ -3587,8 +3583,7 @@ var ToastComponent = ({ toast, onRemove }) => {
|
|
|
3587
3583
|
setPaused(false);
|
|
3588
3584
|
},
|
|
3589
3585
|
children: [
|
|
3590
|
-
/* @__PURE__ */
|
|
3591
|
-
/* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3 p-4 pl-5", children: [
|
|
3586
|
+
/* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3 p-4", children: [
|
|
3592
3587
|
/* @__PURE__ */ jsx16("div", { className: cn("flex items-center justify-center w-8 h-8 rounded-full shrink-0", config.iconBgClassName), children: /* @__PURE__ */ jsx16(Icon, { className: cn("h-4 w-4", config.iconClassName) }) }),
|
|
3593
3588
|
/* @__PURE__ */ jsxs12("div", { className: "flex-1 space-y-1", children: [
|
|
3594
3589
|
toast.title && /* @__PURE__ */ jsx16("h4", { className: "font-medium text-sm leading-none", children: toast.title }),
|
|
@@ -16187,20 +16182,92 @@ function Carousel({
|
|
|
16187
16182
|
slideClassName,
|
|
16188
16183
|
onSlideChange,
|
|
16189
16184
|
thumbnailRenderer,
|
|
16190
|
-
ariaLabel = "Carousel"
|
|
16185
|
+
ariaLabel = "Carousel",
|
|
16186
|
+
effectPreset,
|
|
16187
|
+
effectOptions
|
|
16191
16188
|
}) {
|
|
16192
16189
|
const [currentIndex, setCurrentIndex] = React42.useState(0);
|
|
16193
16190
|
const [isPaused, setIsPaused] = React42.useState(false);
|
|
16194
|
-
const [isDragging, setIsDragging] = React42.useState(false);
|
|
16195
|
-
const [startPos, setStartPos] = React42.useState(0);
|
|
16196
|
-
const [currentTranslate, setCurrentTranslate] = React42.useState(0);
|
|
16197
|
-
const [prevTranslate, setPrevTranslate] = React42.useState(0);
|
|
16198
16191
|
const progressElRef = React42.useRef(null);
|
|
16199
16192
|
const carouselRef = React42.useRef(null);
|
|
16200
16193
|
const rafRef = React42.useRef(null);
|
|
16201
|
-
const
|
|
16202
|
-
const
|
|
16194
|
+
const isDraggingRef = React42.useRef(false);
|
|
16195
|
+
const startPosRef = React42.useRef(0);
|
|
16196
|
+
const lastDragPositionRef = React42.useRef(0);
|
|
16197
|
+
const slides = React42.useMemo(() => React42.Children.toArray(children), [children]);
|
|
16198
|
+
const totalSlides = slides.length;
|
|
16203
16199
|
const isHorizontal = orientation === "horizontal";
|
|
16200
|
+
const effectiveAnimation = slidesToShow > 1 && !["slide", "coverflow", "stack"].includes(animation) ? "slide" : animation;
|
|
16201
|
+
const isDeckAnimation = effectiveAnimation === "coverflow" || effectiveAnimation === "stack";
|
|
16202
|
+
const effectiveSlidesToShow = isDeckAnimation ? 1 : slidesToShow;
|
|
16203
|
+
const maxIndex = Math.max(0, totalSlides - effectiveSlidesToShow);
|
|
16204
|
+
const presetEffectOptions = React42.useMemo(() => {
|
|
16205
|
+
if (effectPreset === "cinematic") {
|
|
16206
|
+
return effectiveAnimation === "stack" ? {
|
|
16207
|
+
mainScale: 1.08,
|
|
16208
|
+
sideScale: 0.9,
|
|
16209
|
+
farScale: 0.84,
|
|
16210
|
+
sideOpacity: 0.68,
|
|
16211
|
+
farOpacity: 0.3,
|
|
16212
|
+
depthStep: 76,
|
|
16213
|
+
blur: 2.2,
|
|
16214
|
+
stackOffset: 16,
|
|
16215
|
+
stackLift: 16
|
|
16216
|
+
} : {
|
|
16217
|
+
mainScale: 1.12,
|
|
16218
|
+
sideScale: 0.82,
|
|
16219
|
+
farScale: 0.72,
|
|
16220
|
+
sideOpacity: 0.72,
|
|
16221
|
+
farOpacity: 0.24,
|
|
16222
|
+
sideOffset: 22,
|
|
16223
|
+
rotate: 20,
|
|
16224
|
+
depthStep: 120,
|
|
16225
|
+
blur: 2.6
|
|
16226
|
+
};
|
|
16227
|
+
}
|
|
16228
|
+
if (effectPreset === "gallery") {
|
|
16229
|
+
return effectiveAnimation === "stack" ? {
|
|
16230
|
+
mainScale: 1.03,
|
|
16231
|
+
sideScale: 0.94,
|
|
16232
|
+
farScale: 0.88,
|
|
16233
|
+
sideOpacity: 0.82,
|
|
16234
|
+
farOpacity: 0.5,
|
|
16235
|
+
depthStep: 50,
|
|
16236
|
+
blur: 0.8,
|
|
16237
|
+
stackOffset: 24,
|
|
16238
|
+
stackLift: 8
|
|
16239
|
+
} : {
|
|
16240
|
+
mainScale: 1.05,
|
|
16241
|
+
sideScale: 0.9,
|
|
16242
|
+
farScale: 0.82,
|
|
16243
|
+
sideOpacity: 0.84,
|
|
16244
|
+
farOpacity: 0.48,
|
|
16245
|
+
sideOffset: 30,
|
|
16246
|
+
rotate: 16,
|
|
16247
|
+
depthStep: 78,
|
|
16248
|
+
blur: 1
|
|
16249
|
+
};
|
|
16250
|
+
}
|
|
16251
|
+
return {};
|
|
16252
|
+
}, [effectPreset, effectiveAnimation]);
|
|
16253
|
+
const mergedEffectOptions = React42.useMemo(
|
|
16254
|
+
() => ({
|
|
16255
|
+
mainScale: 1.04,
|
|
16256
|
+
sideScale: effectiveAnimation === "stack" ? 0.93 : 0.88,
|
|
16257
|
+
farScale: effectiveAnimation === "stack" ? 0.86 : 0.76,
|
|
16258
|
+
sideOpacity: effectiveAnimation === "stack" ? 0.74 : 0.78,
|
|
16259
|
+
farOpacity: effectiveAnimation === "stack" ? 0.42 : 0.38,
|
|
16260
|
+
sideOffset: effectiveAnimation === "stack" ? 20 : 28,
|
|
16261
|
+
rotate: 24,
|
|
16262
|
+
depthStep: effectiveAnimation === "stack" ? 60 : 90,
|
|
16263
|
+
blur: 1.5,
|
|
16264
|
+
stackOffset: 20,
|
|
16265
|
+
stackLift: 12,
|
|
16266
|
+
...presetEffectOptions,
|
|
16267
|
+
...effectOptions
|
|
16268
|
+
}),
|
|
16269
|
+
[effectOptions, effectiveAnimation, presetEffectOptions]
|
|
16270
|
+
);
|
|
16204
16271
|
const scrollPrev = React42.useCallback(() => {
|
|
16205
16272
|
setCurrentIndex((prev) => {
|
|
16206
16273
|
if (prev === 0) {
|
|
@@ -16223,8 +16290,8 @@ function Carousel({
|
|
|
16223
16290
|
},
|
|
16224
16291
|
[maxIndex]
|
|
16225
16292
|
);
|
|
16226
|
-
React42.
|
|
16227
|
-
|
|
16293
|
+
const handleKeyDown = React42.useCallback(
|
|
16294
|
+
(e) => {
|
|
16228
16295
|
if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
|
|
16229
16296
|
e.preventDefault();
|
|
16230
16297
|
scrollPrev();
|
|
@@ -16238,13 +16305,9 @@ function Carousel({
|
|
|
16238
16305
|
e.preventDefault();
|
|
16239
16306
|
scrollTo(maxIndex);
|
|
16240
16307
|
}
|
|
16241
|
-
}
|
|
16242
|
-
|
|
16243
|
-
|
|
16244
|
-
carousel.addEventListener("keydown", handleKeyDown);
|
|
16245
|
-
return () => carousel.removeEventListener("keydown", handleKeyDown);
|
|
16246
|
-
}
|
|
16247
|
-
}, [scrollPrev, scrollNext, scrollTo, maxIndex]);
|
|
16308
|
+
},
|
|
16309
|
+
[scrollPrev, scrollNext, scrollTo, maxIndex]
|
|
16310
|
+
);
|
|
16248
16311
|
React42.useEffect(() => {
|
|
16249
16312
|
const stop = () => {
|
|
16250
16313
|
if (rafRef.current != null) {
|
|
@@ -16253,7 +16316,7 @@ function Carousel({
|
|
|
16253
16316
|
}
|
|
16254
16317
|
if (progressElRef.current) progressElRef.current.style.width = "0%";
|
|
16255
16318
|
};
|
|
16256
|
-
if (!autoScroll || isPaused || totalSlides <=
|
|
16319
|
+
if (!autoScroll || isPaused || totalSlides <= effectiveSlidesToShow) {
|
|
16257
16320
|
stop();
|
|
16258
16321
|
return;
|
|
16259
16322
|
}
|
|
@@ -16272,7 +16335,7 @@ function Carousel({
|
|
|
16272
16335
|
};
|
|
16273
16336
|
rafRef.current = requestAnimationFrame(tick);
|
|
16274
16337
|
return stop;
|
|
16275
|
-
}, [autoScroll, isPaused, totalSlides,
|
|
16338
|
+
}, [autoScroll, isPaused, totalSlides, effectiveSlidesToShow, autoScrollInterval, scrollNext]);
|
|
16276
16339
|
const getPositionX = (event) => {
|
|
16277
16340
|
return event.type.includes("mouse") ? event.pageX : event.touches[0].clientX;
|
|
16278
16341
|
};
|
|
@@ -16280,60 +16343,100 @@ function Carousel({
|
|
|
16280
16343
|
return event.type.includes("mouse") ? event.pageY : event.touches[0].clientY;
|
|
16281
16344
|
};
|
|
16282
16345
|
const touchStart = (event) => {
|
|
16283
|
-
|
|
16346
|
+
isDraggingRef.current = true;
|
|
16284
16347
|
const pos = isHorizontal ? getPositionX(event.nativeEvent) : getPositionY(event.nativeEvent);
|
|
16285
|
-
|
|
16286
|
-
|
|
16348
|
+
startPosRef.current = pos;
|
|
16349
|
+
lastDragPositionRef.current = pos;
|
|
16287
16350
|
};
|
|
16288
16351
|
const touchMove = (event) => {
|
|
16289
|
-
if (!
|
|
16352
|
+
if (!isDraggingRef.current) return;
|
|
16290
16353
|
const pos = isHorizontal ? getPositionX(event.nativeEvent) : getPositionY(event.nativeEvent);
|
|
16291
|
-
|
|
16292
|
-
setCurrentTranslate(prevTranslate + currentPosition - startPos);
|
|
16354
|
+
lastDragPositionRef.current = pos;
|
|
16293
16355
|
};
|
|
16294
16356
|
const touchEnd = () => {
|
|
16295
|
-
if (!
|
|
16296
|
-
|
|
16297
|
-
const movedBy =
|
|
16357
|
+
if (!isDraggingRef.current) return;
|
|
16358
|
+
isDraggingRef.current = false;
|
|
16359
|
+
const movedBy = lastDragPositionRef.current - startPosRef.current;
|
|
16298
16360
|
const threshold = 50;
|
|
16299
|
-
if (movedBy < -threshold
|
|
16361
|
+
if (movedBy < -threshold) {
|
|
16300
16362
|
scrollNext();
|
|
16301
|
-
} else if (movedBy > threshold
|
|
16363
|
+
} else if (movedBy > threshold) {
|
|
16302
16364
|
scrollPrev();
|
|
16303
16365
|
}
|
|
16304
|
-
|
|
16305
|
-
|
|
16366
|
+
startPosRef.current = 0;
|
|
16367
|
+
lastDragPositionRef.current = 0;
|
|
16306
16368
|
};
|
|
16307
16369
|
React42.useEffect(() => {
|
|
16308
16370
|
onSlideChange?.(currentIndex);
|
|
16309
16371
|
}, [currentIndex, onSlideChange]);
|
|
16310
16372
|
const getAnimationStyles2 = () => {
|
|
16311
|
-
|
|
16312
|
-
|
|
16313
|
-
return {
|
|
16314
|
-
transition: "opacity 500ms ease-in-out"
|
|
16315
|
-
};
|
|
16316
|
-
}
|
|
16317
|
-
if (animation === "scale") {
|
|
16318
|
-
return {
|
|
16319
|
-
transform: baseTransform,
|
|
16320
|
-
transition: "transform 500ms ease-in-out, scale 500ms ease-in-out"
|
|
16321
|
-
};
|
|
16373
|
+
if (effectiveAnimation !== "slide") {
|
|
16374
|
+
return {};
|
|
16322
16375
|
}
|
|
16376
|
+
const baseTransform = isHorizontal ? `translateX(-${currentIndex * (100 / effectiveSlidesToShow)}%)` : `translateY(-${currentIndex * (100 / effectiveSlidesToShow)}%)`;
|
|
16323
16377
|
return {
|
|
16324
16378
|
transform: baseTransform,
|
|
16325
|
-
transition:
|
|
16379
|
+
transition: "transform 500ms ease-in-out"
|
|
16326
16380
|
};
|
|
16327
16381
|
};
|
|
16328
|
-
const slideWidth = 100 /
|
|
16382
|
+
const slideWidth = 100 / effectiveSlidesToShow;
|
|
16383
|
+
const getLoopDistance = React42.useCallback(
|
|
16384
|
+
(index) => {
|
|
16385
|
+
if (totalSlides <= 0) return 0;
|
|
16386
|
+
const forward = index - currentIndex;
|
|
16387
|
+
if (!loop) return forward;
|
|
16388
|
+
const altForward = forward - totalSlides;
|
|
16389
|
+
const altBackward = forward + totalSlides;
|
|
16390
|
+
const candidates = [forward, altForward, altBackward];
|
|
16391
|
+
return candidates.reduce((best, candidate) => Math.abs(candidate) < Math.abs(best) ? candidate : best, candidates[0] ?? 0);
|
|
16392
|
+
},
|
|
16393
|
+
[currentIndex, loop, totalSlides]
|
|
16394
|
+
);
|
|
16395
|
+
const getDeckSlideStyles = React42.useCallback(
|
|
16396
|
+
(index) => {
|
|
16397
|
+
const distance = getLoopDistance(index);
|
|
16398
|
+
const absDistance = Math.abs(distance);
|
|
16399
|
+
const hidden = absDistance > 2;
|
|
16400
|
+
if (hidden) {
|
|
16401
|
+
return {
|
|
16402
|
+
opacity: 0,
|
|
16403
|
+
pointerEvents: "none",
|
|
16404
|
+
transform: `translate3d(0, 0, -${mergedEffectOptions.depthStep * 2}px) scale(${mergedEffectOptions.farScale})`,
|
|
16405
|
+
filter: `blur(${mergedEffectOptions.blur * 1.4}px)`
|
|
16406
|
+
};
|
|
16407
|
+
}
|
|
16408
|
+
if (effectiveAnimation === "stack") {
|
|
16409
|
+
const xOffset2 = distance * mergedEffectOptions.stackOffset;
|
|
16410
|
+
const yOffset = absDistance * mergedEffectOptions.stackLift;
|
|
16411
|
+
const scale2 = distance === 0 ? mergedEffectOptions.mainScale : distance === 1 || distance === -1 ? mergedEffectOptions.sideScale : mergedEffectOptions.farScale;
|
|
16412
|
+
return {
|
|
16413
|
+
opacity: distance === 0 ? 1 : distance === 1 || distance === -1 ? mergedEffectOptions.sideOpacity : mergedEffectOptions.farOpacity,
|
|
16414
|
+
transform: `translate3d(${xOffset2}px, ${yOffset}px, -${absDistance * mergedEffectOptions.depthStep}px) scale(${scale2})`,
|
|
16415
|
+
filter: distance === 0 ? "blur(0px)" : `blur(${Math.min(absDistance, 2) * mergedEffectOptions.blur}px)`,
|
|
16416
|
+
pointerEvents: distance === 0 ? "auto" : "none"
|
|
16417
|
+
};
|
|
16418
|
+
}
|
|
16419
|
+
const xOffset = distance * mergedEffectOptions.sideOffset;
|
|
16420
|
+
const rotateY = distance * -mergedEffectOptions.rotate;
|
|
16421
|
+
const scale = distance === 0 ? mergedEffectOptions.mainScale : distance === 1 || distance === -1 ? mergedEffectOptions.sideScale : mergedEffectOptions.farScale;
|
|
16422
|
+
return {
|
|
16423
|
+
opacity: distance === 0 ? 1 : distance === 1 || distance === -1 ? mergedEffectOptions.sideOpacity : mergedEffectOptions.farOpacity,
|
|
16424
|
+
transform: `translate3d(${xOffset}%, 0, -${absDistance * mergedEffectOptions.depthStep}px) rotateY(${rotateY}deg) scale(${scale})`,
|
|
16425
|
+
filter: distance === 0 ? "blur(0px)" : `blur(${Math.min(absDistance, 2) * mergedEffectOptions.blur}px)`,
|
|
16426
|
+
pointerEvents: distance === 0 ? "auto" : "none"
|
|
16427
|
+
};
|
|
16428
|
+
},
|
|
16429
|
+
[effectiveAnimation, getLoopDistance, mergedEffectOptions]
|
|
16430
|
+
);
|
|
16329
16431
|
return /* @__PURE__ */ jsxs41(
|
|
16330
16432
|
"div",
|
|
16331
16433
|
{
|
|
16332
16434
|
ref: carouselRef,
|
|
16333
16435
|
className: cn(
|
|
16334
|
-
"relative w-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-
|
|
16436
|
+
"relative w-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-xl md:rounded-3xl",
|
|
16335
16437
|
className
|
|
16336
16438
|
),
|
|
16439
|
+
onKeyDown: handleKeyDown,
|
|
16337
16440
|
onMouseEnter: () => setIsPaused(true),
|
|
16338
16441
|
onMouseLeave: () => setIsPaused(false),
|
|
16339
16442
|
role: "region",
|
|
@@ -16345,8 +16448,14 @@ function Carousel({
|
|
|
16345
16448
|
/* @__PURE__ */ jsx49(
|
|
16346
16449
|
"div",
|
|
16347
16450
|
{
|
|
16348
|
-
className: cn(
|
|
16349
|
-
|
|
16451
|
+
className: cn(
|
|
16452
|
+
effectiveAnimation === "slide" ? "flex" : "grid",
|
|
16453
|
+
effectiveAnimation === "slide" && (isHorizontal ? "flex-row" : "flex-col"),
|
|
16454
|
+
isDeckAnimation && "place-items-center [transform-style:preserve-3d]",
|
|
16455
|
+
isHorizontal ? "touch-pan-y" : "touch-pan-x",
|
|
16456
|
+
containerClassName
|
|
16457
|
+
),
|
|
16458
|
+
style: isDeckAnimation ? { perspective: "1400px" } : getAnimationStyles2(),
|
|
16350
16459
|
onTouchStart: touchStart,
|
|
16351
16460
|
onTouchMove: touchMove,
|
|
16352
16461
|
onTouchEnd: touchEnd,
|
|
@@ -16357,30 +16466,30 @@ function Carousel({
|
|
|
16357
16466
|
role: "group",
|
|
16358
16467
|
"aria-atomic": "false",
|
|
16359
16468
|
"aria-live": autoScroll ? "off" : "polite",
|
|
16360
|
-
children:
|
|
16469
|
+
children: slides.map((child, idx) => /* @__PURE__ */ jsx49(
|
|
16361
16470
|
"div",
|
|
16362
16471
|
{
|
|
16363
16472
|
className: cn(
|
|
16364
16473
|
"shrink-0",
|
|
16365
|
-
isHorizontal ? "h-full" : "w-full",
|
|
16366
|
-
|
|
16367
|
-
|
|
16474
|
+
effectiveAnimation === "slide" ? isHorizontal ? "h-full" : "w-full" : "col-start-1 row-start-1",
|
|
16475
|
+
effectiveAnimation === "fade" && (idx === currentIndex ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"),
|
|
16476
|
+
effectiveAnimation === "scale" && (idx === currentIndex ? "opacity-100 scale-100 z-10" : "opacity-0 scale-95 pointer-events-none z-0"),
|
|
16477
|
+
isDeckAnimation && "w-full max-w-[78%] md:max-w-[72%] transition-[opacity,transform] duration-500 ease-out",
|
|
16478
|
+
effectiveAnimation !== "slide" && "transition-[opacity,transform] duration-500 ease-in-out",
|
|
16368
16479
|
slideClassName
|
|
16369
16480
|
),
|
|
16370
|
-
style: {
|
|
16371
|
-
[isHorizontal ? "width" : "height"]: `${slideWidth}%`
|
|
16372
|
-
},
|
|
16481
|
+
style: effectiveAnimation === "slide" ? { [isHorizontal ? "width" : "height"]: `${slideWidth}%` } : isDeckAnimation ? getDeckSlideStyles(idx) : void 0,
|
|
16373
16482
|
role: "group",
|
|
16374
16483
|
"aria-roledescription": "slide",
|
|
16375
16484
|
"aria-label": `${idx + 1} of ${totalSlides}`,
|
|
16376
|
-
"aria-hidden": idx < currentIndex || idx >= currentIndex + slidesToShow,
|
|
16485
|
+
"aria-hidden": effectiveAnimation === "slide" ? idx < currentIndex || idx >= currentIndex + slidesToShow : idx !== currentIndex,
|
|
16377
16486
|
children: child
|
|
16378
16487
|
},
|
|
16379
|
-
idx
|
|
16488
|
+
React42.isValidElement(child) && child.key || idx
|
|
16380
16489
|
))
|
|
16381
16490
|
}
|
|
16382
16491
|
),
|
|
16383
|
-
showArrows && totalSlides >
|
|
16492
|
+
showArrows && totalSlides > effectiveSlidesToShow && /* @__PURE__ */ jsxs41(Fragment17, { children: [
|
|
16384
16493
|
/* @__PURE__ */ jsx49(
|
|
16385
16494
|
Button_default,
|
|
16386
16495
|
{
|
|
@@ -16392,7 +16501,8 @@ function Carousel({
|
|
|
16392
16501
|
disabled: !loop && currentIndex === 0,
|
|
16393
16502
|
className: cn(
|
|
16394
16503
|
"absolute top-1/2 -translate-y-1/2 hover:-translate-y-1/2 active:-translate-y-1/2 z-10 rounded-full will-change-transform backdrop-blur-0 hover:backdrop-blur-0 hover:bg-transparent border-0",
|
|
16395
|
-
|
|
16504
|
+
"max-md:h-8 max-md:w-8 max-md:border max-md:border-border/60 max-md:bg-background/75 max-md:backdrop-blur-sm max-md:shadow-sm",
|
|
16505
|
+
isHorizontal ? "left-4 max-md:left-2" : "top-4 left-1/2 -translate-x-1/2 rotate-90 max-md:top-2"
|
|
16396
16506
|
),
|
|
16397
16507
|
"aria-label": "Previous slide"
|
|
16398
16508
|
}
|
|
@@ -16408,18 +16518,19 @@ function Carousel({
|
|
|
16408
16518
|
disabled: !loop && currentIndex >= maxIndex,
|
|
16409
16519
|
className: cn(
|
|
16410
16520
|
"absolute top-1/2 -translate-y-1/2 hover:-translate-y-1/2 active:-translate-y-1/2 z-10 rounded-full will-change-transform backdrop-blur-0 hover:backdrop-blur-0 hover:bg-transparent border-0",
|
|
16411
|
-
|
|
16521
|
+
"max-md:h-8 max-md:w-8 max-md:border max-md:border-border/60 max-md:bg-background/75 max-md:backdrop-blur-sm max-md:shadow-sm",
|
|
16522
|
+
isHorizontal ? "right-4 max-md:right-2" : "bottom-4 left-1/2 -translate-x-1/2 rotate-90 max-md:bottom-2"
|
|
16412
16523
|
),
|
|
16413
16524
|
"aria-label": "Next slide"
|
|
16414
16525
|
}
|
|
16415
16526
|
)
|
|
16416
16527
|
] }),
|
|
16417
|
-
showDots && totalSlides >
|
|
16528
|
+
showDots && totalSlides > effectiveSlidesToShow && /* @__PURE__ */ jsx49(
|
|
16418
16529
|
"div",
|
|
16419
16530
|
{
|
|
16420
16531
|
className: cn(
|
|
16421
16532
|
"absolute flex gap-2 z-10",
|
|
16422
|
-
isHorizontal ? "bottom-4 left-1/2 -translate-x-1/2 flex-row" : "right-4 top-1/2 -translate-y-1/2 flex-col"
|
|
16533
|
+
isHorizontal ? "bottom-4 left-1/2 -translate-x-1/2 flex-row max-md:bottom-2" : "right-4 top-1/2 -translate-y-1/2 flex-col max-md:right-2"
|
|
16423
16534
|
),
|
|
16424
16535
|
role: "tablist",
|
|
16425
16536
|
"aria-label": "Carousel pagination",
|
|
@@ -16429,8 +16540,9 @@ function Carousel({
|
|
|
16429
16540
|
onClick: () => scrollTo(idx),
|
|
16430
16541
|
className: cn(
|
|
16431
16542
|
"rounded-full transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
|
|
16543
|
+
"max-md:w-1.5 max-md:h-1.5",
|
|
16432
16544
|
isHorizontal ? "w-2 h-2" : "w-2 h-2",
|
|
16433
|
-
idx === currentIndex ? `bg-primary ${isHorizontal ? "w-6" : "h-6"}` : "bg-muted-foreground/50 hover:bg-muted-foreground/75"
|
|
16545
|
+
idx === currentIndex ? `bg-primary ${isHorizontal ? "w-6 max-md:w-4" : "h-6 max-md:h-4"}` : "bg-muted-foreground/50 hover:bg-muted-foreground/75"
|
|
16434
16546
|
),
|
|
16435
16547
|
"aria-label": `Go to slide ${idx + 1}`,
|
|
16436
16548
|
"aria-selected": idx === currentIndex,
|
|
@@ -16440,11 +16552,12 @@ function Carousel({
|
|
|
16440
16552
|
))
|
|
16441
16553
|
}
|
|
16442
16554
|
),
|
|
16443
|
-
showThumbnails && totalSlides >
|
|
16555
|
+
showThumbnails && totalSlides > effectiveSlidesToShow && /* @__PURE__ */ jsx49(
|
|
16444
16556
|
"div",
|
|
16445
16557
|
{
|
|
16446
16558
|
className: cn(
|
|
16447
16559
|
"absolute bottom-0 left-0 right-0 flex gap-2 p-4 bg-linear-to-t from-black/50 to-transparent overflow-x-auto",
|
|
16560
|
+
"max-md:gap-1.5 max-md:p-2",
|
|
16448
16561
|
isHorizontal ? "flex-row" : "flex-col"
|
|
16449
16562
|
),
|
|
16450
16563
|
children: React42.Children.map(children, (child, idx) => /* @__PURE__ */ jsx49(
|
|
@@ -16453,7 +16566,8 @@ function Carousel({
|
|
|
16453
16566
|
onClick: () => scrollTo(idx),
|
|
16454
16567
|
className: cn(
|
|
16455
16568
|
"shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all focus:outline-none focus:ring-2 focus:ring-primary",
|
|
16456
|
-
|
|
16569
|
+
"max-md:w-12 max-md:h-12",
|
|
16570
|
+
idx === currentIndex ? "border-primary md:scale-110" : "border-transparent opacity-70 hover:opacity-100"
|
|
16457
16571
|
),
|
|
16458
16572
|
"aria-label": `Thumbnail ${idx + 1}`,
|
|
16459
16573
|
children: thumbnailRenderer ? thumbnailRenderer(child, idx) : child
|
|
@@ -20796,7 +20910,7 @@ function useLocale() {
|
|
|
20796
20910
|
}
|
|
20797
20911
|
|
|
20798
20912
|
// src/components/UEditor/UEditor.tsx
|
|
20799
|
-
import React71, { useEffect as useEffect34, useImperativeHandle as useImperativeHandle3, useMemo as
|
|
20913
|
+
import React71, { useEffect as useEffect34, useImperativeHandle as useImperativeHandle3, useMemo as useMemo23, useRef as useRef30 } from "react";
|
|
20800
20914
|
import { useEditor, EditorContent } from "@tiptap/react";
|
|
20801
20915
|
|
|
20802
20916
|
// src/components/UEditor/extensions.ts
|
|
@@ -22610,12 +22724,12 @@ import {
|
|
|
22610
22724
|
} from "lucide-react";
|
|
22611
22725
|
|
|
22612
22726
|
// src/components/UEditor/colors.tsx
|
|
22613
|
-
import { useMemo as
|
|
22727
|
+
import { useMemo as useMemo20 } from "react";
|
|
22614
22728
|
import { X as X17 } from "lucide-react";
|
|
22615
22729
|
import { jsx as jsx74, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
22616
22730
|
var useEditorColors = () => {
|
|
22617
22731
|
const t = useSmartTranslations("UEditor");
|
|
22618
|
-
const textColors =
|
|
22732
|
+
const textColors = useMemo20(
|
|
22619
22733
|
() => [
|
|
22620
22734
|
{ name: t("colors.default"), color: "inherit", cssClass: "text-foreground" },
|
|
22621
22735
|
{ name: t("colors.muted"), color: "var(--muted-foreground)", cssClass: "text-muted-foreground" },
|
|
@@ -22628,7 +22742,7 @@ var useEditorColors = () => {
|
|
|
22628
22742
|
],
|
|
22629
22743
|
[t]
|
|
22630
22744
|
);
|
|
22631
|
-
const highlightColors =
|
|
22745
|
+
const highlightColors = useMemo20(
|
|
22632
22746
|
() => [
|
|
22633
22747
|
{ name: t("colors.default"), color: "", cssClass: "" },
|
|
22634
22748
|
{ name: t("colors.muted"), color: "var(--muted)", cssClass: "bg-muted" },
|
|
@@ -22774,7 +22888,7 @@ var ImageInput = ({ onSubmit, onCancel }) => {
|
|
|
22774
22888
|
};
|
|
22775
22889
|
|
|
22776
22890
|
// src/components/UEditor/emoji-picker.tsx
|
|
22777
|
-
import { useState as useState43, useMemo as
|
|
22891
|
+
import { useState as useState43, useMemo as useMemo21, useRef as useRef27, useEffect as useEffect32 } from "react";
|
|
22778
22892
|
import { Search as Search6, X as X19, Smile as Smile2, Leaf, Utensils, Dumbbell, Lightbulb, Hash, Flag } from "lucide-react";
|
|
22779
22893
|
import { jsx as jsx76, jsxs as jsxs66 } from "react/jsx-runtime";
|
|
22780
22894
|
var CATEGORY_ICONS = {
|
|
@@ -22793,7 +22907,7 @@ var EmojiPicker = ({ onSelect, onClose }) => {
|
|
|
22793
22907
|
const scrollContainerRef = useRef27(null);
|
|
22794
22908
|
const categoryRefs = useRef27({});
|
|
22795
22909
|
const isUserScrolling = useRef27(false);
|
|
22796
|
-
const filteredCategories =
|
|
22910
|
+
const filteredCategories = useMemo21(() => {
|
|
22797
22911
|
if (!search.trim()) return EMOJI_LIST;
|
|
22798
22912
|
const query = search.toLowerCase();
|
|
22799
22913
|
return EMOJI_LIST.map((category) => ({
|
|
@@ -23455,7 +23569,7 @@ var EditorToolbar = ({
|
|
|
23455
23569
|
};
|
|
23456
23570
|
|
|
23457
23571
|
// src/components/UEditor/menus.tsx
|
|
23458
|
-
import React70, { useCallback as useCallback17, useEffect as useEffect33, useMemo as
|
|
23572
|
+
import React70, { useCallback as useCallback17, useEffect as useEffect33, useMemo as useMemo22, useRef as useRef29, useState as useState45 } from "react";
|
|
23459
23573
|
import { createPortal as createPortal8 } from "react-dom";
|
|
23460
23574
|
import {
|
|
23461
23575
|
Bold as BoldIcon2,
|
|
@@ -23499,7 +23613,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
|
|
|
23499
23613
|
const t = useSmartTranslations("UEditor");
|
|
23500
23614
|
const [selectedIndex, setSelectedIndex] = useResettingIndex4(filterText);
|
|
23501
23615
|
const menuRef = useRef29(null);
|
|
23502
|
-
const allCommands =
|
|
23616
|
+
const allCommands = useMemo22(
|
|
23503
23617
|
() => [
|
|
23504
23618
|
{
|
|
23505
23619
|
icon: Type3,
|
|
@@ -23570,7 +23684,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
|
|
|
23570
23684
|
],
|
|
23571
23685
|
[editor, t]
|
|
23572
23686
|
);
|
|
23573
|
-
const commands =
|
|
23687
|
+
const commands = useMemo22(() => {
|
|
23574
23688
|
if (!filterText) return allCommands;
|
|
23575
23689
|
const lowerFilter = filterText.toLowerCase();
|
|
23576
23690
|
return allCommands.filter((cmd) => cmd.label.toLowerCase().includes(lowerFilter) || cmd.description.toLowerCase().includes(lowerFilter));
|
|
@@ -24206,7 +24320,7 @@ var UEditor = React71.forwardRef(({
|
|
|
24206
24320
|
const t = useSmartTranslations("UEditor");
|
|
24207
24321
|
const effectivePlaceholder = placeholder ?? t("placeholder");
|
|
24208
24322
|
const inFlightPrepareRef = useRef30(null);
|
|
24209
|
-
const extensions =
|
|
24323
|
+
const extensions = useMemo23(
|
|
24210
24324
|
() => buildUEditorExtensions({ placeholder: effectivePlaceholder, translate: t, maxCharacters, uploadImage, imageInsertMode, editable }),
|
|
24211
24325
|
[effectivePlaceholder, t, maxCharacters, uploadImage, imageInsertMode, editable]
|
|
24212
24326
|
);
|