react-awesome-stars-rating 1.1.0 → 1.2.0

package/README.md

@@ -4,7 +4,7 @@
 [![CI](https://github.com/fedoryakubovich/react-awesome-stars-rating/actions/workflows/ci.yml/badge.svg)](https://github.com/fedoryakubovich/react-awesome-stars-rating/actions/workflows/ci.yml)
 [![license](https://img.shields.io/npm/l/react-awesome-stars-rating)](https://github.com/fedoryakubovich/react-awesome-stars-rating/blob/main/LICENSE)
 
-An accessible star rating component for React. Half stars from pointer position, full keyboard control, any scale or palette — in about 1.5 kB gzipped with no runtime dependencies.
+An accessible star rating component for React. Half stars from pointer position, full keyboard control, any scale or palette — in under 2 kB gzipped with no runtime dependencies.
 
 **[Live demo](https://react-awesome-stars-rating.vercel.app)** · **[Storybook](https://react-awesome-stars-rating.vercel.app/storybook)**
 
@@ -12,7 +12,7 @@ An accessible star rating component for React. Half stars from pointer position,
 
 ## Highlights
 
-- ~1.5 kB gzipped, no runtime dependencies
+- Under 2 kB gzipped, no runtime dependencies
 - Half-star precision from pointer position, plus arrow-key stepping
 - `role="slider"` with live `aria-valuenow` / `aria-valuetext`, verified with axe-core
 - ESM + CJS with correct types for each, and a UMD bundle for CDN use
@@ -82,6 +82,7 @@ export default function Example() {
 | className      | Container class                           | `string`                  | `''`            |
 | primaryColor   | Active star color                         | `string`                  | `'orange'`      |
 | secondaryColor | Inactive star color                       | `string`                  | `'grey'`        |
+| hoverColor     | Optional pointer-preview color            | `string`                  | `undefined`     |
 | isArrowSubmit  | Arrow keys trigger `onChange` immediately | `boolean`                 | `false`         |
 | ariaLabel      | Accessible label (if no `ariaLabelledBy`) | `string`                  | `'Star rating'` |
 | ariaLabelledBy | ID of element that labels the control     | `string`                  | `undefined`     |
@@ -102,6 +103,26 @@ With `isArrowSubmit`, each arrow step reports through `onChange` immediately rat
 
 When `isEdit` is `false` the control is inert regardless of `isArrowSubmit`: no hover preview, no keyboard, `tabIndex={-1}`, and `aria-readonly="true"`.
 
+### Hover preview color
+
+Set `hoverColor` to distinguish the pointer preview from both the saved value
+and inactive stars. It is opt-in, so omitting it preserves the original
+two-color presentation.
+
+```tsx
+<ReactStarsRating
+  value={3}
+  primaryColor="#f59e0b"
+  hoverColor="#38bdf8"
+  secondaryColor="#374151"
+/>
+```
+
+When the pointer previews `1.5`, the first `1.5` stars use `hoverColor`, the
+remainder of the saved value uses `primaryColor`, and inactive stars use
+`secondaryColor`. When previewing above the saved value, only the additional
+preview region uses `hoverColor`.
+
 ## Server components
 
 The package carries the `'use client'` directive, so it can be imported directly from a server component in the Next.js App Router without a wrapper.

package/dist/gradient.d.ts

@@ -7,6 +7,10 @@ type GradientProps = {
     fullId: string;
     halfId: string;
     noneId: string;
+    hoverColor?: string;
+    hoverValue?: number | null;
+    committedValue?: number;
+    hoverGradientId?: string;
 };
-declare const Gradient: ({ primaryColor, secondaryColor, offset, index, value, fullId, halfId, noneId, }: GradientProps) => import("react").JSX.Element | null;
+declare const Gradient: ({ primaryColor, secondaryColor, offset, index, value, fullId, halfId, noneId, hoverColor, hoverValue, committedValue, hoverGradientId, }: GradientProps) => import("react").JSX.Element | null;
 export default Gradient;

package/dist/index.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("react"),t=require("react/jsx-runtime");var n=({primaryColor:e,secondaryColor:n,offset:r=50,index:i,value:a,fullId:o,halfId:s,noneId:c})=>{let l=r;return i===1&&(l=Math.round(a%1*1e4)/100),i===1?(0,t.jsxs)(`defs`,{children:[(0,t.jsx)(`linearGradient`,{id:o,children:(0,t.jsx)(`stop`,{offset:`100%`,stopColor:e})}),(0,t.jsx)(`linearGradient`,{id:c,children:(0,t.jsx)(`stop`,{offset:`100%`,stopColor:n})}),(0,t.jsxs)(`linearGradient`,{id:s,children:[(0,t.jsx)(`stop`,{offset:`${l}%`,stopColor:e}),(0,t.jsx)(`stop`,{offset:`${l}%`,stopColor:n})]})]}):null},r=({viewBox:e=`0 0 306 306`,size:r,onMouseMove:i,onMouseLeave:a,onChange:o,index:s,value:c,isHalf:l,primaryColor:u,secondaryColor:d,fill:f,offset:p=50,fullId:m,halfId:h,noneId:g})=>{let _=f;return _=s<=c?`url(#${m})`:l&&Math.ceil(c)===s?`url(#${h})`:`url(#${g})`,(0,t.jsxs)(`svg`,{width:r,viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onMouseLeave:a,onClick:o,onMouseMove:i,children:[(0,t.jsx)(n,{primaryColor:u,secondaryColor:d,offset:p,index:s,value:c,fullId:m,halfId:h,noneId:g}),(0,t.jsx)(`polygon`,{fill:_,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`})]})},i={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},a=({id:n,value:a=0,onChange:o=()=>{},isEdit:s=!0,isHalf:c=!0,count:l=5,size:u=25,starGap:d=0,className:f=``,primaryColor:p=`orange`,secondaryColor:m=`grey`,isArrowSubmit:h=!1,ariaLabel:g=`Star rating`,ariaLabelledBy:_})=>{let v=(0,e.useId)().replace(/:/g,``),y=n??`react-stars-rating-${v}`,[b,x]=(0,e.useState)(()=>({sourceValue:a,displayValue:a})),S=(0,e.useRef)(null),C=b.sourceValue===a?b.displayValue:a,w=e=>{x({sourceValue:a,displayValue:e})},T=(0,e.useMemo)(()=>`fullId-${y}`,[y]),E=(0,e.useMemo)(()=>`halfId-${y}`,[y]),D=(0,e.useMemo)(()=>`noneId-${y}`,[y]);(0,e.useEffect)(()=>{S.current=null},[a]);let O=e=>{let t=e.currentTarget.getBoundingClientRect();return e.clientX-t.left>t.width/2},k=(e,t)=>c?O(e)?t:t-.5:t,A=(e,t)=>{s&&w(k(e,t))},j=()=>{s&&w(a||0)},M=()=>{let e=S.current;e!==null&&(S.current=null,o(e))},N=(e,t)=>{if(!s)return;let n=k(e,t);w(n),S.current=null,o(n)},P=e=>{let t=Math.min(Math.max(e,0),l);t!==C&&(w(t),h?(S.current=null,o(t)):S.current=t)},F=e=>{let t=C%1==.5?C:Math.round(C);P(t+e)},I=e=>{switch(e.key){case`ArrowLeft`:case`ArrowDown`:e.preventDefault(),F(c?-.5:-1);break;case`ArrowRight`:case`ArrowUp`:e.preventDefault(),F(c?.5:1);break;case`Home`:e.preventDefault(),P(0);break;case`End`:e.preventDefault(),P(l);break;case`Enter`:e.preventDefault(),S.current=null,o(C)}},L=()=>Array.from({length:l},(e,n)=>{let i=n+1,a=i===l?void 0:{paddingRight:d};return(0,t.jsx)(`span`,{className:`star star-${i}`,style:a,children:(0,t.jsx)(r,{index:i,value:C,size:u,isHalf:c,fullId:T,halfId:E,noneId:D,primaryColor:p,secondaryColor:m,onMouseMove:e=>A(e,i),onMouseLeave:j,onChange:e=>N(e,i)})},`react-stars-rating-char${i}`)}),R=s,z=Math.min(Math.max(C,0),l);return(0,t.jsx)(`span`,{id:y,role:`slider`,"aria-label":_?void 0:g,"aria-labelledby":_,"aria-valuemin":0,"aria-valuemax":l,"aria-valuenow":z,"aria-valuetext":`${z} of ${l}`,"aria-readonly":!s,tabIndex:R?0:-1,onKeyDown:R?I:void 0,onBlur:R?M:void 0,style:s?i.activeContainer:i.inActiveContainer,className:f,children:L()})};exports.ReactStarsRating=a,exports.default=a;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("react"),t=require("react/jsx-runtime");var n=(e,t)=>Math.min(100,Math.max(0,Math.round((e-(t-1))*1e4)/100)),r=({primaryColor:e,secondaryColor:r,offset:i=50,index:a,value:o,fullId:s,halfId:c,noneId:l,hoverColor:u,hoverValue:d=null,committedValue:f=o,hoverGradientId:p})=>{if(u&&d!==null&&p){let i=Math.min(f,d),o=Math.max(f,d),s=n(i,a),c=n(o,a),l=[{start:0,end:s,color:d<=f?u:e},{start:s,end:c,color:d<=f?e:u},{start:c,end:100,color:r}].filter(({start:e,end:t})=>t>e);return(0,t.jsx)(`defs`,{children:(0,t.jsx)(`linearGradient`,{id:p,children:l.flatMap(({start:e,end:n,color:r},i)=>[(0,t.jsx)(`stop`,{offset:`${e}%`,stopColor:r},`${i}-start`),(0,t.jsx)(`stop`,{offset:`${n}%`,stopColor:r},`${i}-end`)])})})}let m=i;return a===1&&(m=Math.round(o%1*1e4)/100),a===1?(0,t.jsxs)(`defs`,{children:[(0,t.jsx)(`linearGradient`,{id:s,children:(0,t.jsx)(`stop`,{offset:`100%`,stopColor:e})}),(0,t.jsx)(`linearGradient`,{id:l,children:(0,t.jsx)(`stop`,{offset:`100%`,stopColor:r})}),(0,t.jsxs)(`linearGradient`,{id:c,children:[(0,t.jsx)(`stop`,{offset:`${m}%`,stopColor:e}),(0,t.jsx)(`stop`,{offset:`${m}%`,stopColor:r})]})]}):null},i=({viewBox:e=`0 0 306 306`,size:n,onMouseMove:i,onMouseLeave:a,onChange:o,index:s,value:c,isHalf:l,primaryColor:u,secondaryColor:d,hoverColor:f,hoverValue:p=null,committedValue:m=c,fill:h,offset:g=50,fullId:_,halfId:v,noneId:y})=>{let b=h,x=`${_}-hover-${s}`;return b=f&&p!==null?`url(#${x})`:s<=c?`url(#${_})`:l&&Math.ceil(c)===s?`url(#${v})`:`url(#${y})`,(0,t.jsxs)(`svg`,{width:n,viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onMouseLeave:a,onClick:o,onMouseMove:i,children:[(0,t.jsx)(r,{primaryColor:u,secondaryColor:d,offset:g,index:s,value:c,fullId:_,halfId:v,noneId:y,hoverColor:f,hoverValue:p,committedValue:m,hoverGradientId:x}),(0,t.jsx)(`polygon`,{fill:b,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`})]})},a={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},o=({id:n,value:r=0,onChange:o=()=>{},isEdit:s=!0,isHalf:c=!0,count:l=5,size:u=25,starGap:d=0,className:f=``,primaryColor:p=`orange`,secondaryColor:m=`grey`,hoverColor:h,isArrowSubmit:g=!1,ariaLabel:_=`Star rating`,ariaLabelledBy:v})=>{let y=(0,e.useId)().replace(/:/g,``),b=n??`react-stars-rating-${y}`,[x,S]=(0,e.useState)(()=>({sourceValue:r,displayValue:r})),C=(0,e.useRef)(null),[w,T]=(0,e.useState)(null),E=x.sourceValue===r?x.displayValue:r,D=e=>{S({sourceValue:r,displayValue:e})},O=(0,e.useMemo)(()=>`fullId-${b}`,[b]),k=(0,e.useMemo)(()=>`halfId-${b}`,[b]),A=(0,e.useMemo)(()=>`noneId-${b}`,[b]);(0,e.useEffect)(()=>{C.current=null},[r]);let j=e=>{let t=e.currentTarget.getBoundingClientRect();return e.clientX-t.left>t.width/2},M=(e,t)=>c?j(e)?t:t-.5:t,N=(e,t)=>{if(!s)return;let n=M(e,t);T(n),D(n)},P=()=>{s&&(T(null),D(r||0))},F=()=>{let e=C.current;e!==null&&(C.current=null,o(e))},I=(e,t)=>{if(!s)return;let n=M(e,t);D(n),C.current=null,o(n)},L=e=>{let t=Math.min(Math.max(e,0),l);t!==E&&(D(t),g?(C.current=null,o(t)):C.current=t)},R=e=>{let t=E%1==.5?E:Math.round(E);L(t+e)},z=e=>{switch(e.key){case`ArrowLeft`:case`ArrowDown`:e.preventDefault(),R(c?-.5:-1);break;case`ArrowRight`:case`ArrowUp`:e.preventDefault(),R(c?.5:1);break;case`Home`:e.preventDefault(),L(0);break;case`End`:e.preventDefault(),L(l);break;case`Enter`:e.preventDefault(),C.current=null,o(E)}},B=()=>Array.from({length:l},(e,n)=>{let a=n+1,o=a===l?void 0:{paddingRight:d};return(0,t.jsx)(`span`,{className:`star star-${a}`,style:o,children:(0,t.jsx)(i,{index:a,value:E,size:u,isHalf:c,fullId:O,halfId:k,noneId:A,primaryColor:p,secondaryColor:m,hoverColor:h,hoverValue:w,committedValue:r,onMouseMove:e=>N(e,a),onMouseLeave:P,onChange:e=>I(e,a)})},`react-stars-rating-char${a}`)}),V=s,H=Math.min(Math.max(E,0),l);return(0,t.jsx)(`span`,{id:b,role:`slider`,"aria-label":v?void 0:_,"aria-labelledby":v,"aria-valuemin":0,"aria-valuemax":l,"aria-valuenow":H,"aria-valuetext":`${H} of ${l}`,"aria-readonly":!s,tabIndex:V?0:-1,onKeyDown:V?z:void 0,onBlur:V?F:void 0,style:s?a.activeContainer:a.inActiveContainer,className:f,children:B()})};exports.ReactStarsRating=o,exports.default=o;

package/dist/index.d.cts

@@ -70,6 +70,13 @@ export type ReactStarsRatingProps = {
      * @defaultValue 'grey'
      */
     secondaryColor?: string;
+    /**
+     * Optional color for the portion being previewed by the pointer. The saved
+     * value keeps {@link ReactStarsRatingProps.primaryColor}, so moving below an
+     * existing rating can display preview, saved, and inactive regions at once.
+     * When omitted, hover previews retain the original two-color behavior.
+     */
+    hoverColor?: string;
     /**
      * Report every arrow-key step through
      * {@link ReactStarsRatingProps.onChange} immediately, instead of waiting for
@@ -103,6 +110,6 @@ export type ReactStarsRatingProps = {
  * <ReactStarsRating value={value} onChange={setValue} isHalf size={32} />
  * ```
  */
-declare const ReactStarsRating: ({ id, value, onChange, isEdit, isHalf, count, size, starGap, className, primaryColor, secondaryColor, isArrowSubmit, ariaLabel, ariaLabelledBy, }: ReactStarsRatingProps) => import("react").JSX.Element;
+declare const ReactStarsRating: ({ id, value, onChange, isEdit, isHalf, count, size, starGap, className, primaryColor, secondaryColor, hoverColor, isArrowSubmit, ariaLabel, ariaLabelledBy, }: ReactStarsRatingProps) => import("react").JSX.Element;
 export { ReactStarsRating };
 export default ReactStarsRating;

package/dist/index.d.ts

@@ -70,6 +70,13 @@ export type ReactStarsRatingProps = {
      * @defaultValue 'grey'
      */
     secondaryColor?: string;
+    /**
+     * Optional color for the portion being previewed by the pointer. The saved
+     * value keeps {@link ReactStarsRatingProps.primaryColor}, so moving below an
+     * existing rating can display preview, saved, and inactive regions at once.
+     * When omitted, hover previews retain the original two-color behavior.
+     */
+    hoverColor?: string;
     /**
      * Report every arrow-key step through
      * {@link ReactStarsRatingProps.onChange} immediately, instead of waiting for
@@ -103,6 +110,6 @@ export type ReactStarsRatingProps = {
  * <ReactStarsRating value={value} onChange={setValue} isHalf size={32} />
  * ```
  */
-declare const ReactStarsRating: ({ id, value, onChange, isEdit, isHalf, count, size, starGap, className, primaryColor, secondaryColor, isArrowSubmit, ariaLabel, ariaLabelledBy, }: ReactStarsRatingProps) => import("react").JSX.Element;
+declare const ReactStarsRating: ({ id, value, onChange, isEdit, isHalf, count, size, starGap, className, primaryColor, secondaryColor, hoverColor, isArrowSubmit, ariaLabel, ariaLabelledBy, }: ReactStarsRatingProps) => import("react").JSX.Element;
 export { ReactStarsRating };
 export default ReactStarsRating;

package/dist/index.mjs

@@ -1 +1 @@
-"use client";import{useEffect as e,useId as t,useMemo as n,useRef as r,useState as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";var s=({primaryColor:e,secondaryColor:t,offset:n=50,index:r,value:i,fullId:s,halfId:c,noneId:l})=>{let u=n;return r===1&&(u=Math.round(i%1*1e4)/100),r===1?o(`defs`,{children:[a(`linearGradient`,{id:s,children:a(`stop`,{offset:`100%`,stopColor:e})}),a(`linearGradient`,{id:l,children:a(`stop`,{offset:`100%`,stopColor:t})}),o(`linearGradient`,{id:c,children:[a(`stop`,{offset:`${u}%`,stopColor:e}),a(`stop`,{offset:`${u}%`,stopColor:t})]})]}):null},c=({viewBox:e=`0 0 306 306`,size:t,onMouseMove:n,onMouseLeave:r,onChange:i,index:c,value:l,isHalf:u,primaryColor:d,secondaryColor:f,fill:p,offset:m=50,fullId:h,halfId:g,noneId:_})=>{let v=p;return v=c<=l?`url(#${h})`:u&&Math.ceil(l)===c?`url(#${g})`:`url(#${_})`,o(`svg`,{width:t,viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onMouseLeave:r,onClick:i,onMouseMove:n,children:[a(s,{primaryColor:d,secondaryColor:f,offset:m,index:c,value:l,fullId:h,halfId:g,noneId:_}),a(`polygon`,{fill:v,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`})]})},l={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},u=({id:o,value:s=0,onChange:u=()=>{},isEdit:d=!0,isHalf:f=!0,count:p=5,size:m=25,starGap:h=0,className:g=``,primaryColor:_=`orange`,secondaryColor:v=`grey`,isArrowSubmit:y=!1,ariaLabel:b=`Star rating`,ariaLabelledBy:x})=>{let S=t().replace(/:/g,``),C=o??`react-stars-rating-${S}`,[w,T]=i(()=>({sourceValue:s,displayValue:s})),E=r(null),D=w.sourceValue===s?w.displayValue:s,O=e=>{T({sourceValue:s,displayValue:e})},k=n(()=>`fullId-${C}`,[C]),A=n(()=>`halfId-${C}`,[C]),j=n(()=>`noneId-${C}`,[C]);e(()=>{E.current=null},[s]);let M=e=>{let t=e.currentTarget.getBoundingClientRect();return e.clientX-t.left>t.width/2},N=(e,t)=>f?M(e)?t:t-.5:t,P=(e,t)=>{d&&O(N(e,t))},F=()=>{d&&O(s||0)},I=()=>{let e=E.current;e!==null&&(E.current=null,u(e))},L=(e,t)=>{if(!d)return;let n=N(e,t);O(n),E.current=null,u(n)},R=e=>{let t=Math.min(Math.max(e,0),p);t!==D&&(O(t),y?(E.current=null,u(t)):E.current=t)},z=e=>{let t=D%1==.5?D:Math.round(D);R(t+e)},B=e=>{switch(e.key){case`ArrowLeft`:case`ArrowDown`:e.preventDefault(),z(f?-.5:-1);break;case`ArrowRight`:case`ArrowUp`:e.preventDefault(),z(f?.5:1);break;case`Home`:e.preventDefault(),R(0);break;case`End`:e.preventDefault(),R(p);break;case`Enter`:e.preventDefault(),E.current=null,u(D)}},V=()=>Array.from({length:p},(e,t)=>{let n=t+1,r=n===p?void 0:{paddingRight:h};return a(`span`,{className:`star star-${n}`,style:r,children:a(c,{index:n,value:D,size:m,isHalf:f,fullId:k,halfId:A,noneId:j,primaryColor:_,secondaryColor:v,onMouseMove:e=>P(e,n),onMouseLeave:F,onChange:e=>L(e,n)})},`react-stars-rating-char${n}`)}),H=d,U=Math.min(Math.max(D,0),p);return a(`span`,{id:C,role:`slider`,"aria-label":x?void 0:b,"aria-labelledby":x,"aria-valuemin":0,"aria-valuemax":p,"aria-valuenow":U,"aria-valuetext":`${U} of ${p}`,"aria-readonly":!d,tabIndex:H?0:-1,onKeyDown:H?B:void 0,onBlur:H?I:void 0,style:d?l.activeContainer:l.inActiveContainer,className:g,children:V()})};export{u as ReactStarsRating,u as default};
+"use client";import{useEffect as e,useId as t,useMemo as n,useRef as r,useState as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";var s=(e,t)=>Math.min(100,Math.max(0,Math.round((e-(t-1))*1e4)/100)),c=({primaryColor:e,secondaryColor:t,offset:n=50,index:r,value:i,fullId:c,halfId:l,noneId:u,hoverColor:d,hoverValue:f=null,committedValue:p=i,hoverGradientId:m})=>{if(d&&f!==null&&m){let n=Math.min(p,f),i=Math.max(p,f),o=s(n,r),c=s(i,r),l=[{start:0,end:o,color:f<=p?d:e},{start:o,end:c,color:f<=p?e:d},{start:c,end:100,color:t}].filter(({start:e,end:t})=>t>e);return a(`defs`,{children:a(`linearGradient`,{id:m,children:l.flatMap(({start:e,end:t,color:n},r)=>[a(`stop`,{offset:`${e}%`,stopColor:n},`${r}-start`),a(`stop`,{offset:`${t}%`,stopColor:n},`${r}-end`)])})})}let h=n;return r===1&&(h=Math.round(i%1*1e4)/100),r===1?o(`defs`,{children:[a(`linearGradient`,{id:c,children:a(`stop`,{offset:`100%`,stopColor:e})}),a(`linearGradient`,{id:u,children:a(`stop`,{offset:`100%`,stopColor:t})}),o(`linearGradient`,{id:l,children:[a(`stop`,{offset:`${h}%`,stopColor:e}),a(`stop`,{offset:`${h}%`,stopColor:t})]})]}):null},l=({viewBox:e=`0 0 306 306`,size:t,onMouseMove:n,onMouseLeave:r,onChange:i,index:s,value:l,isHalf:u,primaryColor:d,secondaryColor:f,hoverColor:p,hoverValue:m=null,committedValue:h=l,fill:g,offset:_=50,fullId:v,halfId:y,noneId:b})=>{let x=g,S=`${v}-hover-${s}`;return x=p&&m!==null?`url(#${S})`:s<=l?`url(#${v})`:u&&Math.ceil(l)===s?`url(#${y})`:`url(#${b})`,o(`svg`,{width:t,viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onMouseLeave:r,onClick:i,onMouseMove:n,children:[a(c,{primaryColor:d,secondaryColor:f,offset:_,index:s,value:l,fullId:v,halfId:y,noneId:b,hoverColor:p,hoverValue:m,committedValue:h,hoverGradientId:S}),a(`polygon`,{fill:x,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`})]})},u={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},d=({id:o,value:s=0,onChange:c=()=>{},isEdit:d=!0,isHalf:f=!0,count:p=5,size:m=25,starGap:h=0,className:g=``,primaryColor:_=`orange`,secondaryColor:v=`grey`,hoverColor:y,isArrowSubmit:b=!1,ariaLabel:x=`Star rating`,ariaLabelledBy:S})=>{let C=t().replace(/:/g,``),w=o??`react-stars-rating-${C}`,[T,E]=i(()=>({sourceValue:s,displayValue:s})),D=r(null),[O,k]=i(null),A=T.sourceValue===s?T.displayValue:s,j=e=>{E({sourceValue:s,displayValue:e})},M=n(()=>`fullId-${w}`,[w]),N=n(()=>`halfId-${w}`,[w]),P=n(()=>`noneId-${w}`,[w]);e(()=>{D.current=null},[s]);let F=e=>{let t=e.currentTarget.getBoundingClientRect();return e.clientX-t.left>t.width/2},I=(e,t)=>f?F(e)?t:t-.5:t,L=(e,t)=>{if(!d)return;let n=I(e,t);k(n),j(n)},R=()=>{d&&(k(null),j(s||0))},z=()=>{let e=D.current;e!==null&&(D.current=null,c(e))},B=(e,t)=>{if(!d)return;let n=I(e,t);j(n),D.current=null,c(n)},V=e=>{let t=Math.min(Math.max(e,0),p);t!==A&&(j(t),b?(D.current=null,c(t)):D.current=t)},H=e=>{let t=A%1==.5?A:Math.round(A);V(t+e)},U=e=>{switch(e.key){case`ArrowLeft`:case`ArrowDown`:e.preventDefault(),H(f?-.5:-1);break;case`ArrowRight`:case`ArrowUp`:e.preventDefault(),H(f?.5:1);break;case`Home`:e.preventDefault(),V(0);break;case`End`:e.preventDefault(),V(p);break;case`Enter`:e.preventDefault(),D.current=null,c(A)}},W=()=>Array.from({length:p},(e,t)=>{let n=t+1,r=n===p?void 0:{paddingRight:h};return a(`span`,{className:`star star-${n}`,style:r,children:a(l,{index:n,value:A,size:m,isHalf:f,fullId:M,halfId:N,noneId:P,primaryColor:_,secondaryColor:v,hoverColor:y,hoverValue:O,committedValue:s,onMouseMove:e=>L(e,n),onMouseLeave:R,onChange:e=>B(e,n)})},`react-stars-rating-char${n}`)}),G=d,K=Math.min(Math.max(A,0),p);return a(`span`,{id:w,role:`slider`,"aria-label":S?void 0:x,"aria-labelledby":S,"aria-valuemin":0,"aria-valuemax":p,"aria-valuenow":K,"aria-valuetext":`${K} of ${p}`,"aria-readonly":!d,tabIndex:G?0:-1,onKeyDown:G?U:void 0,onBlur:G?z:void 0,style:d?u.activeContainer:u.inActiveContainer,className:g,children:W()})};export{d as ReactStarsRating,d as default};

package/dist/index.umd.cjs

@@ -1 +1 @@
-"use client";(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactAwesomeStarsRating={},e.React))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=({primaryColor:e,secondaryColor:t,offset:n=50,index:r,value:i,fullId:a,halfId:o,noneId:s})=>{let c=n;return r===1&&(c=Math.round(i%1*1e4)/100),r===1?React.createElement(`defs`,null,React.createElement(`linearGradient`,{id:a},React.createElement(`stop`,{offset:`100%`,stopColor:e})),React.createElement(`linearGradient`,{id:s},React.createElement(`stop`,{offset:`100%`,stopColor:t})),React.createElement(`linearGradient`,{id:o},React.createElement(`stop`,{offset:`${c}%`,stopColor:e}),React.createElement(`stop`,{offset:`${c}%`,stopColor:t}))):null},r=({viewBox:e=`0 0 306 306`,size:t,onMouseMove:r,onMouseLeave:i,onChange:a,index:o,value:s,isHalf:c,primaryColor:l,secondaryColor:u,fill:d,offset:f=50,fullId:p,halfId:m,noneId:h})=>{let g=d;return g=o<=s?`url(#${p})`:c&&Math.ceil(s)===o?`url(#${m})`:`url(#${h})`,React.createElement(`svg`,{width:t,viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onMouseLeave:i,onClick:a,onMouseMove:r},React.createElement(n,{primaryColor:l,secondaryColor:u,offset:f,index:o,value:s,fullId:p,halfId:m,noneId:h}),React.createElement(`polygon`,{fill:g,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`}))},i={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},a=({id:e,value:n=0,onChange:a=()=>{},isEdit:o=!0,isHalf:s=!0,count:c=5,size:l=25,starGap:u=0,className:d=``,primaryColor:f=`orange`,secondaryColor:p=`grey`,isArrowSubmit:m=!1,ariaLabel:h=`Star rating`,ariaLabelledBy:g})=>{let _=(0,t.useId)().replace(/:/g,``),v=e??`react-stars-rating-${_}`,[y,b]=(0,t.useState)(()=>({sourceValue:n,displayValue:n})),x=(0,t.useRef)(null),S=y.sourceValue===n?y.displayValue:n,C=e=>{b({sourceValue:n,displayValue:e})},w=(0,t.useMemo)(()=>`fullId-${v}`,[v]),T=(0,t.useMemo)(()=>`halfId-${v}`,[v]),E=(0,t.useMemo)(()=>`noneId-${v}`,[v]);(0,t.useEffect)(()=>{x.current=null},[n]);let D=e=>{let t=e.currentTarget.getBoundingClientRect();return e.clientX-t.left>t.width/2},O=(e,t)=>s?D(e)?t:t-.5:t,k=(e,t)=>{o&&C(O(e,t))},A=()=>{o&&C(n||0)},j=()=>{let e=x.current;e!==null&&(x.current=null,a(e))},M=(e,t)=>{if(!o)return;let n=O(e,t);C(n),x.current=null,a(n)},N=e=>{let t=Math.min(Math.max(e,0),c);t!==S&&(C(t),m?(x.current=null,a(t)):x.current=t)},P=e=>{let t=S%1==.5?S:Math.round(S);N(t+e)},F=e=>{switch(e.key){case`ArrowLeft`:case`ArrowDown`:e.preventDefault(),P(s?-.5:-1);break;case`ArrowRight`:case`ArrowUp`:e.preventDefault(),P(s?.5:1);break;case`Home`:e.preventDefault(),N(0);break;case`End`:e.preventDefault(),N(c);break;case`Enter`:e.preventDefault(),x.current=null,a(S)}},I=()=>Array.from({length:c},(e,t)=>{let n=t+1,i=n===c?void 0:{paddingRight:u};return React.createElement(`span`,{key:`react-stars-rating-char${n}`,className:`star star-${n}`,style:i},React.createElement(r,{index:n,value:S,size:l,isHalf:s,fullId:w,halfId:T,noneId:E,primaryColor:f,secondaryColor:p,onMouseMove:e=>k(e,n),onMouseLeave:A,onChange:e=>M(e,n)}))}),L=o,R=Math.min(Math.max(S,0),c);return React.createElement(`span`,{id:v,role:`slider`,"aria-label":g?void 0:h,"aria-labelledby":g,"aria-valuemin":0,"aria-valuemax":c,"aria-valuenow":R,"aria-valuetext":`${R} of ${c}`,"aria-readonly":!o,tabIndex:L?0:-1,onKeyDown:L?F:void 0,onBlur:L?j:void 0,style:o?i.activeContainer:i.inActiveContainer,className:d},I())};e.ReactStarsRating=a,e.default=a});
+"use client";(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactAwesomeStarsRating={},e.React))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=(e,t)=>Math.min(100,Math.max(0,Math.round((e-(t-1))*1e4)/100)),r=({primaryColor:e,secondaryColor:t,offset:r=50,index:i,value:a,fullId:o,halfId:s,noneId:c,hoverColor:l,hoverValue:u=null,committedValue:d=a,hoverGradientId:f})=>{if(l&&u!==null&&f){let r=Math.min(d,u),a=Math.max(d,u),o=n(r,i),s=n(a,i),c=[{start:0,end:o,color:u<=d?l:e},{start:o,end:s,color:u<=d?e:l},{start:s,end:100,color:t}].filter(({start:e,end:t})=>t>e);return React.createElement(`defs`,null,React.createElement(`linearGradient`,{id:f},c.flatMap(({start:e,end:t,color:n},r)=>[React.createElement(`stop`,{key:`${r}-start`,offset:`${e}%`,stopColor:n}),React.createElement(`stop`,{key:`${r}-end`,offset:`${t}%`,stopColor:n})])))}let p=r;return i===1&&(p=Math.round(a%1*1e4)/100),i===1?React.createElement(`defs`,null,React.createElement(`linearGradient`,{id:o},React.createElement(`stop`,{offset:`100%`,stopColor:e})),React.createElement(`linearGradient`,{id:c},React.createElement(`stop`,{offset:`100%`,stopColor:t})),React.createElement(`linearGradient`,{id:s},React.createElement(`stop`,{offset:`${p}%`,stopColor:e}),React.createElement(`stop`,{offset:`${p}%`,stopColor:t}))):null},i=({viewBox:e=`0 0 306 306`,size:t,onMouseMove:n,onMouseLeave:i,onChange:a,index:o,value:s,isHalf:c,primaryColor:l,secondaryColor:u,hoverColor:d,hoverValue:f=null,committedValue:p=s,fill:m,offset:h=50,fullId:g,halfId:_,noneId:v})=>{let y=m,b=`${g}-hover-${o}`;return y=d&&f!==null?`url(#${b})`:o<=s?`url(#${g})`:c&&Math.ceil(s)===o?`url(#${_})`:`url(#${v})`,React.createElement(`svg`,{width:t,viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onMouseLeave:i,onClick:a,onMouseMove:n},React.createElement(r,{primaryColor:l,secondaryColor:u,offset:h,index:o,value:s,fullId:g,halfId:_,noneId:v,hoverColor:d,hoverValue:f,committedValue:p,hoverGradientId:b}),React.createElement(`polygon`,{fill:y,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`}))},a={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},o=({id:e,value:n=0,onChange:r=()=>{},isEdit:o=!0,isHalf:s=!0,count:c=5,size:l=25,starGap:u=0,className:d=``,primaryColor:f=`orange`,secondaryColor:p=`grey`,hoverColor:m,isArrowSubmit:h=!1,ariaLabel:g=`Star rating`,ariaLabelledBy:_})=>{let v=(0,t.useId)().replace(/:/g,``),y=e??`react-stars-rating-${v}`,[b,x]=(0,t.useState)(()=>({sourceValue:n,displayValue:n})),S=(0,t.useRef)(null),[C,w]=(0,t.useState)(null),T=b.sourceValue===n?b.displayValue:n,E=e=>{x({sourceValue:n,displayValue:e})},D=(0,t.useMemo)(()=>`fullId-${y}`,[y]),O=(0,t.useMemo)(()=>`halfId-${y}`,[y]),k=(0,t.useMemo)(()=>`noneId-${y}`,[y]);(0,t.useEffect)(()=>{S.current=null},[n]);let A=e=>{let t=e.currentTarget.getBoundingClientRect();return e.clientX-t.left>t.width/2},j=(e,t)=>s?A(e)?t:t-.5:t,M=(e,t)=>{if(!o)return;let n=j(e,t);w(n),E(n)},N=()=>{o&&(w(null),E(n||0))},P=()=>{let e=S.current;e!==null&&(S.current=null,r(e))},F=(e,t)=>{if(!o)return;let n=j(e,t);E(n),S.current=null,r(n)},I=e=>{let t=Math.min(Math.max(e,0),c);t!==T&&(E(t),h?(S.current=null,r(t)):S.current=t)},L=e=>{let t=T%1==.5?T:Math.round(T);I(t+e)},R=e=>{switch(e.key){case`ArrowLeft`:case`ArrowDown`:e.preventDefault(),L(s?-.5:-1);break;case`ArrowRight`:case`ArrowUp`:e.preventDefault(),L(s?.5:1);break;case`Home`:e.preventDefault(),I(0);break;case`End`:e.preventDefault(),I(c);break;case`Enter`:e.preventDefault(),S.current=null,r(T)}},z=()=>Array.from({length:c},(e,t)=>{let r=t+1,a=r===c?void 0:{paddingRight:u};return React.createElement(`span`,{key:`react-stars-rating-char${r}`,className:`star star-${r}`,style:a},React.createElement(i,{index:r,value:T,size:l,isHalf:s,fullId:D,halfId:O,noneId:k,primaryColor:f,secondaryColor:p,hoverColor:m,hoverValue:C,committedValue:n,onMouseMove:e=>M(e,r),onMouseLeave:N,onChange:e=>F(e,r)}))}),B=o,V=Math.min(Math.max(T,0),c);return React.createElement(`span`,{id:y,role:`slider`,"aria-label":_?void 0:g,"aria-labelledby":_,"aria-valuemin":0,"aria-valuemax":c,"aria-valuenow":V,"aria-valuetext":`${V} of ${c}`,"aria-readonly":!o,tabIndex:B?0:-1,onKeyDown:B?R:void 0,onBlur:B?P:void 0,style:o?a.activeContainer:a.inActiveContainer,className:d},z())};e.ReactStarsRating=o,e.default=o});

package/dist/star.d.ts

@@ -4,6 +4,9 @@ type StarProps = {
     size: number;
     primaryColor: string;
     secondaryColor: string;
+    hoverColor?: string;
+    hoverValue?: number | null;
+    committedValue?: number;
     onMouseLeave?: (event: MouseEvent<SVGSVGElement>) => void;
     onMouseMove?: (event: MouseEvent<SVGSVGElement>) => void;
     onChange?: (event: MouseEvent<SVGSVGElement>) => void;
@@ -16,5 +19,5 @@ type StarProps = {
     halfId: string;
     noneId: string;
 };
-declare const StarSVG: ({ viewBox, size, onMouseMove, onMouseLeave, onChange, index, value, isHalf, primaryColor, secondaryColor, fill, offset, fullId, halfId, noneId, }: StarProps) => import("react").JSX.Element;
+declare const StarSVG: ({ viewBox, size, onMouseMove, onMouseLeave, onChange, index, value, isHalf, primaryColor, secondaryColor, hoverColor, hoverValue, committedValue, fill, offset, fullId, halfId, noneId, }: StarProps) => import("react").JSX.Element;
 export default StarSVG;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-stars-rating",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Accessible star rating component for React, with half stars, keyboard control and any scale or palette.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -139,19 +139,19 @@
     {
       "name": "ESM entry",
       "path": "dist/index.mjs",
-      "limit": "1.6 kB",
+      "limit": "2 kB",
       "gzip": true
     },
     {
       "name": "CJS entry",
       "path": "dist/index.cjs",
-      "limit": "1.65 kB",
+      "limit": "2.05 kB",
       "gzip": true
     },
     {
       "name": "UMD bundle",
       "path": "dist/index.umd.cjs",
-      "limit": "1.75 kB",
+      "limit": "2.15 kB",
       "gzip": true
     }
   ],