@opensite/ui 0.8.4 → 0.8.6

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 (107) hide show
  1. package/dist/article-breadcrumb-social.cjs +57 -73
  2. package/dist/article-breadcrumb-social.d.cts +2 -24
  3. package/dist/article-breadcrumb-social.d.ts +2 -24
  4. package/dist/article-breadcrumb-social.js +57 -73
  5. package/dist/article-compact-toc.cjs +1 -1
  6. package/dist/article-compact-toc.js +1 -1
  7. package/dist/article-sidebar-sticky.cjs +73 -26
  8. package/dist/article-sidebar-sticky.js +73 -26
  9. package/dist/blog-horizontal-timeline.cjs +7 -4
  10. package/dist/blog-horizontal-timeline.js +7 -4
  11. package/dist/faq-badge-support.cjs +18 -5
  12. package/dist/faq-badge-support.js +18 -5
  13. package/dist/faq-bordered-badge.cjs +23 -7
  14. package/dist/faq-bordered-badge.js +23 -7
  15. package/dist/faq-card-categories.cjs +20 -4
  16. package/dist/faq-card-categories.js +20 -4
  17. package/dist/faq-categorized-sections.cjs +19 -4
  18. package/dist/faq-categorized-sections.js +19 -4
  19. package/dist/faq-centered-accordion.cjs +18 -5
  20. package/dist/faq-centered-accordion.js +18 -5
  21. package/dist/faq-gradient-categories.cjs +19 -4
  22. package/dist/faq-gradient-categories.js +19 -4
  23. package/dist/faq-icon-benefits.cjs +11 -2
  24. package/dist/faq-icon-benefits.js +11 -2
  25. package/dist/faq-muted-cards.cjs +19 -6
  26. package/dist/faq-muted-cards.js +19 -6
  27. package/dist/faq-numbered-grid.cjs +11 -3
  28. package/dist/faq-numbered-grid.js +11 -3
  29. package/dist/faq-numbered-list.cjs +11 -3
  30. package/dist/faq-numbered-list.js +11 -3
  31. package/dist/faq-profile-sidebar.cjs +57 -20
  32. package/dist/faq-profile-sidebar.js +57 -20
  33. package/dist/faq-rounded-cards.cjs +26 -19
  34. package/dist/faq-rounded-cards.js +26 -19
  35. package/dist/faq-sidebar-navigation.cjs +48 -28
  36. package/dist/faq-sidebar-navigation.js +48 -28
  37. package/dist/faq-simple-accordion.cjs +17 -4
  38. package/dist/faq-simple-accordion.js +17 -4
  39. package/dist/faq-split-help.cjs +25 -6
  40. package/dist/faq-split-help.js +25 -6
  41. package/dist/faq-split-hero.cjs +604 -0
  42. package/dist/faq-split-hero.d.cts +116 -0
  43. package/dist/faq-split-hero.d.ts +116 -0
  44. package/dist/faq-split-hero.js +582 -0
  45. package/dist/faq-static-list.cjs +9 -2
  46. package/dist/faq-static-list.js +9 -2
  47. package/dist/feature-accordion-image.cjs +8 -2
  48. package/dist/feature-accordion-image.js +8 -2
  49. package/dist/feature-badge-grid-six.cjs +1 -1
  50. package/dist/feature-badge-grid-six.js +1 -1
  51. package/dist/feature-card-grid-linked.cjs +92 -22
  52. package/dist/feature-card-grid-linked.js +92 -22
  53. package/dist/feature-carousel-progress.cjs +1 -1
  54. package/dist/feature-carousel-progress.js +1 -1
  55. package/dist/feature-checklist-image.cjs +88 -15
  56. package/dist/feature-checklist-image.js +88 -15
  57. package/dist/feature-checklist-three-column.cjs +1 -1
  58. package/dist/feature-checklist-three-column.js +1 -1
  59. package/dist/feature-icon-grid-accent.cjs +50 -8
  60. package/dist/feature-icon-grid-accent.js +50 -8
  61. package/dist/feature-icon-grid-bordered.cjs +84 -14
  62. package/dist/feature-icon-grid-bordered.js +84 -14
  63. package/dist/feature-icon-tabs-content.cjs +217 -84
  64. package/dist/feature-icon-tabs-content.js +217 -84
  65. package/dist/feature-image-overlay-badge.cjs +106 -33
  66. package/dist/feature-image-overlay-badge.js +106 -33
  67. package/dist/feature-numbered-cards.cjs +154 -35
  68. package/dist/feature-numbered-cards.js +154 -35
  69. package/dist/feature-showcase.cjs +66 -71
  70. package/dist/feature-showcase.d.cts +1 -5
  71. package/dist/feature-showcase.d.ts +1 -5
  72. package/dist/feature-showcase.js +67 -72
  73. package/dist/feature-split-image-reverse.cjs +84 -15
  74. package/dist/feature-split-image-reverse.js +84 -15
  75. package/dist/feature-split-image.cjs +87 -15
  76. package/dist/feature-split-image.js +87 -15
  77. package/dist/feature-stats-highlight.cjs +50 -13
  78. package/dist/feature-stats-highlight.js +50 -13
  79. package/dist/feature-tabbed-content-image.cjs +198 -72
  80. package/dist/feature-tabbed-content-image.js +198 -72
  81. package/dist/feature-three-column-values.cjs +67 -14
  82. package/dist/feature-three-column-values.js +67 -14
  83. package/dist/feature-utility-cards-grid.cjs +83 -36
  84. package/dist/feature-utility-cards-grid.js +83 -36
  85. package/dist/navbar-animated-preview.cjs +8 -2
  86. package/dist/navbar-animated-preview.js +8 -2
  87. package/dist/navbar-centered-menu.cjs +8 -2
  88. package/dist/navbar-centered-menu.js +8 -2
  89. package/dist/navbar-dark-icons.cjs +8 -2
  90. package/dist/navbar-dark-icons.js +8 -2
  91. package/dist/navbar-dropdown-menu.cjs +8 -2
  92. package/dist/navbar-dropdown-menu.js +8 -2
  93. package/dist/navbar-education-platform.cjs +8 -2
  94. package/dist/navbar-education-platform.js +8 -2
  95. package/dist/navbar-enterprise-mega.cjs +8 -2
  96. package/dist/navbar-enterprise-mega.js +8 -2
  97. package/dist/navbar-feature-grid.cjs +8 -2
  98. package/dist/navbar-feature-grid.js +8 -2
  99. package/dist/navbar-multi-column-groups.cjs +8 -2
  100. package/dist/navbar-multi-column-groups.js +8 -2
  101. package/dist/navbar-platform-resources.cjs +8 -2
  102. package/dist/navbar-platform-resources.js +8 -2
  103. package/dist/navbar-sidebar-mobile.cjs +8 -2
  104. package/dist/navbar-sidebar-mobile.js +8 -2
  105. package/dist/registry.cjs +1873 -680
  106. package/dist/registry.js +1873 -680
  107. package/package.json +1 -1
@@ -130,7 +130,7 @@ function AccordionItem({
130
130
  AccordionPrimitive.Item,
131
131
  {
132
132
  "data-slot": "accordion-item",
133
- className: cn("border-b last:border-b-0", className),
133
+ className: cn("border-b ", className),
134
134
  ...props
135
135
  }
136
136
  );
@@ -151,7 +151,13 @@ function AccordionTrigger({
151
151
  ...props,
152
152
  children: [
153
153
  children,
154
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
154
+ /* @__PURE__ */ jsx(
155
+ DynamicIcon,
156
+ {
157
+ name: "lucide/chevron-down",
158
+ className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
159
+ }
160
+ )
155
161
  ]
156
162
  }
157
163
  ) });
@@ -977,7 +983,7 @@ function FaqProfileSidebar({
977
983
  contactText,
978
984
  contactAction,
979
985
  background,
980
- spacing,
986
+ spacing = "py-6 md:py-32",
981
987
  pattern,
982
988
  patternOpacity,
983
989
  patternClassName,
@@ -1030,7 +1036,14 @@ function FaqProfileSidebar({
1030
1036
  },
1031
1037
  item.id
1032
1038
  )) });
1033
- }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
1039
+ }, [
1040
+ itemsSlot,
1041
+ items,
1042
+ accordionClassName,
1043
+ accordionItemClassName,
1044
+ accordionTriggerClassName,
1045
+ accordionContentClassName
1046
+ ]);
1034
1047
  const profileSectionContent = useMemo(() => {
1035
1048
  if (profileSlot) return profileSlot;
1036
1049
  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-6", profileCardClassName), children: [
@@ -1071,22 +1084,46 @@ function FaqProfileSidebar({
1071
1084
  children: profileDescription
1072
1085
  }
1073
1086
  ) : /* @__PURE__ */ jsx("div", { className: profileDescriptionClassName, children: profileDescription })),
1074
- contactAction && /* @__PURE__ */ jsxs("div", { className: cn("mt-6 border-t pt-6", contactSectionClassName), children: [
1075
- contactText && (typeof contactText === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: contactText }) : contactText),
1076
- /* @__PURE__ */ jsx(
1077
- Pressable,
1078
- {
1079
- href: contactAction.href,
1080
- onClick: contactAction.onClick,
1081
- variant: contactAction.variant || "outline",
1082
- size: contactAction.size,
1083
- className: cn("mt-3 w-full", contactAction.className),
1084
- children: contactAction.children || contactAction.label
1085
- }
1086
- )
1087
- ] })
1087
+ contactAction && /* @__PURE__ */ jsxs(
1088
+ "div",
1089
+ {
1090
+ className: cn(
1091
+ "mt-6 border-t pt-6 flex flex-col space-y-4",
1092
+ contactSectionClassName
1093
+ ),
1094
+ children: [
1095
+ contactText && (typeof contactText === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: contactText }) : contactText),
1096
+ /* @__PURE__ */ jsx(
1097
+ Pressable,
1098
+ {
1099
+ href: contactAction.href,
1100
+ onClick: contactAction.onClick,
1101
+ variant: contactAction.variant || "outline",
1102
+ size: contactAction.size,
1103
+ className: cn("mt-3 w-full", contactAction.className),
1104
+ children: contactAction.children || contactAction.label
1105
+ }
1106
+ )
1107
+ ]
1108
+ }
1109
+ )
1088
1110
  ] });
1089
- }, [profileSlot, profileImage, profileName, profileRole, profileDescription, contactText, contactAction, profileCardClassName, profileImageClassName, profileNameClassName, profileRoleClassName, profileDescriptionClassName, contactSectionClassName, optixFlowConfig]);
1111
+ }, [
1112
+ profileSlot,
1113
+ profileImage,
1114
+ profileName,
1115
+ profileRole,
1116
+ profileDescription,
1117
+ contactText,
1118
+ contactAction,
1119
+ profileCardClassName,
1120
+ profileImageClassName,
1121
+ profileNameClassName,
1122
+ profileRoleClassName,
1123
+ profileDescriptionClassName,
1124
+ contactSectionClassName,
1125
+ optixFlowConfig
1126
+ ]);
1090
1127
  return /* @__PURE__ */ jsx(
1091
1128
  Section,
1092
1129
  {
@@ -1100,7 +1137,7 @@ function FaqProfileSidebar({
1100
1137
  "div",
1101
1138
  {
1102
1139
  className: cn(
1103
- "flex flex-col gap-10 lg:flex-row lg:gap-16",
1140
+ "flex flex-col gap-6 lg:flex-row lg:gap-16",
1104
1141
  contentWrapperClassName
1105
1142
  ),
1106
1143
  children: [
@@ -150,7 +150,7 @@ function AccordionItem({
150
150
  AccordionPrimitive__namespace.Item,
151
151
  {
152
152
  "data-slot": "accordion-item",
153
- className: cn("border-b last:border-b-0", className),
153
+ className: cn("border-b ", className),
154
154
  ...props
155
155
  }
156
156
  );
@@ -171,7 +171,13 @@ function AccordionTrigger({
171
171
  ...props,
172
172
  children: [
173
173
  children,
174
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
174
+ /* @__PURE__ */ jsxRuntime.jsx(
175
+ DynamicIcon,
176
+ {
177
+ name: "lucide/chevron-down",
178
+ className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
179
+ }
180
+ )
175
181
  ]
176
182
  }
177
183
  ) });
@@ -572,7 +578,7 @@ function FaqRoundedCards({
572
578
  items,
573
579
  itemsSlot,
574
580
  background,
575
- spacing,
581
+ spacing = "py-6 md:py-32",
576
582
  pattern,
577
583
  patternOpacity,
578
584
  patternClassName,
@@ -595,13 +601,13 @@ function FaqRoundedCards({
595
601
  {
596
602
  type: "single",
597
603
  collapsible: true,
598
- className: cn("space-y-4", accordionClassName),
604
+ className: cn("space-y-3", accordionClassName),
599
605
  children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
600
606
  AccordionItem,
601
607
  {
602
608
  value: item.id,
603
609
  className: cn(
604
- "rounded-lg bg-background px-4 border-none",
610
+ "rounded-xl border border-border/60 bg-card px-5 shadow-sm transition-shadow hover:shadow-md data-[state=open]:shadow-md",
605
611
  accordionItemClassName
606
612
  ),
607
613
  children: [
@@ -609,7 +615,7 @@ function FaqRoundedCards({
609
615
  AccordionTrigger,
610
616
  {
611
617
  className: cn(
612
- "font-semibold hover:no-underline",
618
+ "py-4 font-medium transition-opacity hover:no-underline hover:opacity-70 lg:text-lg [&[data-state=open]>svg]:rotate-180",
613
619
  accordionTriggerClassName
614
620
  ),
615
621
  children: item.question
@@ -618,7 +624,10 @@ function FaqRoundedCards({
618
624
  /* @__PURE__ */ jsxRuntime.jsx(
619
625
  AccordionContent,
620
626
  {
621
- className: cn("text-muted-foreground", accordionContentClassName),
627
+ className: cn(
628
+ "pb-4 text-muted-foreground",
629
+ accordionContentClassName
630
+ ),
622
631
  children: item.answer
623
632
  }
624
633
  )
@@ -628,7 +637,14 @@ function FaqRoundedCards({
628
637
  ))
629
638
  }
630
639
  );
631
- }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
640
+ }, [
641
+ itemsSlot,
642
+ items,
643
+ accordionClassName,
644
+ accordionItemClassName,
645
+ accordionTriggerClassName,
646
+ accordionContentClassName
647
+ ]);
632
648
  return /* @__PURE__ */ jsxRuntime.jsx(
633
649
  Section,
634
650
  {
@@ -657,16 +673,7 @@ function FaqRoundedCards({
657
673
  children: heading
658
674
  }
659
675
  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
660
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
661
- "p",
662
- {
663
- className: cn(
664
- "text-muted-foreground lg:text-lg",
665
- descriptionClassName
666
- ),
667
- children: description
668
- }
669
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
676
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
670
677
  ]
671
678
  }
672
679
  ),
@@ -674,7 +681,7 @@ function FaqRoundedCards({
674
681
  "div",
675
682
  {
676
683
  className: cn(
677
- "mx-auto mt-10 max-w-3xl rounded-2xl bg-muted/50 p-6 md:p-8",
684
+ "mx-auto mt-10 max-w-3xl",
678
685
  cardsWrapperClassName
679
686
  ),
680
687
  children: itemsContent
@@ -128,7 +128,7 @@ function AccordionItem({
128
128
  AccordionPrimitive.Item,
129
129
  {
130
130
  "data-slot": "accordion-item",
131
- className: cn("border-b last:border-b-0", className),
131
+ className: cn("border-b ", className),
132
132
  ...props
133
133
  }
134
134
  );
@@ -149,7 +149,13 @@ function AccordionTrigger({
149
149
  ...props,
150
150
  children: [
151
151
  children,
152
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
152
+ /* @__PURE__ */ jsx(
153
+ DynamicIcon,
154
+ {
155
+ name: "lucide/chevron-down",
156
+ className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
157
+ }
158
+ )
153
159
  ]
154
160
  }
155
161
  ) });
@@ -550,7 +556,7 @@ function FaqRoundedCards({
550
556
  items,
551
557
  itemsSlot,
552
558
  background,
553
- spacing,
559
+ spacing = "py-6 md:py-32",
554
560
  pattern,
555
561
  patternOpacity,
556
562
  patternClassName,
@@ -573,13 +579,13 @@ function FaqRoundedCards({
573
579
  {
574
580
  type: "single",
575
581
  collapsible: true,
576
- className: cn("space-y-4", accordionClassName),
582
+ className: cn("space-y-3", accordionClassName),
577
583
  children: items.map((item) => /* @__PURE__ */ jsxs(
578
584
  AccordionItem,
579
585
  {
580
586
  value: item.id,
581
587
  className: cn(
582
- "rounded-lg bg-background px-4 border-none",
588
+ "rounded-xl border border-border/60 bg-card px-5 shadow-sm transition-shadow hover:shadow-md data-[state=open]:shadow-md",
583
589
  accordionItemClassName
584
590
  ),
585
591
  children: [
@@ -587,7 +593,7 @@ function FaqRoundedCards({
587
593
  AccordionTrigger,
588
594
  {
589
595
  className: cn(
590
- "font-semibold hover:no-underline",
596
+ "py-4 font-medium transition-opacity hover:no-underline hover:opacity-70 lg:text-lg [&[data-state=open]>svg]:rotate-180",
591
597
  accordionTriggerClassName
592
598
  ),
593
599
  children: item.question
@@ -596,7 +602,10 @@ function FaqRoundedCards({
596
602
  /* @__PURE__ */ jsx(
597
603
  AccordionContent,
598
604
  {
599
- className: cn("text-muted-foreground", accordionContentClassName),
605
+ className: cn(
606
+ "pb-4 text-muted-foreground",
607
+ accordionContentClassName
608
+ ),
600
609
  children: item.answer
601
610
  }
602
611
  )
@@ -606,7 +615,14 @@ function FaqRoundedCards({
606
615
  ))
607
616
  }
608
617
  );
609
- }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
618
+ }, [
619
+ itemsSlot,
620
+ items,
621
+ accordionClassName,
622
+ accordionItemClassName,
623
+ accordionTriggerClassName,
624
+ accordionContentClassName
625
+ ]);
610
626
  return /* @__PURE__ */ jsx(
611
627
  Section,
612
628
  {
@@ -635,16 +651,7 @@ function FaqRoundedCards({
635
651
  children: heading
636
652
  }
637
653
  ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
638
- description && (typeof description === "string" ? /* @__PURE__ */ jsx(
639
- "p",
640
- {
641
- className: cn(
642
- "text-muted-foreground lg:text-lg",
643
- descriptionClassName
644
- ),
645
- children: description
646
- }
647
- ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
654
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
648
655
  ]
649
656
  }
650
657
  ),
@@ -652,7 +659,7 @@ function FaqRoundedCards({
652
659
  "div",
653
660
  {
654
661
  className: cn(
655
- "mx-auto mt-10 max-w-3xl rounded-2xl bg-muted/50 p-6 md:p-8",
662
+ "mx-auto mt-10 max-w-3xl",
656
663
  cardsWrapperClassName
657
664
  ),
658
665
  children: itemsContent
@@ -150,7 +150,7 @@ function AccordionItem({
150
150
  AccordionPrimitive__namespace.Item,
151
151
  {
152
152
  "data-slot": "accordion-item",
153
- className: cn("border-b last:border-b-0", className),
153
+ className: cn("border-b ", className),
154
154
  ...props
155
155
  }
156
156
  );
@@ -171,7 +171,13 @@ function AccordionTrigger({
171
171
  ...props,
172
172
  children: [
173
173
  children,
174
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
174
+ /* @__PURE__ */ jsxRuntime.jsx(
175
+ DynamicIcon,
176
+ {
177
+ name: "lucide/chevron-down",
178
+ className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
179
+ }
180
+ )
175
181
  ]
176
182
  }
177
183
  ) });
@@ -593,19 +599,17 @@ function FaqSidebarNavigation({
593
599
  accordionContentClassName
594
600
  }) {
595
601
  const [activeCategory, setActiveCategory] = React__namespace.useState(
596
- categories?.[0]?.id || ""
602
+ categories && categories.length > 1 ? "all" : categories?.[0]?.id || ""
597
603
  );
598
- const scrollToCategory = (categoryId) => {
599
- setActiveCategory(categoryId);
600
- const element = document.getElementById(`faq-category-${categoryId}`);
601
- if (element) {
602
- element.scrollIntoView({ behavior: "smooth", block: "start" });
603
- }
604
- };
604
+ const filteredCategories = React.useMemo(() => {
605
+ if (!categories || categories.length === 0) return [];
606
+ if (activeCategory === "all") return categories;
607
+ return categories.filter((category) => category.id === activeCategory);
608
+ }, [categories, activeCategory]);
605
609
  const categoriesContent = React.useMemo(() => {
606
610
  if (categoriesSlot) return categoriesSlot;
607
- if (!categories || categories.length === 0) return null;
608
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(
611
+ if (filteredCategories.length === 0) return null;
612
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: filteredCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(
609
613
  "div",
610
614
  {
611
615
  id: `faq-category-${category.id}`,
@@ -652,7 +656,7 @@ function FaqSidebarNavigation({
652
656
  },
653
657
  category.id
654
658
  )) });
655
- }, [categoriesSlot, categories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
659
+ }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
656
660
  return /* @__PURE__ */ jsxRuntime.jsx(
657
661
  Section,
658
662
  {
@@ -702,21 +706,37 @@ function FaqSidebarNavigation({
702
706
  contentWrapperClassName
703
707
  ),
704
708
  children: [
705
- /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-24 space-y-2", children: categories?.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
706
- "button",
707
- {
708
- onClick: () => scrollToCategory(category.id),
709
- className: cn(
710
- "w-full rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors",
711
- activeCategory === category.id ? cn(
712
- "bg-primary text-primary-foreground",
713
- navButtonActiveClassName
714
- ) : cn("hover:bg-muted", navButtonClassName)
715
- ),
716
- children: category.title
717
- },
718
- category.id
719
- )) }) }),
709
+ /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 flex gap-2 overflow-x-auto pb-2 lg:flex-col lg:gap-2 lg:overflow-visible lg:pb-0", children: [
710
+ categories && categories.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
711
+ "button",
712
+ {
713
+ onClick: () => setActiveCategory("all"),
714
+ className: cn(
715
+ "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
716
+ activeCategory === "all" ? cn(
717
+ "bg-primary text-primary-foreground",
718
+ navButtonActiveClassName
719
+ ) : cn("hover:bg-muted", navButtonClassName)
720
+ ),
721
+ children: "All"
722
+ }
723
+ ),
724
+ categories?.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
725
+ "button",
726
+ {
727
+ onClick: () => setActiveCategory(category.id),
728
+ className: cn(
729
+ "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
730
+ activeCategory === category.id ? cn(
731
+ "bg-primary text-primary-foreground",
732
+ navButtonActiveClassName
733
+ ) : cn("hover:bg-muted", navButtonClassName)
734
+ ),
735
+ children: category.title
736
+ },
737
+ category.id
738
+ ))
739
+ ] }) }),
720
740
  categoriesContent
721
741
  ]
722
742
  }
@@ -128,7 +128,7 @@ function AccordionItem({
128
128
  AccordionPrimitive.Item,
129
129
  {
130
130
  "data-slot": "accordion-item",
131
- className: cn("border-b last:border-b-0", className),
131
+ className: cn("border-b ", className),
132
132
  ...props
133
133
  }
134
134
  );
@@ -149,7 +149,13 @@ function AccordionTrigger({
149
149
  ...props,
150
150
  children: [
151
151
  children,
152
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
152
+ /* @__PURE__ */ jsx(
153
+ DynamicIcon,
154
+ {
155
+ name: "lucide/chevron-down",
156
+ className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
157
+ }
158
+ )
153
159
  ]
154
160
  }
155
161
  ) });
@@ -571,19 +577,17 @@ function FaqSidebarNavigation({
571
577
  accordionContentClassName
572
578
  }) {
573
579
  const [activeCategory, setActiveCategory] = React.useState(
574
- categories?.[0]?.id || ""
580
+ categories && categories.length > 1 ? "all" : categories?.[0]?.id || ""
575
581
  );
576
- const scrollToCategory = (categoryId) => {
577
- setActiveCategory(categoryId);
578
- const element = document.getElementById(`faq-category-${categoryId}`);
579
- if (element) {
580
- element.scrollIntoView({ behavior: "smooth", block: "start" });
581
- }
582
- };
582
+ const filteredCategories = useMemo(() => {
583
+ if (!categories || categories.length === 0) return [];
584
+ if (activeCategory === "all") return categories;
585
+ return categories.filter((category) => category.id === activeCategory);
586
+ }, [categories, activeCategory]);
583
587
  const categoriesContent = useMemo(() => {
584
588
  if (categoriesSlot) return categoriesSlot;
585
- if (!categories || categories.length === 0) return null;
586
- return /* @__PURE__ */ jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: categories.map((category) => /* @__PURE__ */ jsxs(
589
+ if (filteredCategories.length === 0) return null;
590
+ return /* @__PURE__ */ jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: filteredCategories.map((category) => /* @__PURE__ */ jsxs(
587
591
  "div",
588
592
  {
589
593
  id: `faq-category-${category.id}`,
@@ -630,7 +634,7 @@ function FaqSidebarNavigation({
630
634
  },
631
635
  category.id
632
636
  )) });
633
- }, [categoriesSlot, categories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
637
+ }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
634
638
  return /* @__PURE__ */ jsx(
635
639
  Section,
636
640
  {
@@ -680,21 +684,37 @@ function FaqSidebarNavigation({
680
684
  contentWrapperClassName
681
685
  ),
682
686
  children: [
683
- /* @__PURE__ */ jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsx("div", { className: "sticky top-24 space-y-2", children: categories?.map((category) => /* @__PURE__ */ jsx(
684
- "button",
685
- {
686
- onClick: () => scrollToCategory(category.id),
687
- className: cn(
688
- "w-full rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors",
689
- activeCategory === category.id ? cn(
690
- "bg-primary text-primary-foreground",
691
- navButtonActiveClassName
692
- ) : cn("hover:bg-muted", navButtonClassName)
693
- ),
694
- children: category.title
695
- },
696
- category.id
697
- )) }) }),
687
+ /* @__PURE__ */ jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-24 flex gap-2 overflow-x-auto pb-2 lg:flex-col lg:gap-2 lg:overflow-visible lg:pb-0", children: [
688
+ categories && categories.length > 1 && /* @__PURE__ */ jsx(
689
+ "button",
690
+ {
691
+ onClick: () => setActiveCategory("all"),
692
+ className: cn(
693
+ "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
694
+ activeCategory === "all" ? cn(
695
+ "bg-primary text-primary-foreground",
696
+ navButtonActiveClassName
697
+ ) : cn("hover:bg-muted", navButtonClassName)
698
+ ),
699
+ children: "All"
700
+ }
701
+ ),
702
+ categories?.map((category) => /* @__PURE__ */ jsx(
703
+ "button",
704
+ {
705
+ onClick: () => setActiveCategory(category.id),
706
+ className: cn(
707
+ "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
708
+ activeCategory === category.id ? cn(
709
+ "bg-primary text-primary-foreground",
710
+ navButtonActiveClassName
711
+ ) : cn("hover:bg-muted", navButtonClassName)
712
+ ),
713
+ children: category.title
714
+ },
715
+ category.id
716
+ ))
717
+ ] }) }),
698
718
  categoriesContent
699
719
  ]
700
720
  }
@@ -150,7 +150,7 @@ function AccordionItem({
150
150
  AccordionPrimitive__namespace.Item,
151
151
  {
152
152
  "data-slot": "accordion-item",
153
- className: cn("border-b last:border-b-0", className),
153
+ className: cn("border-b ", className),
154
154
  ...props
155
155
  }
156
156
  );
@@ -171,7 +171,13 @@ function AccordionTrigger({
171
171
  ...props,
172
172
  children: [
173
173
  children,
174
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
174
+ /* @__PURE__ */ jsxRuntime.jsx(
175
+ DynamicIcon,
176
+ {
177
+ name: "lucide/chevron-down",
178
+ className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
179
+ }
180
+ )
175
181
  ]
176
182
  }
177
183
  ) });
@@ -571,7 +577,7 @@ function FaqSimpleAccordion({
571
577
  items,
572
578
  itemsSlot,
573
579
  background,
574
- spacing,
580
+ spacing = "py-6 md:py-32",
575
581
  pattern,
576
582
  patternOpacity,
577
583
  patternClassName,
@@ -613,7 +619,14 @@ function FaqSimpleAccordion({
613
619
  },
614
620
  item.id || index
615
621
  )) });
616
- }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
622
+ }, [
623
+ itemsSlot,
624
+ items,
625
+ accordionClassName,
626
+ accordionItemClassName,
627
+ accordionTriggerClassName,
628
+ accordionContentClassName
629
+ ]);
617
630
  return /* @__PURE__ */ jsxRuntime.jsx(
618
631
  Section,
619
632
  {
@@ -128,7 +128,7 @@ function AccordionItem({
128
128
  AccordionPrimitive.Item,
129
129
  {
130
130
  "data-slot": "accordion-item",
131
- className: cn("border-b last:border-b-0", className),
131
+ className: cn("border-b ", className),
132
132
  ...props
133
133
  }
134
134
  );
@@ -149,7 +149,13 @@ function AccordionTrigger({
149
149
  ...props,
150
150
  children: [
151
151
  children,
152
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
152
+ /* @__PURE__ */ jsx(
153
+ DynamicIcon,
154
+ {
155
+ name: "lucide/chevron-down",
156
+ className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
157
+ }
158
+ )
153
159
  ]
154
160
  }
155
161
  ) });
@@ -549,7 +555,7 @@ function FaqSimpleAccordion({
549
555
  items,
550
556
  itemsSlot,
551
557
  background,
552
- spacing,
558
+ spacing = "py-6 md:py-32",
553
559
  pattern,
554
560
  patternOpacity,
555
561
  patternClassName,
@@ -591,7 +597,14 @@ function FaqSimpleAccordion({
591
597
  },
592
598
  item.id || index
593
599
  )) });
594
- }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
600
+ }, [
601
+ itemsSlot,
602
+ items,
603
+ accordionClassName,
604
+ accordionItemClassName,
605
+ accordionTriggerClassName,
606
+ accordionContentClassName
607
+ ]);
595
608
  return /* @__PURE__ */ jsx(
596
609
  Section,
597
610
  {