From 7437deaa868b0688b1e36934cc2cf39849602dc2 Mon Sep 17 00:00:00 2001
From: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Date: Mon, 1 Sep 2025 19:42:12 +0530
Subject: [PATCH] [WEB-4689]chore: added accordion to propel (#7641)

* chore: added accordion to propel

* fix: lint errors

* fix: updated export path

* fix: lint errors

* chore: made accordion into compound component

* fix: coderabbit suggestions
---
 packages/propel/package.json                |  5 +-
 packages/propel/src/accordion/accordion.tsx | 88 +++++++++++++++++++++
 packages/propel/src/accordion/index.ts      |  1 +
 3 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 packages/propel/src/accordion/accordion.tsx
 create mode 100644 packages/propel/src/accordion/index.ts

diff --git a/packages/propel/package.json b/packages/propel/package.json
index 84026651a..3fbf19868 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -25,8 +25,9 @@
     "./combobox": "./src/combobox/index.ts",
     "./tooltip": "./src/tooltip/index.ts",
     "./styles/fonts": "./src/styles/fonts/index.css",
-    "./card": "./src/card/index.ts",
-    "./switch": "./src/switch/index.ts"
+    "./switch": "./src/switch/index.ts",
+    "./accordion": "./src/accordion/index.ts",
+    "./card": "./src/card/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
new file mode 100644
index 000000000..1d9901966
--- /dev/null
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -0,0 +1,88 @@
+import { Accordion as BaseAccordion } from "@base-ui-components/react";
+import { PlusIcon } from "lucide-react";
+import * as React from "react";
+
+interface AccordionRootProps {
+  defaultValue?: string[];
+  allowMultiple?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+interface AccordionItemProps {
+  value: string;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+interface AccordionTriggerProps {
+  className?: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  asChild?: boolean;
+  iconClassName?: string;
+}
+
+interface AccordionContentProps {
+  className?: string;
+  contentWrapperClassName?: string;
+  children: React.ReactNode;
+}
+
+const AccordionRoot: React.FC<AccordionRootProps> = ({
+  defaultValue = [],
+  allowMultiple = false,
+  className = "",
+  children,
+}) => (
+  <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 aria-hidden="true" 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}
+        <span aria-hidden="true" className={`flex-shrink-0 ${iconClassName}`}>
+          {icon}
+        </span>
+      </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,
+};
diff --git a/packages/propel/src/accordion/index.ts b/packages/propel/src/accordion/index.ts
new file mode 100644
index 000000000..d236f3b99
--- /dev/null
+++ b/packages/propel/src/accordion/index.ts
@@ -0,0 +1 @@
+export * from "./accordion";