@opensite/ui 0.7.2 → 0.7.4

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.
@@ -410,6 +410,7 @@ function CarouselFullscreenScrollFx({
410
410
  slides,
411
411
  slidesSlot,
412
412
  className,
413
+ containerClassName = "h-full flex flex-col justify-center",
413
414
  navigationClassName,
414
415
  contentClassName,
415
416
  subtitleClassName,
@@ -418,10 +419,11 @@ function CarouselFullscreenScrollFx({
418
419
  scrollIndicatorClassName,
419
420
  counterClassName,
420
421
  optixFlowConfig,
421
- background = "white",
422
- spacing = "xl",
423
- pattern,
424
- patternOpacity
422
+ background = "dark",
423
+ spacing = "py-0",
424
+ containerMaxWidth = "full",
425
+ pattern = "diagonalCrossBasic",
426
+ patternOpacity = 0.033
425
427
  }) {
426
428
  const containerRef = React3__namespace.useRef(null);
427
429
  const [activeIndex, setActiveIndex] = React3__namespace.useState(0);
@@ -457,27 +459,41 @@ function CarouselFullscreenScrollFx({
457
459
  className: cn(className),
458
460
  pattern,
459
461
  patternOpacity,
462
+ containerMaxWidth,
463
+ containerClassName,
460
464
  children: [
461
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("fixed right-6 top-1/2 z-50 hidden -translate-y-1/2 flex-col gap-3 lg:flex", navigationClassName), children: slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
462
- "button",
465
+ /* @__PURE__ */ jsxRuntime.jsx(
466
+ "div",
463
467
  {
464
- onClick: () => {
465
- const element = document.getElementById(`fullscreen-${slide.id}`);
466
- element?.scrollIntoView({ behavior: "smooth" });
467
- },
468
468
  className: cn(
469
- "h-3 w-3 rounded-full border-2 transition-all",
470
- activeIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
469
+ "fixed right-6 top-1/2 z-50 hidden -translate-y-1/2 flex-col gap-3 lg:flex",
470
+ navigationClassName
471
471
  ),
472
- "aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
473
- },
474
- slide.id
475
- )) }),
472
+ children: slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
473
+ "button",
474
+ {
475
+ onClick: () => {
476
+ const element = document.getElementById(`fullscreen-${slide.id}`);
477
+ element?.scrollIntoView({ behavior: "smooth" });
478
+ },
479
+ className: cn(
480
+ "h-3 w-3 rounded-full border-2 transition-all",
481
+ activeIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
482
+ ),
483
+ "aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
484
+ },
485
+ slide.id
486
+ ))
487
+ }
488
+ ),
476
489
  slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs(
477
490
  "div",
478
491
  {
479
492
  id: `fullscreen-${slide.id}`,
480
- className: cn("relative flex h-screen w-full items-center justify-center overflow-hidden", slide.className),
493
+ className: cn(
494
+ "relative flex h-screen w-full items-center justify-center overflow-hidden",
495
+ slide.className
496
+ ),
481
497
  children: [
482
498
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
483
499
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -485,7 +501,10 @@ function CarouselFullscreenScrollFx({
485
501
  {
486
502
  src: slide.image,
487
503
  alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
488
- className: cn("h-full w-full object-cover", slide.imageClassName),
504
+ className: cn(
505
+ "h-full w-full object-cover",
506
+ slide.imageClassName
507
+ ),
489
508
  optixFlowConfig
490
509
  }
491
510
  ),
@@ -499,21 +518,75 @@ function CarouselFullscreenScrollFx({
499
518
  }
500
519
  )
501
520
  ] }),
502
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 mx-auto max-w-4xl px-6 text-center text-white", contentClassName), children: [
503
- slide.subtitle && (typeof slide.subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-sm font-medium uppercase tracking-widest text-white/70", subtitleClassName), children: slide.subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: slide.subtitle })),
504
- slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", titleClassName), children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: slide.title })),
505
- slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-lg text-white/80 md:text-xl", descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: slide.description })),
506
- index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-8 left-1/2 -translate-x-1/2", scrollIndicatorClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
507
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
508
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px animate-pulse bg-gradient-to-b from-white/50 to-transparent" })
509
- ] }) })
510
- ] }),
511
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute bottom-8 right-8 text-sm text-white/50", counterClassName), children: [
512
- String(index + 1).padStart(2, "0"),
513
- " /",
514
- " ",
515
- String(slides?.length ?? 0).padStart(2, "0")
516
- ] })
521
+ /* @__PURE__ */ jsxRuntime.jsxs(
522
+ "div",
523
+ {
524
+ className: cn(
525
+ "relative z-10 mx-auto max-w-4xl md:max-w-2xl px-6 text-center text-white text-shadow",
526
+ contentClassName
527
+ ),
528
+ children: [
529
+ slide.subtitle && (typeof slide.subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
530
+ "p",
531
+ {
532
+ className: cn(
533
+ "mb-4 text-sm font-medium uppercase tracking-widest text-white/70",
534
+ subtitleClassName
535
+ ),
536
+ children: slide.subtitle
537
+ }
538
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: slide.subtitle })),
539
+ slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
540
+ "h2",
541
+ {
542
+ className: cn(
543
+ "mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
544
+ titleClassName
545
+ ),
546
+ children: slide.title
547
+ }
548
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: slide.title })),
549
+ slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
550
+ "p",
551
+ {
552
+ className: cn(
553
+ "mx-auto text-lg text-white/80 md:text-xl text-balance",
554
+ descriptionClassName
555
+ ),
556
+ children: slide.description
557
+ }
558
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: slide.description }))
559
+ ]
560
+ }
561
+ ),
562
+ index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsxRuntime.jsx(
563
+ "div",
564
+ {
565
+ className: cn(
566
+ "absolute bottom-8 left-1/2 -translate-x-1/2",
567
+ scrollIndicatorClassName
568
+ ),
569
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
570
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
571
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
572
+ ] })
573
+ }
574
+ ),
575
+ /* @__PURE__ */ jsxRuntime.jsxs(
576
+ "div",
577
+ {
578
+ className: cn(
579
+ "absolute bottom-8 right-8 text-sm text-white/50",
580
+ counterClassName
581
+ ),
582
+ children: [
583
+ String(index + 1).padStart(2, "0"),
584
+ " /",
585
+ " ",
586
+ String(slides?.length ?? 0).padStart(2, "0")
587
+ ]
588
+ }
589
+ )
517
590
  ]
518
591
  },
519
592
  slide.id
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
3
- import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
3
+ import { f as SectionBackground, g as SectionSpacing, e as ContainerMaxWidth } from './community-initiatives-Sm_ZSgyv.cjs';
4
4
  import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
5
5
  import 'react/jsx-runtime';
6
6
  import 'class-variance-authority';
@@ -68,6 +68,10 @@ interface CarouselFullscreenScrollFxProps {
68
68
  * Additional CSS classes for the section
69
69
  */
70
70
  className?: string;
71
+ /**
72
+ * Additional CSS classes for the container
73
+ */
74
+ containerClassName?: string;
71
75
  /**
72
76
  * Additional CSS classes for the navigation dots
73
77
  */
@@ -116,7 +120,11 @@ interface CarouselFullscreenScrollFxProps {
116
120
  * Pattern overlay opacity (0-1)
117
121
  */
118
122
  patternOpacity?: number;
123
+ /**
124
+ * Optional max width for the content container
125
+ */
126
+ containerMaxWidth?: ContainerMaxWidth;
119
127
  }
120
- declare function CarouselFullscreenScrollFx({ slides, slidesSlot, className, navigationClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, scrollIndicatorClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselFullscreenScrollFxProps): React.JSX.Element;
128
+ declare function CarouselFullscreenScrollFx({ slides, slidesSlot, className, containerClassName, navigationClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, scrollIndicatorClassName, counterClassName, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselFullscreenScrollFxProps): React.JSX.Element;
121
129
 
122
130
  export { CarouselFullscreenScrollFx, type CarouselFullscreenScrollFxProps, type FullscreenSlide };
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { P as PatternName } from './pattern-background-a7gKHzHy.js';
3
- import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
3
+ import { f as SectionBackground, g as SectionSpacing, e as ContainerMaxWidth } from './community-initiatives-BeWIIjA4.js';
4
4
  import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
5
5
  import 'react/jsx-runtime';
6
6
  import 'class-variance-authority';
@@ -68,6 +68,10 @@ interface CarouselFullscreenScrollFxProps {
68
68
  * Additional CSS classes for the section
69
69
  */
70
70
  className?: string;
71
+ /**
72
+ * Additional CSS classes for the container
73
+ */
74
+ containerClassName?: string;
71
75
  /**
72
76
  * Additional CSS classes for the navigation dots
73
77
  */
@@ -116,7 +120,11 @@ interface CarouselFullscreenScrollFxProps {
116
120
  * Pattern overlay opacity (0-1)
117
121
  */
118
122
  patternOpacity?: number;
123
+ /**
124
+ * Optional max width for the content container
125
+ */
126
+ containerMaxWidth?: ContainerMaxWidth;
119
127
  }
120
- declare function CarouselFullscreenScrollFx({ slides, slidesSlot, className, navigationClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, scrollIndicatorClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselFullscreenScrollFxProps): React.JSX.Element;
128
+ declare function CarouselFullscreenScrollFx({ slides, slidesSlot, className, containerClassName, navigationClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, scrollIndicatorClassName, counterClassName, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselFullscreenScrollFxProps): React.JSX.Element;
121
129
 
122
130
  export { CarouselFullscreenScrollFx, type CarouselFullscreenScrollFxProps, type FullscreenSlide };
@@ -389,6 +389,7 @@ function CarouselFullscreenScrollFx({
389
389
  slides,
390
390
  slidesSlot,
391
391
  className,
392
+ containerClassName = "h-full flex flex-col justify-center",
392
393
  navigationClassName,
393
394
  contentClassName,
394
395
  subtitleClassName,
@@ -397,10 +398,11 @@ function CarouselFullscreenScrollFx({
397
398
  scrollIndicatorClassName,
398
399
  counterClassName,
399
400
  optixFlowConfig,
400
- background = "white",
401
- spacing = "xl",
402
- pattern,
403
- patternOpacity
401
+ background = "dark",
402
+ spacing = "py-0",
403
+ containerMaxWidth = "full",
404
+ pattern = "diagonalCrossBasic",
405
+ patternOpacity = 0.033
404
406
  }) {
405
407
  const containerRef = React3.useRef(null);
406
408
  const [activeIndex, setActiveIndex] = React3.useState(0);
@@ -436,27 +438,41 @@ function CarouselFullscreenScrollFx({
436
438
  className: cn(className),
437
439
  pattern,
438
440
  patternOpacity,
441
+ containerMaxWidth,
442
+ containerClassName,
439
443
  children: [
440
- /* @__PURE__ */ jsx("div", { className: cn("fixed right-6 top-1/2 z-50 hidden -translate-y-1/2 flex-col gap-3 lg:flex", navigationClassName), children: slides?.map((slide, index) => /* @__PURE__ */ jsx(
441
- "button",
444
+ /* @__PURE__ */ jsx(
445
+ "div",
442
446
  {
443
- onClick: () => {
444
- const element = document.getElementById(`fullscreen-${slide.id}`);
445
- element?.scrollIntoView({ behavior: "smooth" });
446
- },
447
447
  className: cn(
448
- "h-3 w-3 rounded-full border-2 transition-all",
449
- activeIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
448
+ "fixed right-6 top-1/2 z-50 hidden -translate-y-1/2 flex-col gap-3 lg:flex",
449
+ navigationClassName
450
450
  ),
451
- "aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
452
- },
453
- slide.id
454
- )) }),
451
+ children: slides?.map((slide, index) => /* @__PURE__ */ jsx(
452
+ "button",
453
+ {
454
+ onClick: () => {
455
+ const element = document.getElementById(`fullscreen-${slide.id}`);
456
+ element?.scrollIntoView({ behavior: "smooth" });
457
+ },
458
+ className: cn(
459
+ "h-3 w-3 rounded-full border-2 transition-all",
460
+ activeIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
461
+ ),
462
+ "aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
463
+ },
464
+ slide.id
465
+ ))
466
+ }
467
+ ),
455
468
  slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
456
469
  "div",
457
470
  {
458
471
  id: `fullscreen-${slide.id}`,
459
- className: cn("relative flex h-screen w-full items-center justify-center overflow-hidden", slide.className),
472
+ className: cn(
473
+ "relative flex h-screen w-full items-center justify-center overflow-hidden",
474
+ slide.className
475
+ ),
460
476
  children: [
461
477
  /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
462
478
  /* @__PURE__ */ jsx(
@@ -464,7 +480,10 @@ function CarouselFullscreenScrollFx({
464
480
  {
465
481
  src: slide.image,
466
482
  alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
467
- className: cn("h-full w-full object-cover", slide.imageClassName),
483
+ className: cn(
484
+ "h-full w-full object-cover",
485
+ slide.imageClassName
486
+ ),
468
487
  optixFlowConfig
469
488
  }
470
489
  ),
@@ -478,21 +497,75 @@ function CarouselFullscreenScrollFx({
478
497
  }
479
498
  )
480
499
  ] }),
481
- /* @__PURE__ */ jsxs("div", { className: cn("relative z-10 mx-auto max-w-4xl px-6 text-center text-white", contentClassName), children: [
482
- slide.subtitle && (typeof slide.subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm font-medium uppercase tracking-widest text-white/70", subtitleClassName), children: slide.subtitle }) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: slide.subtitle })),
483
- slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", titleClassName), children: slide.title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: slide.title })),
484
- slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-lg text-white/80 md:text-xl", descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: slide.description })),
485
- index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-8 left-1/2 -translate-x-1/2", scrollIndicatorClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
486
- /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
487
- /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-gradient-to-b from-white/50 to-transparent" })
488
- ] }) })
489
- ] }),
490
- /* @__PURE__ */ jsxs("div", { className: cn("absolute bottom-8 right-8 text-sm text-white/50", counterClassName), children: [
491
- String(index + 1).padStart(2, "0"),
492
- " /",
493
- " ",
494
- String(slides?.length ?? 0).padStart(2, "0")
495
- ] })
500
+ /* @__PURE__ */ jsxs(
501
+ "div",
502
+ {
503
+ className: cn(
504
+ "relative z-10 mx-auto max-w-4xl md:max-w-2xl px-6 text-center text-white text-shadow",
505
+ contentClassName
506
+ ),
507
+ children: [
508
+ slide.subtitle && (typeof slide.subtitle === "string" ? /* @__PURE__ */ jsx(
509
+ "p",
510
+ {
511
+ className: cn(
512
+ "mb-4 text-sm font-medium uppercase tracking-widest text-white/70",
513
+ subtitleClassName
514
+ ),
515
+ children: slide.subtitle
516
+ }
517
+ ) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: slide.subtitle })),
518
+ slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx(
519
+ "h2",
520
+ {
521
+ className: cn(
522
+ "mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
523
+ titleClassName
524
+ ),
525
+ children: slide.title
526
+ }
527
+ ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: slide.title })),
528
+ slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx(
529
+ "p",
530
+ {
531
+ className: cn(
532
+ "mx-auto text-lg text-white/80 md:text-xl text-balance",
533
+ descriptionClassName
534
+ ),
535
+ children: slide.description
536
+ }
537
+ ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: slide.description }))
538
+ ]
539
+ }
540
+ ),
541
+ index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsx(
542
+ "div",
543
+ {
544
+ className: cn(
545
+ "absolute bottom-8 left-1/2 -translate-x-1/2",
546
+ scrollIndicatorClassName
547
+ ),
548
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
549
+ /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
550
+ /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
551
+ ] })
552
+ }
553
+ ),
554
+ /* @__PURE__ */ jsxs(
555
+ "div",
556
+ {
557
+ className: cn(
558
+ "absolute bottom-8 right-8 text-sm text-white/50",
559
+ counterClassName
560
+ ),
561
+ children: [
562
+ String(index + 1).padStart(2, "0"),
563
+ " /",
564
+ " ",
565
+ String(slides?.length ?? 0).padStart(2, "0")
566
+ ]
567
+ }
568
+ )
496
569
  ]
497
570
  },
498
571
  slide.id