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-RqfgDO9d.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};