Merge pull request #12 from DocuBook/dev-9dd141d

chore: Sync package version v1.16.0
feat(accordion): add accordion group context and update styling
- Introduce `AccordionGroupContext` to support grouped accordions
- Update styling to differentiate standalone and grouped accordions
- Add background hover states for improved interactivity
- Register `AccordionGroup` in markdown components

app/page.tsx

@@ -25,7 +25,7 @@ export default function Home() {
             )}
           >
             <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
-              <span>🚀 New Version - Release v1.15.2</span>
+              <span>🚀 New Version - Release v1.16.0</span>
               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
             </AnimatedShinyText>
           </div>

components/contexts/AccordionContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+// Create a context to check if a component is inside an accordion group
+export const AccordionGroupContext = createContext<{ inGroup: boolean } | null>(null);

components/markdown/AccordionGroupMdx.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import React, { ReactNode } from "react";
+import clsx from "clsx";
+import { AccordionGroupContext } from "@/components/contexts/AccordionContext";
+
+interface AccordionGroupProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const AccordionGroup: React.FC<AccordionGroupProps> = ({ children, className }) => {
+
+  return (
+    // Wrap all children with the AccordionGroupContext.Provider
+    // so that any nested accordions know they are inside a group.
+    // This enables group-specific behavior in child components.
+    <AccordionGroupContext.Provider value={{ inGroup: true }}>
+      <div
+        className={clsx(
+          "border rounded-lg overflow-hidden",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionGroupContext.Provider>
+  );
+};
+
+export default AccordionGroup;

components/markdown/AccordionMdx.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { ReactNode, useState } from 'react';
+import { ReactNode, useState, useContext } from 'react';
 import { ChevronRight } from 'lucide-react';
 import * as Icons from "lucide-react";
 import { cn } from '@/lib/utils';
+import { AccordionGroupContext } from '@/components/contexts/AccordionContext'; 
 
 type AccordionProps = {
     title: string;
@@ -18,16 +19,26 @@ const Accordion: React.FC<AccordionProps> = ({
     defaultOpen = false,
     icon,
 }: AccordionProps) => {
+    const groupContext = useContext(AccordionGroupContext);
+    const isInGroup = groupContext?.inGroup === true;
     const [isOpen, setIsOpen] = useState(defaultOpen);
-
     const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null;
 
+    // The main wrapper div for the accordion.
+    // All styling logic for the accordion container is handled here.
     return (
-        <div className={cn("border rounded-lg overflow-hidden")}>
+        <div 
+            className={cn(
+                // Style for STANDALONE: full card with border & shadow
+                !isInGroup && "border rounded-lg shadow-sm",
+                // Style for IN GROUP: only a bottom border separator
+                isInGroup && "border-b last:border-b-0 border-border"
+            )}
+        >
             <button
                 type="button"
                 onClick={() => setIsOpen(!isOpen)}
-                className="flex items-center space-x-2 w-full px-4 h-12 transition-colors bg-background dark:hover:bg-muted/50 hover:bg-muted/15"
+                className="flex items-center space-x-2 w-full px-4 h-12 transition-colors bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70"
             >
                 <ChevronRight
                     className={cn(
@@ -40,7 +51,7 @@ const Accordion: React.FC<AccordionProps> = ({
             </button>
 
             {isOpen && (
-                <div className="px-4 py-3 border-t dark:bg-muted/50 bg-muted/15">
+                <div className="px-4 py-3 dark:bg-muted/10 bg-muted/15">
                     {children}
                 </div>
             )}
@@ -48,4 +59,4 @@ const Accordion: React.FC<AccordionProps> = ({
     );
 };
 
-export default Accordion;
+export default Accordion;

lib/markdown.ts

@@ -45,6 +45,7 @@ import CardGroup from "@/components/markdown/CardGroupMdx";
 import Kbd from "@/components/markdown/KeyboardMdx";
 import { Release, Changes } from "@/components/markdown/ReleaseMdx";
 import { File, Files, Folder } from "@/components/markdown/FileTreeMdx";
+import AccordionGroup from "@/components/markdown/AccordionGroupMdx";
 
 // add custom components
 const components = {
@@ -73,6 +74,7 @@ const components = {
   File,
   Files,
   Folder,
+  AccordionGroup
 };
 
 // can be used for other pages like blogs, Guides etc

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "1.15.3",
+  "version": "1.16.0",
   "private": true,
   "scripts": {
     "dev": "next dev",