@opensite/ui 0.7.5 → 0.7.7
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 +10 -10
- package/dist/carousel-animated-sections.js +10 -10
- package/dist/carousel-fullscreen-scroll-fx.cjs +15 -13
- package/dist/carousel-fullscreen-scroll-fx.js +15 -13
- package/dist/carousel-multi-step-showcase.cjs +182 -105
- package/dist/carousel-multi-step-showcase.js +182 -105
- package/dist/carousel-progress-slider.cjs +38 -16
- package/dist/carousel-progress-slider.d.cts +9 -1
- package/dist/carousel-progress-slider.d.ts +9 -1
- package/dist/carousel-progress-slider.js +38 -16
- package/dist/registry.cjs +245 -144
- package/dist/registry.js +245 -144
- package/dist/utils.cjs +11 -0
- package/dist/utils.d.cts +6 -1
- package/dist/utils.d.ts +6 -1
- package/dist/utils.js +11 -1
- package/package.json +1 -1
|
@@ -955,7 +955,14 @@ function CarouselMultiStepShowcase({
|
|
|
955
955
|
if (actionsSlot) return actionsSlot;
|
|
956
956
|
if (!actions || actions.length === 0) return null;
|
|
957
957
|
return actions.map((action, index) => {
|
|
958
|
-
const {
|
|
958
|
+
const {
|
|
959
|
+
label,
|
|
960
|
+
icon,
|
|
961
|
+
iconAfter,
|
|
962
|
+
children,
|
|
963
|
+
className: actionClassName,
|
|
964
|
+
...pressableProps
|
|
965
|
+
} = action;
|
|
959
966
|
return /* @__PURE__ */ jsx(
|
|
960
967
|
Pressable,
|
|
961
968
|
{
|
|
@@ -965,7 +972,14 @@ function CarouselMultiStepShowcase({
|
|
|
965
972
|
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
966
973
|
icon,
|
|
967
974
|
label,
|
|
968
|
-
iconAfter ?? /* @__PURE__ */ jsx(
|
|
975
|
+
iconAfter ?? /* @__PURE__ */ jsx(
|
|
976
|
+
DynamicIcon,
|
|
977
|
+
{
|
|
978
|
+
name: "lucide/arrow-right",
|
|
979
|
+
size: 16,
|
|
980
|
+
className: "ml-2"
|
|
981
|
+
}
|
|
982
|
+
)
|
|
969
983
|
] })
|
|
970
984
|
},
|
|
971
985
|
index
|
|
@@ -999,124 +1013,187 @@ function CarouselMultiStepShowcase({
|
|
|
999
1013
|
patternOpacity,
|
|
1000
1014
|
children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
|
|
1001
1015
|
/* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
|
|
1002
|
-
heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
1003
|
-
|
|
1016
|
+
heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
1017
|
+
"h2",
|
|
1018
|
+
{
|
|
1019
|
+
className: cn(
|
|
1020
|
+
"text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
|
|
1021
|
+
headingClassName
|
|
1022
|
+
),
|
|
1023
|
+
children: heading
|
|
1024
|
+
}
|
|
1025
|
+
) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
|
|
1026
|
+
subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
|
|
1027
|
+
"p",
|
|
1028
|
+
{
|
|
1029
|
+
className: cn(
|
|
1030
|
+
"mt-4 text-lg text-muted-foreground",
|
|
1031
|
+
subheadingClassName
|
|
1032
|
+
),
|
|
1033
|
+
children: subheading
|
|
1034
|
+
}
|
|
1035
|
+
) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
|
|
1004
1036
|
] }),
|
|
1005
|
-
stepsSlot ? /* @__PURE__ */ jsx("div", { className: stepNavigationClassName, children: stepsSlot }) : /* @__PURE__ */ jsx(
|
|
1006
|
-
"
|
|
1037
|
+
stepsSlot ? /* @__PURE__ */ jsx("div", { className: stepNavigationClassName, children: stepsSlot }) : /* @__PURE__ */ jsx(
|
|
1038
|
+
"div",
|
|
1039
|
+
{
|
|
1040
|
+
className: cn(
|
|
1041
|
+
"mb-8 flex flex-wrap justify-center gap-2",
|
|
1042
|
+
stepNavigationClassName
|
|
1043
|
+
),
|
|
1044
|
+
children: steps?.map((step, index) => /* @__PURE__ */ jsxs(
|
|
1045
|
+
"button",
|
|
1046
|
+
{
|
|
1047
|
+
onClick: () => goToStep(index),
|
|
1048
|
+
className: cn(
|
|
1049
|
+
"flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
|
|
1050
|
+
activeStep === index ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
|
|
1051
|
+
step.className
|
|
1052
|
+
),
|
|
1053
|
+
children: [
|
|
1054
|
+
/* @__PURE__ */ jsx(
|
|
1055
|
+
"span",
|
|
1056
|
+
{
|
|
1057
|
+
className: cn(
|
|
1058
|
+
"flex h-6 w-6 items-center justify-center rounded-full text-xs",
|
|
1059
|
+
activeStep === index ? "bg-primary-foreground text-primary" : "bg-background"
|
|
1060
|
+
),
|
|
1061
|
+
children: step.step
|
|
1062
|
+
}
|
|
1063
|
+
),
|
|
1064
|
+
/* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
|
|
1065
|
+
]
|
|
1066
|
+
},
|
|
1067
|
+
step.id
|
|
1068
|
+
))
|
|
1069
|
+
}
|
|
1070
|
+
),
|
|
1071
|
+
/* @__PURE__ */ jsx(
|
|
1072
|
+
"div",
|
|
1007
1073
|
{
|
|
1008
|
-
onClick: () => goToStep(index),
|
|
1009
1074
|
className: cn(
|
|
1010
|
-
"
|
|
1011
|
-
|
|
1012
|
-
|
|
1075
|
+
"mx-auto mb-12 h-1 max-w-2xl overflow-hidden rounded-full bg-muted",
|
|
1076
|
+
progressClassName
|
|
1077
|
+
),
|
|
1078
|
+
children: /* @__PURE__ */ jsx(
|
|
1079
|
+
motion.div,
|
|
1080
|
+
{
|
|
1081
|
+
className: "h-full bg-primary",
|
|
1082
|
+
initial: { width: 0 },
|
|
1083
|
+
animate: {
|
|
1084
|
+
width: `${(activeStep + 1) / (steps?.length ?? 1) * 100}%`
|
|
1085
|
+
},
|
|
1086
|
+
transition: { duration: 0.3 }
|
|
1087
|
+
}
|
|
1088
|
+
)
|
|
1089
|
+
}
|
|
1090
|
+
),
|
|
1091
|
+
/* @__PURE__ */ jsxs(
|
|
1092
|
+
"div",
|
|
1093
|
+
{
|
|
1094
|
+
className: cn(
|
|
1095
|
+
"grid gap-8 lg:grid-cols-2 lg:gap-12",
|
|
1096
|
+
contentClassName
|
|
1013
1097
|
),
|
|
1014
1098
|
children: [
|
|
1015
1099
|
/* @__PURE__ */ jsx(
|
|
1016
|
-
"
|
|
1100
|
+
"div",
|
|
1017
1101
|
{
|
|
1018
1102
|
className: cn(
|
|
1019
|
-
"
|
|
1020
|
-
|
|
1103
|
+
"relative aspect-video overflow-hidden rounded-xl bg-muted",
|
|
1104
|
+
imageClassName
|
|
1021
1105
|
),
|
|
1022
|
-
children:
|
|
1106
|
+
children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsx(
|
|
1107
|
+
motion.div,
|
|
1108
|
+
{
|
|
1109
|
+
custom: direction,
|
|
1110
|
+
variants: slideVariants,
|
|
1111
|
+
initial: "enter",
|
|
1112
|
+
animate: "center",
|
|
1113
|
+
exit: "exit",
|
|
1114
|
+
transition: { duration: 0.3, ease: "easeInOut" },
|
|
1115
|
+
className: cn(
|
|
1116
|
+
"absolute inset-0",
|
|
1117
|
+
steps?.[activeStep]?.imageClassName
|
|
1118
|
+
),
|
|
1119
|
+
children: /* @__PURE__ */ jsx(
|
|
1120
|
+
Img,
|
|
1121
|
+
{
|
|
1122
|
+
src: steps?.[activeStep]?.image,
|
|
1123
|
+
alt: typeof steps?.[activeStep]?.title === "string" ? steps[activeStep].title : `Step ${activeStep + 1}`,
|
|
1124
|
+
className: "h-full w-full object-cover",
|
|
1125
|
+
optixFlowConfig
|
|
1126
|
+
}
|
|
1127
|
+
)
|
|
1128
|
+
},
|
|
1129
|
+
activeStep
|
|
1130
|
+
) })
|
|
1023
1131
|
}
|
|
1024
1132
|
),
|
|
1025
|
-
/* @__PURE__ */ jsx("
|
|
1026
|
-
|
|
1027
|
-
},
|
|
1028
|
-
step.id
|
|
1029
|
-
)) }),
|
|
1030
|
-
/* @__PURE__ */ jsx("div", { className: cn("mx-auto mb-12 h-1 max-w-2xl overflow-hidden rounded-full bg-muted", progressClassName), children: /* @__PURE__ */ jsx(
|
|
1031
|
-
motion.div,
|
|
1032
|
-
{
|
|
1033
|
-
className: "h-full bg-primary",
|
|
1034
|
-
initial: { width: 0 },
|
|
1035
|
-
animate: {
|
|
1036
|
-
width: `${(activeStep + 1) / (steps?.length ?? 1) * 100}%`
|
|
1037
|
-
},
|
|
1038
|
-
transition: { duration: 0.3 }
|
|
1039
|
-
}
|
|
1040
|
-
) }),
|
|
1041
|
-
/* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
|
|
1042
|
-
/* @__PURE__ */ jsx("div", { className: cn("relative aspect-video overflow-hidden rounded-xl bg-muted", imageClassName), children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsx(
|
|
1043
|
-
motion.div,
|
|
1044
|
-
{
|
|
1045
|
-
custom: direction,
|
|
1046
|
-
variants: slideVariants,
|
|
1047
|
-
initial: "enter",
|
|
1048
|
-
animate: "center",
|
|
1049
|
-
exit: "exit",
|
|
1050
|
-
transition: { duration: 0.3, ease: "easeInOut" },
|
|
1051
|
-
className: cn("absolute inset-0", steps?.[activeStep]?.imageClassName),
|
|
1052
|
-
children: /* @__PURE__ */ jsx(
|
|
1053
|
-
Img,
|
|
1133
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
|
|
1134
|
+
motion.div,
|
|
1054
1135
|
{
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
children: [
|
|
1072
|
-
/* @__PURE__ */ jsxs("div", { className: "mb-4 inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary", children: [
|
|
1073
|
-
/* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle", size: 16 }),
|
|
1074
|
-
"Step ",
|
|
1075
|
-
steps?.[activeStep]?.step,
|
|
1076
|
-
" of ",
|
|
1077
|
-
steps?.length ?? 0
|
|
1078
|
-
] }),
|
|
1079
|
-
steps?.[activeStep]?.title && (typeof steps[activeStep].title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: steps[activeStep].title }) : /* @__PURE__ */ jsx("div", { children: steps[activeStep].title })),
|
|
1080
|
-
steps?.[activeStep]?.description && (typeof steps[activeStep].description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: steps[activeStep].description }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: steps[activeStep].description })),
|
|
1081
|
-
/* @__PURE__ */ jsxs("div", { className: cn("mt-8 flex gap-4", actionsClassName), children: [
|
|
1082
|
-
/* @__PURE__ */ jsxs(
|
|
1083
|
-
Pressable,
|
|
1084
|
-
{
|
|
1085
|
-
onClick: goToPrev,
|
|
1086
|
-
asButton: true,
|
|
1087
|
-
variant: "outline",
|
|
1088
|
-
disabled: activeStep === 0,
|
|
1089
|
-
className: "disabled:opacity-50",
|
|
1090
|
-
children: [
|
|
1091
|
-
/* @__PURE__ */ jsx(
|
|
1092
|
-
DynamicIcon,
|
|
1093
|
-
{
|
|
1094
|
-
name: "lucide/arrow-left",
|
|
1095
|
-
size: 16,
|
|
1096
|
-
className: "mr-2"
|
|
1097
|
-
}
|
|
1098
|
-
),
|
|
1099
|
-
"Previous"
|
|
1100
|
-
]
|
|
1101
|
-
}
|
|
1102
|
-
),
|
|
1103
|
-
activeStep < (steps?.length ?? 0) - 1 ? /* @__PURE__ */ jsxs(Pressable, { onClick: goToNext, asButton: true, children: [
|
|
1104
|
-
"Next",
|
|
1105
|
-
/* @__PURE__ */ jsx(
|
|
1106
|
-
DynamicIcon,
|
|
1136
|
+
initial: { opacity: 0, y: 20 },
|
|
1137
|
+
animate: { opacity: 1, y: 0 },
|
|
1138
|
+
exit: { opacity: 0, y: -20 },
|
|
1139
|
+
transition: { duration: 0.3 },
|
|
1140
|
+
children: [
|
|
1141
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary", children: [
|
|
1142
|
+
/* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle", size: 16 }),
|
|
1143
|
+
"Step ",
|
|
1144
|
+
steps?.[activeStep]?.step,
|
|
1145
|
+
" of ",
|
|
1146
|
+
steps?.length ?? 0
|
|
1147
|
+
] }),
|
|
1148
|
+
steps?.[activeStep]?.title && (typeof steps[activeStep].title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: steps[activeStep].title }) : /* @__PURE__ */ jsx("div", { children: steps[activeStep].title })),
|
|
1149
|
+
steps?.[activeStep]?.description && (typeof steps[activeStep].description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: steps[activeStep].description }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: steps[activeStep].description })),
|
|
1150
|
+
/* @__PURE__ */ jsxs(
|
|
1151
|
+
"div",
|
|
1107
1152
|
{
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1153
|
+
className: cn("mt-8 flex gap-3 flex-wrap", actionsClassName),
|
|
1154
|
+
children: [
|
|
1155
|
+
/* @__PURE__ */ jsxs(
|
|
1156
|
+
Pressable,
|
|
1157
|
+
{
|
|
1158
|
+
onClick: goToPrev,
|
|
1159
|
+
asButton: true,
|
|
1160
|
+
variant: "outline",
|
|
1161
|
+
disabled: activeStep === 0,
|
|
1162
|
+
className: "disabled:opacity-50",
|
|
1163
|
+
children: [
|
|
1164
|
+
/* @__PURE__ */ jsx(
|
|
1165
|
+
DynamicIcon,
|
|
1166
|
+
{
|
|
1167
|
+
name: "lucide/arrow-left",
|
|
1168
|
+
size: 16,
|
|
1169
|
+
className: "mr-2"
|
|
1170
|
+
}
|
|
1171
|
+
),
|
|
1172
|
+
"Previous"
|
|
1173
|
+
]
|
|
1174
|
+
}
|
|
1175
|
+
),
|
|
1176
|
+
activeStep < (steps?.length ?? 0) - 1 ? /* @__PURE__ */ jsxs(Pressable, { onClick: goToNext, asButton: true, children: [
|
|
1177
|
+
"Next",
|
|
1178
|
+
/* @__PURE__ */ jsx(
|
|
1179
|
+
DynamicIcon,
|
|
1180
|
+
{
|
|
1181
|
+
name: "lucide/arrow-right",
|
|
1182
|
+
size: 16,
|
|
1183
|
+
className: "ml-2"
|
|
1184
|
+
}
|
|
1185
|
+
)
|
|
1186
|
+
] }) : (actionsSlot || actions && actions.length > 0) && renderActions()
|
|
1187
|
+
]
|
|
1111
1188
|
}
|
|
1112
1189
|
)
|
|
1113
|
-
]
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1190
|
+
]
|
|
1191
|
+
},
|
|
1192
|
+
activeStep
|
|
1193
|
+
) }) })
|
|
1194
|
+
]
|
|
1195
|
+
}
|
|
1196
|
+
)
|
|
1120
1197
|
] })
|
|
1121
1198
|
}
|
|
1122
1199
|
);
|
|
@@ -471,6 +471,8 @@ function SliderWrapper({ children, value, className }) {
|
|
|
471
471
|
) });
|
|
472
472
|
}
|
|
473
473
|
function CarouselProgressSlider({
|
|
474
|
+
heading,
|
|
475
|
+
subheading,
|
|
474
476
|
slides,
|
|
475
477
|
slidesSlot,
|
|
476
478
|
duration = 5e3,
|
|
@@ -484,8 +486,8 @@ function CarouselProgressSlider({
|
|
|
484
486
|
buttonClassName,
|
|
485
487
|
progressBarClassName,
|
|
486
488
|
optixFlowConfig,
|
|
487
|
-
background
|
|
488
|
-
spacing
|
|
489
|
+
background,
|
|
490
|
+
spacing,
|
|
489
491
|
pattern,
|
|
490
492
|
patternOpacity
|
|
491
493
|
}) {
|
|
@@ -551,12 +553,14 @@ function CarouselProgressSlider({
|
|
|
551
553
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
552
554
|
Section,
|
|
553
555
|
{
|
|
556
|
+
title: heading,
|
|
557
|
+
subtitle: subheading,
|
|
554
558
|
background,
|
|
555
559
|
spacing,
|
|
556
560
|
className: cn(className),
|
|
557
561
|
pattern,
|
|
558
562
|
patternOpacity,
|
|
559
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("
|
|
563
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
|
|
560
564
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative min-h-[300px]", imageClassName), children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
561
565
|
SliderWrapper,
|
|
562
566
|
{
|
|
@@ -567,26 +571,44 @@ function CarouselProgressSlider({
|
|
|
567
571
|
{
|
|
568
572
|
src: slide.image,
|
|
569
573
|
alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
|
|
570
|
-
className: cn(
|
|
574
|
+
className: cn(
|
|
575
|
+
"h-full w-full object-cover",
|
|
576
|
+
slide.imageClassName
|
|
577
|
+
),
|
|
571
578
|
optixFlowConfig
|
|
572
579
|
}
|
|
573
580
|
) })
|
|
574
581
|
},
|
|
575
582
|
slide.id
|
|
576
583
|
)) }),
|
|
577
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
578
|
-
|
|
584
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
585
|
+
"div",
|
|
579
586
|
{
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
587
|
+
className: cn(
|
|
588
|
+
"flex flex-col justify-center gap-4",
|
|
589
|
+
navigationClassName
|
|
590
|
+
),
|
|
591
|
+
children: slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
592
|
+
SliderBtn,
|
|
593
|
+
{
|
|
594
|
+
value: slide.id,
|
|
595
|
+
className: cn(
|
|
596
|
+
"rounded-lg border p-4 text-left transition-colors hover:bg-muted",
|
|
597
|
+
buttonClassName
|
|
598
|
+
),
|
|
599
|
+
progressBarClass: cn(
|
|
600
|
+
"bottom-0 h-1 bg-primary",
|
|
601
|
+
progressBarClassName
|
|
602
|
+
),
|
|
603
|
+
children: [
|
|
604
|
+
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 })),
|
|
605
|
+
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 }))
|
|
606
|
+
]
|
|
607
|
+
},
|
|
608
|
+
slide.id
|
|
609
|
+
))
|
|
610
|
+
}
|
|
611
|
+
)
|
|
590
612
|
] }) })
|
|
591
613
|
}
|
|
592
614
|
)
|
|
@@ -48,6 +48,14 @@ interface ProgressSlide {
|
|
|
48
48
|
imageClassName?: string;
|
|
49
49
|
}
|
|
50
50
|
interface CarouselProgressSliderProps {
|
|
51
|
+
/**
|
|
52
|
+
* Section title (renders as h2)
|
|
53
|
+
*/
|
|
54
|
+
heading?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Section subtitle/eyebrow (renders above title)
|
|
57
|
+
*/
|
|
58
|
+
subheading?: string;
|
|
51
59
|
/**
|
|
52
60
|
* Array of slides
|
|
53
61
|
*/
|
|
@@ -117,6 +125,6 @@ interface CarouselProgressSliderProps {
|
|
|
117
125
|
*/
|
|
118
126
|
patternOpacity?: number;
|
|
119
127
|
}
|
|
120
|
-
declare function CarouselProgressSlider({ slides, slidesSlot, duration, fastDuration, vertical, className, containerClassName, contentClassName, imageClassName, navigationClassName, buttonClassName, progressBarClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselProgressSliderProps): React.JSX.Element;
|
|
128
|
+
declare function CarouselProgressSlider({ heading, subheading, slides, slidesSlot, duration, fastDuration, vertical, className, containerClassName, contentClassName, imageClassName, navigationClassName, buttonClassName, progressBarClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselProgressSliderProps): React.JSX.Element;
|
|
121
129
|
|
|
122
130
|
export { CarouselProgressSlider, type CarouselProgressSliderProps };
|
|
@@ -48,6 +48,14 @@ interface ProgressSlide {
|
|
|
48
48
|
imageClassName?: string;
|
|
49
49
|
}
|
|
50
50
|
interface CarouselProgressSliderProps {
|
|
51
|
+
/**
|
|
52
|
+
* Section title (renders as h2)
|
|
53
|
+
*/
|
|
54
|
+
heading?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Section subtitle/eyebrow (renders above title)
|
|
57
|
+
*/
|
|
58
|
+
subheading?: string;
|
|
51
59
|
/**
|
|
52
60
|
* Array of slides
|
|
53
61
|
*/
|
|
@@ -117,6 +125,6 @@ interface CarouselProgressSliderProps {
|
|
|
117
125
|
*/
|
|
118
126
|
patternOpacity?: number;
|
|
119
127
|
}
|
|
120
|
-
declare function CarouselProgressSlider({ slides, slidesSlot, duration, fastDuration, vertical, className, containerClassName, contentClassName, imageClassName, navigationClassName, buttonClassName, progressBarClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselProgressSliderProps): React.JSX.Element;
|
|
128
|
+
declare function CarouselProgressSlider({ heading, subheading, slides, slidesSlot, duration, fastDuration, vertical, className, containerClassName, contentClassName, imageClassName, navigationClassName, buttonClassName, progressBarClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselProgressSliderProps): React.JSX.Element;
|
|
121
129
|
|
|
122
130
|
export { CarouselProgressSlider, type CarouselProgressSliderProps };
|
|
@@ -450,6 +450,8 @@ function SliderWrapper({ children, value, className }) {
|
|
|
450
450
|
) });
|
|
451
451
|
}
|
|
452
452
|
function CarouselProgressSlider({
|
|
453
|
+
heading,
|
|
454
|
+
subheading,
|
|
453
455
|
slides,
|
|
454
456
|
slidesSlot,
|
|
455
457
|
duration = 5e3,
|
|
@@ -463,8 +465,8 @@ function CarouselProgressSlider({
|
|
|
463
465
|
buttonClassName,
|
|
464
466
|
progressBarClassName,
|
|
465
467
|
optixFlowConfig,
|
|
466
|
-
background
|
|
467
|
-
spacing
|
|
468
|
+
background,
|
|
469
|
+
spacing,
|
|
468
470
|
pattern,
|
|
469
471
|
patternOpacity
|
|
470
472
|
}) {
|
|
@@ -530,12 +532,14 @@ function CarouselProgressSlider({
|
|
|
530
532
|
children: /* @__PURE__ */ jsx(
|
|
531
533
|
Section,
|
|
532
534
|
{
|
|
535
|
+
title: heading,
|
|
536
|
+
subtitle: subheading,
|
|
533
537
|
background,
|
|
534
538
|
spacing,
|
|
535
539
|
className: cn(className),
|
|
536
540
|
pattern,
|
|
537
541
|
patternOpacity,
|
|
538
|
-
children: /* @__PURE__ */ jsx("div", { className: cn("
|
|
542
|
+
children: /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
|
|
539
543
|
/* @__PURE__ */ jsx("div", { className: cn("relative min-h-[300px]", imageClassName), children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
|
|
540
544
|
SliderWrapper,
|
|
541
545
|
{
|
|
@@ -546,26 +550,44 @@ function CarouselProgressSlider({
|
|
|
546
550
|
{
|
|
547
551
|
src: slide.image,
|
|
548
552
|
alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
|
|
549
|
-
className: cn(
|
|
553
|
+
className: cn(
|
|
554
|
+
"h-full w-full object-cover",
|
|
555
|
+
slide.imageClassName
|
|
556
|
+
),
|
|
550
557
|
optixFlowConfig
|
|
551
558
|
}
|
|
552
559
|
) })
|
|
553
560
|
},
|
|
554
561
|
slide.id
|
|
555
562
|
)) }),
|
|
556
|
-
/* @__PURE__ */ jsx(
|
|
557
|
-
|
|
563
|
+
/* @__PURE__ */ jsx(
|
|
564
|
+
"div",
|
|
558
565
|
{
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
566
|
+
className: cn(
|
|
567
|
+
"flex flex-col justify-center gap-4",
|
|
568
|
+
navigationClassName
|
|
569
|
+
),
|
|
570
|
+
children: slides?.map((slide) => /* @__PURE__ */ jsxs(
|
|
571
|
+
SliderBtn,
|
|
572
|
+
{
|
|
573
|
+
value: slide.id,
|
|
574
|
+
className: cn(
|
|
575
|
+
"rounded-lg border p-4 text-left transition-colors hover:bg-muted",
|
|
576
|
+
buttonClassName
|
|
577
|
+
),
|
|
578
|
+
progressBarClass: cn(
|
|
579
|
+
"bottom-0 h-1 bg-primary",
|
|
580
|
+
progressBarClassName
|
|
581
|
+
),
|
|
582
|
+
children: [
|
|
583
|
+
slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : /* @__PURE__ */ jsx("div", { children: slide.title })),
|
|
584
|
+
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 }))
|
|
585
|
+
]
|
|
586
|
+
},
|
|
587
|
+
slide.id
|
|
588
|
+
))
|
|
589
|
+
}
|
|
590
|
+
)
|
|
569
591
|
] }) })
|
|
570
592
|
}
|
|
571
593
|
)
|