Add Rating component for star rating input

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);
+          }
+        },
+      });
+    })
+  );
+};