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"./Text-DO3xXyuu.js";import{n as o,t as s}from"./LayoutFlex-BKX2c6Gj.js";import{n as c,t as l}from"./Switch-jl9s03cr.js";var u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T;t((()=>{u=e(n(),1),c(),o(),i(),d=r(),{expect:f,fn:p,userEvent:m,within:h}=__STORYBOOK_MODULE_TEST__,g={title:`Components/Switch`,component:l,args:{onCheckedChange:p(),"aria-label":`Switch`},parameters:{layout:`padded`}},_={async play({args:e,canvasElement:t,step:n}){let r=h(t).getByRole(`switch`);await n(`Switch on via click`,async()=>{await m.click(r),f(e.onCheckedChange).toHaveBeenNthCalledWith(1,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via click`,async()=>{await m.click(r),f(e.onCheckedChange).toHaveBeenNthCalledWith(2,!1),f(r).toHaveAttribute(`aria-checked`,`false`)}),await n(`Switch on via Enter key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Enter]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(3,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via Enter key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Enter]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(4,!1),f(r).toHaveAttribute(`aria-checked`,`false`)}),await n(`Switch on via Space key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Space]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(5,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via Space key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Space]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(6,!1),f(r).toHaveAttribute(`aria-checked`,`false`)})}},v={render:function(e){return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(l,{...e}),(0,d.jsx)(l,{...e,defaultChecked:!0}),(0,d.jsx)(l,{...e,defaultChecked:!1})]})}},y={render:function(e){let t=({checked:e,...t})=>{let[n,r]=(0,u.useState)(e);return(0,d.jsx)(l,{...t,checked:n,onCheckedChange:r})};return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(t,{...e}),(0,d.jsx)(t,{...e,checked:!0}),(0,d.jsx)(t,{...e,checked:!1})]})}},b={args:{checked:!1},async play({canvasElement:e,step:t}){let n=h(e).getByRole(`switch`);await t(`switch does not change state`,async()=>{await m.click(n),f(n).toHaveAttribute(`aria-checked`,`false`)})}},x={args:{disabled:!0},render:function(e){return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(l,{...e,disabled:!0}),(0,d.jsx)(l,{...e,defaultChecked:!0,disabled:!0})]})},async play({args:e,canvasElement:t,step:n}){let r=h(t).getAllByRole(`switch`)[0];await n(`switch cannot be focused`,()=>{r.focus(),f(r).not.toHaveFocus()}),await n(`switch cannot be checked`,async()=>{await m.click(r),f(e.onCheckedChange).not.toHaveBeenCalled(),f(r).toHaveAttribute(`aria-checked`,`false`)})}},S={parameters:{chromatic:{modes:{TouchDevice:{hasTouch:!0}}}}},C={tags:[`!autodocs`],async play({canvasElement:e}){let t=h(e).getByRole(`switch`);t.focus(),f(t).toHaveFocus()}},w={render:function(e){return(0,d.jsx)(`div`,{style:{width:`500px`},children:(0,d.jsxs)(s,{nowrap:!0,gap:`8`,direction:`row`,alignItems:`center`,justifyContent:`space-between`,children:[(0,d.jsx)(a,{variant:`default-regular`,children:`Allow Preply to use your answers to improve your learning experience.`}),(0,d.jsx)(l,{...e})]})})}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
  async play({
    args,
    canvasElement,
    step
  }) {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('switch');
    await step('Switch on via click', async () => {
      await userEvent.click(button);
      expect(args.onCheckedChange).toHaveBeenNthCalledWith(1, true);
      expect(button).toHaveAttribute('aria-checked', 'true');
    });
    await step('Switch off via click', async () => {
      await userEvent.click(button);
      expect(args.onCheckedChange).toHaveBeenNthCalledWith(2, false);
      expect(button).toHaveAttribute('aria-checked', 'false');
    });
    await step('Switch on via Enter key', async () => {
      button.focus();
      expect(button).toHaveFocus();
      await userEvent.keyboard('[Enter]');
      expect(args.onCheckedChange).toHaveBeenNthCalledWith(3, true);
      expect(button).toHaveAttribute('aria-checked', 'true');
    });
    await step('Switch off via Enter key', async () => {
      button.focus();
      expect(button).toHaveFocus();
      await userEvent.keyboard('[Enter]');
      expect(args.onCheckedChange).toHaveBeenNthCalledWith(4, false);
      expect(button).toHaveAttribute('aria-checked', 'false');
    });
    await step('Switch on via Space key', async () => {
      button.focus();
      expect(button).toHaveFocus();
      await userEvent.keyboard('[Space]');
      expect(args.onCheckedChange).toHaveBeenNthCalledWith(5, true);
      expect(button).toHaveAttribute('aria-checked', 'true');
    });
    await step('Switch off via Space key', async () => {
      button.focus();
      expect(button).toHaveFocus();
      await userEvent.keyboard('[Space]');
      expect(args.onCheckedChange).toHaveBeenNthCalledWith(6, false);
      expect(button).toHaveAttribute('aria-checked', 'false');
    });
  }
}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  render: function Story(props) {
    return <LayoutFlex gap="12">
                <Switch {...props} />
                <Switch {...props} defaultChecked />
                <Switch {...props} defaultChecked={false} />
            </LayoutFlex>;
  }
}`,...v.parameters?.docs?.source},description:{story:"The `Switch` can be an uncontrolled input using the `defaultChecked` prop.",...v.parameters?.docs?.description}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
  render: function Story(props) {
    const ControlledTemplate = ({
      checked: initialChecked,
      ...props
    }: SwitchProps) => {
      const [checked, setChecked] = useState<boolean | undefined>(initialChecked);
      return <Switch {...props} checked={checked} onCheckedChange={setChecked} />;
    };
    return <LayoutFlex gap="12">
                <ControlledTemplate {...props} />
                <ControlledTemplate {...props} checked />
                <ControlledTemplate {...props} checked={false} />
            </LayoutFlex>;
  }
}`,...y.parameters?.docs?.source},description:{story:"The `Switch` can be a controlled input using the `checked` and\n`onCheckedChange` props with a local `useState`.",...y.parameters?.docs?.description}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  args: {
    checked: false
  },
  async play({
    canvasElement,
    step
  }) {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('switch');
    await step('switch does not change state', async () => {
      await userEvent.click(button);
      expect(button).toHaveAttribute('aria-checked', 'false');
    });
  }
}`,...b.parameters?.docs?.source},description:{story:"Since using the `checked` prop makes the `Switch` controlled, it will be\nforced to keep this value until it is manually updated, e.g. by reacting\nto `onCheckedChange`—see `Controlled` story.",...b.parameters?.docs?.description}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
  args: {
    disabled: true
  },
  render: function Story(props) {
    return <LayoutFlex gap="12">
                <Switch {...props} disabled />
                <Switch {...props} defaultChecked disabled />
            </LayoutFlex>;
  },
  async play({
    args,
    canvasElement,
    step
  }) {
    const canvas = within(canvasElement);
    const button = canvas.getAllByRole('switch')[0];
    await step('switch cannot be focused', () => {
      button.focus();
      expect(button).not.toHaveFocus();
    });
    await step('switch cannot be checked', async () => {
      await userEvent.click(button);
      expect(args.onCheckedChange).not.toHaveBeenCalled();
      expect(button).toHaveAttribute('aria-checked', 'false');
    });
  }
}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
  parameters: {
    chromatic: {
      modes: {
        TouchDevice: {
          hasTouch: true
        }
      }
    }
  }
}`,...S.parameters?.docs?.source},description:{story:`The \`Switch\` automatically sizes up to ergonomic dimensions for touch
devices.

You can inspect this behaviour in your browser devtools by setting the
device type to \`Mobile (touch)\`—see this
[Chrome developer article](https://developer.chrome.com/docs/devtools/device-mode).`,...S.parameters?.docs?.description}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
  tags: ['!autodocs'],
  async play({
    canvasElement
  }) {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('switch');
    button.focus();
    expect(button).toHaveFocus();
  }
}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
  render: function Story(props) {
    return <div style={{
      width: '500px'
    }}>
                <LayoutFlex nowrap gap="8" direction="row" alignItems="center" justifyContent="space-between">
                    <Text variant="default-regular">
                        Allow Preply to use your answers to improve your learning experience.
                    </Text>
                    <Switch {...props} />
                </LayoutFlex>
            </div>;
  }
}`,...w.parameters?.docs?.source},description:{story:"The `Switch` can be used with Text labels in LayoutFlex.\nSwitch is always if its size and doesn't strech or shrink",...w.parameters?.docs?.description}}},T=[`Default`,`Uncontrolled`,`Controlled`,`Forced`,`Disabled`,`TouchDeviceSizing`,`Focus`,`FlexLayoutWithLabel`]}))();export{y as Controlled,_ as Default,x as Disabled,w as FlexLayoutWithLabel,C as Focus,b as Forced,S as TouchDeviceSizing,v as Uncontrolled,T as __namedExportsOrder,g as default};