Updateing Docs

src/components/List.js

@@ -1,20 +1,22 @@
+// components/List.js
 import { $html, $if, $for } from "sigpro";
-import { joinClass, val } from "../core/utils.js";
+import { ui, val } from "../core/utils.js";
 
-/** LIST */
+/**
+ * List component
+ * 
+ * daisyUI classes used:
+ * - list, list-row, list-bullet, list-image, list-none
+ * - bg-base-100, rounded-box, shadow-md
+ * - p-4, pb-2, text-xs, opacity-60
+ * - flex, items-center, gap-2
+ */
 export const List = (props) => {
-  const { 
-    items, 
-    header, 
-    render, 
-    keyFn = (item, index) => index,
-    class: className, 
-    ...rest 
-  } = props;
+  const { class: className, items, header, render, keyFn = (item, index) => index, ...rest } = props;
 
   const listItems = $for(
-    items, 
-    (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), 
+    items,
+    (item, index) => $html("li", { class: "list-row" }, [render(item, index)]),
     keyFn
   );
 
@@ -22,7 +24,7 @@ export const List = (props) => {
     "ul",
     {
       ...rest,
-      class: joinClass("list bg-base-100 rounded-box shadow-md", className),
+      class: ui('list bg-base-100 rounded-box shadow-md', className),
     },
     header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems
   );