@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
@@ -12,36 +12,6 @@ import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
12
12
  function cn(...inputs) {
13
13
  return twMerge(clsx(inputs));
14
14
  }
15
- function getNestedCardBg(parentBg, variant = "muted", options) {
16
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
17
- if (isDark) {
18
- switch (variant) {
19
- case "muted":
20
- return "bg-background";
21
- case "card":
22
- return "bg-card";
23
- case "accent":
24
- return "bg-accent";
25
- case "subtle":
26
- return "bg-background/50";
27
- }
28
- } else {
29
- switch (variant) {
30
- case "muted":
31
- return "bg-muted";
32
- case "card":
33
- return "bg-card";
34
- case "accent":
35
- return "bg-accent";
36
- case "subtle":
37
- return "bg-muted/50";
38
- }
39
- }
40
- }
41
- function getNestedCardTextColor(parentBg, options) {
42
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
43
- return isDark ? "text-foreground" : "";
44
- }
45
15
  function normalizePhoneNumber(input) {
46
16
  const trimmed = input.trim();
47
17
  if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1022,6 +992,24 @@ var platformIconMap = {
1022
992
  spotify: "cib/spotify",
1023
993
  apple: "cib/apple",
1024
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",
1025
1013
  unknown: "icon-park-solid/circular-connection"
1026
1014
  };
1027
1015
  var SocialLinkIcon = React.forwardRef(
@@ -1103,7 +1091,8 @@ function FooterSocialNewsletter({
1103
1091
  bottomClassName,
1104
1092
  copyrightClassName,
1105
1093
  background,
1106
- spacing,
1094
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
1095
+ spacing = "py-6 md:py-32",
1107
1096
  pattern,
1108
1097
  patternOpacity,
1109
1098
  optixFlowConfig
@@ -1118,88 +1107,150 @@ function FooterSocialNewsletter({
1118
1107
  pattern,
1119
1108
  patternOpacity,
1120
1109
  className: cn(className),
1110
+ containerClassName,
1121
1111
  children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxs("footer", { children: [
1122
1112
  logo && /* @__PURE__ */ jsx(
1123
1113
  FooterLogo,
1124
1114
  {
1125
1115
  logo,
1126
- logoClassName: cn("flex items-center gap-2", logoWrapperClassName),
1116
+ logoClassName: cn(
1117
+ "flex items-center gap-2",
1118
+ logoWrapperClassName
1119
+ ),
1127
1120
  logoImageClassName: cn("h-10", logoClassName),
1128
1121
  optixFlowConfig
1129
1122
  }
1130
1123
  ),
1131
- (sections && sections.length > 0 || socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-4", gridClassName), children: [
1132
- sections && sections.length > 0 && sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
1133
- /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
1134
- /* @__PURE__ */ jsx("ul", { className: cn("space-y-4 text-muted-foreground", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
1135
- "li",
1136
- {
1137
- className: cn("font-medium hover:text-primary", navLinkClassName),
1138
- children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name })
1139
- },
1140
- linkIdx
1141
- )) })
1142
- ] }, sectionIdx)),
1143
- (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1", socialColumnClassName), children: [
1144
- socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: cn("mb-10 flex items-center gap-2 text-muted-foreground", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsx(
1145
- SocialLinkIcon,
1146
- {
1147
- href: social.href,
1148
- label: social.label,
1149
- iconNameOverride: social.iconNameOverride,
1150
- iconSize: 24,
1151
- className: cn(
1152
- "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
1153
- getNestedCardBg(background),
1154
- getNestedCardTextColor(background),
1155
- socialLinkClassName
1156
- )
1157
- }
1158
- ) }, idx)) }),
1159
- (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("grid w-full max-w-sm items-center gap-1.5", newsletterClassName), children: [
1160
- newsletterLabel && /* @__PURE__ */ jsx("label", { htmlFor: "newsletter-email", className: "text-sm font-medium", children: newsletterLabel }),
1161
- /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
1162
- /* @__PURE__ */ jsx(
1163
- "input",
1124
+ sections && sections.length > 0 ? /* @__PURE__ */ jsx(
1125
+ "div",
1126
+ {
1127
+ className: cn(
1128
+ "mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-4",
1129
+ gridClassName
1130
+ ),
1131
+ children: sections && sections.length > 0 && sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
1132
+ /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
1133
+ /* @__PURE__ */ jsx("ul", { className: cn("space-y-4", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
1134
+ "li",
1135
+ {
1136
+ className: cn("font-medium", navLinkClassName),
1137
+ children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name })
1138
+ },
1139
+ linkIdx
1140
+ )) })
1141
+ ] }, sectionIdx))
1142
+ }
1143
+ ) : null,
1144
+ (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1"), children: [
1145
+ (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs(
1146
+ "div",
1147
+ {
1148
+ className: cn(
1149
+ "grid w-full max-w-sm items-center gap-1.5",
1150
+ newsletterClassName
1151
+ ),
1152
+ children: [
1153
+ newsletterLabel && /* @__PURE__ */ jsx(
1154
+ "label",
1164
1155
  {
1165
- type: "email",
1166
- id: "newsletter-email",
1167
- placeholder: newsletterPlaceholder || "Email",
1168
- 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)
1156
+ htmlFor: "newsletter-email",
1157
+ className: "text-sm font-medium",
1158
+ children: newsletterLabel
1169
1159
  }
1170
1160
  ),
1171
- newsletterButtonText && /* @__PURE__ */ jsx(
1172
- Pressable,
1173
- {
1174
- onClick: (e) => {
1175
- e.preventDefault();
1176
- },
1177
- variant: "default",
1178
- size: "default",
1179
- asButton: true,
1180
- className: cn(newsletterButtonClassName),
1181
- children: newsletterButtonText
1182
- }
1183
- )
1184
- ] }),
1185
- (privacyConsentText || privacyLinkText) && /* @__PURE__ */ jsxs("p", { className: cn("mt-1 text-xs text-muted-foreground", privacyClassName), children: [
1186
- privacyConsentText,
1187
- privacyLinkText && /* @__PURE__ */ jsx(Pressable, { href: privacyLinkUrl || "#", className: "ml-1 text-primary hover:underline", children: privacyLinkText })
1188
- ] })
1189
- ] })
1190
- ] })
1191
- ] }),
1192
- /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
1193
- /* @__PURE__ */ jsx("p", { children: copyrightText }),
1194
- attributionText && /* @__PURE__ */ jsx(
1195
- Pressable,
1161
+ /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
1162
+ /* @__PURE__ */ jsx(
1163
+ "input",
1164
+ {
1165
+ type: "email",
1166
+ id: "newsletter-email",
1167
+ placeholder: newsletterPlaceholder || "Email",
1168
+ className: cn(
1169
+ "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",
1170
+ newsletterInputClassName
1171
+ )
1172
+ }
1173
+ ),
1174
+ newsletterButtonText && /* @__PURE__ */ jsx(
1175
+ Pressable,
1176
+ {
1177
+ onClick: (e) => {
1178
+ e.preventDefault();
1179
+ },
1180
+ variant: "default",
1181
+ size: "default",
1182
+ asButton: true,
1183
+ className: cn(newsletterButtonClassName),
1184
+ children: newsletterButtonText
1185
+ }
1186
+ )
1187
+ ] }),
1188
+ (privacyConsentText || privacyLinkText) && /* @__PURE__ */ jsxs("p", { className: cn("mt-1 text-xs ", privacyClassName), children: [
1189
+ privacyConsentText,
1190
+ privacyLinkText && /* @__PURE__ */ jsx(
1191
+ Pressable,
1192
+ {
1193
+ href: privacyLinkUrl || "#",
1194
+ className: "ml-1 hover:underline",
1195
+ children: privacyLinkText
1196
+ }
1197
+ )
1198
+ ] })
1199
+ ]
1200
+ }
1201
+ ),
1202
+ socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("", socialColumnClassName), children: /* @__PURE__ */ jsx(
1203
+ "ul",
1196
1204
  {
1197
- href: attributionHref || "https://opensite.ai",
1198
- className: "hover:text-primary",
1199
- children: attributionText
1205
+ className: cn(
1206
+ "mb-10 flex items-center gap-2",
1207
+ socialLinksClassName
1208
+ ),
1209
+ children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsx(
1210
+ SocialLinkIcon,
1211
+ {
1212
+ href: social.href,
1213
+ label: social.label,
1214
+ iconNameOverride: social.iconNameOverride,
1215
+ iconSize: 24,
1216
+ className: cn(
1217
+ "flex size-12 items-center justify-center rounded-full transition-colors",
1218
+ socialLinkClassName
1219
+ )
1220
+ }
1221
+ ) }, idx))
1200
1222
  }
1201
- )
1202
- ] }) })
1223
+ ) })
1224
+ ] }),
1225
+ /* @__PURE__ */ jsx(
1226
+ "div",
1227
+ {
1228
+ className: cn(
1229
+ "mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium md:flex-row md:items-center",
1230
+ bottomClassName
1231
+ ),
1232
+ children: /* @__PURE__ */ jsxs(
1233
+ "div",
1234
+ {
1235
+ className: cn(
1236
+ "flex flex-col gap-2 md:flex-row md:items-center md:gap-4",
1237
+ copyrightClassName
1238
+ ),
1239
+ children: [
1240
+ /* @__PURE__ */ jsx("p", { children: copyrightText }),
1241
+ attributionText && /* @__PURE__ */ jsx(
1242
+ Pressable,
1243
+ {
1244
+ href: attributionHref || "https://opensite.ai",
1245
+ className: "hover:text-primary",
1246
+ children: attributionText
1247
+ }
1248
+ )
1249
+ ]
1250
+ }
1251
+ )
1252
+ }
1253
+ )
1203
1254
  ] }) })
1204
1255
  }
1205
1256
  );
@@ -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(