react-next-star-rating 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface StarRatingProps {
+    value?: number;
+    max?: number;
+    size?: number;
+    readOnly?: boolean;
+    onChange?: (value: number) => void;
+}
+declare const StarRating: React.FC<StarRatingProps>;
+
+export { StarRating, type StarRatingProps };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface StarRatingProps {
+    value?: number;
+    max?: number;
+    size?: number;
+    readOnly?: boolean;
+    onChange?: (value: number) => void;
+}
+declare const StarRating: React.FC<StarRatingProps>;
+
+export { StarRating, type StarRatingProps };

package/dist/index.js

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  StarRating: () => StarRating
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/StarRating.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StarRating = ({
+  value = 0,
+  max = 5,
+  size = 24,
+  readOnly = false,
+  onChange
+}) => {
+  const [hover, setHover] = (0, import_react.useState)(null);
+  const displayValue = hover != null ? hover : value;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 4 }, children: Array.from({ length: max }).map((_, i) => {
+    const starValue = i + 1;
+    const filled = starValue <= displayValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: filled ? "gold" : "none",
+        stroke: "gold",
+        strokeWidth: "2",
+        style: { cursor: readOnly ? "default" : "pointer" },
+        onMouseEnter: () => !readOnly && setHover(starValue),
+        onMouseLeave: () => !readOnly && setHover(null),
+        onClick: () => !readOnly && (onChange == null ? void 0 : onChange(starValue)),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "12 2 15 9 22 9 17 14 19 22 12 18 5 22 7 14 2 9 9 9" })
+      },
+      i
+    );
+  }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StarRating
+});

package/dist/index.mjs

@@ -0,0 +1,37 @@
+// src/StarRating.tsx
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var StarRating = ({
+  value = 0,
+  max = 5,
+  size = 24,
+  readOnly = false,
+  onChange
+}) => {
+  const [hover, setHover] = useState(null);
+  const displayValue = hover != null ? hover : value;
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: Array.from({ length: max }).map((_, i) => {
+    const starValue = i + 1;
+    const filled = starValue <= displayValue;
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: filled ? "gold" : "none",
+        stroke: "gold",
+        strokeWidth: "2",
+        style: { cursor: readOnly ? "default" : "pointer" },
+        onMouseEnter: () => !readOnly && setHover(starValue),
+        onMouseLeave: () => !readOnly && setHover(null),
+        onClick: () => !readOnly && (onChange == null ? void 0 : onChange(starValue)),
+        children: /* @__PURE__ */ jsx("polygon", { points: "12 2 15 9 22 9 17 14 19 22 12 18 5 22 7 14 2 9 9 9" })
+      },
+      i
+    );
+  }) });
+};
+export {
+  StarRating
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "react-next-star-rating",
+  "version": "1.0.0",
+  "description": "Star rating component for React and Next.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts"
+  },
+  "keywords": [
+    "react",
+    "nextjs",
+    "star-rating",
+    "rating"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.13",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}