Updateing Docs

src/components_OLD/Dropdown.js

@@ -0,0 +1,53 @@
+import { $html, $for } from "sigpro";
+import { val } from "../core/utils.js";
+
+export const Dropdown = (props, children) => {
+  const { label, icon, items, ...rest } = props;
+
+  const renderContent = () => {
+    if (items) {
+      const source = typeof items === "function" ? items : () => items;
+      return $html("ul", { 
+        tabindex: 0, 
+        class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300" 
+      }, [
+        $for(source, (item) => 
+          $html("li", {}, [
+            $html("a", { 
+              class: item.class || "",
+              onclick: (e) => {
+                if (item.onclick) item.onclick(e);
+                if (document.activeElement) document.activeElement.blur();
+              }
+            }, [
+              item.icon ? $html("span", {}, item.icon) : null,
+              $html("span", {}, item.label)
+            ])
+          ])
+        )
+      ]);
+    }
+
+    return $html("div", { 
+      tabindex: 0, 
+      class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300" 
+    }, [
+      typeof children === "function" ? children() : children
+    ]);
+  };
+
+  return $html("div", {
+    ...rest,
+    class: () => `dropdown ${val(props.class) || ""}`,
+  }, [
+    $html("div", {
+      tabindex: 0,
+      role: "button",
+      class: "btn m-1 flex items-center gap-2",
+    }, [
+      icon ? (typeof icon === "function" ? icon() : icon) : null, 
+      label ? (typeof label === "function" ? label() : label) : null
+    ]),
+    renderContent()
+  ]);
+};