@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/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-r-xl border border-l-0 backdrop-blur-md transition-all duration-300 pointer-events-auto overflow-hidden",
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__ */ jsx16("div", { className: cn("absolute left-0 top-0 bottom-0 w-1", config.accentBarClassName) }),
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 totalSlides = React42.Children.count(children);
16202
- const maxIndex = Math.max(0, totalSlides - slidesToShow);
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.useEffect(() => {
16227
- const handleKeyDown = (e) => {
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
- const carousel = carouselRef.current;
16243
- if (carousel) {
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 <= slidesToShow) {
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, slidesToShow, autoScrollInterval, scrollNext]);
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
- setIsDragging(true);
16346
+ isDraggingRef.current = true;
16284
16347
  const pos = isHorizontal ? getPositionX(event.nativeEvent) : getPositionY(event.nativeEvent);
16285
- setStartPos(pos);
16286
- setPrevTranslate(currentTranslate);
16348
+ startPosRef.current = pos;
16349
+ lastDragPositionRef.current = pos;
16287
16350
  };
16288
16351
  const touchMove = (event) => {
16289
- if (!isDragging) return;
16352
+ if (!isDraggingRef.current) return;
16290
16353
  const pos = isHorizontal ? getPositionX(event.nativeEvent) : getPositionY(event.nativeEvent);
16291
- const currentPosition = pos;
16292
- setCurrentTranslate(prevTranslate + currentPosition - startPos);
16354
+ lastDragPositionRef.current = pos;
16293
16355
  };
16294
16356
  const touchEnd = () => {
16295
- if (!isDragging) return;
16296
- setIsDragging(false);
16297
- const movedBy = currentTranslate - prevTranslate;
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 && currentIndex < maxIndex) {
16361
+ if (movedBy < -threshold) {
16300
16362
  scrollNext();
16301
- } else if (movedBy > threshold && currentIndex > 0) {
16363
+ } else if (movedBy > threshold) {
16302
16364
  scrollPrev();
16303
16365
  }
16304
- setCurrentTranslate(0);
16305
- setPrevTranslate(0);
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
- const baseTransform = isHorizontal ? `translateX(-${currentIndex * (100 / slidesToShow)}%)` : `translateY(-${currentIndex * (100 / slidesToShow)}%)`;
16312
- if (animation === "fade") {
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: isDragging ? "none" : "transform 500ms ease-in-out"
16379
+ transition: "transform 500ms ease-in-out"
16326
16380
  };
16327
16381
  };
16328
- const slideWidth = 100 / slidesToShow;
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-2xl md:rounded-3xl",
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("flex", isHorizontal ? "flex-row" : "flex-col", containerClassName),
16349
- style: getAnimationStyles2(),
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: React42.Children.map(children, (child, idx) => /* @__PURE__ */ jsx49(
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
- animation === "fade" && idx !== currentIndex && "opacity-0",
16367
- animation === "scale" && idx !== currentIndex && "scale-95",
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 > slidesToShow && /* @__PURE__ */ jsxs41(Fragment17, { children: [
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
- isHorizontal ? "left-4" : "top-4 left-1/2 -translate-x-1/2 rotate-90"
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
- isHorizontal ? "right-4" : "bottom-4 left-1/2 -translate-x-1/2 rotate-90"
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 > slidesToShow && /* @__PURE__ */ jsx49(
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 > slidesToShow && /* @__PURE__ */ jsx49(
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
- idx === currentIndex ? "border-primary scale-110" : "border-transparent opacity-70 hover:opacity-100"
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 useMemo22, useRef as useRef30 } from "react";
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 useMemo19 } from "react";
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 = useMemo19(
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 = useMemo19(
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 useMemo20, useRef as useRef27, useEffect as useEffect32 } from "react";
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 = useMemo20(() => {
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 useMemo21, useRef as useRef29, useState as useState45 } from "react";
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 = useMemo21(
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 = useMemo21(() => {
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 = useMemo22(
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
  );