@opensite/ui 3.1.6 → 3.1.8

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 (15) hide show
  1. package/dist/carousel-fullscreen-scroll-fx.cjs +4 -3
  2. package/dist/carousel-fullscreen-scroll-fx.js +4 -3
  3. package/dist/carousel-gallery-thumbnails.cjs +1 -1
  4. package/dist/carousel-gallery-thumbnails.js +1 -1
  5. package/dist/carousel-image-hero.cjs +88 -79
  6. package/dist/carousel-image-hero.js +88 -79
  7. package/dist/carousel-product-feature-showcase.cjs +7 -9
  8. package/dist/carousel-product-feature-showcase.js +7 -9
  9. package/dist/carousel-progress-slider.cjs +75 -65
  10. package/dist/carousel-progress-slider.js +75 -65
  11. package/dist/carousel-scrolling-feature-showcase.cjs +8 -2
  12. package/dist/carousel-scrolling-feature-showcase.js +8 -2
  13. package/dist/registry.cjs +183 -159
  14. package/dist/registry.js +183 -159
  15. package/package.json +2 -3
package/dist/carousel-progress-slider.cjs CHANGED
@@ -494,7 +494,7 @@ function CarouselProgressSlider({
494
494
  fastDuration = 400,
495
495
  vertical = false,
496
496
  className,
497
- containerClassName,
497
+ containerClassName = "px-4 md:px-10 lg:px-16",
498
498
  contentClassName,
499
499
  imageClassName,
500
500
  navigationClassName,
@@ -588,76 +588,86 @@ function CarouselProgressSlider({
588
588
  className: cn(className),
589
589
  pattern,
590
590
  patternOpacity,
591
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-4 lg:gap-8 lg:grid-cols-2", contentClassName), children: [
592
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-video", children: [
593
- slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
594
- SliderWrapper,
595
- {
596
- value: slide.id,
597
- className: cn("absolute inset-0", slide.className),
598
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
599
- img.Img,
591
+ containerClassName,
592
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
593
+ "div",
594
+ {
595
+ className: cn(
596
+ "grid gap-4 lg:gap-8 lg:grid-cols-2",
597
+ contentClassName
598
+ ),
599
+ children: [
600
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-video", children: [
601
+ slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
602
+ SliderWrapper,
600
603
  {
601
- src: slide.image,
602
- alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
603
- className: cn(
604
- "h-full w-full object-cover",
605
- slide.imageClassName
606
- ),
607
- optixFlowConfig
608
- }
609
- ) })
610
- },
611
- slide.id
612
- )),
613
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
614
- pressable.Pressable,
615
- {
616
- onClick: togglePause,
617
- asButton: true,
618
- variant: "outline",
619
- size: "icon",
620
- className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted/80 backdrop-blur-sm",
621
- "aria-label": isPaused ? "Play" : "Pause",
622
- children: /* @__PURE__ */ jsxRuntime.jsx(
623
- DynamicIcon,
604
+ value: slide.id,
605
+ className: cn("absolute inset-0", slide.className),
606
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
607
+ img.Img,
608
+ {
609
+ src: slide.image,
610
+ alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
611
+ className: cn(
612
+ "h-full w-full object-cover",
613
+ slide.imageClassName
614
+ ),
615
+ optixFlowConfig
616
+ }
617
+ ) })
618
+ },
619
+ slide.id
620
+ )),
621
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
622
+ pressable.Pressable,
624
623
  {
625
- name: isPaused ? "lucide/play" : "lucide/pause",
626
- size: 18
624
+ onClick: togglePause,
625
+ asButton: true,
626
+ variant: "outline",
627
+ size: "icon",
628
+ className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted/80 backdrop-blur-sm",
629
+ "aria-label": isPaused ? "Play" : "Pause",
630
+ children: /* @__PURE__ */ jsxRuntime.jsx(
631
+ DynamicIcon,
632
+ {
633
+ name: isPaused ? "lucide/play" : "lucide/pause",
634
+ size: 18
635
+ }
636
+ )
627
637
  }
628
- )
629
- }
630
- ) })
631
- ] }) }),
632
- /* @__PURE__ */ jsxRuntime.jsx(
633
- "div",
634
- {
635
- className: cn(
636
- "flex flex-col justify-center gap-4",
637
- navigationClassName
638
- ),
639
- children: slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsxs(
640
- SliderBtn,
638
+ ) })
639
+ ] }) }),
640
+ /* @__PURE__ */ jsxRuntime.jsx(
641
+ "div",
641
642
  {
642
- value: slide.id,
643
643
  className: cn(
644
- "rounded-lg border p-4 text-left transition-colors hover:bg-muted",
645
- buttonClassName
646
- ),
647
- progressBarClass: cn(
648
- "bottom-0 h-1 bg-primary",
649
- progressBarClassName
644
+ "flex flex-col justify-center gap-4",
645
+ navigationClassName
650
646
  ),
651
- children: [
652
- slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: slide.title })),
653
- slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: slide.description }))
654
- ]
655
- },
656
- slide.id
657
- ))
658
- }
659
- )
660
- ] }) })
647
+ children: slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsxs(
648
+ SliderBtn,
649
+ {
650
+ value: slide.id,
651
+ className: cn(
652
+ "rounded-lg border p-4 text-left transition-colors hover:bg-muted",
653
+ buttonClassName
654
+ ),
655
+ progressBarClass: cn(
656
+ "bottom-0 h-1 bg-primary",
657
+ progressBarClassName
658
+ ),
659
+ children: [
660
+ slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : slide.title),
661
+ slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-balance", children: slide.description }) : slide.description)
662
+ ]
663
+ },
664
+ slide.id
665
+ ))
666
+ }
667
+ )
668
+ ]
669
+ }
670
+ ) })
661
671
  }
662
672
  )
663
673
  }
package/dist/carousel-progress-slider.js CHANGED
@@ -473,7 +473,7 @@ function CarouselProgressSlider({
473
473
  fastDuration = 400,
474
474
  vertical = false,
475
475
  className,
476
- containerClassName,
476
+ containerClassName = "px-4 md:px-10 lg:px-16",
477
477
  contentClassName,
478
478
  imageClassName,
479
479
  navigationClassName,
@@ -567,76 +567,86 @@ function CarouselProgressSlider({
567
567
  className: cn(className),
568
568
  pattern,
569
569
  patternOpacity,
570
- children: /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-4 lg:gap-8 lg:grid-cols-2", contentClassName), children: [
571
- /* @__PURE__ */ jsx("div", { className: cn("relative", imageClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-video", children: [
572
- slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
573
- SliderWrapper,
574
- {
575
- value: slide.id,
576
- className: cn("absolute inset-0", slide.className),
577
- children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
578
- Img,
570
+ containerClassName,
571
+ children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
572
+ "div",
573
+ {
574
+ className: cn(
575
+ "grid gap-4 lg:gap-8 lg:grid-cols-2",
576
+ contentClassName
577
+ ),
578
+ children: [
579
+ /* @__PURE__ */ jsx("div", { className: cn("relative", imageClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-video", children: [
580
+ slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
581
+ SliderWrapper,
579
582
  {
580
- src: slide.image,
581
- alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
582
- className: cn(
583
- "h-full w-full object-cover",
584
- slide.imageClassName
585
- ),
586
- optixFlowConfig
587
- }
588
- ) })
589
- },
590
- slide.id
591
- )),
592
- /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsx(
593
- Pressable,
594
- {
595
- onClick: togglePause,
596
- asButton: true,
597
- variant: "outline",
598
- size: "icon",
599
- className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted/80 backdrop-blur-sm",
600
- "aria-label": isPaused ? "Play" : "Pause",
601
- children: /* @__PURE__ */ jsx(
602
- DynamicIcon,
583
+ value: slide.id,
584
+ className: cn("absolute inset-0", slide.className),
585
+ children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
586
+ Img,
587
+ {
588
+ src: slide.image,
589
+ alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
590
+ className: cn(
591
+ "h-full w-full object-cover",
592
+ slide.imageClassName
593
+ ),
594
+ optixFlowConfig
595
+ }
596
+ ) })
597
+ },
598
+ slide.id
599
+ )),
600
+ /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsx(
601
+ Pressable,
603
602
  {
604
- name: isPaused ? "lucide/play" : "lucide/pause",
605
- size: 18
603
+ onClick: togglePause,
604
+ asButton: true,
605
+ variant: "outline",
606
+ size: "icon",
607
+ className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted/80 backdrop-blur-sm",
608
+ "aria-label": isPaused ? "Play" : "Pause",
609
+ children: /* @__PURE__ */ jsx(
610
+ DynamicIcon,
611
+ {
612
+ name: isPaused ? "lucide/play" : "lucide/pause",
613
+ size: 18
614
+ }
615
+ )
606
616
  }
607
- )
608
- }
609
- ) })
610
- ] }) }),
611
- /* @__PURE__ */ jsx(
612
- "div",
613
- {
614
- className: cn(
615
- "flex flex-col justify-center gap-4",
616
- navigationClassName
617
- ),
618
- children: slides?.map((slide) => /* @__PURE__ */ jsxs(
619
- SliderBtn,
617
+ ) })
618
+ ] }) }),
619
+ /* @__PURE__ */ jsx(
620
+ "div",
620
621
  {
621
- value: slide.id,
622
622
  className: cn(
623
- "rounded-lg border p-4 text-left transition-colors hover:bg-muted",
624
- buttonClassName
625
- ),
626
- progressBarClass: cn(
627
- "bottom-0 h-1 bg-primary",
628
- progressBarClassName
623
+ "flex flex-col justify-center gap-4",
624
+ navigationClassName
629
625
  ),
630
- children: [
631
- slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : /* @__PURE__ */ jsx("div", { children: slide.title })),
632
- slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: slide.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: slide.description }))
633
- ]
634
- },
635
- slide.id
636
- ))
637
- }
638
- )
639
- ] }) })
626
+ children: slides?.map((slide) => /* @__PURE__ */ jsxs(
627
+ SliderBtn,
628
+ {
629
+ value: slide.id,
630
+ className: cn(
631
+ "rounded-lg border p-4 text-left transition-colors hover:bg-muted",
632
+ buttonClassName
633
+ ),
634
+ progressBarClass: cn(
635
+ "bottom-0 h-1 bg-primary",
636
+ progressBarClassName
637
+ ),
638
+ children: [
639
+ slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : slide.title),
640
+ slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-balance", children: slide.description }) : slide.description)
641
+ ]
642
+ },
643
+ slide.id
644
+ ))
645
+ }
646
+ )
647
+ ]
648
+ }
649
+ ) })
640
650
  }
641
651
  )
642
652
  }
package/dist/carousel-scrolling-feature-showcase.cjs CHANGED
@@ -483,13 +483,19 @@ function CarouselScrollingFeatureShowcase({
483
483
  "h2",
484
484
  {
485
485
  className: cn(
486
- "text-3xl font-bold tracking-tight md:text-4xl",
486
+ "text-3xl font-bold tracking-tight md:text-4xl text-pretty",
487
487
  headingClassName
488
488
  ),
489
489
  children: heading
490
490
  }
491
491
  ) : heading),
492
- subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", subheadingClassName), children: subheading }) : subheading)
492
+ subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
493
+ "p",
494
+ {
495
+ className: cn("mt-4 text-lg text-balance", subheadingClassName),
496
+ children: subheading
497
+ }
498
+ ) : subheading)
493
499
  ] }),
494
500
  /* @__PURE__ */ jsxRuntime.jsxs(
495
501
  "div",
package/dist/carousel-scrolling-feature-showcase.js CHANGED
@@ -462,13 +462,19 @@ function CarouselScrollingFeatureShowcase({
462
462
  "h2",
463
463
  {
464
464
  className: cn(
465
- "text-3xl font-bold tracking-tight md:text-4xl",
465
+ "text-3xl font-bold tracking-tight md:text-4xl text-pretty",
466
466
  headingClassName
467
467
  ),
468
468
  children: heading
469
469
  }
470
470
  ) : heading),
471
- subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", subheadingClassName), children: subheading }) : subheading)
471
+ subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
472
+ "p",
473
+ {
474
+ className: cn("mt-4 text-lg text-balance", subheadingClassName),
475
+ children: subheading
476
+ }
477
+ ) : subheading)
472
478
  ] }),
473
479
  /* @__PURE__ */ jsxs(
474
480
  "div",