@opensite/ui 0.8.4 → 0.8.5

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 (51) 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-split-hero.cjs +704 -0
  12. package/dist/faq-split-hero.d.cts +118 -0
  13. package/dist/faq-split-hero.d.ts +118 -0
  14. package/dist/faq-split-hero.js +682 -0
  15. package/dist/feature-badge-grid-six.cjs +1 -1
  16. package/dist/feature-badge-grid-six.js +1 -1
  17. package/dist/feature-card-grid-linked.cjs +92 -22
  18. package/dist/feature-card-grid-linked.js +92 -22
  19. package/dist/feature-carousel-progress.cjs +1 -1
  20. package/dist/feature-carousel-progress.js +1 -1
  21. package/dist/feature-checklist-image.cjs +88 -15
  22. package/dist/feature-checklist-image.js +88 -15
  23. package/dist/feature-checklist-three-column.cjs +1 -1
  24. package/dist/feature-checklist-three-column.js +1 -1
  25. package/dist/feature-icon-grid-accent.cjs +50 -8
  26. package/dist/feature-icon-grid-accent.js +50 -8
  27. package/dist/feature-icon-grid-bordered.cjs +84 -14
  28. package/dist/feature-icon-grid-bordered.js +84 -14
  29. package/dist/feature-icon-tabs-content.cjs +217 -84
  30. package/dist/feature-icon-tabs-content.js +217 -84
  31. package/dist/feature-image-overlay-badge.cjs +106 -33
  32. package/dist/feature-image-overlay-badge.js +106 -33
  33. package/dist/feature-numbered-cards.cjs +154 -35
  34. package/dist/feature-numbered-cards.js +154 -35
  35. package/dist/feature-showcase.cjs +67 -71
  36. package/dist/feature-showcase.d.cts +1 -5
  37. package/dist/feature-showcase.d.ts +1 -5
  38. package/dist/feature-showcase.js +68 -72
  39. package/dist/feature-split-image-reverse.cjs +90 -15
  40. package/dist/feature-split-image-reverse.js +90 -15
  41. package/dist/feature-split-image.cjs +87 -15
  42. package/dist/feature-split-image.js +87 -15
  43. package/dist/feature-stats-highlight.cjs +2 -2
  44. package/dist/feature-stats-highlight.js +2 -2
  45. package/dist/feature-tabbed-content-image.cjs +207 -72
  46. package/dist/feature-tabbed-content-image.js +207 -72
  47. package/dist/feature-three-column-values.cjs +107 -14
  48. package/dist/feature-three-column-values.js +107 -14
  49. package/dist/registry.cjs +1460 -461
  50. package/dist/registry.js +1460 -461
  51. package/package.json +1 -1
@@ -822,7 +822,7 @@ function FeatureSplitImageReverse({
822
822
  actionsClassName,
823
823
  optixFlowConfig,
824
824
  background,
825
- spacing,
825
+ spacing = "py-6 md:py-32",
826
826
  pattern,
827
827
  patternOpacity,
828
828
  patternClassName
@@ -839,11 +839,20 @@ function FeatureSplitImageReverse({
839
839
  className: actionClassName,
840
840
  ...pressableProps
841
841
  } = action;
842
- return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
843
- icon,
844
- label,
845
- iconAfter
846
- ] }) }, index);
842
+ return /* @__PURE__ */ jsx(
843
+ Pressable,
844
+ {
845
+ className: actionClassName,
846
+ asButton: true,
847
+ ...pressableProps,
848
+ children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
849
+ icon,
850
+ label,
851
+ iconAfter
852
+ ] })
853
+ },
854
+ index
855
+ );
847
856
  });
848
857
  }, [actionsSlot, actions]);
849
858
  const imageContent = useMemo(() => {
@@ -854,7 +863,10 @@ function FeatureSplitImageReverse({
854
863
  {
855
864
  src: imageSrc,
856
865
  alt: imageAlt || "",
857
- className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
866
+ className: cn(
867
+ "max-h-96 w-full rounded-md object-cover",
868
+ imageClassName
869
+ ),
858
870
  loading: "lazy",
859
871
  optixFlowConfig
860
872
  }
@@ -870,14 +882,77 @@ function FeatureSplitImageReverse({
870
882
  patternClassName,
871
883
  className,
872
884
  containerClassName,
873
- children: /* @__PURE__ */ jsxs("div", { className: cn("grid items-center gap-8 md:gap-16 lg:grid-cols-2", gridClassName), children: [
874
- imageContent,
875
- /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
876
- title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
877
- description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
878
- (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
879
- ] })
880
- ] })
885
+ children: /* @__PURE__ */ jsxs(
886
+ "div",
887
+ {
888
+ className: cn(
889
+ "grid items-center gap-8 md:gap-16 lg:grid-cols-2",
890
+ gridClassName
891
+ ),
892
+ children: [
893
+ imageContent,
894
+ /* @__PURE__ */ jsxs(
895
+ "div",
896
+ {
897
+ className: cn(
898
+ "flex flex-col items-center text-center lg:items-start lg:text-left",
899
+ contentClassName
900
+ ),
901
+ children: [
902
+ title && (typeof title === "string" ? /* @__PURE__ */ jsx(
903
+ "h2",
904
+ {
905
+ className: cn(
906
+ "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
907
+ titleClassName
908
+ ),
909
+ children: title
910
+ }
911
+ ) : /* @__PURE__ */ jsx(
912
+ "div",
913
+ {
914
+ className: cn(
915
+ "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
916
+ titleClassName
917
+ ),
918
+ children: title
919
+ }
920
+ )),
921
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
922
+ "p",
923
+ {
924
+ className: cn(
925
+ "mb-8 max-w-xl text-muted-foreground lg:text-lg",
926
+ descriptionClassName
927
+ ),
928
+ children: description
929
+ }
930
+ ) : /* @__PURE__ */ jsx(
931
+ "div",
932
+ {
933
+ className: cn(
934
+ "mb-8 max-w-xl text-muted-foreground lg:text-lg",
935
+ descriptionClassName
936
+ ),
937
+ children: description
938
+ }
939
+ )),
940
+ (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
941
+ "div",
942
+ {
943
+ className: cn(
944
+ "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start",
945
+ actionsClassName
946
+ ),
947
+ children: actionsContent
948
+ }
949
+ )
950
+ ]
951
+ }
952
+ )
953
+ ]
954
+ }
955
+ )
881
956
  }
882
957
  );
883
958
  }
@@ -843,7 +843,7 @@ function FeatureSplitImage({
843
843
  imageClassName,
844
844
  optixFlowConfig,
845
845
  background,
846
- spacing,
846
+ spacing = "py-6 md:py-32",
847
847
  pattern,
848
848
  patternOpacity,
849
849
  patternClassName
@@ -860,11 +860,20 @@ function FeatureSplitImage({
860
860
  className: actionClassName,
861
861
  ...pressableProps
862
862
  } = action;
863
- return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
864
- icon,
865
- label,
866
- iconAfter
867
- ] }) }, index);
863
+ return /* @__PURE__ */ jsxRuntime.jsx(
864
+ Pressable,
865
+ {
866
+ className: actionClassName,
867
+ asButton: true,
868
+ ...pressableProps,
869
+ children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
870
+ icon,
871
+ label,
872
+ iconAfter
873
+ ] })
874
+ },
875
+ index
876
+ );
868
877
  });
869
878
  }, [actionsSlot, actions]);
870
879
  const imageContent = React.useMemo(() => {
@@ -875,7 +884,10 @@ function FeatureSplitImage({
875
884
  {
876
885
  src: imageSrc,
877
886
  alt: imageAlt || "",
878
- className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
887
+ className: cn(
888
+ "max-h-96 w-full rounded-md object-cover",
889
+ imageClassName
890
+ ),
879
891
  loading: "lazy",
880
892
  optixFlowConfig
881
893
  }
@@ -891,14 +903,74 @@ function FeatureSplitImage({
891
903
  patternClassName,
892
904
  className,
893
905
  containerClassName,
894
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid items-center gap-8 lg:grid-cols-2", gridClassName), children: [
895
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
896
- title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
897
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
898
- (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
899
- ] }),
900
- imageContent
901
- ] })
906
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
907
+ "div",
908
+ {
909
+ className: cn("grid items-center gap-8 lg:grid-cols-2", gridClassName),
910
+ children: [
911
+ /* @__PURE__ */ jsxRuntime.jsxs(
912
+ "div",
913
+ {
914
+ className: cn(
915
+ "flex flex-col items-center text-center lg:items-start lg:text-left",
916
+ contentClassName
917
+ ),
918
+ children: [
919
+ title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
920
+ "h2",
921
+ {
922
+ className: cn(
923
+ "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
924
+ titleClassName
925
+ ),
926
+ children: title
927
+ }
928
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
929
+ "div",
930
+ {
931
+ className: cn(
932
+ "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
933
+ titleClassName
934
+ ),
935
+ children: title
936
+ }
937
+ )),
938
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
939
+ "p",
940
+ {
941
+ className: cn(
942
+ "mb-8 max-w-xl text-muted-foreground lg:text-lg",
943
+ descriptionClassName
944
+ ),
945
+ children: description
946
+ }
947
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
948
+ "div",
949
+ {
950
+ className: cn(
951
+ "mb-8 max-w-xl text-muted-foreground lg:text-lg",
952
+ descriptionClassName
953
+ ),
954
+ children: description
955
+ }
956
+ )),
957
+ (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
958
+ "div",
959
+ {
960
+ className: cn(
961
+ "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start",
962
+ actionsClassName
963
+ ),
964
+ children: actionsContent
965
+ }
966
+ )
967
+ ]
968
+ }
969
+ ),
970
+ imageContent
971
+ ]
972
+ }
973
+ )
902
974
  }
903
975
  );
904
976
  }
@@ -822,7 +822,7 @@ function FeatureSplitImage({
822
822
  imageClassName,
823
823
  optixFlowConfig,
824
824
  background,
825
- spacing,
825
+ spacing = "py-6 md:py-32",
826
826
  pattern,
827
827
  patternOpacity,
828
828
  patternClassName
@@ -839,11 +839,20 @@ function FeatureSplitImage({
839
839
  className: actionClassName,
840
840
  ...pressableProps
841
841
  } = action;
842
- return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
843
- icon,
844
- label,
845
- iconAfter
846
- ] }) }, index);
842
+ return /* @__PURE__ */ jsx(
843
+ Pressable,
844
+ {
845
+ className: actionClassName,
846
+ asButton: true,
847
+ ...pressableProps,
848
+ children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
849
+ icon,
850
+ label,
851
+ iconAfter
852
+ ] })
853
+ },
854
+ index
855
+ );
847
856
  });
848
857
  }, [actionsSlot, actions]);
849
858
  const imageContent = useMemo(() => {
@@ -854,7 +863,10 @@ function FeatureSplitImage({
854
863
  {
855
864
  src: imageSrc,
856
865
  alt: imageAlt || "",
857
- className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
866
+ className: cn(
867
+ "max-h-96 w-full rounded-md object-cover",
868
+ imageClassName
869
+ ),
858
870
  loading: "lazy",
859
871
  optixFlowConfig
860
872
  }
@@ -870,14 +882,74 @@ function FeatureSplitImage({
870
882
  patternClassName,
871
883
  className,
872
884
  containerClassName,
873
- children: /* @__PURE__ */ jsxs("div", { className: cn("grid items-center gap-8 lg:grid-cols-2", gridClassName), children: [
874
- /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
875
- title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
876
- description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
877
- (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
878
- ] }),
879
- imageContent
880
- ] })
885
+ children: /* @__PURE__ */ jsxs(
886
+ "div",
887
+ {
888
+ className: cn("grid items-center gap-8 lg:grid-cols-2", gridClassName),
889
+ children: [
890
+ /* @__PURE__ */ jsxs(
891
+ "div",
892
+ {
893
+ className: cn(
894
+ "flex flex-col items-center text-center lg:items-start lg:text-left",
895
+ contentClassName
896
+ ),
897
+ children: [
898
+ title && (typeof title === "string" ? /* @__PURE__ */ jsx(
899
+ "h2",
900
+ {
901
+ className: cn(
902
+ "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
903
+ titleClassName
904
+ ),
905
+ children: title
906
+ }
907
+ ) : /* @__PURE__ */ jsx(
908
+ "div",
909
+ {
910
+ className: cn(
911
+ "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
912
+ titleClassName
913
+ ),
914
+ children: title
915
+ }
916
+ )),
917
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
918
+ "p",
919
+ {
920
+ className: cn(
921
+ "mb-8 max-w-xl text-muted-foreground lg:text-lg",
922
+ descriptionClassName
923
+ ),
924
+ children: description
925
+ }
926
+ ) : /* @__PURE__ */ jsx(
927
+ "div",
928
+ {
929
+ className: cn(
930
+ "mb-8 max-w-xl text-muted-foreground lg:text-lg",
931
+ descriptionClassName
932
+ ),
933
+ children: description
934
+ }
935
+ )),
936
+ (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
937
+ "div",
938
+ {
939
+ className: cn(
940
+ "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start",
941
+ actionsClassName
942
+ ),
943
+ children: actionsContent
944
+ }
945
+ )
946
+ ]
947
+ }
948
+ ),
949
+ imageContent
950
+ ]
951
+ }
952
+ )
881
953
  }
882
954
  );
883
955
  }
@@ -915,9 +915,9 @@ function FeatureStatsHighlight({
915
915
  return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
916
916
  "div",
917
917
  {
918
- className: cn("flex flex-col gap-2 rounded-xl border bg-muted/30 p-6", statCardClassName, stat.className),
918
+ className: cn("flex flex-col gap-2 rounded-xl border bg-card p-6", statCardClassName, stat.className),
919
919
  children: [
920
- stat.value && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-4xl font-bold text-primary lg:text-5xl", stat.valueClassName), children: stat.value }),
920
+ stat.value && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-4xl font-bold lg:text-5xl", stat.valueClassName), children: stat.value }),
921
921
  stat.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
922
922
  ]
923
923
  },
@@ -894,9 +894,9 @@ function FeatureStatsHighlight({
894
894
  return stats.map((stat, index) => /* @__PURE__ */ jsxs(
895
895
  "div",
896
896
  {
897
- className: cn("flex flex-col gap-2 rounded-xl border bg-muted/30 p-6", statCardClassName, stat.className),
897
+ className: cn("flex flex-col gap-2 rounded-xl border bg-card p-6", statCardClassName, stat.className),
898
898
  children: [
899
- stat.value && /* @__PURE__ */ jsx("span", { className: cn("text-4xl font-bold text-primary lg:text-5xl", stat.valueClassName), children: stat.value }),
899
+ stat.value && /* @__PURE__ */ jsx("span", { className: cn("text-4xl font-bold lg:text-5xl", stat.valueClassName), children: stat.value }),
900
900
  stat.label && /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
901
901
  ]
902
902
  },