From 5cc257a00f2a75caf8aab49f0a6c5862994c7f5e Mon Sep 17 00:00:00 2001
From: vamsikrishnamathala <matalav55@gmail.com>
Date: Mon, 25 Aug 2025 16:32:04 +0530
Subject: [PATCH 1/6] chore: added accordion to propel

---
 packages/propel/src/accordion/accordion.tsx | 65 +++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/propel/src/accordion/accordion.tsx

diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
new file mode 100644
index 00000000000..918e531bd7d
--- /dev/null
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -0,0 +1,65 @@
+import { Accordion as BaseAccordion } from "@base-ui-components/react/accordion";
+import { PlusIcon } from "lucide-react";
+import * as React from "react";
+
+export interface AccordionItem {
+  id: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  allowMultiple?: boolean;
+  defaultValue?: string[];
+  className?: string;
+  itemClassName?: string;
+  triggerClassName?: string;
+  panelClassName?: string;
+  icon?: React.ReactNode;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  allowMultiple = false,
+  defaultValue = [],
+  className = "",
+  itemClassName = "",
+  triggerClassName = "",
+  panelClassName = "",
+  icon = (
+    <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+  ),
+}) => {
+  return (
+    <BaseAccordion.Root
+      defaultValue={defaultValue}
+      openMultiple={allowMultiple}
+      className={`flex flex-col justify-center text-gray-900 ${className}`}
+    >
+      {items.map((item) => (
+        <BaseAccordion.Item
+          key={item.id}
+          value={item.id}
+          disabled={item.disabled}
+          className={`border-b border-gray-200 last:border-0 ${itemClassName}`}
+        >
+          <BaseAccordion.Header>
+            <BaseAccordion.Trigger
+              className={`group relative flex w-full items-center justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-medium hover:bg-gray-100 focus-visible:z-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 disabled:cursor-not-allowed disabled:opacity-50 ${triggerClassName}`}
+            >
+              {item.title}
+              {icon}
+            </BaseAccordion.Trigger>
+          </BaseAccordion.Header>
+          <BaseAccordion.Panel
+            className={`h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 ${panelClassName}`}
+          >
+            <div className="p-3">{item.content}</div>
+          </BaseAccordion.Panel>
+        </BaseAccordion.Item>
+      ))}
+    </BaseAccordion.Root>
+  );
+};

From 0fe7536617bed45000a7d995c44d6a6ea62d44bf Mon Sep 17 00:00:00 2001
From: vamsikrishnamathala <matalav55@gmail.com>
Date: Mon, 25 Aug 2025 16:51:30 +0530
Subject: [PATCH 2/6] fix: lint errors

---
 packages/propel/package.json                |  3 +-
 packages/propel/src/accordion/accordion.tsx | 64 ++++++++++-----------
 2 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/packages/propel/package.json b/packages/propel/package.json
index b18bd730c65..d716fc0bb98 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -23,7 +23,8 @@
     "./combobox": "./src/combobox/index.ts",
     "./tooltip": "./src/tooltip/index.ts",
     "./styles/fonts": "./src/styles/fonts/index.css",
-    "./switch": "./src/switch/index.ts"
+    "./switch": "./src/switch/index.ts",
+    "./accordion": "./src/accordion/index.ts"
   },
   "dependencies": {
     "@base-ui-components/react": "^1.0.0-beta.2",
diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
index 918e531bd7d..67f85afdb99 100644
--- a/packages/propel/src/accordion/accordion.tsx
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -28,38 +28,34 @@ export const Accordion: React.FC<AccordionProps> = ({
   itemClassName = "",
   triggerClassName = "",
   panelClassName = "",
-  icon = (
-    <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
-  ),
-}) => {
-  return (
-    <BaseAccordion.Root
-      defaultValue={defaultValue}
-      openMultiple={allowMultiple}
-      className={`flex flex-col justify-center text-gray-900 ${className}`}
-    >
-      {items.map((item) => (
-        <BaseAccordion.Item
-          key={item.id}
-          value={item.id}
-          disabled={item.disabled}
-          className={`border-b border-gray-200 last:border-0 ${itemClassName}`}
-        >
-          <BaseAccordion.Header>
-            <BaseAccordion.Trigger
-              className={`group relative flex w-full items-center justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-medium hover:bg-gray-100 focus-visible:z-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 disabled:cursor-not-allowed disabled:opacity-50 ${triggerClassName}`}
-            >
-              {item.title}
-              {icon}
-            </BaseAccordion.Trigger>
-          </BaseAccordion.Header>
-          <BaseAccordion.Panel
-            className={`h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 ${panelClassName}`}
+  icon = <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />,
+}) => (
+  <BaseAccordion.Root
+    defaultValue={defaultValue}
+    openMultiple={allowMultiple}
+    className={`flex flex-col justify-center text-gray-900 ${className}`}
+  >
+    {items.map((item) => (
+      <BaseAccordion.Item
+        key={item.id}
+        value={item.id}
+        disabled={item.disabled}
+        className={`border-b border-gray-200 last:border-0 ${itemClassName}`}
+      >
+        <BaseAccordion.Header>
+          <BaseAccordion.Trigger
+            className={`group relative flex w-full items-center justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-medium hover:bg-gray-100 focus-visible:z-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 disabled:cursor-not-allowed disabled:opacity-50 ${triggerClassName}`}
           >
-            <div className="p-3">{item.content}</div>
-          </BaseAccordion.Panel>
-        </BaseAccordion.Item>
-      ))}
-    </BaseAccordion.Root>
-  );
-};
+            {item.title}
+            {icon}
+          </BaseAccordion.Trigger>
+        </BaseAccordion.Header>
+        <BaseAccordion.Panel
+          className={`h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 ${panelClassName}`}
+        >
+          <div className="p-3">{item.content}</div>
+        </BaseAccordion.Panel>
+      </BaseAccordion.Item>
+    ))}
+  </BaseAccordion.Root>
+);

From 82e79360b4763f2955d9c565694df5e3e9b47ab2 Mon Sep 17 00:00:00 2001
From: vamsikrishnamathala <matalav55@gmail.com>
Date: Mon, 25 Aug 2025 17:22:08 +0530
Subject: [PATCH 3/6] fix: updated export path

---
 packages/propel/src/accordion/index.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 packages/propel/src/accordion/index.ts

diff --git a/packages/propel/src/accordion/index.ts b/packages/propel/src/accordion/index.ts
new file mode 100644
index 00000000000..52d56b7eecf
--- /dev/null
+++ b/packages/propel/src/accordion/index.ts
@@ -0,0 +1 @@
+export * from "./accordion";
\ No newline at end of file

From 39207f1cefcf6876efd97ad15ec30db119425131 Mon Sep 17 00:00:00 2001
From: vamsikrishnamathala <matalav55@gmail.com>
Date: Mon, 25 Aug 2025 18:16:46 +0530
Subject: [PATCH 4/6] fix: lint errors

---
 packages/propel/src/accordion/accordion.tsx | 4 +++-
 packages/propel/src/accordion/index.ts      | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
index 67f85afdb99..b9799f25cca 100644
--- a/packages/propel/src/accordion/accordion.tsx
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -28,7 +28,9 @@ export const Accordion: React.FC<AccordionProps> = ({
   itemClassName = "",
   triggerClassName = "",
   panelClassName = "",
-  icon = <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />,
+  icon = (
+    <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+  ),
 }) => (
   <BaseAccordion.Root
     defaultValue={defaultValue}
diff --git a/packages/propel/src/accordion/index.ts b/packages/propel/src/accordion/index.ts
index 52d56b7eecf..d236f3b99c2 100644
--- a/packages/propel/src/accordion/index.ts
+++ b/packages/propel/src/accordion/index.ts
@@ -1 +1 @@
-export * from "./accordion";
\ No newline at end of file
+export * from "./accordion";

From d1b9a4f52f8fe41cea95c12532209d8458a8197c Mon Sep 17 00:00:00 2001
From: vamsikrishnamathala <matalav55@gmail.com>
Date: Mon, 25 Aug 2025 20:52:03 +0530
Subject: [PATCH 5/6] chore: made accordion into compound component

---
 packages/propel/src/accordion/accordion.tsx | 119 ++++++++++++--------
 1 file changed, 71 insertions(+), 48 deletions(-)

diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
index b9799f25cca..6f31c8f3219 100644
--- a/packages/propel/src/accordion/accordion.tsx
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -1,63 +1,86 @@
-import { Accordion as BaseAccordion } from "@base-ui-components/react/accordion";
+import { Accordion as BaseAccordion } from "@base-ui-components/react";
 import { PlusIcon } from "lucide-react";
 import * as React from "react";
 
-export interface AccordionItem {
-  id: string;
-  title: React.ReactNode;
-  content: React.ReactNode;
+interface AccordionRootProps {
+  defaultValue?: string[];
+  allowMultiple?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+interface AccordionItemProps {
+  value: string;
   disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
 }
 
-export interface AccordionProps {
-  items: AccordionItem[];
-  allowMultiple?: boolean;
-  defaultValue?: string[];
+interface AccordionTriggerProps {
   className?: string;
-  itemClassName?: string;
-  triggerClassName?: string;
-  panelClassName?: string;
   icon?: React.ReactNode;
+  children: React.ReactNode;
+  asChild?: boolean;
+  iconClassName?: string;
 }
 
-export const Accordion: React.FC<AccordionProps> = ({
-  items,
-  allowMultiple = false,
+interface AccordionContentProps {
+  className?: string;
+  contentWrapperClassName?: string;
+  children: React.ReactNode;
+}
+
+const AccordionRoot: React.FC<AccordionRootProps> = ({
   defaultValue = [],
+  allowMultiple = false,
   className = "",
-  itemClassName = "",
-  triggerClassName = "",
-  panelClassName = "",
-  icon = (
-    <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
-  ),
+  children,
 }) => (
-  <BaseAccordion.Root
-    defaultValue={defaultValue}
-    openMultiple={allowMultiple}
-    className={`flex flex-col justify-center text-gray-900 ${className}`}
-  >
-    {items.map((item) => (
-      <BaseAccordion.Item
-        key={item.id}
-        value={item.id}
-        disabled={item.disabled}
-        className={`border-b border-gray-200 last:border-0 ${itemClassName}`}
-      >
-        <BaseAccordion.Header>
-          <BaseAccordion.Trigger
-            className={`group relative flex w-full items-center justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-medium hover:bg-gray-100 focus-visible:z-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 disabled:cursor-not-allowed disabled:opacity-50 ${triggerClassName}`}
-          >
-            {item.title}
-            {icon}
-          </BaseAccordion.Trigger>
-        </BaseAccordion.Header>
-        <BaseAccordion.Panel
-          className={`h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 ${panelClassName}`}
-        >
-          <div className="p-3">{item.content}</div>
-        </BaseAccordion.Panel>
-      </BaseAccordion.Item>
-    ))}
+  <BaseAccordion.Root defaultValue={defaultValue} openMultiple={allowMultiple} className={`text-base ${className}`}>
+    {children}
   </BaseAccordion.Root>
 );
+
+const AccordionItem: React.FC<AccordionItemProps> = ({ value, disabled, className = "", children }) => (
+  <BaseAccordion.Item value={value} disabled={disabled} className={`relative ${className}`}>
+    {children}
+  </BaseAccordion.Item>
+);
+
+const AccordionTrigger: React.FC<AccordionTriggerProps> = ({
+  className = "",
+  icon = <PlusIcon className="transition-all ease-out  group-data-[panel-open]:rotate-45" />,
+  iconClassName = "",
+  children,
+  asChild = false,
+}) => (
+  <BaseAccordion.Header>
+    {asChild ? (
+      <BaseAccordion.Trigger className={`w-full py-2 ${className}`}>{children}</BaseAccordion.Trigger>
+    ) : (
+      <BaseAccordion.Trigger className={`flex w-full items-center justify-between gap-2 py-2 ${className}`}>
+        {children}
+        <div className={`flex-shrink-0 ${iconClassName}`}>{icon}</div>
+      </BaseAccordion.Trigger>
+    )}
+  </BaseAccordion.Header>
+);
+
+const AccordionContent: React.FC<AccordionContentProps> = ({
+  className = "",
+  contentWrapperClassName = "",
+  children,
+}) => (
+  <BaseAccordion.Panel
+    className={`h-[var(--accordion-panel-height)] overflow-hidden transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 ${className}`}
+  >
+    <div className={`py-2 ${contentWrapperClassName}`}>{children}</div>
+  </BaseAccordion.Panel>
+);
+
+export const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent,
+};

From 505cff71647a84008d395752270f9a29867ba930 Mon Sep 17 00:00:00 2001
From: vamsikrishnamathala <matalav55@gmail.com>
Date: Thu, 28 Aug 2025 13:23:21 +0530
Subject: [PATCH 6/6] fix: coderabbit suggestions

---
 packages/propel/src/accordion/accordion.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
index 6f31c8f3219..1d99019667b 100644
--- a/packages/propel/src/accordion/accordion.tsx
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -49,7 +49,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({ value, disabled, classNam
 
 const AccordionTrigger: React.FC<AccordionTriggerProps> = ({
   className = "",
-  icon = <PlusIcon className="transition-all ease-out  group-data-[panel-open]:rotate-45" />,
+  icon = <PlusIcon aria-hidden="true" className="transition-all ease-out  group-data-[panel-open]:rotate-45" />,
   iconClassName = "",
   children,
   asChild = false,
@@ -60,7 +60,9 @@ const AccordionTrigger: React.FC<AccordionTriggerProps> = ({
     ) : (
       <BaseAccordion.Trigger className={`flex w-full items-center justify-between gap-2 py-2 ${className}`}>
         {children}
-        <div className={`flex-shrink-0 ${iconClassName}`}>{icon}</div>
+        <span aria-hidden="true" className={`flex-shrink-0 ${iconClassName}`}>
+          {icon}
+        </span>
       </BaseAccordion.Trigger>
     )}
   </BaseAccordion.Header>