@opensite/ui 3.6.1 → 3.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/carousel-autoplay-progress.cjs +84 -84
  2. package/dist/carousel-autoplay-progress.js +84 -84
  3. package/dist/registry.cjs +872 -147
  4. package/dist/registry.js +872 -147
  5. package/package.json +1 -1
package/dist/carousel-autoplay-progress.cjs CHANGED
@@ -39,32 +39,6 @@ var Autoplay__default = /*#__PURE__*/_interopDefault(Autoplay);
39
39
  function cn(...inputs) {
40
40
  return tailwindMerge.twMerge(clsx.clsx(inputs));
41
41
  }
42
- function getNestedCardBg(parentBg, variant = "muted", options) {
43
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
44
- if (isDark) {
45
- switch (variant) {
46
- case "muted":
47
- return "bg-background";
48
- case "card":
49
- return "bg-card";
50
- case "accent":
51
- return "bg-accent";
52
- case "subtle":
53
- return "bg-background/50";
54
- }
55
- } else {
56
- switch (variant) {
57
- case "muted":
58
- return "bg-muted";
59
- case "card":
60
- return "bg-card";
61
- case "accent":
62
- return "bg-accent";
63
- case "subtle":
64
- return "bg-muted/50";
65
- }
66
- }
67
- }
68
42
  var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
69
43
  var DynamicIcon = React4__namespace.memo(function DynamicIcon2({
70
44
  apiKey,
@@ -547,7 +521,7 @@ function CarouselAutoplayProgress({
547
521
  slides,
548
522
  slidesSlot,
549
523
  options,
550
- autoplayDelay = 3e3,
524
+ autoplayDelay = 5e3,
551
525
  className,
552
526
  containerClassName,
553
527
  trackClassName,
@@ -557,7 +531,7 @@ function CarouselAutoplayProgress({
557
531
  dotsClassName,
558
532
  progressClassName,
559
533
  optixFlowConfig,
560
- background = "white",
534
+ background,
561
535
  spacing = "xl",
562
536
  pattern,
563
537
  patternOpacity
@@ -579,71 +553,97 @@ function CarouselAutoplayProgress({
579
553
  pattern,
580
554
  patternOpacity,
581
555
  children: [
582
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden", containerClassName), ref: emblaRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("ml-auto mr-3 flex touch-pan-y touch-pinch-zoom", trackClassName), children: slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs(
556
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden", containerClassName), ref: emblaRef, children: /* @__PURE__ */ jsxRuntime.jsx(
557
+ "div",
558
+ {
559
+ className: cn(
560
+ "ml-auto mr-3 flex touch-pan-y touch-pinch-zoom",
561
+ trackClassName
562
+ ),
563
+ children: slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs(
564
+ "div",
565
+ {
566
+ className: cn(
567
+ "flex-[0_0_70%] transform-gpu pl-3",
568
+ slideClassName,
569
+ slide.className
570
+ ),
571
+ children: [
572
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
573
+ img.Img,
574
+ {
575
+ src: slide.src,
576
+ alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
577
+ className: cn(
578
+ "h-full w-full object-cover",
579
+ imageClassName,
580
+ slide.imageClassName
581
+ ),
582
+ optixFlowConfig
583
+ }
584
+ ) }),
585
+ slide.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: slide.content })
586
+ ]
587
+ },
588
+ index
589
+ ))
590
+ }
591
+ ) }),
592
+ /* @__PURE__ */ jsxRuntime.jsxs(
583
593
  "div",
584
594
  {
585
- className: cn("flex-[0_0_70%] transform-gpu pl-3", slideClassName, slide.className),
595
+ className: cn(
596
+ "mx-auto mt-7 flex max-w-80 items-center justify-between gap-3",
597
+ controlsClassName
598
+ ),
586
599
  children: [
587
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
588
- img.Img,
600
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
601
+ "button",
589
602
  {
590
- src: slide.src,
591
- alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
592
- className: cn("h-full w-full object-cover", imageClassName, slide.imageClassName),
593
- optixFlowConfig
603
+ type: "button",
604
+ onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
605
+ className: cn(
606
+ "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
607
+ index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
608
+ )
609
+ },
610
+ index
611
+ )) }),
612
+ /* @__PURE__ */ jsxRuntime.jsx(
613
+ "div",
614
+ {
615
+ className: cn(
616
+ "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
617
+ "bg-card text-card-foreground",
618
+ showAutoplayProgress ? "opacity-100" : "opacity-0",
619
+ progressClassName
620
+ ),
621
+ children: /* @__PURE__ */ jsxRuntime.jsx(
622
+ "div",
623
+ {
624
+ className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
625
+ ref: progressNode,
626
+ style: {
627
+ animation: "autoplay-progress linear 1",
628
+ animationPlayState: showAutoplayProgress ? "running" : "paused"
629
+ }
630
+ }
631
+ )
594
632
  }
595
- ) }),
596
- slide.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: slide.content })
597
- ]
598
- },
599
- index
600
- )) }) }),
601
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mt-7 flex max-w-80 items-center justify-between gap-3", controlsClassName), children: [
602
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
603
- "button",
604
- {
605
- type: "button",
606
- onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
607
- className: cn(
608
- "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
609
- index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
610
- )
611
- },
612
- index
613
- )) }),
614
- /* @__PURE__ */ jsxRuntime.jsx(
615
- "div",
616
- {
617
- className: cn(
618
- "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
619
- getNestedCardBg(background),
620
- showAutoplayProgress ? "opacity-100" : "opacity-0",
621
- progressClassName
622
633
  ),
623
- children: /* @__PURE__ */ jsxRuntime.jsx(
624
- "div",
634
+ /* @__PURE__ */ jsxRuntime.jsx(
635
+ pressable.Pressable,
625
636
  {
626
- className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
627
- ref: progressNode,
628
- style: {
629
- animation: "autoplay-progress linear 1",
630
- animationPlayState: showAutoplayProgress ? "running" : "paused"
631
- }
637
+ size: "icon",
638
+ variant: "secondary",
639
+ onClick: toggleAutoplay,
640
+ asButton: true,
641
+ children: autoplayIsPlaying ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play", size: 16 })
632
642
  }
633
643
  )
634
- }
635
- ),
636
- /* @__PURE__ */ jsxRuntime.jsx(
637
- pressable.Pressable,
638
- {
639
- size: "icon",
640
- variant: "secondary",
641
- onClick: toggleAutoplay,
642
- asButton: true,
643
- children: autoplayIsPlaying ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play", size: 16 })
644
- }
645
- )
646
- ] }),
644
+ ]
645
+ }
646
+ ),
647
647
  /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
648
648
  @keyframes autoplay-progress {
649
649
  from {
package/dist/carousel-autoplay-progress.js CHANGED
@@ -14,32 +14,6 @@ import { Img } from '@page-speed/img';
14
14
  function cn(...inputs) {
15
15
  return twMerge(clsx(inputs));
16
16
  }
17
- function getNestedCardBg(parentBg, variant = "muted", options) {
18
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
19
- if (isDark) {
20
- switch (variant) {
21
- case "muted":
22
- return "bg-background";
23
- case "card":
24
- return "bg-card";
25
- case "accent":
26
- return "bg-accent";
27
- case "subtle":
28
- return "bg-background/50";
29
- }
30
- } else {
31
- switch (variant) {
32
- case "muted":
33
- return "bg-muted";
34
- case "card":
35
- return "bg-card";
36
- case "accent":
37
- return "bg-accent";
38
- case "subtle":
39
- return "bg-muted/50";
40
- }
41
- }
42
- }
43
17
  var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
44
18
  var DynamicIcon = React4.memo(function DynamicIcon2({
45
19
  apiKey,
@@ -522,7 +496,7 @@ function CarouselAutoplayProgress({
522
496
  slides,
523
497
  slidesSlot,
524
498
  options,
525
- autoplayDelay = 3e3,
499
+ autoplayDelay = 5e3,
526
500
  className,
527
501
  containerClassName,
528
502
  trackClassName,
@@ -532,7 +506,7 @@ function CarouselAutoplayProgress({
532
506
  dotsClassName,
533
507
  progressClassName,
534
508
  optixFlowConfig,
535
- background = "white",
509
+ background,
536
510
  spacing = "xl",
537
511
  pattern,
538
512
  patternOpacity
@@ -554,71 +528,97 @@ function CarouselAutoplayProgress({
554
528
  pattern,
555
529
  patternOpacity,
556
530
  children: [
557
- /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden", containerClassName), ref: emblaRef, children: /* @__PURE__ */ jsx("div", { className: cn("ml-auto mr-3 flex touch-pan-y touch-pinch-zoom", trackClassName), children: slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
531
+ /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden", containerClassName), ref: emblaRef, children: /* @__PURE__ */ jsx(
532
+ "div",
533
+ {
534
+ className: cn(
535
+ "ml-auto mr-3 flex touch-pan-y touch-pinch-zoom",
536
+ trackClassName
537
+ ),
538
+ children: slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
539
+ "div",
540
+ {
541
+ className: cn(
542
+ "flex-[0_0_70%] transform-gpu pl-3",
543
+ slideClassName,
544
+ slide.className
545
+ ),
546
+ children: [
547
+ /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
548
+ Img,
549
+ {
550
+ src: slide.src,
551
+ alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
552
+ className: cn(
553
+ "h-full w-full object-cover",
554
+ imageClassName,
555
+ slide.imageClassName
556
+ ),
557
+ optixFlowConfig
558
+ }
559
+ ) }),
560
+ slide.content && /* @__PURE__ */ jsx("div", { className: "mt-4", children: slide.content })
561
+ ]
562
+ },
563
+ index
564
+ ))
565
+ }
566
+ ) }),
567
+ /* @__PURE__ */ jsxs(
558
568
  "div",
559
569
  {
560
- className: cn("flex-[0_0_70%] transform-gpu pl-3", slideClassName, slide.className),
570
+ className: cn(
571
+ "mx-auto mt-7 flex max-w-80 items-center justify-between gap-3",
572
+ controlsClassName
573
+ ),
561
574
  children: [
562
- /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
563
- Img,
575
+ /* @__PURE__ */ jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsx(
576
+ "button",
564
577
  {
565
- src: slide.src,
566
- alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
567
- className: cn("h-full w-full object-cover", imageClassName, slide.imageClassName),
568
- optixFlowConfig
578
+ type: "button",
579
+ onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
580
+ className: cn(
581
+ "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
582
+ index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
583
+ )
584
+ },
585
+ index
586
+ )) }),
587
+ /* @__PURE__ */ jsx(
588
+ "div",
589
+ {
590
+ className: cn(
591
+ "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
592
+ "bg-card text-card-foreground",
593
+ showAutoplayProgress ? "opacity-100" : "opacity-0",
594
+ progressClassName
595
+ ),
596
+ children: /* @__PURE__ */ jsx(
597
+ "div",
598
+ {
599
+ className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
600
+ ref: progressNode,
601
+ style: {
602
+ animation: "autoplay-progress linear 1",
603
+ animationPlayState: showAutoplayProgress ? "running" : "paused"
604
+ }
605
+ }
606
+ )
569
607
  }
570
- ) }),
571
- slide.content && /* @__PURE__ */ jsx("div", { className: "mt-4", children: slide.content })
572
- ]
573
- },
574
- index
575
- )) }) }),
576
- /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mt-7 flex max-w-80 items-center justify-between gap-3", controlsClassName), children: [
577
- /* @__PURE__ */ jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsx(
578
- "button",
579
- {
580
- type: "button",
581
- onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
582
- className: cn(
583
- "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
584
- index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
585
- )
586
- },
587
- index
588
- )) }),
589
- /* @__PURE__ */ jsx(
590
- "div",
591
- {
592
- className: cn(
593
- "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
594
- getNestedCardBg(background),
595
- showAutoplayProgress ? "opacity-100" : "opacity-0",
596
- progressClassName
597
608
  ),
598
- children: /* @__PURE__ */ jsx(
599
- "div",
609
+ /* @__PURE__ */ jsx(
610
+ Pressable,
600
611
  {
601
- className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
602
- ref: progressNode,
603
- style: {
604
- animation: "autoplay-progress linear 1",
605
- animationPlayState: showAutoplayProgress ? "running" : "paused"
606
- }
612
+ size: "icon",
613
+ variant: "secondary",
614
+ onClick: toggleAutoplay,
615
+ asButton: true,
616
+ children: autoplayIsPlaying ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play", size: 16 })
607
617
  }
608
618
  )
609
- }
610
- ),
611
- /* @__PURE__ */ jsx(
612
- Pressable,
613
- {
614
- size: "icon",
615
- variant: "secondary",
616
- onClick: toggleAutoplay,
617
- asButton: true,
618
- children: autoplayIsPlaying ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play", size: 16 })
619
- }
620
- )
621
- ] }),
619
+ ]
620
+ }
621
+ ),
622
622
  /* @__PURE__ */ jsx("style", { children: `
623
623
  @keyframes autoplay-progress {
624
624
  from {