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