@opensite/ui 0.8.5 → 0.8.7

package/dist/faq-numbered-list.cjs

@@ -430,7 +430,7 @@ function FaqNumberedList({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -467,7 +467,7 @@ function FaqNumberedList({
                 "span",
                 {
                   className: cn(
-                    "bg-secondary flex size-6 shrink-0 items-center justify-center rounded-sm text-xs font-medium",
+                    "bg-muted flex size-10 shrink-0 items-center justify-center rounded-lg text-md font-semibold",
                     numberClassName
                   ),
                   children: index + 1
@@ -492,7 +492,15 @@ function FaqNumberedList({
         ))
       }
     );
-  }, [itemsSlot, items, itemsWrapperClassName, itemClassName, numberClassName, questionClassName, answerClassName]);
+  }, [
+    itemsSlot,
+    items,
+    itemsWrapperClassName,
+    itemClassName,
+    numberClassName,
+    questionClassName,
+    answerClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/faq-numbered-list.js

@@ -424,7 +424,7 @@ function FaqNumberedList({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -461,7 +461,7 @@ function FaqNumberedList({
                 "span",
                 {
                   className: cn(
-                    "bg-secondary flex size-6 shrink-0 items-center justify-center rounded-sm text-xs font-medium",
+                    "bg-muted flex size-10 shrink-0 items-center justify-center rounded-lg text-md font-semibold",
                     numberClassName
                   ),
                   children: index + 1
@@ -486,7 +486,15 @@ function FaqNumberedList({
         ))
       }
     );
-  }, [itemsSlot, items, itemsWrapperClassName, itemClassName, numberClassName, questionClassName, answerClassName]);
+  }, [
+    itemsSlot,
+    items,
+    itemsWrapperClassName,
+    itemClassName,
+    numberClassName,
+    questionClassName,
+    answerClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/faq-profile-sidebar.cjs

@@ -152,7 +152,7 @@ function AccordionItem({
     AccordionPrimitive__namespace.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -167,13 +167,19 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -999,7 +1005,7 @@ function FaqProfileSidebar({
   contactText,
   contactAction,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -1052,7 +1058,14 @@ function FaqProfileSidebar({
       },
       item.id
     )) });
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   const profileSectionContent = React.useMemo(() => {
     if (profileSlot) return profileSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg border p-6", profileCardClassName), children: [
@@ -1063,7 +1076,7 @@ function FaqProfileSidebar({
             src: profileImage,
             alt: typeof profileName === "string" ? profileName : "Profile",
             className: cn(
-              "size-16 rounded-full object-cover",
+              "size-16 rounded-xl object-cover shadow-md",
               profileImageClassName
             ),
             optixFlowConfig
@@ -1093,22 +1106,46 @@ function FaqProfileSidebar({
           children: profileDescription
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: profileDescriptionClassName, children: profileDescription })),
-      contactAction && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6 border-t pt-6", contactSectionClassName), children: [
-        contactText && (typeof contactText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: contactText }) : contactText),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            href: contactAction.href,
-            onClick: contactAction.onClick,
-            variant: contactAction.variant || "outline",
-            size: contactAction.size,
-            className: cn("mt-3 w-full", contactAction.className),
-            children: contactAction.children || contactAction.label
-          }
-        )
-      ] })
+      contactAction && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "mt-6 border-t pt-6 flex flex-col space-y-4",
+            contactSectionClassName
+          ),
+          children: [
+            contactText && (typeof contactText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: contactText }) : contactText),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Pressable,
+              {
+                href: contactAction.href,
+                onClick: contactAction.onClick,
+                variant: contactAction.variant || "outline",
+                size: contactAction.size,
+                className: cn("mt-3 w-full", contactAction.className),
+                children: contactAction.children || contactAction.label
+              }
+            )
+          ]
+        }
+      )
     ] });
-  }, [profileSlot, profileImage, profileName, profileRole, profileDescription, contactText, contactAction, profileCardClassName, profileImageClassName, profileNameClassName, profileRoleClassName, profileDescriptionClassName, contactSectionClassName, optixFlowConfig]);
+  }, [
+    profileSlot,
+    profileImage,
+    profileName,
+    profileRole,
+    profileDescription,
+    contactText,
+    contactAction,
+    profileCardClassName,
+    profileImageClassName,
+    profileNameClassName,
+    profileRoleClassName,
+    profileDescriptionClassName,
+    contactSectionClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1122,7 +1159,7 @@ function FaqProfileSidebar({
         "div",
         {
           className: cn(
-            "flex flex-col gap-10 lg:flex-row lg:gap-16",
+            "flex flex-col gap-6 lg:flex-row lg:gap-16",
             contentWrapperClassName
           ),
           children: [
@@ -1132,7 +1169,7 @@ function FaqProfileSidebar({
                   "h2",
                   {
                     className: cn(
-                      "mb-3 text-3xl font-semibold md:mb-4 lg:text-4xl",
+                      "mb-3 text-xl font-semibold md:mb-4 lg:text-2xl",
                       headingClassName
                     ),
                     children: heading

package/dist/faq-profile-sidebar.js

@@ -130,7 +130,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -145,13 +145,19 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -977,7 +983,7 @@ function FaqProfileSidebar({
   contactText,
   contactAction,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -1030,7 +1036,14 @@ function FaqProfileSidebar({
       },
       item.id
     )) });
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   const profileSectionContent = useMemo(() => {
     if (profileSlot) return profileSlot;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-6", profileCardClassName), children: [
@@ -1041,7 +1054,7 @@ function FaqProfileSidebar({
             src: profileImage,
             alt: typeof profileName === "string" ? profileName : "Profile",
             className: cn(
-              "size-16 rounded-full object-cover",
+              "size-16 rounded-xl object-cover shadow-md",
               profileImageClassName
             ),
             optixFlowConfig
@@ -1071,22 +1084,46 @@ function FaqProfileSidebar({
           children: profileDescription
         }
       ) : /* @__PURE__ */ jsx("div", { className: profileDescriptionClassName, children: profileDescription })),
-      contactAction && /* @__PURE__ */ jsxs("div", { className: cn("mt-6 border-t pt-6", contactSectionClassName), children: [
-        contactText && (typeof contactText === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: contactText }) : contactText),
-        /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: contactAction.href,
-            onClick: contactAction.onClick,
-            variant: contactAction.variant || "outline",
-            size: contactAction.size,
-            className: cn("mt-3 w-full", contactAction.className),
-            children: contactAction.children || contactAction.label
-          }
-        )
-      ] })
+      contactAction && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "mt-6 border-t pt-6 flex flex-col space-y-4",
+            contactSectionClassName
+          ),
+          children: [
+            contactText && (typeof contactText === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: contactText }) : contactText),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                href: contactAction.href,
+                onClick: contactAction.onClick,
+                variant: contactAction.variant || "outline",
+                size: contactAction.size,
+                className: cn("mt-3 w-full", contactAction.className),
+                children: contactAction.children || contactAction.label
+              }
+            )
+          ]
+        }
+      )
     ] });
-  }, [profileSlot, profileImage, profileName, profileRole, profileDescription, contactText, contactAction, profileCardClassName, profileImageClassName, profileNameClassName, profileRoleClassName, profileDescriptionClassName, contactSectionClassName, optixFlowConfig]);
+  }, [
+    profileSlot,
+    profileImage,
+    profileName,
+    profileRole,
+    profileDescription,
+    contactText,
+    contactAction,
+    profileCardClassName,
+    profileImageClassName,
+    profileNameClassName,
+    profileRoleClassName,
+    profileDescriptionClassName,
+    contactSectionClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1100,7 +1137,7 @@ function FaqProfileSidebar({
         "div",
         {
           className: cn(
-            "flex flex-col gap-10 lg:flex-row lg:gap-16",
+            "flex flex-col gap-6 lg:flex-row lg:gap-16",
             contentWrapperClassName
           ),
           children: [
@@ -1110,7 +1147,7 @@ function FaqProfileSidebar({
                   "h2",
                   {
                     className: cn(
-                      "mb-3 text-3xl font-semibold md:mb-4 lg:text-4xl",
+                      "mb-3 text-xl font-semibold md:mb-4 lg:text-2xl",
                       headingClassName
                     ),
                     children: heading

package/dist/faq-rounded-cards.cjs

@@ -150,7 +150,7 @@ function AccordionItem({
     AccordionPrimitive__namespace.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -165,13 +165,19 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -572,7 +578,7 @@ function FaqRoundedCards({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -595,13 +601,13 @@ function FaqRoundedCards({
       {
         type: "single",
         collapsible: true,
-        className: cn("space-y-4", accordionClassName),
+        className: cn("space-y-3", accordionClassName),
         children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionItem,
           {
             value: item.id,
             className: cn(
-              "rounded-lg bg-background px-4 border-none",
+              "rounded-xl border border-border/60 px-5 shadow-sm transition-shadow hover:shadow-md data-[state=open]:shadow-md",
               accordionItemClassName
             ),
             children: [
@@ -609,7 +615,7 @@ function FaqRoundedCards({
                 AccordionTrigger,
                 {
                   className: cn(
-                    "font-semibold hover:no-underline",
+                    "py-4 font-medium transition-opacity hover:no-underline hover:opacity-70 lg:text-lg [&[data-state=open]>svg]:rotate-180",
                     accordionTriggerClassName
                   ),
                   children: item.question
@@ -618,7 +624,7 @@ function FaqRoundedCards({
               /* @__PURE__ */ jsxRuntime.jsx(
                 AccordionContent,
                 {
-                  className: cn("text-muted-foreground", accordionContentClassName),
+                  className: cn("pb-4 ", accordionContentClassName),
                   children: item.answer
                 }
               )
@@ -628,7 +634,14 @@ function FaqRoundedCards({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -657,29 +670,11 @@ function FaqRoundedCards({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-muted-foreground lg:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "mx-auto mt-10 max-w-3xl rounded-2xl bg-muted/50 p-6 md:p-8",
-              cardsWrapperClassName
-            ),
-            children: itemsContent
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-10 max-w-3xl", cardsWrapperClassName), children: itemsContent })
       ] })
     }
   );

package/dist/faq-rounded-cards.js

@@ -128,7 +128,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -143,13 +143,19 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -550,7 +556,7 @@ function FaqRoundedCards({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -573,13 +579,13 @@ function FaqRoundedCards({
       {
         type: "single",
         collapsible: true,
-        className: cn("space-y-4", accordionClassName),
+        className: cn("space-y-3", accordionClassName),
         children: items.map((item) => /* @__PURE__ */ jsxs(
           AccordionItem,
           {
             value: item.id,
             className: cn(
-              "rounded-lg bg-background px-4 border-none",
+              "rounded-xl border border-border/60 px-5 shadow-sm transition-shadow hover:shadow-md data-[state=open]:shadow-md",
               accordionItemClassName
             ),
             children: [
@@ -587,7 +593,7 @@ function FaqRoundedCards({
                 AccordionTrigger,
                 {
                   className: cn(
-                    "font-semibold hover:no-underline",
+                    "py-4 font-medium transition-opacity hover:no-underline hover:opacity-70 lg:text-lg [&[data-state=open]>svg]:rotate-180",
                     accordionTriggerClassName
                   ),
                   children: item.question
@@ -596,7 +602,7 @@ function FaqRoundedCards({
               /* @__PURE__ */ jsx(
                 AccordionContent,
                 {
-                  className: cn("text-muted-foreground", accordionContentClassName),
+                  className: cn("pb-4 ", accordionContentClassName),
                   children: item.answer
                 }
               )
@@ -606,7 +612,14 @@ function FaqRoundedCards({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -635,29 +648,11 @@ function FaqRoundedCards({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-muted-foreground lg:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "mx-auto mt-10 max-w-3xl rounded-2xl bg-muted/50 p-6 md:p-8",
-              cardsWrapperClassName
-            ),
-            children: itemsContent
-          }
-        )
+        /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-10 max-w-3xl", cardsWrapperClassName), children: itemsContent })
       ] })
     }
   );