@opensite/ui 1.8.7 → 1.8.9

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.
@@ -825,7 +825,16 @@ var Section = React__namespace.default.forwardRef(
825
825
  }
826
826
  );
827
827
  Section.displayName = "Section";
828
+ var MOBILE_CLASSES = {
829
+ "fit-left": "items-start md:items-center",
830
+ "fit-center": "items-center",
831
+ "fit-right": "items-end md:items-center",
832
+ "full-left": "items-stretch md:items-center",
833
+ "full-center": "items-stretch md:items-center",
834
+ "full-right": "items-stretch md:items-center"
835
+ };
828
836
  function BlockActions({
837
+ mobileConfig,
829
838
  actionsClassName,
830
839
  verticalSpacing = "mt-4 md:mt-8",
831
840
  actions,
@@ -838,13 +847,17 @@ function BlockActions({
838
847
  icon,
839
848
  iconAfter,
840
849
  children,
850
+ href,
851
+ onClick,
841
852
  className: actionClassName,
842
853
  ...pressableProps
843
854
  } = action;
844
855
  return /* @__PURE__ */ jsxRuntime.jsx(
845
856
  Pressable,
846
857
  {
847
- asButton: true,
858
+ href,
859
+ onClick,
860
+ asButton: action.asButton || true,
848
861
  className: actionClassName,
849
862
  ...pressableProps,
850
863
  children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -858,6 +871,9 @@ function BlockActions({
858
871
  },
859
872
  []
860
873
  );
874
+ const width = mobileConfig?.width ?? "full";
875
+ const position = mobileConfig?.position ?? "center";
876
+ const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
861
877
  if (actionsSlot) {
862
878
  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
863
879
  } else if (actions && actions?.length > 0) {
@@ -866,6 +882,7 @@ function BlockActions({
866
882
  {
867
883
  className: cn(
868
884
  "flex flex-col md:flex-row flex-wrap gap-4",
885
+ mobileLayoutClass,
869
886
  actionsClassName,
870
887
  verticalSpacing
871
888
  ),
@@ -889,7 +906,6 @@ function AboutDeveloperProfile({
889
906
  actions,
890
907
  actionsSlot,
891
908
  className,
892
- containerClassName,
893
909
  contentClassName,
894
910
  nameClassName,
895
911
  roleClassName,
@@ -901,7 +917,8 @@ function AboutDeveloperProfile({
901
917
  actionsClassName,
902
918
  optixFlowConfig,
903
919
  background,
904
- spacing,
920
+ spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
921
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
905
922
  pattern,
906
923
  patternOpacity
907
924
  }) {
@@ -941,7 +958,7 @@ function AboutDeveloperProfile({
941
958
  spacing,
942
959
  pattern,
943
960
  patternOpacity,
944
- className: cn(className),
961
+ className,
945
962
  containerClassName,
946
963
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
947
964
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row md:items-start", children: [
@@ -119,6 +119,6 @@ interface AboutDeveloperProfileProps {
119
119
  */
120
120
  patternOpacity?: number;
121
121
  }
122
- declare function AboutDeveloperProfile({ name, role, bio, avatar, skills, skillsSlot, skillsTitle, socialLinks, socialLinksSlot, actions, actionsSlot, className, containerClassName, contentClassName, nameClassName, roleClassName, bioClassName, avatarClassName, skillsClassName, skillTagClassName, socialLinksClassName, actionsClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: AboutDeveloperProfileProps): React.JSX.Element;
122
+ declare function AboutDeveloperProfile({ name, role, bio, avatar, skills, skillsSlot, skillsTitle, socialLinks, socialLinksSlot, actions, actionsSlot, className, contentClassName, nameClassName, roleClassName, bioClassName, avatarClassName, skillsClassName, skillTagClassName, socialLinksClassName, actionsClassName, optixFlowConfig, background, spacing, containerClassName, pattern, patternOpacity, }: AboutDeveloperProfileProps): React.JSX.Element;
123
123
 
124
124
  export { AboutDeveloperProfile, type AboutDeveloperProfileProps };
@@ -119,6 +119,6 @@ interface AboutDeveloperProfileProps {
119
119
  */
120
120
  patternOpacity?: number;
121
121
  }
122
- declare function AboutDeveloperProfile({ name, role, bio, avatar, skills, skillsSlot, skillsTitle, socialLinks, socialLinksSlot, actions, actionsSlot, className, containerClassName, contentClassName, nameClassName, roleClassName, bioClassName, avatarClassName, skillsClassName, skillTagClassName, socialLinksClassName, actionsClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: AboutDeveloperProfileProps): React.JSX.Element;
122
+ declare function AboutDeveloperProfile({ name, role, bio, avatar, skills, skillsSlot, skillsTitle, socialLinks, socialLinksSlot, actions, actionsSlot, className, contentClassName, nameClassName, roleClassName, bioClassName, avatarClassName, skillsClassName, skillTagClassName, socialLinksClassName, actionsClassName, optixFlowConfig, background, spacing, containerClassName, pattern, patternOpacity, }: AboutDeveloperProfileProps): React.JSX.Element;
123
123
 
124
124
  export { AboutDeveloperProfile, type AboutDeveloperProfileProps };
@@ -804,7 +804,16 @@ var Section = React__default.forwardRef(
804
804
  }
805
805
  );
806
806
  Section.displayName = "Section";
807
+ var MOBILE_CLASSES = {
808
+ "fit-left": "items-start md:items-center",
809
+ "fit-center": "items-center",
810
+ "fit-right": "items-end md:items-center",
811
+ "full-left": "items-stretch md:items-center",
812
+ "full-center": "items-stretch md:items-center",
813
+ "full-right": "items-stretch md:items-center"
814
+ };
807
815
  function BlockActions({
816
+ mobileConfig,
808
817
  actionsClassName,
809
818
  verticalSpacing = "mt-4 md:mt-8",
810
819
  actions,
@@ -817,13 +826,17 @@ function BlockActions({
817
826
  icon,
818
827
  iconAfter,
819
828
  children,
829
+ href,
830
+ onClick,
820
831
  className: actionClassName,
821
832
  ...pressableProps
822
833
  } = action;
823
834
  return /* @__PURE__ */ jsx(
824
835
  Pressable,
825
836
  {
826
- asButton: true,
837
+ href,
838
+ onClick,
839
+ asButton: action.asButton || true,
827
840
  className: actionClassName,
828
841
  ...pressableProps,
829
842
  children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -837,6 +850,9 @@ function BlockActions({
837
850
  },
838
851
  []
839
852
  );
853
+ const width = mobileConfig?.width ?? "full";
854
+ const position = mobileConfig?.position ?? "center";
855
+ const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
840
856
  if (actionsSlot) {
841
857
  return /* @__PURE__ */ jsx("div", { children: actionsSlot });
842
858
  } else if (actions && actions?.length > 0) {
@@ -845,6 +861,7 @@ function BlockActions({
845
861
  {
846
862
  className: cn(
847
863
  "flex flex-col md:flex-row flex-wrap gap-4",
864
+ mobileLayoutClass,
848
865
  actionsClassName,
849
866
  verticalSpacing
850
867
  ),
@@ -868,7 +885,6 @@ function AboutDeveloperProfile({
868
885
  actions,
869
886
  actionsSlot,
870
887
  className,
871
- containerClassName,
872
888
  contentClassName,
873
889
  nameClassName,
874
890
  roleClassName,
@@ -880,7 +896,8 @@ function AboutDeveloperProfile({
880
896
  actionsClassName,
881
897
  optixFlowConfig,
882
898
  background,
883
- spacing,
899
+ spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
900
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
884
901
  pattern,
885
902
  patternOpacity
886
903
  }) {
@@ -920,7 +937,7 @@ function AboutDeveloperProfile({
920
937
  spacing,
921
938
  pattern,
922
939
  patternOpacity,
923
- className: cn(className),
940
+ className,
924
941
  containerClassName,
925
942
  children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
926
943
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row md:items-start", children: [