@opensite/ui 2.4.8 → 2.4.9

package/dist/faq-sidebar-navigation.cjs

@@ -1,7 +1,7 @@
 "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');
@@ -26,39 +26,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // components/blocks/faq/faq-sidebar-navigation.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 });
@@ -132,7 +106,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__namespace.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -437,7 +411,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__namespace.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -498,21 +472,53 @@ 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 = 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 FaqSidebarNavigation({
   heading,
   description,
+  descriptionClassName,
   categories,
   categoriesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
-  descriptionClassName,
   contentWrapperClassName,
   navClassName,
   navButtonClassName,
@@ -524,15 +530,15 @@ function FaqSidebarNavigation({
   accordionTriggerClassName,
   accordionContentClassName
 }) {
-  const [activeCategory, setActiveCategory] = React__namespace.useState(
+  const [activeCategory, setActiveCategory] = React4__namespace.useState(
     categories && categories.length > 1 ? "all" : categories?.[0]?.id || ""
   );
-  const filteredCategories = React.useMemo(() => {
+  const filteredCategories = React4.useMemo(() => {
     if (!categories || categories.length === 0) return [];
     if (activeCategory === "all") return categories;
     return categories.filter((category) => category.id === activeCategory);
   }, [categories, activeCategory]);
-  const categoriesContent = React.useMemo(() => {
+  const categoriesContent = React4.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (filteredCategories.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: filteredCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -571,7 +577,7 @@ function FaqSidebarNavigation({
                   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: cn("lg:text-lg"), children: item.answer })
                   }
                 )
               ]
@@ -582,7 +588,48 @@ function FaqSidebarNavigation({
       },
       category.id
     )) });
-  }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, background]);
+  }, [
+    categoriesSlot,
+    filteredCategories,
+    categoriesWrapperClassName,
+    categoryTitleClassName,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName,
+    background
+  ]);
+  const contentItems = React4.useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "font-semibold text-4xl md:text-5xl lg:text-6xl",
+            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__ */ jsxRuntime.jsx(
     Section,
     {
@@ -591,38 +638,17 @@ function FaqSidebarNavigation({
       pattern,
       patternOpacity,
       patternClassName,
-      className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+      className: cn(pattern && "overflow-visible", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
-              "mx-auto flex max-w-3xl flex-col text-left md:text-center",
+              "flex flex-col text-left mb-12 md:mb-24 gap-0 text-balance items-start max-w-full md:max-w-md",
               headerClassName
-            ),
-            children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    getTextColor(background, "muted"),
-                    "lg:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-            ]
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -633,17 +659,21 @@ function FaqSidebarNavigation({
               contentWrapperClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 flex gap-2 overflow-x-auto pb-2 lg:flex-col lg:gap-2 lg:overflow-visible lg:pb-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 flex gap-1 overflow-x-auto lg:flex-col lg:gap-2 lg:overflow-visible p-2 ring-2 rounded-lg", children: [
                 categories && categories.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     onClick: () => setActiveCategory("all"),
                     className: cn(
-                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      "cursor-pointer",
+                      "shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
                       activeCategory === "all" ? cn(
                         "bg-primary text-primary-foreground",
                         navButtonActiveClassName
-                      ) : cn("hover:bg-muted", navButtonClassName)
+                      ) : cn(
+                        "hover:bg-muted hover:text-muted-foreground",
+                        navButtonClassName
+                      )
                     ),
                     children: "All"
                   }
@@ -653,11 +683,15 @@ function FaqSidebarNavigation({
                   {
                     onClick: () => setActiveCategory(category.id),
                     className: cn(
-                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      "cursor-pointer",
+                      "shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
                       activeCategory === category.id ? cn(
                         "bg-primary text-primary-foreground",
                         navButtonActiveClassName
-                      ) : cn("hover:bg-muted", navButtonClassName)
+                      ) : cn(
+                        "hover:bg-muted hover:text-muted-foreground",
+                        navButtonClassName
+                      )
                     ),
                     children: category.title
                   },

package/dist/faq-sidebar-navigation.d.cts

@@ -115,6 +115,6 @@ interface FaqSidebarNavigationProps {
      */
     accordionContentClassName?: string;
 }
-declare function FaqSidebarNavigation({ heading, description, categories, categoriesSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, descriptionClassName, contentWrapperClassName, navClassName, navButtonClassName, navButtonActiveClassName, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqSidebarNavigationProps): react_jsx_runtime.JSX.Element;
+declare function FaqSidebarNavigation({ heading, description, descriptionClassName, categories, categoriesSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, headerClassName, headingClassName, contentWrapperClassName, navClassName, navButtonClassName, navButtonActiveClassName, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqSidebarNavigationProps): react_jsx_runtime.JSX.Element;
 
 export { type FaqCategory, type FaqItem, FaqSidebarNavigation, type FaqSidebarNavigationProps };

package/dist/faq-sidebar-navigation.d.ts

@@ -115,6 +115,6 @@ interface FaqSidebarNavigationProps {
      */
     accordionContentClassName?: string;
 }
-declare function FaqSidebarNavigation({ heading, description, categories, categoriesSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, descriptionClassName, contentWrapperClassName, navClassName, navButtonClassName, navButtonActiveClassName, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqSidebarNavigationProps): react_jsx_runtime.JSX.Element;
+declare function FaqSidebarNavigation({ heading, description, descriptionClassName, categories, categoriesSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, headerClassName, headingClassName, contentWrapperClassName, navClassName, navButtonClassName, navButtonActiveClassName, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqSidebarNavigationProps): react_jsx_runtime.JSX.Element;
 
 export { type FaqCategory, type FaqItem, FaqSidebarNavigation, type FaqSidebarNavigationProps };

package/dist/faq-sidebar-navigation.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React from 'react';
-import React__default, { 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';
@@ -11,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 });
@@ -110,7 +84,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -415,7 +389,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -476,21 +450,53 @@ 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 = 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 FaqSidebarNavigation({
   heading,
   description,
+  descriptionClassName,
   categories,
   categoriesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
-  descriptionClassName,
   contentWrapperClassName,
   navClassName,
   navButtonClassName,
@@ -502,7 +508,7 @@ function FaqSidebarNavigation({
   accordionTriggerClassName,
   accordionContentClassName
 }) {
-  const [activeCategory, setActiveCategory] = React.useState(
+  const [activeCategory, setActiveCategory] = React4.useState(
     categories && categories.length > 1 ? "all" : categories?.[0]?.id || ""
   );
   const filteredCategories = useMemo(() => {
@@ -549,7 +555,7 @@ function FaqSidebarNavigation({
                   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: cn("lg:text-lg"), children: item.answer })
                   }
                 )
               ]
@@ -560,7 +566,48 @@ function FaqSidebarNavigation({
       },
       category.id
     )) });
-  }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, background]);
+  }, [
+    categoriesSlot,
+    filteredCategories,
+    categoriesWrapperClassName,
+    categoryTitleClassName,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName,
+    background
+  ]);
+  const contentItems = useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "font-semibold text-4xl md:text-5xl lg:text-6xl",
+            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,
     {
@@ -569,38 +616,17 @@ function FaqSidebarNavigation({
       pattern,
       patternOpacity,
       patternClassName,
-      className,
-      children: /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+      className: cn(pattern && "overflow-visible", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
-              "mx-auto flex max-w-3xl flex-col text-left md:text-center",
+              "flex flex-col text-left mb-12 md:mb-24 gap-0 text-balance items-start max-w-full md:max-w-md",
               headerClassName
-            ),
-            children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    getTextColor(background, "muted"),
-                    "lg:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-            ]
+            )
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -611,17 +637,21 @@ function FaqSidebarNavigation({
               contentWrapperClassName
             ),
             children: [
-              /* @__PURE__ */ jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-24 flex gap-2 overflow-x-auto pb-2 lg:flex-col lg:gap-2 lg:overflow-visible lg:pb-0", children: [
+              /* @__PURE__ */ jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-24 flex gap-1 overflow-x-auto lg:flex-col lg:gap-2 lg:overflow-visible p-2 ring-2 rounded-lg", children: [
                 categories && categories.length > 1 && /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: () => setActiveCategory("all"),
                     className: cn(
-                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      "cursor-pointer",
+                      "shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
                       activeCategory === "all" ? cn(
                         "bg-primary text-primary-foreground",
                         navButtonActiveClassName
-                      ) : cn("hover:bg-muted", navButtonClassName)
+                      ) : cn(
+                        "hover:bg-muted hover:text-muted-foreground",
+                        navButtonClassName
+                      )
                     ),
                     children: "All"
                   }
@@ -631,11 +661,15 @@ function FaqSidebarNavigation({
                   {
                     onClick: () => setActiveCategory(category.id),
                     className: cn(
-                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      "cursor-pointer",
+                      "shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
                       activeCategory === category.id ? cn(
                         "bg-primary text-primary-foreground",
                         navButtonActiveClassName
-                      ) : cn("hover:bg-muted", navButtonClassName)
+                      ) : cn(
+                        "hover:bg-muted hover:text-muted-foreground",
+                        navButtonClassName
+                      )
                     ),
                     children: category.title
                   },