From cefeae4a8b52e8c79b18380af855886129531bae Mon Sep 17 00:00:00 2001
From: Natxo <1172351+natxocc@users.noreply.github.com>
Date: Tue, 31 Mar 2026 12:11:57 +0200
Subject: [PATCH] Add Select component for dropdown selection

Implement a Select component with label and options.
---
 src/components/Select.js | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/Select.js

diff --git a/src/components/Select.js b/src/components/Select.js
new file mode 100644
index 0000000..f215fb3
--- /dev/null
+++ b/src/components/Select.js
@@ -0,0 +1,36 @@
+import { $html, $for } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+
+/** SELECT */
+export const Select = (props) => {
+  const { label, options, value, ...rest } = props;
+
+  const selectEl = $html(
+    "select",
+    {
+      ...rest,
+      class: joinClass("select select-bordered w-full", props.class),
+      value: value
+    },
+    $for(
+      () => val(options) || [],
+      (opt) =>
+        $html(
+          "option",
+          {
+            value: opt.value,
+            $selected: () => String(val(value)) === String(opt.value),
+          },
+          opt.label,
+        ),
+      (opt) => opt.value,
+    ),
+  );
+
+  if (!label) return selectEl;
+
+  return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
+    $html("span", {}, label), 
+    selectEl
+  ]);
+};