@opensite/ui 1.8.6 → 1.8.8

package/dist/about-developer-profile.cjs

@@ -32,66 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -885,6 +825,74 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const renderAction = React__namespace.useCallback(
+    (action, idx) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        href,
+        onClick,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          href,
+          onClick,
+          asButton: action.asButton || true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        idx
+      );
+    },
+    []
+  );
+  const width = mobileConfig?.width ?? "fit";
+  const position = mobileConfig?.position ?? "left";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => renderAction(action, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
 function AboutDeveloperProfile({
   name,
   role,
@@ -898,7 +906,6 @@ function AboutDeveloperProfile({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   contentClassName,
   nameClassName,
   roleClassName,
@@ -910,7 +917,8 @@ function AboutDeveloperProfile({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
@@ -922,11 +930,7 @@ function AboutDeveloperProfile({
       {
         href: link.href,
         "aria-label": link["aria-label"],
-        className: cn(
-          getTextColor(background, "muted"),
-          `hover:${getAccentColor(background)}`,
-          link.className
-        ),
+        className: cn(link.className),
         children: link.icon
       },
       idx
@@ -940,8 +944,6 @@ function AboutDeveloperProfile({
       {
         className: cn(
           "rounded-full px-4 py-2 text-sm font-medium",
-          getNestedCardBg(background),
-          getNestedCardTextColor(background),
           skillTagClassName
         ),
         children: skill
@@ -949,34 +951,6 @@ function AboutDeveloperProfile({
       idx
     ));
   }, [skillsSlot, skills, skillTagClassName, background]);
-  const actionsContent = React.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -984,7 +958,7 @@ function AboutDeveloperProfile({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row md:items-start", children: [
@@ -1002,7 +976,7 @@ function AboutDeveloperProfile({
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center md:text-left", children: [
             name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
-            role && (typeof role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-xl", getAccentColor(background), roleClassName), children: role }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", roleClassName), children: role })),
+            role && (typeof role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-xl", roleClassName), children: role }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", roleClassName), children: role })),
             (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -1015,29 +989,17 @@ function AboutDeveloperProfile({
             )
           ] })
         ] }),
-        bio && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-12", children: typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: cn(
-              "text-lg whitespace-pre-line",
-              getTextColor(background, "muted"),
-              bioClassName
-            ),
-            children: bio
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }) }),
+        bio && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-12", children: typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg whitespace-pre-line", bioClassName), children: bio }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }) }),
         (skillsSlot || skills && skills.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12", skillsClassName), children: [
           skillsTitle && (typeof skillsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: skillsTitle }) : skillsTitle),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: skillsContent })
         ] }),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BlockActions,
           {
-            className: cn(
-              "mt-12 text-center md:text-left flex gap-2 items-center flex-wrap",
-              actionsClassName
-            ),
-            children: actionsContent
+            actions,
+            actionsSlot,
+            actionsClassName
           }
         )
       ] })

package/dist/about-developer-profile.d.cts

@@ -119,6 +119,6 @@ interface AboutDeveloperProfileProps {
      */
     patternOpacity?: number;
 }
-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;
+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;
 
 export { AboutDeveloperProfile, type AboutDeveloperProfileProps };

package/dist/about-developer-profile.d.ts

@@ -119,6 +119,6 @@ interface AboutDeveloperProfileProps {
      */
     patternOpacity?: number;
 }
-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;
+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;
 
 export { AboutDeveloperProfile, type AboutDeveloperProfileProps };

package/dist/about-developer-profile.js

@@ -11,66 +11,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -864,6 +804,74 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const renderAction = React.useCallback(
+    (action, idx) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        href,
+        onClick,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          href,
+          onClick,
+          asButton: action.asButton || true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        idx
+      );
+    },
+    []
+  );
+  const width = mobileConfig?.width ?? "fit";
+  const position = mobileConfig?.position ?? "left";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => renderAction(action, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
 function AboutDeveloperProfile({
   name,
   role,
@@ -877,7 +885,6 @@ function AboutDeveloperProfile({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   contentClassName,
   nameClassName,
   roleClassName,
@@ -889,7 +896,8 @@ function AboutDeveloperProfile({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
@@ -901,11 +909,7 @@ function AboutDeveloperProfile({
       {
         href: link.href,
         "aria-label": link["aria-label"],
-        className: cn(
-          getTextColor(background, "muted"),
-          `hover:${getAccentColor(background)}`,
-          link.className
-        ),
+        className: cn(link.className),
         children: link.icon
       },
       idx
@@ -919,8 +923,6 @@ function AboutDeveloperProfile({
       {
         className: cn(
           "rounded-full px-4 py-2 text-sm font-medium",
-          getNestedCardBg(background),
-          getNestedCardTextColor(background),
           skillTagClassName
         ),
         children: skill
@@ -928,34 +930,6 @@ function AboutDeveloperProfile({
       idx
     ));
   }, [skillsSlot, skills, skillTagClassName, background]);
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -963,7 +937,7 @@ function AboutDeveloperProfile({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row md:items-start", children: [
@@ -981,7 +955,7 @@ function AboutDeveloperProfile({
           ),
           /* @__PURE__ */ jsxs("div", { className: "text-center md:text-left", children: [
             name && (typeof name === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
-            role && (typeof role === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-xl", getAccentColor(background), roleClassName), children: role }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", roleClassName), children: role })),
+            role && (typeof role === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-xl", roleClassName), children: role }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", roleClassName), children: role })),
             (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx(
               "div",
               {
@@ -994,29 +968,17 @@ function AboutDeveloperProfile({
             )
           ] })
         ] }),
-        bio && /* @__PURE__ */ jsx("div", { className: "mt-12", children: typeof bio === "string" ? /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cn(
-              "text-lg whitespace-pre-line",
-              getTextColor(background, "muted"),
-              bioClassName
-            ),
-            children: bio
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: bioClassName, children: bio }) }),
+        bio && /* @__PURE__ */ jsx("div", { className: "mt-12", children: typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg whitespace-pre-line", bioClassName), children: bio }) : /* @__PURE__ */ jsx("div", { className: bioClassName, children: bio }) }),
         (skillsSlot || skills && skills.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn("mt-12", skillsClassName), children: [
           skillsTitle && (typeof skillsTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: skillsTitle }) : skillsTitle),
           /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: skillsContent })
         ] }),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx(
+          BlockActions,
           {
-            className: cn(
-              "mt-12 text-center md:text-left flex gap-2 items-center flex-wrap",
-              actionsClassName
-            ),
-            children: actionsContent
+            actions,
+            actionsSlot,
+            actionsClassName
           }
         )
       ] })

package/dist/about-developer-story.cjs

@@ -1146,7 +1146,7 @@ function AboutDeveloperStory({
               src: storyImage.src,
               alt: storyImage.alt,
               className: cn(
-                "rounded-2xl object-cover rounded-2xl object-cover w-full h-auto",
+                "rounded-2xl object-cover w-full h-auto",
                 storyImageClassName
               ),
               optixFlowConfig

package/dist/about-developer-story.js

@@ -1125,7 +1125,7 @@ function AboutDeveloperStory({
               src: storyImage.src,
               alt: storyImage.alt,
               className: cn(
-                "rounded-2xl object-cover rounded-2xl object-cover w-full h-auto",
+                "rounded-2xl object-cover w-full h-auto",
                 storyImageClassName
               ),
               optixFlowConfig