@opensite/ui 2.4.8 → 2.4.9

package/dist/faq-badge-support.cjs

@@ -7,7 +7,6 @@ var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var SeparatorPrimitive = require('@radix-ui/react-separator');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var icon = require('@page-speed/icon');
 
@@ -30,39 +29,12 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // components/blocks/faq/faq-badge-support.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.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";
-    }
-  }
-}
 var badgeVariants = classVarianceAuthority.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",
   {
@@ -95,26 +67,6 @@ function Badge({
     }
   );
 }
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SeparatorPrimitive__namespace.Root,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -972,6 +924,38 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React__namespace.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React__namespace.isValidElement(reactNode)) {
+          return React__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 function FaqBadgeSupport({
   badge,
   heading,
@@ -982,12 +966,12 @@ function FaqBadgeSupport({
   supportAction,
   supportSlot,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -1020,14 +1004,14 @@ function FaqBadgeSupport({
                     "transition-opacity duration-200 hover:no-underline hover:opacity-60",
                     accordionTriggerClassName
                   ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium sm:py-1 lg:py-2 lg:text-lg", children: item.question })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold py-1 lg:py-2 text-lg leading-tight", children: item.question })
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 AccordionContent,
                 {
                   className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), "lg:text-lg"), children: item.answer })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg", children: item.answer })
                 }
               )
             ]
@@ -1051,11 +1035,16 @@ function FaqBadgeSupport({
       "div",
       {
         className: cn(
-          "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center md:flex-row md:justify-between md:text-left",
+          "mx-auto max-w-full md:max-w-3xl",
+          "flex flex-col items-center md:flex-row md:justify-between",
+          "bg-card text-card-foreground",
+          "text-center md:text-left",
+          "gap-4 p-6 md:p-12",
+          "rounded-lg shadow-lg ring-2",
           supportSectionClassName
         ),
         children: [
-          supportText && (typeof supportText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: supportText }) : supportText),
+          supportText && (typeof supportText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: supportText }) : supportText),
           supportAction && /* @__PURE__ */ jsxRuntime.jsxs(
             Pressable,
             {
@@ -1075,7 +1064,49 @@ function FaqBadgeSupport({
         ]
       }
     );
-  }, [supportSlot, supportText, supportAction, supportSectionClassName, background]);
+  }, [
+    supportSlot,
+    supportText,
+    supportAction,
+    supportSectionClassName,
+    background
+  ]);
+  const contentItems = React.useMemo(() => {
+    const items2 = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "max-w-full md:max-w-md",
+            "text-3xl md:text-4xl lg:text-5xl",
+            "font-semibold text-balance",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items2.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items2.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "text-base md:text-lg max-w-full md:max-w-md text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items2.push(description);
+      }
+    }
+    return items2;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1085,49 +1116,31 @@ function FaqBadgeSupport({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-8 md:space-y-16", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 md:space-y-16", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col text-left md:text-center",
+              "mx-auto flex max-w-full md:max-w-3xl flex-col text-left md:text-center",
               headerClassName
             ),
             children: [
-              badge && /* @__PURE__ */ jsxRuntime.jsx(
-                Badge,
-                {
-                  variant: "outline",
-                  className: cn("w-fit md:mx-auto", badgeClassName),
-                  children: badge
-                }
-              ),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mt-4 text-3xl font-semibold md:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-2", badgeClassName), children: badge }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ContentGroup,
                 {
+                  items: contentItems,
                   className: cn(
-                    getTextColor(background, "muted"),
-                    "mt-6 text-base md:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
+                    "flex flex-col gap-2 text-left md:text-center items-start",
+                    headerClassName
+                  )
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              )
             ]
           }
         ),
         itemsContent,
-        /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
         supportSectionContent
       ] })
     }

package/dist/faq-badge-support.d.cts

@@ -110,6 +110,6 @@ interface FaqBadgeSupportProps {
      */
     supportSectionClassName?: string;
 }
-declare function FaqBadgeSupport({ badge, heading, description, items, itemsSlot, supportText, supportAction, supportSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, supportSectionClassName, }: FaqBadgeSupportProps): react_jsx_runtime.JSX.Element;
+declare function FaqBadgeSupport({ badge, heading, description, items, itemsSlot, supportText, supportAction, supportSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, headerClassName, badgeClassName, headingClassName, descriptionClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, supportSectionClassName, }: FaqBadgeSupportProps): react_jsx_runtime.JSX.Element;
 
 export { FaqBadgeSupport, type FaqBadgeSupportProps, type FaqItem };

package/dist/faq-badge-support.d.ts

@@ -110,6 +110,6 @@ interface FaqBadgeSupportProps {
      */
     supportSectionClassName?: string;
 }
-declare function FaqBadgeSupport({ badge, heading, description, items, itemsSlot, supportText, supportAction, supportSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, supportSectionClassName, }: FaqBadgeSupportProps): react_jsx_runtime.JSX.Element;
+declare function FaqBadgeSupport({ badge, heading, description, items, itemsSlot, supportText, supportAction, supportSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, headerClassName, badgeClassName, headingClassName, descriptionClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, supportSectionClassName, }: FaqBadgeSupportProps): react_jsx_runtime.JSX.Element;
 
 export { FaqBadgeSupport, type FaqBadgeSupportProps, type FaqItem };

package/dist/faq-badge-support.js

@@ -6,7 +6,6 @@ import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { Icon } from '@page-speed/icon';
 
@@ -14,32 +13,6 @@ import { Icon } from '@page-speed/icon';
 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";
-    }
-  }
-}
 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",
   {
@@ -72,26 +45,6 @@ function Badge({
     }
   );
 }
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    SeparatorPrimitive.Root,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -949,6 +902,38 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React.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 (React.isValidElement(reactNode)) {
+          return React.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsx(React.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 function FaqBadgeSupport({
   badge,
   heading,
@@ -959,12 +944,12 @@ function FaqBadgeSupport({
   supportAction,
   supportSlot,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -997,14 +982,14 @@ function FaqBadgeSupport({
                     "transition-opacity duration-200 hover:no-underline hover:opacity-60",
                     accordionTriggerClassName
                   ),
-                  children: /* @__PURE__ */ jsx("div", { className: "font-medium sm:py-1 lg:py-2 lg:text-lg", children: item.question })
+                  children: /* @__PURE__ */ jsx("div", { className: "font-semibold py-1 lg:py-2 text-lg leading-tight", children: item.question })
                 }
               ),
               /* @__PURE__ */ jsx(
                 AccordionContent,
                 {
                   className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                  children: /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), "lg:text-lg"), children: item.answer })
+                  children: /* @__PURE__ */ jsx("div", { className: "text-lg", children: item.answer })
                 }
               )
             ]
@@ -1028,11 +1013,16 @@ function FaqBadgeSupport({
       "div",
       {
         className: cn(
-          "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center md:flex-row md:justify-between md:text-left",
+          "mx-auto max-w-full md:max-w-3xl",
+          "flex flex-col items-center md:flex-row md:justify-between",
+          "bg-card text-card-foreground",
+          "text-center md:text-left",
+          "gap-4 p-6 md:p-12",
+          "rounded-lg shadow-lg ring-2",
           supportSectionClassName
         ),
         children: [
-          supportText && (typeof supportText === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: supportText }) : supportText),
+          supportText && (typeof supportText === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: supportText }) : supportText),
           supportAction && /* @__PURE__ */ jsxs(
             Pressable,
             {
@@ -1052,7 +1042,49 @@ function FaqBadgeSupport({
         ]
       }
     );
-  }, [supportSlot, supportText, supportAction, supportSectionClassName, background]);
+  }, [
+    supportSlot,
+    supportText,
+    supportAction,
+    supportSectionClassName,
+    background
+  ]);
+  const contentItems = useMemo(() => {
+    const items2 = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "max-w-full md:max-w-md",
+            "text-3xl md:text-4xl lg:text-5xl",
+            "font-semibold text-balance",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items2.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items2.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "text-base md:text-lg max-w-full md:max-w-md text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items2.push(description);
+      }
+    }
+    return items2;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1062,49 +1094,31 @@ function FaqBadgeSupport({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("space-y-8 md:space-y-16", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-8 md:space-y-16", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col text-left md:text-center",
+              "mx-auto flex max-w-full md:max-w-3xl flex-col text-left md:text-center",
               headerClassName
             ),
             children: [
-              badge && /* @__PURE__ */ jsx(
-                Badge,
-                {
-                  variant: "outline",
-                  className: cn("w-fit md:mx-auto", badgeClassName),
-                  children: badge
-                }
-              ),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mt-4 text-3xl font-semibold md:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
+              badge && /* @__PURE__ */ jsx(Badge, { className: cn("px-2", badgeClassName), children: badge }),
+              /* @__PURE__ */ jsx(
+                ContentGroup,
                 {
+                  items: contentItems,
                   className: cn(
-                    getTextColor(background, "muted"),
-                    "mt-6 text-base md:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
+                    "flex flex-col gap-2 text-left md:text-center items-start",
+                    headerClassName
+                  )
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              )
             ]
           }
         ),
         itemsContent,
-        /* @__PURE__ */ jsx(Separator, {}),
         supportSectionContent
       ] })
     }