feat(component): add accordion component and documentation (#77)

### Description

The accordion component is a vertically stacked set of interactive headings that each contain a title, content, or both.

### What type of PR is this? (check all applicable)

- [x] 🍕 Feature
- [x] 📝 Documentation Update

### Mobile & Desktop Screenshots/Recordings

![image](https://github.com/user-attachments/assets/d7953477-9a18-41e0-9aa1-3a8102803b9a)

apps/www/components/preview/accordion/accordionVariants.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { VariantProps } from "class-variance-authority";
+import React from "react";
+import {
+  Accordion,
+  Accordions,
+  AccordionsVariants,
+} from "ruru-ui/components/accordion";
+import { Checkbox } from "ruru-ui/components/checkbox";
+import { Label } from "ruru-ui/components/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "ruru-ui/components/select";
+
+type Props = {};
+
+export default function AccordionVariants({}: Props) {
+  const [variant, setVariant] =
+    React.useState<VariantProps<typeof AccordionsVariants>["variant"]>(
+      "default",
+    );
+
+  const [theme, setTheme] =
+    React.useState<VariantProps<typeof AccordionsVariants>["theme"]>("default");
+
+  const [showCopyButton, setShowCopyButton] = React.useState(false);
+
+  return (
+    <div className="min-h-[400px] flex flex-col gap-6 justify-center items-center">
+      <div className="flex flex-row gap-2 items-center">
+        <Select
+          value={variant as any}
+          onValueChange={(value: any) => setVariant(value)}
+        >
+          <SelectTrigger className="w-[180px]">
+            <Label>
+              <span>Variant</span>
+            </Label>
+            <SelectValue placeholder="Select a varient" />
+          </SelectTrigger>
+          <SelectContent>
+            {["default", "primary", "none"].map((item) => (
+              <SelectItem key={item} value={item}>
+                {item}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select
+          value={theme as any}
+          onValueChange={(value: any) => setTheme(value)}
+        >
+          <SelectTrigger className="w-[180px]">
+            <Label>
+              <span>Theme</span>
+            </Label>
+            <SelectValue placeholder="Select a theme" />
+          </SelectTrigger>
+          <SelectContent>
+            {["default", "primary", "secondary", "tertiary"].map((item) => (
+              <SelectItem key={item} value={item}>
+                {item}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <div className="border rounded-md py-2 px-3 flex items-center gap-2">
+          <Checkbox
+            id="showCopyButton"
+            checked={showCopyButton}
+            onCheckedChange={(c) => setShowCopyButton(!!c)}
+          />
+          <Label htmlFor="showCopyButton">Copy Button</Label>
+        </div>
+      </div>
+
+      <Accordions
+        className="max-w-[600px]"
+        type="single"
+        variant={variant}
+        theme={theme}
+        showCopyButton={showCopyButton}
+      >
+        {Array.from(new Array(4)).map((_, index) => (
+          <Accordion
+            id={`item-${index}`}
+            key={index}
+            trigger={
+              <span className="w-full text-left py-4 text-current">
+                Accordion Item {index + 1}
+              </span>
+            }
+          >
+            This is the content of the accordion item {index + 1}
+          </Accordion>
+        ))}
+      </Accordions>
+    </div>
+  );
+}

apps/www/components/preview/index.tsx

@@ -25,6 +25,7 @@ import {
   SelectValue,
 } from "ruru-ui/components/select";
 import { Label } from "ruru-ui/components/label";
+import { Accordions, Accordion } from "ruru-ui/components/accordion";
 
 import { BadgePreview } from "../badgePreview";
 import Tabspreview from "../tabs";
@@ -185,5 +186,24 @@ export default {
       <FormPreview />
     </Wrapper>
   ),
+  accordion: (
+    <Wrapper>
+      <Accordions type="single" collapsible className="w-full max-w-[500px]">
+        <Accordion id="item-1" trigger="Is it accessible?" TClassName="py-4">
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </Accordion>
+        <Accordion id="item-2" trigger="Is it responsive?" TClassName="py-4">
+          Yes. It is responsive and mobile-friendly.
+        </Accordion>
+        <Accordion id="item-3" trigger="Is it customizable?" TClassName="py-4">
+          Yes. It is customizable and supports multiple themes and variants. But
+          the core components can also be imported for custom styling.
+        </Accordion>
+        <Accordion id="item-4" trigger="Is it animated?" TClassName="py-4">
+          Yes. It is animated and supports custom animations through CSS or JS.
+        </Accordion>
+      </Accordions>
+    </Wrapper>
+  ),
   dropzone: <DropzonePreview />,
 } as Record<string, ReactNode>;