@opensite/ui 1.3.7 → 1.3.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 (53) hide show
  1. package/dist/components.cjs +159 -83
  2. package/dist/components.js +159 -83
  3. package/dist/feature-showcase.cjs +3 -3
  4. package/dist/feature-showcase.js +3 -3
  5. package/dist/footer-accordion-social.cjs +18 -0
  6. package/dist/footer-accordion-social.js +18 -0
  7. package/dist/footer-animated-social.cjs +18 -0
  8. package/dist/footer-animated-social.js +18 -0
  9. package/dist/footer-brand-description.cjs +18 -0
  10. package/dist/footer-brand-description.js +18 -0
  11. package/dist/footer-brand-links-contact.cjs +18 -0
  12. package/dist/footer-brand-links-contact.js +18 -0
  13. package/dist/footer-comprehensive-links.cjs +18 -0
  14. package/dist/footer-comprehensive-links.js +18 -0
  15. package/dist/footer-contact-card.cjs +18 -0
  16. package/dist/footer-contact-card.js +18 -0
  17. package/dist/footer-cta-banner.cjs +18 -0
  18. package/dist/footer-cta-banner.js +18 -0
  19. package/dist/footer-cta-social.cjs +18 -0
  20. package/dist/footer-cta-social.js +18 -0
  21. package/dist/footer-info-cards-accordion.cjs +18 -0
  22. package/dist/footer-info-cards-accordion.js +18 -0
  23. package/dist/footer-links-grid.cjs +9 -14
  24. package/dist/footer-links-grid.d.cts +5 -1
  25. package/dist/footer-links-grid.d.ts +5 -1
  26. package/dist/footer-links-grid.js +9 -14
  27. package/dist/footer-nav-social.cjs +18 -0
  28. package/dist/footer-nav-social.js +18 -0
  29. package/dist/footer-newsletter-contact.cjs +18 -0
  30. package/dist/footer-newsletter-contact.js +18 -0
  31. package/dist/footer-newsletter-grid.cjs +18 -0
  32. package/dist/footer-newsletter-grid.js +18 -0
  33. package/dist/footer-newsletter-minimal.cjs +18 -0
  34. package/dist/footer-newsletter-minimal.js +18 -0
  35. package/dist/footer-social-apps.cjs +18 -0
  36. package/dist/footer-social-apps.js +18 -0
  37. package/dist/footer-social-newsletter.cjs +150 -99
  38. package/dist/footer-social-newsletter.d.cts +5 -1
  39. package/dist/footer-social-newsletter.d.ts +5 -1
  40. package/dist/footer-social-newsletter.js +150 -99
  41. package/dist/footer-split-image-accordion.cjs +18 -0
  42. package/dist/footer-split-image-accordion.js +18 -0
  43. package/dist/index.cjs +159 -83
  44. package/dist/index.js +159 -83
  45. package/dist/navbar-fullscreen-menu.cjs +18 -0
  46. package/dist/navbar-fullscreen-menu.js +18 -0
  47. package/dist/navbar-transparent-overlay.cjs +18 -0
  48. package/dist/navbar-transparent-overlay.js +18 -0
  49. package/dist/registry.cjs +162 -86
  50. package/dist/registry.js +162 -86
  51. package/dist/social-link-icon.cjs +18 -0
  52. package/dist/social-link-icon.js +18 -0
  53. package/package.json +2 -2
@@ -885,10 +885,11 @@ function FooterLinksGrid({
885
885
  attributionHref,
886
886
  bottomLinks,
887
887
  background,
888
- spacing,
889
888
  pattern,
890
889
  patternOpacity,
891
- optixFlowConfig
890
+ optixFlowConfig,
891
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
892
+ spacing = "py-6 md:py-32"
892
893
  }) {
893
894
  const currentYear = useMemo(() => (/* @__PURE__ */ new Date()).getFullYear(), []);
894
895
  const copyrightText = copyright ?? `\xA9 ${currentYear}`;
@@ -900,9 +901,10 @@ function FooterLinksGrid({
900
901
  pattern,
901
902
  patternOpacity,
902
903
  className: cn(className),
904
+ containerClassName,
903
905
  children: /* @__PURE__ */ jsxs("footer", { children: [
904
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 lg:grid-cols-6", children: [
905
- (logo || tagline) && /* @__PURE__ */ jsxs("div", { className: "col-span-2 mb-8 lg:mb-0", children: [
906
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 md:gap-8 md:grid-cols-6", children: [
907
+ (logo || tagline) && /* @__PURE__ */ jsxs("div", { className: "flex space-y-2 col-span-2 flex-col mb-6 md:mb-0 pr-0 md:pr-6", children: [
906
908
  logo && /* @__PURE__ */ jsx(
907
909
  FooterLogo,
908
910
  {
@@ -915,17 +917,10 @@ function FooterLinksGrid({
915
917
  ] }),
916
918
  menuItems && menuItems.length > 0 && menuItems.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { children: [
917
919
  /* @__PURE__ */ jsx("h3", { className: "mb-4 font-bold", children: section.title }),
918
- /* @__PURE__ */ jsx("ul", { className: "space-y-4 text-muted-foreground", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
919
- "li",
920
- {
921
- className: "font-medium hover:text-primary",
922
- children: /* @__PURE__ */ jsx(Pressable, { href: link.url, children: link.text })
923
- },
924
- linkIdx
925
- )) })
920
+ /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { className: "text-sm font-medium", children: /* @__PURE__ */ jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
926
921
  ] }, sectionIdx))
927
922
  ] }),
928
- /* @__PURE__ */ jsxs("div", { className: "mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center", children: [
923
+ /* @__PURE__ */ jsxs("div", { className: "mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium md:flex-row md:items-center", children: [
929
924
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:gap-4", children: [
930
925
  /* @__PURE__ */ jsx("p", { children: copyrightText }),
931
926
  attributionText && /* @__PURE__ */ jsx(
@@ -937,7 +932,7 @@ function FooterLinksGrid({
937
932
  }
938
933
  )
939
934
  ] }),
940
- bottomLinks && bottomLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex gap-4", children: bottomLinks.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { className: "underline hover:text-primary", children: /* @__PURE__ */ jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
935
+ bottomLinks && bottomLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex gap-4", children: bottomLinks.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { className: "underline", children: /* @__PURE__ */ jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
941
936
  ] })
942
937
  ] })
943
938
  }
@@ -1013,6 +1013,24 @@ var platformIconMap = {
1013
1013
  spotify: "cib/spotify",
1014
1014
  apple: "cib/apple",
1015
1015
  x: "line-md/twitter-x",
1016
+ github: "cib/github",
1017
+ snapchat: "cib/snapchat",
1018
+ discord: "cib/discord",
1019
+ dev: "simple-icons/devdotto",
1020
+ substack: "simple-icons/substack",
1021
+ reddit: "cib/reddit",
1022
+ pinterest: "cib/pinterest",
1023
+ threads: "simple-icons/threads",
1024
+ twitch: "cib/twitch",
1025
+ whatsapp: "cib/whatsapp",
1026
+ telegram: "cib/telegram",
1027
+ medium: "simple-icons/medium",
1028
+ patreon: "cib/patreon",
1029
+ onlyfans: "simple-icons/onlyfans",
1030
+ eventbrite: "cib/eventbrite",
1031
+ npmjs: "simple-icons/npm",
1032
+ crates: "cib/rust",
1033
+ rubygems: "cib/rubygems",
1016
1034
  unknown: "icon-park-solid/circular-connection"
1017
1035
  };
1018
1036
  var SocialLinkIcon = React__namespace.forwardRef(
@@ -992,6 +992,24 @@ var platformIconMap = {
992
992
  spotify: "cib/spotify",
993
993
  apple: "cib/apple",
994
994
  x: "line-md/twitter-x",
995
+ github: "cib/github",
996
+ snapchat: "cib/snapchat",
997
+ discord: "cib/discord",
998
+ dev: "simple-icons/devdotto",
999
+ substack: "simple-icons/substack",
1000
+ reddit: "cib/reddit",
1001
+ pinterest: "cib/pinterest",
1002
+ threads: "simple-icons/threads",
1003
+ twitch: "cib/twitch",
1004
+ whatsapp: "cib/whatsapp",
1005
+ telegram: "cib/telegram",
1006
+ medium: "simple-icons/medium",
1007
+ patreon: "cib/patreon",
1008
+ onlyfans: "simple-icons/onlyfans",
1009
+ eventbrite: "cib/eventbrite",
1010
+ npmjs: "simple-icons/npm",
1011
+ crates: "cib/rust",
1012
+ rubygems: "cib/rubygems",
995
1013
  unknown: "icon-park-solid/circular-connection"
996
1014
  };
997
1015
  var SocialLinkIcon = React.forwardRef(
@@ -644,6 +644,24 @@ var platformIconMap = {
644
644
  spotify: "cib/spotify",
645
645
  apple: "cib/apple",
646
646
  x: "line-md/twitter-x",
647
+ github: "cib/github",
648
+ snapchat: "cib/snapchat",
649
+ discord: "cib/discord",
650
+ dev: "simple-icons/devdotto",
651
+ substack: "simple-icons/substack",
652
+ reddit: "cib/reddit",
653
+ pinterest: "cib/pinterest",
654
+ threads: "simple-icons/threads",
655
+ twitch: "cib/twitch",
656
+ whatsapp: "cib/whatsapp",
657
+ telegram: "cib/telegram",
658
+ medium: "simple-icons/medium",
659
+ patreon: "cib/patreon",
660
+ onlyfans: "simple-icons/onlyfans",
661
+ eventbrite: "cib/eventbrite",
662
+ npmjs: "simple-icons/npm",
663
+ crates: "cib/rust",
664
+ rubygems: "cib/rubygems",
647
665
  unknown: "icon-park-solid/circular-connection"
648
666
  };
649
667
  var SocialLinkIcon = React__namespace.forwardRef(
@@ -622,6 +622,24 @@ var platformIconMap = {
622
622
  spotify: "cib/spotify",
623
623
  apple: "cib/apple",
624
624
  x: "line-md/twitter-x",
625
+ github: "cib/github",
626
+ snapchat: "cib/snapchat",
627
+ discord: "cib/discord",
628
+ dev: "simple-icons/devdotto",
629
+ substack: "simple-icons/substack",
630
+ reddit: "cib/reddit",
631
+ pinterest: "cib/pinterest",
632
+ threads: "simple-icons/threads",
633
+ twitch: "cib/twitch",
634
+ whatsapp: "cib/whatsapp",
635
+ telegram: "cib/telegram",
636
+ medium: "simple-icons/medium",
637
+ patreon: "cib/patreon",
638
+ onlyfans: "simple-icons/onlyfans",
639
+ eventbrite: "cib/eventbrite",
640
+ npmjs: "simple-icons/npm",
641
+ crates: "cib/rust",
642
+ rubygems: "cib/rubygems",
625
643
  unknown: "icon-park-solid/circular-connection"
626
644
  };
627
645
  var SocialLinkIcon = React.forwardRef(
@@ -1013,6 +1013,24 @@ var platformIconMap = {
1013
1013
  spotify: "cib/spotify",
1014
1014
  apple: "cib/apple",
1015
1015
  x: "line-md/twitter-x",
1016
+ github: "cib/github",
1017
+ snapchat: "cib/snapchat",
1018
+ discord: "cib/discord",
1019
+ dev: "simple-icons/devdotto",
1020
+ substack: "simple-icons/substack",
1021
+ reddit: "cib/reddit",
1022
+ pinterest: "cib/pinterest",
1023
+ threads: "simple-icons/threads",
1024
+ twitch: "cib/twitch",
1025
+ whatsapp: "cib/whatsapp",
1026
+ telegram: "cib/telegram",
1027
+ medium: "simple-icons/medium",
1028
+ patreon: "cib/patreon",
1029
+ onlyfans: "simple-icons/onlyfans",
1030
+ eventbrite: "cib/eventbrite",
1031
+ npmjs: "simple-icons/npm",
1032
+ crates: "cib/rust",
1033
+ rubygems: "cib/rubygems",
1016
1034
  unknown: "icon-park-solid/circular-connection"
1017
1035
  };
1018
1036
  var SocialLinkIcon = React__namespace.forwardRef(
@@ -992,6 +992,24 @@ var platformIconMap = {
992
992
  spotify: "cib/spotify",
993
993
  apple: "cib/apple",
994
994
  x: "line-md/twitter-x",
995
+ github: "cib/github",
996
+ snapchat: "cib/snapchat",
997
+ discord: "cib/discord",
998
+ dev: "simple-icons/devdotto",
999
+ substack: "simple-icons/substack",
1000
+ reddit: "cib/reddit",
1001
+ pinterest: "cib/pinterest",
1002
+ threads: "simple-icons/threads",
1003
+ twitch: "cib/twitch",
1004
+ whatsapp: "cib/whatsapp",
1005
+ telegram: "cib/telegram",
1006
+ medium: "simple-icons/medium",
1007
+ patreon: "cib/patreon",
1008
+ onlyfans: "simple-icons/onlyfans",
1009
+ eventbrite: "cib/eventbrite",
1010
+ npmjs: "simple-icons/npm",
1011
+ crates: "cib/rust",
1012
+ rubygems: "cib/rubygems",
995
1013
  unknown: "icon-park-solid/circular-connection"
996
1014
  };
997
1015
  var SocialLinkIcon = React.forwardRef(
@@ -571,6 +571,24 @@ var platformIconMap = {
571
571
  spotify: "cib/spotify",
572
572
  apple: "cib/apple",
573
573
  x: "line-md/twitter-x",
574
+ github: "cib/github",
575
+ snapchat: "cib/snapchat",
576
+ discord: "cib/discord",
577
+ dev: "simple-icons/devdotto",
578
+ substack: "simple-icons/substack",
579
+ reddit: "cib/reddit",
580
+ pinterest: "cib/pinterest",
581
+ threads: "simple-icons/threads",
582
+ twitch: "cib/twitch",
583
+ whatsapp: "cib/whatsapp",
584
+ telegram: "cib/telegram",
585
+ medium: "simple-icons/medium",
586
+ patreon: "cib/patreon",
587
+ onlyfans: "simple-icons/onlyfans",
588
+ eventbrite: "cib/eventbrite",
589
+ npmjs: "simple-icons/npm",
590
+ crates: "cib/rust",
591
+ rubygems: "cib/rubygems",
574
592
  unknown: "icon-park-solid/circular-connection"
575
593
  };
576
594
  var SocialLinkIcon = React__namespace.forwardRef(
@@ -550,6 +550,24 @@ var platformIconMap = {
550
550
  spotify: "cib/spotify",
551
551
  apple: "cib/apple",
552
552
  x: "line-md/twitter-x",
553
+ github: "cib/github",
554
+ snapchat: "cib/snapchat",
555
+ discord: "cib/discord",
556
+ dev: "simple-icons/devdotto",
557
+ substack: "simple-icons/substack",
558
+ reddit: "cib/reddit",
559
+ pinterest: "cib/pinterest",
560
+ threads: "simple-icons/threads",
561
+ twitch: "cib/twitch",
562
+ whatsapp: "cib/whatsapp",
563
+ telegram: "cib/telegram",
564
+ medium: "simple-icons/medium",
565
+ patreon: "cib/patreon",
566
+ onlyfans: "simple-icons/onlyfans",
567
+ eventbrite: "cib/eventbrite",
568
+ npmjs: "simple-icons/npm",
569
+ crates: "cib/rust",
570
+ rubygems: "cib/rubygems",
553
571
  unknown: "icon-park-solid/circular-connection"
554
572
  };
555
573
  var SocialLinkIcon = React.forwardRef(
@@ -1043,6 +1043,24 @@ var platformIconMap = {
1043
1043
  spotify: "cib/spotify",
1044
1044
  apple: "cib/apple",
1045
1045
  x: "line-md/twitter-x",
1046
+ github: "cib/github",
1047
+ snapchat: "cib/snapchat",
1048
+ discord: "cib/discord",
1049
+ dev: "simple-icons/devdotto",
1050
+ substack: "simple-icons/substack",
1051
+ reddit: "cib/reddit",
1052
+ pinterest: "cib/pinterest",
1053
+ threads: "simple-icons/threads",
1054
+ twitch: "cib/twitch",
1055
+ whatsapp: "cib/whatsapp",
1056
+ telegram: "cib/telegram",
1057
+ medium: "simple-icons/medium",
1058
+ patreon: "cib/patreon",
1059
+ onlyfans: "simple-icons/onlyfans",
1060
+ eventbrite: "cib/eventbrite",
1061
+ npmjs: "simple-icons/npm",
1062
+ crates: "cib/rust",
1063
+ rubygems: "cib/rubygems",
1046
1064
  unknown: "icon-park-solid/circular-connection"
1047
1065
  };
1048
1066
  var SocialLinkIcon = React__namespace.forwardRef(
@@ -1022,6 +1022,24 @@ var platformIconMap = {
1022
1022
  spotify: "cib/spotify",
1023
1023
  apple: "cib/apple",
1024
1024
  x: "line-md/twitter-x",
1025
+ github: "cib/github",
1026
+ snapchat: "cib/snapchat",
1027
+ discord: "cib/discord",
1028
+ dev: "simple-icons/devdotto",
1029
+ substack: "simple-icons/substack",
1030
+ reddit: "cib/reddit",
1031
+ pinterest: "cib/pinterest",
1032
+ threads: "simple-icons/threads",
1033
+ twitch: "cib/twitch",
1034
+ whatsapp: "cib/whatsapp",
1035
+ telegram: "cib/telegram",
1036
+ medium: "simple-icons/medium",
1037
+ patreon: "cib/patreon",
1038
+ onlyfans: "simple-icons/onlyfans",
1039
+ eventbrite: "cib/eventbrite",
1040
+ npmjs: "simple-icons/npm",
1041
+ crates: "cib/rust",
1042
+ rubygems: "cib/rubygems",
1025
1043
  unknown: "icon-park-solid/circular-connection"
1026
1044
  };
1027
1045
  var SocialLinkIcon = React.forwardRef(
@@ -33,36 +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 getNestedCardBg(parentBg, variant = "muted", options) {
37
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
38
- if (isDark) {
39
- switch (variant) {
40
- case "muted":
41
- return "bg-background";
42
- case "card":
43
- return "bg-card";
44
- case "accent":
45
- return "bg-accent";
46
- case "subtle":
47
- return "bg-background/50";
48
- }
49
- } else {
50
- switch (variant) {
51
- case "muted":
52
- return "bg-muted";
53
- case "card":
54
- return "bg-card";
55
- case "accent":
56
- return "bg-accent";
57
- case "subtle":
58
- return "bg-muted/50";
59
- }
60
- }
61
- }
62
- function getNestedCardTextColor(parentBg, options) {
63
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
64
- return isDark ? "text-foreground" : "";
65
- }
66
36
  function normalizePhoneNumber(input) {
67
37
  const trimmed = input.trim();
68
38
  if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1043,6 +1013,24 @@ var platformIconMap = {
1043
1013
  spotify: "cib/spotify",
1044
1014
  apple: "cib/apple",
1045
1015
  x: "line-md/twitter-x",
1016
+ github: "cib/github",
1017
+ snapchat: "cib/snapchat",
1018
+ discord: "cib/discord",
1019
+ dev: "simple-icons/devdotto",
1020
+ substack: "simple-icons/substack",
1021
+ reddit: "cib/reddit",
1022
+ pinterest: "cib/pinterest",
1023
+ threads: "simple-icons/threads",
1024
+ twitch: "cib/twitch",
1025
+ whatsapp: "cib/whatsapp",
1026
+ telegram: "cib/telegram",
1027
+ medium: "simple-icons/medium",
1028
+ patreon: "cib/patreon",
1029
+ onlyfans: "simple-icons/onlyfans",
1030
+ eventbrite: "cib/eventbrite",
1031
+ npmjs: "simple-icons/npm",
1032
+ crates: "cib/rust",
1033
+ rubygems: "cib/rubygems",
1046
1034
  unknown: "icon-park-solid/circular-connection"
1047
1035
  };
1048
1036
  var SocialLinkIcon = React__namespace.forwardRef(
@@ -1124,7 +1112,8 @@ function FooterSocialNewsletter({
1124
1112
  bottomClassName,
1125
1113
  copyrightClassName,
1126
1114
  background,
1127
- spacing,
1115
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
1116
+ spacing = "py-6 md:py-32",
1128
1117
  pattern,
1129
1118
  patternOpacity,
1130
1119
  optixFlowConfig
@@ -1139,88 +1128,150 @@ function FooterSocialNewsletter({
1139
1128
  pattern,
1140
1129
  patternOpacity,
1141
1130
  className: cn(className),
1131
+ containerClassName,
1142
1132
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
1143
1133
  logo && /* @__PURE__ */ jsxRuntime.jsx(
1144
1134
  FooterLogo,
1145
1135
  {
1146
1136
  logo,
1147
- logoClassName: cn("flex items-center gap-2", logoWrapperClassName),
1137
+ logoClassName: cn(
1138
+ "flex items-center gap-2",
1139
+ logoWrapperClassName
1140
+ ),
1148
1141
  logoImageClassName: cn("h-10", logoClassName),
1149
1142
  optixFlowConfig
1150
1143
  }
1151
1144
  ),
1152
- (sections && sections.length > 0 || socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-4", gridClassName), children: [
1153
- sections && sections.length > 0 && sections.map((section, sectionIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
1154
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
1155
- /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-4 text-muted-foreground", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
1156
- "li",
1157
- {
1158
- className: cn("font-medium hover:text-primary", navLinkClassName),
1159
- children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
1160
- },
1161
- linkIdx
1162
- )) })
1163
- ] }, sectionIdx)),
1164
- (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1", socialColumnClassName), children: [
1165
- socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mb-10 flex items-center gap-2 text-muted-foreground", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(
1166
- SocialLinkIcon,
1167
- {
1168
- href: social.href,
1169
- label: social.label,
1170
- iconNameOverride: social.iconNameOverride,
1171
- iconSize: 24,
1172
- className: cn(
1173
- "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
1174
- getNestedCardBg(background),
1175
- getNestedCardTextColor(background),
1176
- socialLinkClassName
1177
- )
1178
- }
1179
- ) }, idx)) }),
1180
- (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid w-full max-w-sm items-center gap-1.5", newsletterClassName), children: [
1181
- newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "newsletter-email", className: "text-sm font-medium", children: newsletterLabel }),
1182
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
1183
- /* @__PURE__ */ jsxRuntime.jsx(
1184
- "input",
1145
+ sections && sections.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
1146
+ "div",
1147
+ {
1148
+ className: cn(
1149
+ "mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-4",
1150
+ gridClassName
1151
+ ),
1152
+ children: sections && sections.length > 0 && sections.map((section, sectionIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
1153
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
1154
+ /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-4", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
1155
+ "li",
1156
+ {
1157
+ className: cn("font-medium", navLinkClassName),
1158
+ children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
1159
+ },
1160
+ linkIdx
1161
+ )) })
1162
+ ] }, sectionIdx))
1163
+ }
1164
+ ) : null,
1165
+ (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1"), children: [
1166
+ (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs(
1167
+ "div",
1168
+ {
1169
+ className: cn(
1170
+ "grid w-full max-w-sm items-center gap-1.5",
1171
+ newsletterClassName
1172
+ ),
1173
+ children: [
1174
+ newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx(
1175
+ "label",
1185
1176
  {
1186
- type: "email",
1187
- id: "newsletter-email",
1188
- placeholder: newsletterPlaceholder || "Email",
1189
- className: cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", newsletterInputClassName)
1177
+ htmlFor: "newsletter-email",
1178
+ className: "text-sm font-medium",
1179
+ children: newsletterLabel
1190
1180
  }
1191
1181
  ),
1192
- newsletterButtonText && /* @__PURE__ */ jsxRuntime.jsx(
1193
- Pressable,
1194
- {
1195
- onClick: (e) => {
1196
- e.preventDefault();
1197
- },
1198
- variant: "default",
1199
- size: "default",
1200
- asButton: true,
1201
- className: cn(newsletterButtonClassName),
1202
- children: newsletterButtonText
1203
- }
1204
- )
1205
- ] }),
1206
- (privacyConsentText || privacyLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("mt-1 text-xs text-muted-foreground", privacyClassName), children: [
1207
- privacyConsentText,
1208
- privacyLinkText && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: privacyLinkUrl || "#", className: "ml-1 text-primary hover:underline", children: privacyLinkText })
1209
- ] })
1210
- ] })
1211
- ] })
1212
- ] }),
1213
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center", bottomClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
1214
- /* @__PURE__ */ jsxRuntime.jsx("p", { children: copyrightText }),
1215
- attributionText && /* @__PURE__ */ jsxRuntime.jsx(
1216
- Pressable,
1182
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
1183
+ /* @__PURE__ */ jsxRuntime.jsx(
1184
+ "input",
1185
+ {
1186
+ type: "email",
1187
+ id: "newsletter-email",
1188
+ placeholder: newsletterPlaceholder || "Email",
1189
+ className: cn(
1190
+ "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
1191
+ newsletterInputClassName
1192
+ )
1193
+ }
1194
+ ),
1195
+ newsletterButtonText && /* @__PURE__ */ jsxRuntime.jsx(
1196
+ Pressable,
1197
+ {
1198
+ onClick: (e) => {
1199
+ e.preventDefault();
1200
+ },
1201
+ variant: "default",
1202
+ size: "default",
1203
+ asButton: true,
1204
+ className: cn(newsletterButtonClassName),
1205
+ children: newsletterButtonText
1206
+ }
1207
+ )
1208
+ ] }),
1209
+ (privacyConsentText || privacyLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("mt-1 text-xs ", privacyClassName), children: [
1210
+ privacyConsentText,
1211
+ privacyLinkText && /* @__PURE__ */ jsxRuntime.jsx(
1212
+ Pressable,
1213
+ {
1214
+ href: privacyLinkUrl || "#",
1215
+ className: "ml-1 hover:underline",
1216
+ children: privacyLinkText
1217
+ }
1218
+ )
1219
+ ] })
1220
+ ]
1221
+ }
1222
+ ),
1223
+ socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", socialColumnClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
1224
+ "ul",
1217
1225
  {
1218
- href: attributionHref || "https://opensite.ai",
1219
- className: "hover:text-primary",
1220
- children: attributionText
1226
+ className: cn(
1227
+ "mb-10 flex items-center gap-2",
1228
+ socialLinksClassName
1229
+ ),
1230
+ children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(
1231
+ SocialLinkIcon,
1232
+ {
1233
+ href: social.href,
1234
+ label: social.label,
1235
+ iconNameOverride: social.iconNameOverride,
1236
+ iconSize: 24,
1237
+ className: cn(
1238
+ "flex size-12 items-center justify-center rounded-full transition-colors",
1239
+ socialLinkClassName
1240
+ )
1241
+ }
1242
+ ) }, idx))
1221
1243
  }
1222
- )
1223
- ] }) })
1244
+ ) })
1245
+ ] }),
1246
+ /* @__PURE__ */ jsxRuntime.jsx(
1247
+ "div",
1248
+ {
1249
+ className: cn(
1250
+ "mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium md:flex-row md:items-center",
1251
+ bottomClassName
1252
+ ),
1253
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1254
+ "div",
1255
+ {
1256
+ className: cn(
1257
+ "flex flex-col gap-2 md:flex-row md:items-center md:gap-4",
1258
+ copyrightClassName
1259
+ ),
1260
+ children: [
1261
+ /* @__PURE__ */ jsxRuntime.jsx("p", { children: copyrightText }),
1262
+ attributionText && /* @__PURE__ */ jsxRuntime.jsx(
1263
+ Pressable,
1264
+ {
1265
+ href: attributionHref || "https://opensite.ai",
1266
+ className: "hover:text-primary",
1267
+ children: attributionText
1268
+ }
1269
+ )
1270
+ ]
1271
+ }
1272
+ )
1273
+ }
1274
+ )
1224
1275
  ] }) })
1225
1276
  }
1226
1277
  );
@@ -104,6 +104,10 @@ interface FooterSocialNewsletterProps {
104
104
  copyrightClassName?: string;
105
105
  /** Section background variant */
106
106
  background?: SectionBackground;
107
+ /**
108
+ * Additional CSS classes for the container
109
+ */
110
+ containerClassName?: string;
107
111
  /** Section spacing variant */
108
112
  spacing?: SectionSpacing;
109
113
  /** Optional background pattern */
@@ -120,6 +124,6 @@ interface FooterSocialNewsletterProps {
120
124
  * and an email newsletter subscription form. Ideal for community-focused products,
121
125
  * SaaS platforms, and businesses that prioritize social engagement and email marketing.
122
126
  */
123
- declare function FooterSocialNewsletter({ logo, sections, socialLinks, newsletterLabel, newsletterPlaceholder, newsletterButtonText, privacyLinkText, privacyLinkUrl, privacyConsentText, copyright, attributionText, attributionHref, className, contentClassName, logoWrapperClassName, logoClassName, gridClassName, navSectionClassName, navTitleClassName, navLinksClassName, navLinkClassName, socialColumnClassName, socialLinksClassName, socialLinkClassName, newsletterClassName, newsletterInputClassName, newsletterButtonClassName, privacyClassName, bottomClassName, copyrightClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterSocialNewsletterProps): React.JSX.Element;
127
+ declare function FooterSocialNewsletter({ logo, sections, socialLinks, newsletterLabel, newsletterPlaceholder, newsletterButtonText, privacyLinkText, privacyLinkUrl, privacyConsentText, copyright, attributionText, attributionHref, className, contentClassName, logoWrapperClassName, logoClassName, gridClassName, navSectionClassName, navTitleClassName, navLinksClassName, navLinkClassName, socialColumnClassName, socialLinksClassName, socialLinkClassName, newsletterClassName, newsletterInputClassName, newsletterButtonClassName, privacyClassName, bottomClassName, copyrightClassName, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterSocialNewsletterProps): React.JSX.Element;
124
128
 
125
129
  export { FooterSocialNewsletter, type FooterSocialNewsletterProps, type FooterSocialNewsletterSection };
@@ -104,6 +104,10 @@ interface FooterSocialNewsletterProps {
104
104
  copyrightClassName?: string;
105
105
  /** Section background variant */
106
106
  background?: SectionBackground;
107
+ /**
108
+ * Additional CSS classes for the container
109
+ */
110
+ containerClassName?: string;
107
111
  /** Section spacing variant */
108
112
  spacing?: SectionSpacing;
109
113
  /** Optional background pattern */
@@ -120,6 +124,6 @@ interface FooterSocialNewsletterProps {
120
124
  * and an email newsletter subscription form. Ideal for community-focused products,
121
125
  * SaaS platforms, and businesses that prioritize social engagement and email marketing.
122
126
  */
123
- declare function FooterSocialNewsletter({ logo, sections, socialLinks, newsletterLabel, newsletterPlaceholder, newsletterButtonText, privacyLinkText, privacyLinkUrl, privacyConsentText, copyright, attributionText, attributionHref, className, contentClassName, logoWrapperClassName, logoClassName, gridClassName, navSectionClassName, navTitleClassName, navLinksClassName, navLinkClassName, socialColumnClassName, socialLinksClassName, socialLinkClassName, newsletterClassName, newsletterInputClassName, newsletterButtonClassName, privacyClassName, bottomClassName, copyrightClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterSocialNewsletterProps): React.JSX.Element;
127
+ declare function FooterSocialNewsletter({ logo, sections, socialLinks, newsletterLabel, newsletterPlaceholder, newsletterButtonText, privacyLinkText, privacyLinkUrl, privacyConsentText, copyright, attributionText, attributionHref, className, contentClassName, logoWrapperClassName, logoClassName, gridClassName, navSectionClassName, navTitleClassName, navLinksClassName, navLinkClassName, socialColumnClassName, socialLinksClassName, socialLinkClassName, newsletterClassName, newsletterInputClassName, newsletterButtonClassName, privacyClassName, bottomClassName, copyrightClassName, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterSocialNewsletterProps): React.JSX.Element;
124
128
 
125
129
  export { FooterSocialNewsletter, type FooterSocialNewsletterProps, type FooterSocialNewsletterSection };