Updateing Docs

src/components/Accordion.js

@@ -1,24 +1,29 @@
+// components/Accordion.js
 import { $html } from "sigpro";
-import { joinClass } from "../core/utils.js";
+import { ui, val } from "../core/utils.js";
 
-/** ACCORDION */
+/**
+ * Accordion component
+ * 
+ * daisyUI classes used:
+ * - collapse, collapse-arrow, collapse-plus, collapse-title, collapse-content
+ * - collapse-open, collapse-close
+ * - bg-base-200, bg-base-100, bg-primary, bg-secondary
+ * - mb-2, mt-2, rounded-box
+ */
 export const Accordion = (props, children) => {
-  const { title, name, open, ...rest } = props;
+  const { class: className, title, name, open, ...rest } = props;
 
-  return $html(
-    "div",
-    {
-      ...rest,
-      class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class),
-    },
-    [
-      $html("input", {
-        type: name ? "radio" : "checkbox",
-        name: name,
-        checked: open
-      }),
-      $html("div", { class: "collapse-title text-xl font-medium" }, title),
-      $html("div", { class: "collapse-content" }, children),
-    ],
-  );
-};
+  return $html("div", {
+    ...rest,
+    class: ui('collapse collapse-arrow bg-base-200 mb-2', className),
+  }, [
+    $html("input", {
+      type: name ? "radio" : "checkbox",
+      name: name,
+      checked: val(open),
+    }),
+    $html("div", { class: "collapse-title text-xl font-medium" }, title),
+    $html("div", { class: "collapse-content" }, children),
+  ]);
+};