Accordion Props to Control State

lib/components/display/accordion.jsx

@@ -1,4 +1,8 @@
-import { Disclosure } from "@headlessui/react";
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
 import { VscChevronRight, VscChevronDown } from "react-icons/vsc";
 import gwMerge from "../../gw-merge";
 
@@ -7,26 +11,34 @@ function Accordion({
   defaultOpen = false,
   unmountOnClose = false,
   className,
+  isOpen,
+  onToggle,
   children,
+  ...props
 }) {
   return (
     <Disclosure defaultOpen={defaultOpen}>
       {({ open }) => {
+        const isExpanded = isOpen ?? open;
         return (
           <>
-            <Disclosure.Button
+            <DisclosureButton
+              aria-expanded={isExpanded}
+              aria-controls={`accordion-panel`}
+              onClick={onToggle}
               className={gwMerge(
                 "gw-flex gw-justify-between gw-items-center gw-w-full gw-shadow gw-px-3 gw-py-2 gw-text-sm gw-font-semibold gw-text-gray-500 gw-bg-gray-50 hover:gw-bg-gray-100",
                 open ? "gw-rounded-t" : "gw-rounded",
                 className,
               )}
+              {...props}
             >
               {heading}
               {open ? <VscChevronDown /> : <VscChevronRight />}
-            </Disclosure.Button>
-            <Disclosure.Panel className="gw-shadow" unmount={unmountOnClose}>
+            </DisclosureButton>
+            <DisclosurePanel className="gw-shadow" unmount={unmountOnClose}>
               {children}
-            </Disclosure.Panel>
+            </DisclosurePanel>
           </>
         );
       }}

src/app-pages/documentation/display/accordion.jsx

@@ -1,4 +1,5 @@
 import { UsaceBox, Code, Text, Accordion, Badge } from "../../../../lib";
+import Link from "../../../../lib/components/navigation/link";
 import { CodeExample } from "../../../app-components/code-example";
 import PropsTable from "../../../app-components/props-table";
 import DocsPage from "../_docs-page";
@@ -38,6 +39,47 @@ const componentProps = [
     default: "false",
     desc: "Whether to unmount the content when the accordion is closed. False will cause the content to be hidden but still in the DOM.",
   },
+  {
+    name: "className",
+    type: "string",
+    default: "undefined",
+    desc: "Additional classes to apply to the accordion header.",
+  },
+  {
+    name: "isOpen",
+    type: "boolean",
+    default: "undefined",
+    desc: "Whether the accordion is open. If provided, this will override the defaultOpen prop and the open state will be controlled by the parent component.",
+  },
+  {
+    name: "onToggle",
+    type: "function",
+    default: "undefined",
+    desc: "Callback function to call when the accordion is toggled.",
+  },
+  {
+    name: "children",
+    type: "node",
+    default: "undefined",
+    desc: "The content of the accordion when expanded.",
+  },
+  {
+    name: "props",
+    type: "object",
+    default: "undefined",
+    desc: (
+      <>
+        Additional props to pass to the accordion components. See{" "}
+        <Link
+          href="https://headlessui.com/react/disclosure#disclosure-panel"
+          className="gw-underline"
+        >
+          Headless UI Disclosure
+        </Link>{" "}
+        docs for more info.
+      </>
+    ),
+  },
 ];
 
 function AccordionDocs() {