import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,y as a}from"./dist-DtfJeYQK.js";import{t as o}from"./jsx-runtime-C2wGStra.js";import{n as s,t as c}from"./dist-Cc1j9Pjk.js";import{n as l,t as u}from"./useControllableState-B6dCOM10.js";import{a as d,c as f,i as p,n as m,o as h,r as g,s as _,t as v}from"./Stars-BU2A8ygV.js";function y({mousePercentage:e,amountOfStars:t}){let n=e*t+.01;return Math.ceil(n)}function b({amountOfStars:e}){let t=(0,x.useRef)(null),[n,r]=(0,x.useState)(null);return(0,x.useEffect)(()=>{let n=window.matchMedia(`(hover: hover)`).matches===!0;if(!t.current||!n)return;let i=t.current;function a(t){let n=i.getBoundingClientRect();r(y({mousePercentage:(t.clientX-n.left)/n.width,amountOfStars:e}))}function o(){r(null)}return i.addEventListener(`mousemove`,a),i.addEventListener(`mouseenter`,a),i.addEventListener(`mouseleave`,o),()=>{i.removeEventListener(`mousemove`,a),i.removeEventListener(`mouseenter`,a),i.removeEventListener(`mouseleave`,o)}},[e]),{hoverValue:n,ref:t}}var x,S=t((()=>{x=e(n(),1)}));function C(e){let{defaultValue:t,value:n,onChange:r,onValueChange:i}=e,[a,o]=l({defaultValue:t,value:n,onValueChange:i});return{value:a,onChange:(0,w.useCallback)(e=>{r?.(e),!e.defaultPrevented&&o?.(e.currentTarget.valueAsNumber)},[r,o])}}var w,T=t((()=>{w=e(n(),1),u()}));function E({hasError:e,ariaInvalid:t}){return typeof t==`boolean`&&typeof e==`boolean`?(console.warn(`You provided both 'hasError' and 'aria-invalid' props. 'hasError' will take precedence. If you're using RatingInput inside FormControl, please remove 'hasError' prop.`),e):typeof e==`boolean`?e:typeof t==`boolean`?t:!1}var D=t((()=>{})),O,k,A,j,M=t((()=>{O=e(n(),1),c(),i(),f(),S(),d(),g(),T(),D(),m(),k=o(),A=5,j=(0,O.forwardRef)(function({id:e,name:t,value:n,defaultValue:i=0,onValueChange:o,onChange:c,hasError:l,required:u,"aria-label":d,"aria-labelledby":f,"aria-describedby":m,dataset:g,onBlur:y,onFocus:x,"aria-invalid":S},w){let{value:T,onChange:D}=C({onChange:c,onValueChange:o,defaultValue:i,value:n}),O=h(T),{ariaValueText:j}=p(O),M=E({hasError:l,ariaInvalid:S}),{hoverValue:N,ref:P}=b({amountOfStars:A}),F=typeof N==`number`?N:O;return(0,k.jsxs)(`div`,{className:[...a(_,`rating`),...a(_,`ratingInput`)].join(` `),...r(g,{preplyDsComponent:s.RatingInput}),ref:P,children:[(0,k.jsx)(v,{filledPerc:F/A}),(0,k.jsx)(`input`,{type:`range`,min:0,max:A,step:1,value:O,id:e,name:t,"aria-invalid":M===!0?!0:void 0,"aria-required":u===!0?!0:void 0,"aria-label":d,"aria-labelledby":f,"aria-describedby":m,"aria-valuetext":j,onBlur:y,onFocus:x,onChange:D,ref:w})]})});try{j.displayName=`RatingInput`,j.__docgenInfo={description:`A component that allows rating through a series of discrete values.

If you need to visualize the current rating without the users changing it, look at Rating.`,displayName:`RatingInput`,props:{value:{defaultValue:null,description:`Half values can be shown, but the users can only set full values by interacting.

Use FormControl to use the component inside a form.
@see {@link https://github.com/preply/design-system/blob/main/packages/web-lib/src/components/FormControl/FormControl.stories.tsx FormControl.stories.tsx} for complete examples.

In case of integrations with forms **without FormControl**, you have to keep in mind that the
underlying input element is of type \`range\`, which means:
1. \`readOnly\` is ineffective
2. \`required\` is ineffective.
3. \`pattern\` is ineffective, validation on input of type range isn't supported. So you need a custom validation if you don't accept 0 as a value (which means the users hasn't rate).
@see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#additional_attributes
@see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#validation`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},id:{defaultValue:null,description:`The id of the input element.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},name:{defaultValue:null,description:`The name of the input element.`,name:`name`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},hasError:{defaultValue:null,description:`Shows the component's error state, and sets \`aria-invalid="true"\` on the input element.

The attribute should be set as the result of a submit process, and you should tell the
user there is an error (we suggest to use custom input fields inside FormControl).
@see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid#description

Please note: you don't need to use it if you use the component inside FormControl.`,name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},"aria-invalid":{defaultValue:null,description:`FormControl passes aria-invalid to every errored field inside it, don't pass it manually.
@deprecated If you are looking at how to show the error state without FormControl, use \`hasError\` instead.
@ignore`,name:`aria-invalid`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`"false"`},{value:`"true"`},{value:`"grammar"`},{value:`"spelling"`}]}},required:{defaultValue:null,description:`Sets aria-required to true.

In case of integrations with forms, keep in mind that the underlying input element
is of type \`range\`, which means \`required\` is ineffective.
@see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#additional_attributes

This is automatically handled by FormControl.
@see {@link https://github.com/preply/design-system/blob/main/packages/web-lib/src/components/FormControl/FormControl.stories.tsx FormControl.stories.tsx} for complete examples.`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},defaultValue:{defaultValue:{value:`0`},description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: number) => void`}]}},dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
@example <Rating dataset={{ 'qa-id': 'accept-conditions' }} /> // will add data-qa-id="accept-conditions" to the HTML element`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onBlur:{defaultValue:null,description:``,name:`onBlur`,required:!1,type:{name:`enum`,value:[{value:`FocusEventHandler<HTMLInputElement>`}]}},onFocus:{defaultValue:null,description:``,name:`onFocus`,required:!1,type:{name:`enum`,value:[{value:`FocusEventHandler<HTMLInputElement>`}]}},onChange:{defaultValue:null,description:``,name:`onChange`,required:!1,type:{name:`enum`,value:[{value:`ChangeEventHandler<HTMLInputElement>`}]}},"aria-label":{defaultValue:null,description:``,name:`aria-label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-labelledby":{defaultValue:null,description:``,name:`aria-labelledby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-describedby":{defaultValue:null,description:``,name:`aria-describedby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}}));export{M as n,j as t};