@opensite/ui 1.6.2 → 1.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.
- package/dist/feature-category-image-cards.cjs +27 -5
- package/dist/feature-category-image-cards.js +27 -5
- package/dist/feature-utility-cards-grid.cjs +1 -1
- package/dist/feature-utility-cards-grid.js +1 -1
- package/dist/footer-accordion-social.cjs +3 -1
- package/dist/footer-accordion-social.d.cts +5 -1
- package/dist/footer-accordion-social.d.ts +5 -1
- package/dist/footer-accordion-social.js +3 -1
- package/dist/footer-info-cards-accordion.cjs +39 -55
- package/dist/footer-info-cards-accordion.d.cts +5 -1
- package/dist/footer-info-cards-accordion.d.ts +5 -1
- package/dist/footer-info-cards-accordion.js +39 -55
- package/dist/hero-logo-centered-screenshot.cjs +61 -40
- package/dist/hero-logo-centered-screenshot.d.cts +1 -1
- package/dist/hero-logo-centered-screenshot.d.ts +1 -1
- package/dist/hero-logo-centered-screenshot.js +61 -40
- package/dist/hero-overlay-cta-grid.cjs +14 -8
- package/dist/hero-overlay-cta-grid.js +14 -8
- package/dist/hero-pattern-badge-logos.cjs +66 -56
- package/dist/hero-pattern-badge-logos.d.cts +1 -4
- package/dist/hero-pattern-badge-logos.d.ts +1 -4
- package/dist/hero-pattern-badge-logos.js +66 -56
- package/dist/hero-split-icon-cards.cjs +68 -17
- package/dist/hero-split-icon-cards.d.cts +7 -1
- package/dist/hero-split-icon-cards.d.ts +7 -1
- package/dist/hero-split-icon-cards.js +68 -17
- package/dist/registry.cjs +279 -131
- package/dist/registry.js +279 -131
- package/package.json +1 -1
|
@@ -83,6 +83,6 @@ interface HeroLogoCenteredScreenshotProps {
|
|
|
83
83
|
*/
|
|
84
84
|
optixFlowConfig?: OptixFlowConfig;
|
|
85
85
|
}
|
|
86
|
-
declare function HeroLogoCenteredScreenshot({ logo, logoSlot, heading, description, action, actionSlot, image, imageSlot, background, spacing, pattern, patternOpacity, className,
|
|
86
|
+
declare function HeroLogoCenteredScreenshot({ logo, logoSlot, heading, description, action, actionSlot, image, imageSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroLogoCenteredScreenshotProps): React.JSX.Element;
|
|
87
87
|
|
|
88
88
|
export { HeroLogoCenteredScreenshot, type HeroLogoCenteredScreenshotProps };
|
|
@@ -83,6 +83,6 @@ interface HeroLogoCenteredScreenshotProps {
|
|
|
83
83
|
*/
|
|
84
84
|
optixFlowConfig?: OptixFlowConfig;
|
|
85
85
|
}
|
|
86
|
-
declare function HeroLogoCenteredScreenshot({ logo, logoSlot, heading, description, action, actionSlot, image, imageSlot, background, spacing, pattern, patternOpacity, className,
|
|
86
|
+
declare function HeroLogoCenteredScreenshot({ logo, logoSlot, heading, description, action, actionSlot, image, imageSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroLogoCenteredScreenshotProps): React.JSX.Element;
|
|
87
87
|
|
|
88
88
|
export { HeroLogoCenteredScreenshot, type HeroLogoCenteredScreenshotProps };
|
|
@@ -11,32 +11,6 @@ import { Img } from '@page-speed/img';
|
|
|
11
11
|
function cn(...inputs) {
|
|
12
12
|
return twMerge(clsx(inputs));
|
|
13
13
|
}
|
|
14
|
-
function getTextColor(parentBg, variant = "default", options) {
|
|
15
|
-
const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
|
|
16
|
-
if (isDark) {
|
|
17
|
-
switch (variant) {
|
|
18
|
-
case "default":
|
|
19
|
-
return "text-foreground";
|
|
20
|
-
case "muted":
|
|
21
|
-
return "text-foreground/80";
|
|
22
|
-
case "subtle":
|
|
23
|
-
return "text-foreground/60";
|
|
24
|
-
case "accent":
|
|
25
|
-
return "text-accent-foreground";
|
|
26
|
-
}
|
|
27
|
-
} else {
|
|
28
|
-
switch (variant) {
|
|
29
|
-
case "default":
|
|
30
|
-
return "text-foreground";
|
|
31
|
-
case "muted":
|
|
32
|
-
return "text-muted-foreground";
|
|
33
|
-
case "subtle":
|
|
34
|
-
return "text-muted-foreground/70";
|
|
35
|
-
case "accent":
|
|
36
|
-
return "text-primary";
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
14
|
function normalizePhoneNumber(input) {
|
|
41
15
|
const trimmed = input.trim();
|
|
42
16
|
if (trimmed.toLowerCase().startsWith("tel:")) {
|
|
@@ -840,11 +814,11 @@ function HeroLogoCenteredScreenshot({
|
|
|
840
814
|
image,
|
|
841
815
|
imageSlot,
|
|
842
816
|
background,
|
|
843
|
-
|
|
817
|
+
containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
|
|
818
|
+
spacing = "py-6 md:py-32",
|
|
844
819
|
pattern,
|
|
845
820
|
patternOpacity,
|
|
846
821
|
className,
|
|
847
|
-
containerClassName,
|
|
848
822
|
contentClassName,
|
|
849
823
|
headingClassName,
|
|
850
824
|
descriptionClassName,
|
|
@@ -860,7 +834,7 @@ function HeroLogoCenteredScreenshot({
|
|
|
860
834
|
{
|
|
861
835
|
src: logoSrc,
|
|
862
836
|
alt: logo.alt,
|
|
863
|
-
className: cn("h-10 md:h-16", logo.className),
|
|
837
|
+
className: cn("h-10 md:h-16 object-contain", logo.className),
|
|
864
838
|
optixFlowConfig
|
|
865
839
|
}
|
|
866
840
|
);
|
|
@@ -868,7 +842,14 @@ function HeroLogoCenteredScreenshot({
|
|
|
868
842
|
const renderAction = useMemo(() => {
|
|
869
843
|
if (actionSlot) return actionSlot;
|
|
870
844
|
if (!action) return null;
|
|
871
|
-
const {
|
|
845
|
+
const {
|
|
846
|
+
label,
|
|
847
|
+
icon,
|
|
848
|
+
iconAfter,
|
|
849
|
+
children,
|
|
850
|
+
className: actionClassName,
|
|
851
|
+
...pressableProps
|
|
852
|
+
} = action;
|
|
872
853
|
return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
873
854
|
icon,
|
|
874
855
|
label,
|
|
@@ -883,7 +864,11 @@ function HeroLogoCenteredScreenshot({
|
|
|
883
864
|
{
|
|
884
865
|
src: image.src,
|
|
885
866
|
alt: image.alt,
|
|
886
|
-
className: cn(
|
|
867
|
+
className: cn(
|
|
868
|
+
"mt-20 w-full rounded-xl object-cover h-auto shadow-xl",
|
|
869
|
+
imageClassName,
|
|
870
|
+
image.className
|
|
871
|
+
),
|
|
887
872
|
optixFlowConfig
|
|
888
873
|
}
|
|
889
874
|
);
|
|
@@ -896,15 +881,51 @@ function HeroLogoCenteredScreenshot({
|
|
|
896
881
|
pattern,
|
|
897
882
|
patternOpacity,
|
|
898
883
|
className: cn(className),
|
|
899
|
-
children: /* @__PURE__ */ jsx("div", { className: "
|
|
900
|
-
/* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs(
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
884
|
+
children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("container max-w-7xl", containerClassName), children: [
|
|
885
|
+
/* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs(
|
|
886
|
+
"div",
|
|
887
|
+
{
|
|
888
|
+
className: cn(
|
|
889
|
+
"z-10 flex flex-col items-center gap-6 text-center",
|
|
890
|
+
contentClassName
|
|
891
|
+
),
|
|
892
|
+
children: [
|
|
893
|
+
renderLogo,
|
|
894
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center items-center w-full text-balance", children: [
|
|
895
|
+
heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
896
|
+
"h1",
|
|
897
|
+
{
|
|
898
|
+
className: cn(
|
|
899
|
+
"mb-4 text-3xl font-medium lg:text-5xl",
|
|
900
|
+
headingClassName
|
|
901
|
+
),
|
|
902
|
+
children: heading
|
|
903
|
+
}
|
|
904
|
+
) : /* @__PURE__ */ jsx(
|
|
905
|
+
"h1",
|
|
906
|
+
{
|
|
907
|
+
className: cn(
|
|
908
|
+
"mb-4 text-3xl font-medium lg:text-5xl",
|
|
909
|
+
headingClassName
|
|
910
|
+
),
|
|
911
|
+
children: heading
|
|
912
|
+
}
|
|
913
|
+
)),
|
|
914
|
+
description && (typeof description === "string" ? /* @__PURE__ */ jsx(
|
|
915
|
+
"p",
|
|
916
|
+
{
|
|
917
|
+
className: cn(
|
|
918
|
+
"max-w-3xl lg:text-xl",
|
|
919
|
+
descriptionClassName
|
|
920
|
+
),
|
|
921
|
+
children: description
|
|
922
|
+
}
|
|
923
|
+
) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
|
|
924
|
+
] }),
|
|
925
|
+
renderAction
|
|
926
|
+
]
|
|
927
|
+
}
|
|
928
|
+
) }),
|
|
908
929
|
renderImage
|
|
909
930
|
] }) })
|
|
910
931
|
}
|
|
@@ -974,7 +974,7 @@ function HeroOverlayCtaGrid({
|
|
|
974
974
|
const renderCards = React.useMemo(() => {
|
|
975
975
|
if (cardsSlot) return cardsSlot;
|
|
976
976
|
if (!cards || cards.length === 0) return null;
|
|
977
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-white/95 shadow-2xl px-
|
|
977
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-white/95 shadow-2xl px-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0", children: cards.map((card) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
978
978
|
Pressable,
|
|
979
979
|
{
|
|
980
980
|
href: card.href,
|
|
@@ -984,7 +984,7 @@ function HeroOverlayCtaGrid({
|
|
|
984
984
|
"div",
|
|
985
985
|
{
|
|
986
986
|
className: cn(
|
|
987
|
-
"relative flex h-12 w-12 flex-none items-center justify-center rounded-full
|
|
987
|
+
"relative flex h-12 w-12 flex-none items-center justify-center rounded-full bg-primary text-primary-foreground"
|
|
988
988
|
),
|
|
989
989
|
children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.icon, size: 22 })
|
|
990
990
|
}
|
|
@@ -1030,7 +1030,7 @@ function HeroOverlayCtaGrid({
|
|
|
1030
1030
|
pattern,
|
|
1031
1031
|
patternOpacity,
|
|
1032
1032
|
className: cn(
|
|
1033
|
-
"relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0",
|
|
1033
|
+
"relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-6",
|
|
1034
1034
|
className
|
|
1035
1035
|
),
|
|
1036
1036
|
children: [
|
|
@@ -1046,14 +1046,14 @@ function HeroOverlayCtaGrid({
|
|
|
1046
1046
|
initial: { opacity: 0, y: 28 },
|
|
1047
1047
|
animate: { opacity: 1, y: 0 },
|
|
1048
1048
|
transition: { duration: 0.6, ease: "easeOut" },
|
|
1049
|
-
className: "mx-auto max-w-3xl text-center text-balance text-white px-
|
|
1049
|
+
className: "mx-auto max-w-3xl text-center text-balance text-white px-0",
|
|
1050
1050
|
children: [
|
|
1051
1051
|
renderBadge,
|
|
1052
1052
|
heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1053
1053
|
"h1",
|
|
1054
1054
|
{
|
|
1055
1055
|
className: cn(
|
|
1056
|
-
"mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl",
|
|
1056
|
+
"mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
|
|
1057
1057
|
headingClassName
|
|
1058
1058
|
),
|
|
1059
1059
|
children: heading
|
|
@@ -1062,7 +1062,7 @@ function HeroOverlayCtaGrid({
|
|
|
1062
1062
|
"h1",
|
|
1063
1063
|
{
|
|
1064
1064
|
className: cn(
|
|
1065
|
-
"mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl",
|
|
1065
|
+
"mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
|
|
1066
1066
|
headingClassName
|
|
1067
1067
|
),
|
|
1068
1068
|
children: heading
|
|
@@ -1071,13 +1071,19 @@ function HeroOverlayCtaGrid({
|
|
|
1071
1071
|
description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1072
1072
|
"p",
|
|
1073
1073
|
{
|
|
1074
|
-
className: cn(
|
|
1074
|
+
className: cn(
|
|
1075
|
+
"mt-5 text-lg md:text-xl text-balance",
|
|
1076
|
+
descriptionClassName
|
|
1077
|
+
),
|
|
1075
1078
|
children: description
|
|
1076
1079
|
}
|
|
1077
1080
|
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1078
1081
|
"div",
|
|
1079
1082
|
{
|
|
1080
|
-
className: cn(
|
|
1083
|
+
className: cn(
|
|
1084
|
+
"mt-5 text-lg md:text-xl text-balance",
|
|
1085
|
+
descriptionClassName
|
|
1086
|
+
),
|
|
1081
1087
|
children: description
|
|
1082
1088
|
}
|
|
1083
1089
|
)),
|
|
@@ -953,7 +953,7 @@ function HeroOverlayCtaGrid({
|
|
|
953
953
|
const renderCards = useMemo(() => {
|
|
954
954
|
if (cardsSlot) return cardsSlot;
|
|
955
955
|
if (!cards || cards.length === 0) return null;
|
|
956
|
-
return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-white/95 shadow-2xl px-
|
|
956
|
+
return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-white/95 shadow-2xl px-0", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0", children: cards.map((card) => /* @__PURE__ */ jsxs(
|
|
957
957
|
Pressable,
|
|
958
958
|
{
|
|
959
959
|
href: card.href,
|
|
@@ -963,7 +963,7 @@ function HeroOverlayCtaGrid({
|
|
|
963
963
|
"div",
|
|
964
964
|
{
|
|
965
965
|
className: cn(
|
|
966
|
-
"relative flex h-12 w-12 flex-none items-center justify-center rounded-full
|
|
966
|
+
"relative flex h-12 w-12 flex-none items-center justify-center rounded-full bg-primary text-primary-foreground"
|
|
967
967
|
),
|
|
968
968
|
children: /* @__PURE__ */ jsx(DynamicIcon, { name: card.icon, size: 22 })
|
|
969
969
|
}
|
|
@@ -1009,7 +1009,7 @@ function HeroOverlayCtaGrid({
|
|
|
1009
1009
|
pattern,
|
|
1010
1010
|
patternOpacity,
|
|
1011
1011
|
className: cn(
|
|
1012
|
-
"relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0",
|
|
1012
|
+
"relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-6",
|
|
1013
1013
|
className
|
|
1014
1014
|
),
|
|
1015
1015
|
children: [
|
|
@@ -1025,14 +1025,14 @@ function HeroOverlayCtaGrid({
|
|
|
1025
1025
|
initial: { opacity: 0, y: 28 },
|
|
1026
1026
|
animate: { opacity: 1, y: 0 },
|
|
1027
1027
|
transition: { duration: 0.6, ease: "easeOut" },
|
|
1028
|
-
className: "mx-auto max-w-3xl text-center text-balance text-white px-
|
|
1028
|
+
className: "mx-auto max-w-3xl text-center text-balance text-white px-0",
|
|
1029
1029
|
children: [
|
|
1030
1030
|
renderBadge,
|
|
1031
1031
|
heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
1032
1032
|
"h1",
|
|
1033
1033
|
{
|
|
1034
1034
|
className: cn(
|
|
1035
|
-
"mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl",
|
|
1035
|
+
"mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
|
|
1036
1036
|
headingClassName
|
|
1037
1037
|
),
|
|
1038
1038
|
children: heading
|
|
@@ -1041,7 +1041,7 @@ function HeroOverlayCtaGrid({
|
|
|
1041
1041
|
"h1",
|
|
1042
1042
|
{
|
|
1043
1043
|
className: cn(
|
|
1044
|
-
"mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl",
|
|
1044
|
+
"mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
|
|
1045
1045
|
headingClassName
|
|
1046
1046
|
),
|
|
1047
1047
|
children: heading
|
|
@@ -1050,13 +1050,19 @@ function HeroOverlayCtaGrid({
|
|
|
1050
1050
|
description && (typeof description === "string" ? /* @__PURE__ */ jsx(
|
|
1051
1051
|
"p",
|
|
1052
1052
|
{
|
|
1053
|
-
className: cn(
|
|
1053
|
+
className: cn(
|
|
1054
|
+
"mt-5 text-lg md:text-xl text-balance",
|
|
1055
|
+
descriptionClassName
|
|
1056
|
+
),
|
|
1054
1057
|
children: description
|
|
1055
1058
|
}
|
|
1056
1059
|
) : /* @__PURE__ */ jsx(
|
|
1057
1060
|
"div",
|
|
1058
1061
|
{
|
|
1059
|
-
className: cn(
|
|
1062
|
+
className: cn(
|
|
1063
|
+
"mt-5 text-lg md:text-xl text-balance",
|
|
1064
|
+
descriptionClassName
|
|
1065
|
+
),
|
|
1060
1066
|
children: description
|
|
1061
1067
|
}
|
|
1062
1068
|
)),
|
|
@@ -33,32 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
33
33
|
function cn(...inputs) {
|
|
34
34
|
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
35
35
|
}
|
|
36
|
-
function getTextColor(parentBg, variant = "default", options) {
|
|
37
|
-
const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
|
|
38
|
-
if (isDark) {
|
|
39
|
-
switch (variant) {
|
|
40
|
-
case "default":
|
|
41
|
-
return "text-foreground";
|
|
42
|
-
case "muted":
|
|
43
|
-
return "text-foreground/80";
|
|
44
|
-
case "subtle":
|
|
45
|
-
return "text-foreground/60";
|
|
46
|
-
case "accent":
|
|
47
|
-
return "text-accent-foreground";
|
|
48
|
-
}
|
|
49
|
-
} else {
|
|
50
|
-
switch (variant) {
|
|
51
|
-
case "default":
|
|
52
|
-
return "text-foreground";
|
|
53
|
-
case "muted":
|
|
54
|
-
return "text-muted-foreground";
|
|
55
|
-
case "subtle":
|
|
56
|
-
return "text-muted-foreground/70";
|
|
57
|
-
case "accent":
|
|
58
|
-
return "text-primary";
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
36
|
var badgeVariants = classVarianceAuthority.cva(
|
|
63
37
|
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
64
38
|
{
|
|
@@ -892,14 +866,13 @@ function HeroPatternBadgeLogos({
|
|
|
892
866
|
actionsSlot,
|
|
893
867
|
logos,
|
|
894
868
|
logosSlot,
|
|
895
|
-
logosTagline
|
|
896
|
-
backgroundImageUrl = "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
|
|
869
|
+
logosTagline,
|
|
897
870
|
background,
|
|
898
|
-
|
|
871
|
+
containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
|
|
872
|
+
spacing = "py-12 md:py-32",
|
|
899
873
|
pattern,
|
|
900
874
|
patternOpacity,
|
|
901
875
|
className,
|
|
902
|
-
containerClassName,
|
|
903
876
|
contentClassName,
|
|
904
877
|
headingClassName,
|
|
905
878
|
descriptionClassName,
|
|
@@ -913,7 +886,14 @@ function HeroPatternBadgeLogos({
|
|
|
913
886
|
if (actionsSlot) return actionsSlot;
|
|
914
887
|
if (!actions || actions.length === 0) return null;
|
|
915
888
|
return actions.map((action, index) => {
|
|
916
|
-
const {
|
|
889
|
+
const {
|
|
890
|
+
label,
|
|
891
|
+
icon,
|
|
892
|
+
iconAfter,
|
|
893
|
+
children,
|
|
894
|
+
className: actionClassName,
|
|
895
|
+
...pressableProps
|
|
896
|
+
} = action;
|
|
917
897
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
918
898
|
Pressable,
|
|
919
899
|
{
|
|
@@ -970,7 +950,7 @@ function HeroPatternBadgeLogos({
|
|
|
970
950
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: logoClassName, children: imgElement }, index);
|
|
971
951
|
});
|
|
972
952
|
}, [logosSlot, logos, optixFlowConfig]);
|
|
973
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
953
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
974
954
|
Section,
|
|
975
955
|
{
|
|
976
956
|
background,
|
|
@@ -978,31 +958,61 @@ function HeroPatternBadgeLogos({
|
|
|
978
958
|
pattern,
|
|
979
959
|
patternOpacity,
|
|
980
960
|
className: cn("relative p-0", className),
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
961
|
+
containerClassName,
|
|
962
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
963
|
+
"div",
|
|
964
|
+
{
|
|
965
|
+
className: cn(
|
|
966
|
+
"z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center",
|
|
967
|
+
contentClassName
|
|
968
|
+
),
|
|
969
|
+
children: [
|
|
970
|
+
badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", children: badge }) : badge }),
|
|
971
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
972
|
+
heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
973
|
+
"h1",
|
|
974
|
+
{
|
|
975
|
+
className: cn(
|
|
976
|
+
"mb-6 text-4xl font-bold tracking-tight text-balance md:text-5xl lg:text-7xl",
|
|
977
|
+
headingClassName
|
|
978
|
+
),
|
|
979
|
+
children: heading
|
|
980
|
+
}
|
|
981
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
|
|
982
|
+
description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
983
|
+
"p",
|
|
984
|
+
{
|
|
985
|
+
className: cn(
|
|
986
|
+
"mx-auto max-w-2xl md:text-lg lg:text-xl text-balance",
|
|
987
|
+
descriptionClassName
|
|
988
|
+
),
|
|
989
|
+
children: description
|
|
990
|
+
}
|
|
991
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
|
|
992
|
+
] }),
|
|
993
|
+
(actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
994
|
+
"div",
|
|
995
|
+
{
|
|
996
|
+
className: cn("mt-6 flex items-center gap-4", actionsClassName),
|
|
997
|
+
children: renderActions
|
|
998
|
+
}
|
|
989
999
|
),
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
]
|
|
1004
|
-
|
|
1005
|
-
|
|
1000
|
+
(logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1001
|
+
"div",
|
|
1002
|
+
{
|
|
1003
|
+
className: cn(
|
|
1004
|
+
"mt-12 flex flex-col items-center gap-4 lg:mt-16",
|
|
1005
|
+
logosClassName
|
|
1006
|
+
),
|
|
1007
|
+
children: [
|
|
1008
|
+
logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm"), children: logosTagline }) : logosTagline),
|
|
1009
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
|
|
1010
|
+
]
|
|
1011
|
+
}
|
|
1012
|
+
)
|
|
1013
|
+
]
|
|
1014
|
+
}
|
|
1015
|
+
) }) })
|
|
1006
1016
|
}
|
|
1007
1017
|
);
|
|
1008
1018
|
}
|
|
@@ -40,9 +40,6 @@ interface HeroPatternBadgeLogosProps {
|
|
|
40
40
|
*/
|
|
41
41
|
logosTagline?: React.ReactNode;
|
|
42
42
|
/**
|
|
43
|
-
* Background pattern image URL
|
|
44
|
-
*/
|
|
45
|
-
backgroundImageUrl?: string; /**
|
|
46
43
|
* Background style for the section
|
|
47
44
|
*/
|
|
48
45
|
background?: SectionBackground;
|
|
@@ -99,6 +96,6 @@ interface HeroPatternBadgeLogosProps {
|
|
|
99
96
|
*/
|
|
100
97
|
optixFlowConfig?: OptixFlowConfig;
|
|
101
98
|
}
|
|
102
|
-
declare function HeroPatternBadgeLogos({ badge, heading, description, actions, actionsSlot, logos, logosSlot, logosTagline,
|
|
99
|
+
declare function HeroPatternBadgeLogos({ badge, heading, description, actions, actionsSlot, logos, logosSlot, logosTagline, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, badgeClassName, actionsClassName, logosClassName, backgroundClassName, optixFlowConfig, }: HeroPatternBadgeLogosProps): React.JSX.Element;
|
|
103
100
|
|
|
104
101
|
export { HeroPatternBadgeLogos, type HeroPatternBadgeLogosProps };
|
|
@@ -40,9 +40,6 @@ interface HeroPatternBadgeLogosProps {
|
|
|
40
40
|
*/
|
|
41
41
|
logosTagline?: React.ReactNode;
|
|
42
42
|
/**
|
|
43
|
-
* Background pattern image URL
|
|
44
|
-
*/
|
|
45
|
-
backgroundImageUrl?: string; /**
|
|
46
43
|
* Background style for the section
|
|
47
44
|
*/
|
|
48
45
|
background?: SectionBackground;
|
|
@@ -99,6 +96,6 @@ interface HeroPatternBadgeLogosProps {
|
|
|
99
96
|
*/
|
|
100
97
|
optixFlowConfig?: OptixFlowConfig;
|
|
101
98
|
}
|
|
102
|
-
declare function HeroPatternBadgeLogos({ badge, heading, description, actions, actionsSlot, logos, logosSlot, logosTagline,
|
|
99
|
+
declare function HeroPatternBadgeLogos({ badge, heading, description, actions, actionsSlot, logos, logosSlot, logosTagline, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, badgeClassName, actionsClassName, logosClassName, backgroundClassName, optixFlowConfig, }: HeroPatternBadgeLogosProps): React.JSX.Element;
|
|
103
100
|
|
|
104
101
|
export { HeroPatternBadgeLogos, type HeroPatternBadgeLogosProps };
|