@opensite/ui 2.4.8 → 2.4.9

package/dist/hero-product-showcase-floating.js

@@ -7,41 +7,12 @@ import { Icon } from '@page-speed/icon';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import { cva } from 'class-variance-authority';
+import { Slot } from '@radix-ui/react-slot';
 
 // components/blocks/hero/hero-product-showcase-floating.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-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";
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -563,6 +534,38 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -839,6 +842,38 @@ var Pressable = React3.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React3.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React3.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React3.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React3.isValidElement(reactNode)) {
+          return React3.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsx(React3.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 var MOBILE_CLASSES = {
   "fit-left": "items-start md:items-center",
   "fit-center": "items-center",
@@ -926,56 +961,40 @@ function HeroProductShowcaseFloating({
   spacing = "xl",
   contentClassName,
   headingClassName,
+  headerClassName,
   descriptionClassName,
   showcaseClassName,
   optixFlowConfig
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm font-medium",
-          `${getAccentColor(background)}/10`,
-          getAccentColor(background)
-        ),
-        children: [
-          badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
-          badgeText && /* @__PURE__ */ jsx("span", { children: badgeText })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs(Badge, { className: cn("px-2"), children: [
+      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
+      badgeText && /* @__PURE__ */ jsx("span", { children: badgeText })
+    ] });
   }, [badgeSlot, badgeIcon, badgeText]);
   const renderFloatingStat = useMemo(() => {
     if (floatingStatSlot) return floatingStatSlot;
     if (!floatingStat) return null;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -top-4 -right-4 rounded-xl bg-background p-4 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      floatingStat.icon && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-success/10", children: /* @__PURE__ */ jsx(
-        DynamicIcon,
-        {
-          name: floatingStat.icon,
-          size: 20,
-          className: "text-success"
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold ", children: floatingStat.value }),
-        /* @__PURE__ */ jsx("div", { className: cn("text-xs", getTextColor(background, "muted")), children: floatingStat.label })
+    return /* @__PURE__ */ jsx("div", { className: "absolute -top-4 -right-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      floatingStat.icon && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 size-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: floatingStat.icon }) }),
+      /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-semibold", children: floatingStat.value }),
+        /* @__PURE__ */ jsx("div", { className: "font-normal opacity-70", children: floatingStat.label })
       ] })
     ] }) });
   }, [floatingStatSlot, floatingStat]);
   const renderUserCount = useMemo(() => {
     if (userCountSlot) return userCountSlot;
     if (!userCount) return null;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-background p-4 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       userCount.avatars && userCount.avatars.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", children: userCount.avatars.map((avatar, idx) => /* @__PURE__ */ jsx(
         Img,
         {
           src: avatar.src,
           alt: avatar.alt,
           className: cn(
-            "h-8 w-8 rounded-full border-2 border-background object-cover",
+            "size-8 rounded-full border-2 border-background object-cover",
             avatar.className
           ),
           optixFlowConfig
@@ -983,8 +1002,8 @@ function HeroProductShowcaseFloating({
         idx
       )) }),
       /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
-        /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: userCount.count }),
-        /* @__PURE__ */ jsx("div", { className: getTextColor(background, "muted"), children: userCount.label })
+        /* @__PURE__ */ jsx("div", { className: "font-semibold", children: userCount.count }),
+        /* @__PURE__ */ jsx("div", { className: "font-normal opacity-70", children: userCount.label })
       ] })
     ] }) });
   }, [userCountSlot, userCount, optixFlowConfig]);
@@ -992,7 +1011,7 @@ function HeroProductShowcaseFloating({
     if (productImageSlot) return productImageSlot;
     if (!productImage) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("order-1", showcaseClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "aspect-4/3 overflow-hidden rounded-2xl bg-linear-to-br from-primary/20 to-purple-500/20 p-8", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "aspect-square overflow-hidden rounded-2xl bg-linear-to-br from-primary/20 to-primary/80 p-8", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: productImage.src,
@@ -1015,6 +1034,37 @@ function HeroProductShowcaseFloating({
     renderFloatingStat,
     renderUserCount
   ]);
+  const contentItems = useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-2xl font-semibold md:text-3xl lg:text-4xl",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn("text-lg opacity-70", descriptionClassName),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1022,42 +1072,22 @@ function HeroProductShowcaseFloating({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 grid-cols-1 md:grid-cols-2 lg:gap-20", children: [
         renderProductShowcase,
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 order-2", contentClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
+          /* @__PURE__ */ jsx(
+            ContentGroup,
             {
+              items: contentItems,
               className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
+                "text-left text-balance space-y-0 md:space-y-2",
+                headerClassName
+              )
             }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          ),
           /* @__PURE__ */ jsx(
             BlockActions,
             {

package/dist/index.cjs

@@ -1615,7 +1615,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/index.js

@@ -1593,7 +1593,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/link-page-bento-layout.cjs

@@ -841,7 +841,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/link-page-bento-layout.js

@@ -820,7 +820,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/link-page-grid-cards.cjs

@@ -841,7 +841,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/link-page-grid-cards.js

@@ -820,7 +820,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/link-page-minimal-profile.cjs

@@ -841,7 +841,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/link-page-minimal-profile.js

@@ -820,7 +820,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/link-page-newsletter-social.cjs

@@ -842,7 +842,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/link-page-newsletter-social.js

@@ -821,7 +821,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/link-tree-block.cjs

@@ -875,7 +875,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/link-tree-block.js

@@ -854,7 +854,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/navbar-fullscreen-menu.cjs

@@ -901,7 +901,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/navbar-fullscreen-menu.js

@@ -880,7 +880,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/navbar-transparent-overlay.cjs

@@ -973,7 +973,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/navbar-transparent-overlay.js

@@ -951,7 +951,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",