@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/RangeSlider.stories-BnxUgnUq.js

@@ -0,0 +1,117 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./RangeSlider-BshsrfHH.js";var o,s,c,l,u,d,f,p,m,h,g,_,v,y;t((()=>{o=e(n(),1),i(),s=r(),{action:c}=__STORYBOOK_MODULE_ACTIONS__,{expect:l,fn:u,userEvent:d,within:f}=__STORYBOOK_MODULE_TEST__,p=u(c(`change`)),m={title:`Components/Slider/RangeSlider`,component:a,decorators:[e=>(0,s.jsx)(`div`,{style:{padding:`32px`,maxWidth:`400px`},children:(0,s.jsx)(e,{})})],args:{"aria-label":`Sample`,onValueChange:p}},h={play:async({canvasElement:e,step:t})=>{let[n,r]=f(e).getAllByRole(`slider`);l(n).not.toBeNull(),l(r).not.toBeNull(),await t(`Initial state`,async()=>{l(n).toHaveAttribute(`aria-valuenow`,`0`),l(r).toHaveAttribute(`aria-valuenow`,`100`)}),await t(`Move first thumb and verify value updates`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`1`),l(p).toBeCalledWith([1,100])}),await t(`Move second thumb and verify value updates`,async()=>{r.focus(),await d.keyboard(`{ArrowLeft}`),l(r).toHaveAttribute(`aria-valuenow`,`99`),l(p).toBeCalledWith([1,99])})}},g={args:{defaultValue:[25,75]},play:async({canvasElement:e,step:t})=>{let[n,r]=f(e).getAllByRole(`slider`);l(n).not.toBeNull(),l(r).not.toBeNull(),await t(`Initial state`,async()=>{l(n).toHaveAttribute(`aria-valuenow`,`25`),l(r).toHaveAttribute(`aria-valuenow`,`75`)}),await t(`Move first thumb and verify value updates`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`26`),l(p).toBeCalledWith([26,75])}),await t(`Move second thumb and verify value updates`,async()=>{r.focus(),await d.keyboard(`{ArrowLeft}`),l(r).toHaveAttribute(`aria-valuenow`,`74`),l(p).toBeCalledWith([26,74])})}},_={render:function(e){let[t,n]=(0,o.useState)([25,75]);return(0,s.jsx)(a,{...e,value:t,onValueChange:t=>{n(t),e.onValueChange?.(t)}})},play:async({canvasElement:e,step:t})=>{let[n,r]=f(e).getAllByRole(`slider`);l(n).not.toBeNull(),l(r).not.toBeNull(),await t(`Initial state`,async()=>{l(n).toHaveAttribute(`aria-valuenow`,`25`),l(r).toHaveAttribute(`aria-valuenow`,`75`)}),await t(`Move first thumb and verify value updates`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`26`),l(p).toBeCalledWith([26,75])}),await t(`Move second thumb and verify value updates`,async()=>{r.focus(),await d.keyboard(`{ArrowLeft}`),l(r).toHaveAttribute(`aria-valuenow`,`74`),l(p).toBeCalledWith([26,74])})}},v={args:{defaultValue:[1,4],minStepsBetweenThumbs:2,step:1},play:async({canvasElement:e,step:t})=>{let[n,r]=f(e).getAllByRole(`slider`);await l(n).not.toBeNull(),await l(r).not.toBeNull(),await t(`Initial state with minimum steps`,async()=>{await l(n).toHaveAttribute(`aria-valuenow`,`1`),await l(r).toHaveAttribute(`aria-valuenow`,`4`)}),await t(`Verify minimum steps constraint`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`.repeat(3)),await l(n).toHaveAttribute(`aria-valuenow`,`2`),r.focus(),await d.keyboard(`{ArrowLeft}`),await l(r).toHaveAttribute(`aria-valuenow`,`4`),await l(p).toHaveBeenNthCalledWith(1,[2,4])})}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const [min, max] = canvas.getAllByRole('slider');
+    expect(min).not.toBeNull();
+    expect(max).not.toBeNull();
+    await step('Initial state', async () => {
+      expect(min).toHaveAttribute('aria-valuenow', '0');
+      expect(max).toHaveAttribute('aria-valuenow', '100');
+    });
+    await step('Move first thumb and verify value updates', async () => {
+      min.focus();
+      await userEvent.keyboard('{ArrowRight}');
+      expect(min).toHaveAttribute('aria-valuenow', '1');
+      expect(onValueChange).toBeCalledWith([1, 100]);
+    });
+    await step('Move second thumb and verify value updates', async () => {
+      max.focus();
+      await userEvent.keyboard('{ArrowLeft}');
+      expect(max).toHaveAttribute('aria-valuenow', '99');
+      expect(onValueChange).toBeCalledWith([1, 99]);
+    });
+  }
+}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  args: {
+    defaultValue: [25, 75]
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const [min, max] = canvas.getAllByRole('slider');
+    expect(min).not.toBeNull();
+    expect(max).not.toBeNull();
+    await step('Initial state', async () => {
+      expect(min).toHaveAttribute('aria-valuenow', '25');
+      expect(max).toHaveAttribute('aria-valuenow', '75');
+    });
+    await step('Move first thumb and verify value updates', async () => {
+      min.focus();
+      await userEvent.keyboard('{ArrowRight}');
+      expect(min).toHaveAttribute('aria-valuenow', '26');
+      expect(onValueChange).toBeCalledWith([26, 75]);
+    });
+    await step('Move second thumb and verify value updates', async () => {
+      max.focus();
+      await userEvent.keyboard('{ArrowLeft}');
+      expect(max).toHaveAttribute('aria-valuenow', '74');
+      expect(onValueChange).toBeCalledWith([26, 74]);
+    });
+  }
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+  render: function Render(args) {
+    const [value, setValue] = useState<RangeSliderValue>([25, 75]);
+    return <RangeSlider {...args} value={value} onValueChange={value => {
+      setValue(value);
+      args.onValueChange?.(value);
+    }} />;
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const [min, max] = canvas.getAllByRole('slider');
+    expect(min).not.toBeNull();
+    expect(max).not.toBeNull();
+    await step('Initial state', async () => {
+      expect(min).toHaveAttribute('aria-valuenow', '25');
+      expect(max).toHaveAttribute('aria-valuenow', '75');
+    });
+    await step('Move first thumb and verify value updates', async () => {
+      min.focus();
+      await userEvent.keyboard('{ArrowRight}');
+      expect(min).toHaveAttribute('aria-valuenow', '26');
+      expect(onValueChange).toBeCalledWith([26, 75]);
+    });
+    await step('Move second thumb and verify value updates', async () => {
+      max.focus();
+      await userEvent.keyboard('{ArrowLeft}');
+      expect(max).toHaveAttribute('aria-valuenow', '74');
+      expect(onValueChange).toBeCalledWith([26, 74]);
+    });
+  }
+}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  args: {
+    defaultValue: [1, 4],
+    minStepsBetweenThumbs: 2,
+    step: 1
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const [min, max] = canvas.getAllByRole('slider');
+    await expect(min).not.toBeNull();
+    await expect(max).not.toBeNull();
+    await step('Initial state with minimum steps', async () => {
+      await expect(min).toHaveAttribute('aria-valuenow', '1');
+      await expect(max).toHaveAttribute('aria-valuenow', '4');
+    });
+    await step('Verify minimum steps constraint', async () => {
+      min.focus();
+      await userEvent.keyboard('{ArrowRight}'.repeat(3));
+      await expect(min).toHaveAttribute('aria-valuenow', '2');
+      max.focus();
+      await userEvent.keyboard('{ArrowLeft}');
+      await expect(max).toHaveAttribute('aria-valuenow', '4');
+      await expect(onValueChange).toHaveBeenNthCalledWith(1, [2, 4]);
+    });
+  }
+}`,...v.parameters?.docs?.source}}},y=[`Uncontrolled`,`UncontrolledWithDefault`,`Controlled`,`WithMinStepsBetweenThumbs`]}))();export{_ as Controlled,h as Uncontrolled,g as UncontrolledWithDefault,v as WithMinStepsBetweenThumbs,y as __namedExportsOrder,m as default};

package/dist/assets/Rating-7Lokv5qX.js

@@ -0,0 +1,2 @@
+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,x as a,y as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{a as u,c as d,i as f,n as p,o as m,r as h,s as g,t as _}from"./Stars-DuQupRe3.js";var v,y,b=t((()=>{e(n(),1),l(),i(),d(),u(),h(),p(),v=s(),y=function({size:e=`large`,value:t,dataset:n}){let i=m(t),{ariaValueText:s}=f(i);return(0,v.jsx)(`div`,{className:o(g,`rating`,[a(`size`,e)]).join(` `),...r(n,{preplyDsComponent:c.Rating}),role:`img`,"aria-label":s,children:(0,v.jsx)(_,{filledPerc:i/5})})};try{y.displayName=`Rating`,y.__docgenInfo={description:`A component that visualizes the current rating.`,displayName:`Rating`,props:{value:{defaultValue:null,description:`Can be half values.`,name:`value`,required:!0,type:{name:`number`}},size:{defaultValue:{value:`large`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<"small" | "medium" | "large">`}]}},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`}]}}}}}catch{}}));export{b as n,y as t};

package/dist/assets/Rating.stories-C6vLq72a.js

@@ -0,0 +1,115 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Rating-7Lokv5qX.js";var o,s,c,l,u,d,f,p;t((()=>{e(n(),1),i(),o=r(),{expect:s}=__STORYBOOK_MODULE_TEST__,c={title:`components/Rating`,component:a,args:{}},l={parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`}}}},render:function(){return(0,o.jsx)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:(0,o.jsxs)(`tbody`,{children:[(0,o.jsxs)(`tr`,{children:[(0,o.jsx)(`td`,{children:`small`}),(0,o.jsx)(`td`,{children:(0,o.jsx)(a,{value:2.5,size:`small`})})]}),(0,o.jsxs)(`tr`,{children:[(0,o.jsx)(`td`,{children:`medium`}),(0,o.jsx)(`td`,{children:(0,o.jsx)(a,{value:2.5,size:`medium`})})]}),(0,o.jsxs)(`tr`,{children:[(0,o.jsx)(`td`,{children:`large`}),(0,o.jsx)(`td`,{children:(0,o.jsx)(a,{value:2.5,size:`large`})})]}),(0,o.jsxs)(`tr`,{children:[(0,o.jsx)(`td`,{children:`Responsive`}),(0,o.jsx)(`td`,{children:(0,o.jsx)(a,{value:2.5,size:{_:`small`,"medium-s":`large`}})})]})]})})}},u={render:function(){function e({value:e}){return(0,o.jsx)(`tbody`,{children:(0,o.jsxs)(`tr`,{children:[(0,o.jsx)(`td`,{children:e}),(0,o.jsx)(`td`,{children:(0,o.jsx)(a,{value:e})})]})})}return(0,o.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,o.jsx)(e,{value:0}),(0,o.jsx)(e,{value:.5}),(0,o.jsx)(e,{value:1}),(0,o.jsx)(e,{value:1.5}),(0,o.jsx)(e,{value:2}),(0,o.jsx)(e,{value:2.5}),(0,o.jsx)(e,{value:3}),(0,o.jsx)(e,{value:3.5}),(0,o.jsx)(e,{value:4}),(0,o.jsx)(e,{value:4.5}),(0,o.jsx)(e,{value:5})]})}},d={render:function(){return(0,o.jsx)(a,{value:4})},play:async({canvas:e})=>{s(await e.findByRole(`img`,{name:/4 out of 5/})).toBeVisible()}},f={parameters:{chromatic:{disableSnapshot:!0}},argTypes:{dataset:{control:`object`},value:{control:`select`,options:[0,.5,1,1.5,2,2.5,3,3.5,4,4.5,5]},size:{control:`select`,options:[`small`,`medium`,`large`]}}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      modes: {
+        'narrow-l': {
+          viewport: 'narrow-l'
+        },
+        'medium-s': {
+          viewport: 'medium-s'
+        }
+      }
+    }
+  },
+  render: function Story() {
+    return <table style={{
+      borderCollapse: 'separate',
+      borderSpacing: '16px'
+    }}>
+                <tbody>
+                    <tr>
+                        <td>small</td>
+                        <td>
+                            <Rating value={2.5} size="small" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>medium</td>
+                        <td>
+                            <Rating value={2.5} size="medium" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>large</td>
+                        <td>
+                            <Rating value={2.5} size="large" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Responsive</td>
+                        <td>
+                            <Rating value={2.5} size={{
+              _: 'small',
+              'medium-s': 'large'
+            }} />
+                        </td>
+                    </tr>
+                </tbody>
+            </table>;
+  }
+}`,...l.parameters?.docs?.source}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  render: function Story() {
+    function RenderValue({
+      value
+    }: {
+      value: number;
+    }) {
+      return <tbody>
+                    <tr>
+                        <td>{value}</td>
+                        <td>
+                            <Rating value={value} />
+                        </td>
+                    </tr>
+                </tbody>;
+    }
+    return <table style={{
+      borderCollapse: 'separate',
+      borderSpacing: '16px'
+    }}>
+                <RenderValue value={0} />
+                <RenderValue value={0.5} />
+                <RenderValue value={1} />
+                <RenderValue value={1.5} />
+                <RenderValue value={2} />
+                <RenderValue value={2.5} />
+                <RenderValue value={3} />
+                <RenderValue value={3.5} />
+                <RenderValue value={4} />
+                <RenderValue value={4.5} />
+                <RenderValue value={5} />
+            </table>;
+  }
+}`,...u.parameters?.docs?.source},description:{story:`All the supported decimal values.`,...u.parameters?.docs?.description}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: function Story() {
+    return <Rating value={4} />;
+  },
+  play: async ({
+    canvas
+  }) => {
+    const rating = await canvas.findByRole('img', {
+      name: /4 out of 5/
+    });
+    expect(rating).toBeVisible();
+  }
+}`,...d.parameters?.docs?.source},description:{story:`The component includes all the ARIA attributes to be announced meaningfully, and it's role is "img".`,...d.parameters?.docs?.description}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  argTypes: {
+    dataset: {
+      control: 'object'
+    },
+    value: {
+      // Type range doesn't respect min/max/step 🤷
+      control: 'select',
+      options: [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large']
+    }
+  }
+}`,...f.parameters?.docs?.source}}},p=[`Sizes`,`Values`,`Accessibility`,`Playground`]}))();export{d as Accessibility,f as Playground,l as Sizes,u as Values,p as __namedExportsOrder,c as default};

package/dist/assets/RatingInput-B9JvC6a9.js

@@ -0,0 +1,30 @@
+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,x as a,y as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./useControllableState-BBsZ9A2n.js";import{a as f,c as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Stars-DuQupRe3.js";function b({mousePercentage:e,amountOfStars:t}){let n=e*t+.01;return Math.ceil(n)}function x({amountOfStars:e}){let t=(0,S.useRef)(null),[n,r]=(0,S.useState)(null);return(0,S.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(b({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 S,C=t((()=>{S=e(n(),1)}));function w(e){let{defaultValue:t,value:n,onChange:r,onValueChange:i}=e,[a,o]=u({defaultValue:t,value:n,onValueChange:i});return{value:a,onChange:(0,T.useCallback)(e=>{r?.(e),!e.defaultPrevented&&o?.(e.currentTarget.valueAsNumber)},[r,o])}}var T,E=t((()=>{T=e(n(),1),d()}));function D({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 O=t((()=>{})),k,A,j,M,N=t((()=>{k=e(n(),1),l(),i(),p(),C(),f(),_(),E(),O(),h(),A=s(),j=5,M=(0,k.forwardRef)(function({id:e,name:t,value:n,defaultValue:i=0,onValueChange:s,onChange:l,hasError:u,required:d,"aria-label":f,"aria-labelledby":p,"aria-describedby":h,dataset:_,dsInternalSimulation:b,onBlur:S,onFocus:C,"aria-invalid":T},E){let{value:O,onChange:k}=w({onChange:l,onValueChange:s,defaultValue:i,value:n}),M=g(O),{ariaValueText:N}=m(M),P=D({hasError:u,ariaInvalid:T}),{hoverValue:F,ref:I}=x({amountOfStars:j}),L=typeof F==`number`?F:M;return(0,A.jsxs)(`div`,{className:[...o(v,`rating`),...o(v,`ratingInput`,[a(`dsInternalSimulation`,b)])].join(` `),...r(_,{preplyDsComponent:c.RatingInput}),ref:I,children:[(0,A.jsx)(y,{filledPerc:L/j}),(0,A.jsx)(`input`,{type:`range`,min:0,max:j,step:1,value:M,id:e,name:t,"aria-invalid":P===!0?!0:void 0,"aria-required":d===!0?!0:void 0,"aria-label":f,"aria-labelledby":p,"aria-describedby":h,"aria-valuetext":N,onBlur:S,onFocus:C,onChange:k,ref:E})]})});try{M.displayName=`RatingInput`,M.__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`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLInputElement | null) => void`},{value:`RefObject<HTMLInputElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{N as n,M as t};