@opensite/ui 2.4.8 → 2.4.9

package/dist/faq-simple-accordion.cjs

@@ -1,15 +1,13 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -28,39 +26,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // components/blocks/faq/faq-simple-accordion.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 DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -134,7 +106,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -439,7 +411,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -500,24 +472,59 @@ var Section = React__default.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 = React4__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React4__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React4__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 (React4__namespace.isValidElement(reactNode)) {
+          return React4__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 function FaqSimpleAccordion({
   heading,
   items,
   itemsSlot,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  description,
+  descriptionClassName,
   headingClassName,
+  headerClassName,
   accordionClassName,
   accordionItemClassName,
   accordionTriggerClassName,
   accordionContentClassName
 }) {
-  const itemsContent = React.useMemo(() => {
+  const itemsContent = React4.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -536,13 +543,7 @@ function FaqSimpleAccordion({
               children: item.question
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AccordionContent,
-            {
-              className: cn(getTextColor(background, "muted"), accordionContentClassName),
-              children: item.answer
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn(accordionContentClassName), children: item.answer })
         ]
       },
       item.id || index
@@ -556,6 +557,37 @@ function FaqSimpleAccordion({
     accordionContentClassName,
     background
   ]);
+  const contentItems = React4.useMemo(() => {
+    const items2 = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "font-semibold text-4xl md:text-5xl lg:text-6xl",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items2.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items2.push({
+          _type: "text",
+          as: "p",
+          className: cn("text-lg opacity-70", descriptionClassName),
+          children: description
+        });
+      } else {
+        items2.push(description);
+      }
+    }
+    return items2;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -565,17 +597,18 @@ function FaqSimpleAccordion({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "h1",
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-full md:max-w-3xl space-y-4 md:space-y-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
-              "mb-4 text-3xl font-semibold md:mb-11 md:text-4xl",
-              headingClassName
-            ),
-            children: heading
+              "flex flex-col gap-2 text-left items-start",
+              headerClassName
+            )
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+        ),
         itemsContent
       ] })
     }

package/dist/faq-simple-accordion.d.cts

@@ -74,7 +74,19 @@ interface FaqSimpleAccordionProps {
      * Additional CSS classes for accordion content
      */
     accordionContentClassName?: string;
+    /**
+     * Description text below heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the header wrapper
+     */
+    headerClassName?: string;
 }
-declare function FaqSimpleAccordion({ heading, items, itemsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headingClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqSimpleAccordionProps): react_jsx_runtime.JSX.Element;
+declare function FaqSimpleAccordion({ heading, items, itemsSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, description, descriptionClassName, headingClassName, headerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqSimpleAccordionProps): react_jsx_runtime.JSX.Element;
 
 export { type FaqItem, FaqSimpleAccordion, type FaqSimpleAccordionProps };

package/dist/faq-simple-accordion.d.ts

@@ -74,7 +74,19 @@ interface FaqSimpleAccordionProps {
      * Additional CSS classes for accordion content
      */
     accordionContentClassName?: string;
+    /**
+     * Description text below heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the header wrapper
+     */
+    headerClassName?: string;
 }
-declare function FaqSimpleAccordion({ heading, items, itemsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headingClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqSimpleAccordionProps): react_jsx_runtime.JSX.Element;
+declare function FaqSimpleAccordion({ heading, items, itemsSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, description, descriptionClassName, headingClassName, headerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqSimpleAccordionProps): react_jsx_runtime.JSX.Element;
 
 export { type FaqItem, FaqSimpleAccordion, type FaqSimpleAccordionProps };

package/dist/faq-simple-accordion.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useMemo } from 'react';
+import * as React4 from 'react';
+import React4__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -10,32 +11,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 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 DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -109,7 +84,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -414,7 +389,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -475,18 +450,53 @@ var Section = React.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 = React4.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React4.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React4.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 (React4.isValidElement(reactNode)) {
+          return React4.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsx(React4.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 function FaqSimpleAccordion({
   heading,
   items,
   itemsSlot,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  description,
+  descriptionClassName,
   headingClassName,
+  headerClassName,
   accordionClassName,
   accordionItemClassName,
   accordionTriggerClassName,
@@ -511,13 +521,7 @@ function FaqSimpleAccordion({
               children: item.question
             }
           ),
-          /* @__PURE__ */ jsx(
-            AccordionContent,
-            {
-              className: cn(getTextColor(background, "muted"), accordionContentClassName),
-              children: item.answer
-            }
-          )
+          /* @__PURE__ */ jsx(AccordionContent, { className: cn(accordionContentClassName), children: item.answer })
         ]
       },
       item.id || index
@@ -531,6 +535,37 @@ function FaqSimpleAccordion({
     accordionContentClassName,
     background
   ]);
+  const contentItems = useMemo(() => {
+    const items2 = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "font-semibold text-4xl md:text-5xl lg:text-6xl",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items2.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items2.push({
+          _type: "text",
+          as: "p",
+          className: cn("text-lg opacity-70", descriptionClassName),
+          children: description
+        });
+      } else {
+        items2.push(description);
+      }
+    }
+    return items2;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -540,17 +575,18 @@ function FaqSimpleAccordion({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-          "h1",
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-full md:max-w-3xl space-y-4 md:space-y-8", children: [
+        /* @__PURE__ */ jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
-              "mb-4 text-3xl font-semibold md:mb-11 md:text-4xl",
-              headingClassName
-            ),
-            children: heading
+              "flex flex-col gap-2 text-left items-start",
+              headerClassName
+            )
           }
-        ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+        ),
         itemsContent
       ] })
     }