From 5b4056e3d2344b463955e3fe443bebb46fa92d7b Mon Sep 17 00:00:00 2001
From: Natxo <1172351+natxocc@users.noreply.github.com>
Date: Tue, 31 Mar 2026 12:18:07 +0200
Subject: [PATCH] Add Rating component for star rating input

---
 src/components/Rating.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/Rating.js

diff --git a/src/components/Rating.js b/src/components/Rating.js
new file mode 100644
index 0000000..04fc2ae
--- /dev/null
+++ b/src/components/Rating.js
@@ -0,0 +1,34 @@
+import { $html } from "sigpro";
+import { val } from "../core/utils.js";
+
+/** RATING */
+export const Rating = (props) => {
+  const { value, count = 5, mask = "mask-star", readonly = false, ...rest } = props;
+  
+  // Generamos un ID único para el grupo de radio buttons
+  const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
+
+  return $html(
+    "div",
+    {
+      ...rest,
+      class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`,
+    },
+    Array.from({ length: val(count) }, (_, i) => {
+      const starValue = i + 1;
+
+      return $html("input", {
+        type: "radio",
+        name: ratingGroup,
+        class: `mask ${mask}`,
+        "aria-label": `${starValue} star`,
+        checked: () => Math.round(val(value)) === starValue,
+        onchange: () => {
+          if (!val(readonly) && typeof value === "function") {
+            value(starValue);
+          }
+        },
+      });
+    })
+  );
+};