sui-explorer-local/apps/explorer/storybook-static/assets/PlayPause.stories-be3d01bb.js

Local Sui Explorer

import{j as e}from"./jsx-runtime-ffb262ed.js";import{r as u}from"./index-76fb7be0.js";import{m as h}from"./motion-b354e7ba.js";import{a as k}from"./index-d5a566d3.js";import{c as N}from"./index-dca19ccf.js";import{L as S}from"./LoadingIndicator-8720c7eb.js";import"./_commonjsHelpers-de833af9.js";import"./SVGVisualElement-4900b852.js";import"./extends-98964cd2.js";const B=t=>e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 24 24",...t,children:[e.jsx("g",{clipPath:"url(#autorefresh_pause_24_svg__a)",children:e.jsx("path",{fill:"#A0B6C3",d:"M12 24c6.563 0 12-5.425 12-12 0-6.563-5.437-12-12.012-12C5.425 0 0 5.437 0 12c0 6.575 5.437 12 12 12Zm0-2.358A9.608 9.608 0 0 1 2.37 12a9.588 9.588 0 0 1 9.618-9.63c5.344 0 9.654 4.286 9.654 9.63A9.618 9.618 0 0 1 12 21.642Zm-3.322-5.077h1.208c.592 0 .883-.325.883-.813V8.236c0-.488-.29-.813-.883-.813H8.678c-.581 0-.872.325-.872.813v7.516c0 .488.29.813.872.813Zm5.436 0h1.208c.581 0 .872-.325.872-.813V8.236c0-.488-.29-.813-.872-.813h-1.208c-.592 0-.894.325-.894.813v7.516c0 .488.302.813.894.813Z"})}),e.jsx("defs",{children:e.jsx("clipPath",{id:"autorefresh_pause_24_svg__a",children:e.jsx("path",{fill:"#fff",d:"M0 0h24v24H0z"})})})]}),V=B;try{AutorefreshPause24.displayName="AutorefreshPause24",AutorefreshPause24.__docgenInfo={description:"",displayName:"AutorefreshPause24",props:{}}}catch{}const q=t=>e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 24 24",...t,children:[e.jsx("g",{clipPath:"url(#autorefresh_play_24_svg__a)",children:e.jsx("path",{fill:"#A0B6C3",d:"M12 24c6.563 0 12-5.425 12-12 0-6.563-5.437-12-12.012-12C5.425 0 0 5.437 0 12c0 6.575 5.437 12 12 12Zm0-2.358A9.608 9.608 0 0 1 2.37 12a9.588 9.588 0 0 1 9.618-9.63c5.344 0 9.654 4.286 9.654 9.63A9.618 9.618 0 0 1 12 21.642Zm-2.184-5.065 6.68-3.927a.745.745 0 0 0 0-1.277l-6.68-3.938c-.511-.302-1.185-.047-1.185.522v8.097c0 .57.64.848 1.185.523Z"})}),e.jsx("defs",{children:e.jsx("clipPath",{id:"autorefresh_play_24_svg__a",children:e.jsx("path",{fill:"#fff",d:"M0 0h24v24H0z"})})})]}),Z=q;try{AutorefreshPlay24.displayName="AutorefreshPlay24",AutorefreshPlay24.__docgenInfo={description:"",displayName:"AutorefreshPlay24",props:{}}}catch{}const z=N(["inline-flex flex-nowrap items-center justify-center gap-2 relative"],{variants:{variant:{primary:"bg-sui-dark text-sui-light hover:text-white border-none",secondary:"bg-gray-90 text-gray-50 hover:text-white border-none",outline:"bg-white border border-steel text-steel-dark hover:text-steel-darker hover:border-steel-dark active:text-steel active:border-steel disabled:border-gray-45 disabled:text-steel-dark"},size:{md:"px-3 py-2 rounded-md text-bodySmall font-semibold",lg:"px-4 py-3 rounded-lg text-body font-semibold"},loading:{true:"text-transparent"}},defaultVariants:{variant:"primary",size:"md"}}),i=u.forwardRef(({variant:t,size:s,loading:a,children:o,before:r,after:n,asChild:p,...f},C)=>{const w=p?k:"button";if(p&&(a||r||n))throw new Error("When using `asChild`, you cannot use any of props: `loading, `before`, `after`");return e.jsx(w,{ref:C,className:z({variant:t,size:s,loading:a}),...f,disabled:f.disabled??a??void 0,children:p?o:e.jsxs(e.Fragment,{children:[a&&e.jsx("div",{className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",children:e.jsx(S,{})}),r,o,n]})})});try{i.displayName="Button",i.__docgenInfo={description:"",displayName:"Button",props:{before:{defaultValue:null,description:"",name:"before",required:!1,type:{name:"ReactNode"}},after:{defaultValue:null,description:"",name:"after",required:!1,type:{name:"ReactNode"}},asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:'"primary" | "outline" | "secondary" | null'}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"lg" | "md" | null'}},loading:{defaultValue:null,description:"",name:"loading",required:!1,type:{name:"boolean | null"}}}}}catch{}const D=t=>({initial:{pathLength:0},animate:{pathLength:1,transition:{duration:t}}});function m({paused:t,onChange:s,animate:a}){const o=t?Z:V,r=(a==null?void 0:a.start)&&!t;return u.useEffect(()=>{let n;return r&&(n=setTimeout(()=>{a.setStart(!1)},a.duration*1e3)),()=>clearTimeout(n)},[a,r]),e.jsxs("button",{type:"button","aria-label":t?"Paused":"Playing",onClick:s,className:"relative cursor-pointer border-none bg-transparent text-steel hover:text-steel-darker",children:[r&&e.jsx(h.svg,{className:"absolute -rotate-90 text-hero",viewBox:"0 0 16 16",children:e.jsx(h.circle,{fill:"none",cx:"8",cy:"8",r:"7",strokeLinecap:"round",strokeWidth:2,stroke:"currentColor",variants:D(a.duration),initial:"initial",animate:"animate"})}),e.jsx(o,{})]})}try{m.displayName="PlayPause",m.__docgenInfo={description:"",displayName:"PlayPause",props:{paused:{defaultValue:null,description:"",name:"paused",required:!1,type:{name:"boolean"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"() => void"}},animate:{defaultValue:null,description:"",name:"animate",required:!1,type:{name:"{ duration: number; start: boolean; setStart: (bool: boolean) => void; }"}}}}}catch{}const W={component:m},l={args:{paused:!1}},c={args:{paused:!0}},d={render:()=>{const[t,s]=u.useState(!1),[a,o]=u.useState(1),r=n=>()=>{o(n),s(!t)};return e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex gap-2",children:[e.jsx(i,{onClick:r(1),children:"1 seconds"}),e.jsx(i,{onClick:r(5),children:"5 seconds"}),e.jsx(i,{onClick:r(10),children:"10 seconds"})]}),e.jsx("div",{className:"w-4",children:e.jsx(m,{onChange:()=>null,animate:{duration:a,start:t,setStart:s}})})]})}};var x,g,y;l.parameters={...l.parameters,docs:{...(x=l.parameters)==null?void 0:x.docs,source:{originalSource:`{
  args: {
    paused: false
  }
}`,...(y=(g=l.parameters)==null?void 0:g.docs)==null?void 0:y.source}}};var _,v,b;c.parameters={...c.parameters,docs:{...(_=c.parameters)==null?void 0:_.docs,source:{originalSource:`{
  args: {
    paused: true
  }
}`,...(b=(v=c.parameters)==null?void 0:v.docs)==null?void 0:b.source}}};var A,j,P;d.parameters={...d.parameters,docs:{...(A=d.parameters)==null?void 0:A.docs,source:{originalSource:`{
  render: () => {
    const [startAnimation, setStartAnimation] = useState(false);
    const [animationDuration, setAnimationDuration] = useState(1);
    const setAnimationCallback = (seconds: number) => () => {
      setAnimationDuration(seconds);
      setStartAnimation(!startAnimation);
    };
    return <div className="flex flex-col gap-2">
                <div className="flex gap-2">
                    <Button onClick={setAnimationCallback(1)}>1 seconds</Button>
                    <Button onClick={setAnimationCallback(5)}>5 seconds</Button>
                    <Button onClick={setAnimationCallback(10)}>10 seconds</Button>
                </div>

                <div className="w-4">
                    <PlayPause onChange={() => null} animate={{
          duration: animationDuration,
          start: startAnimation,
          setStart: setStartAnimation
        }} />
                </div>
            </div>;
  }
}`,...(P=(j=d.parameters)==null?void 0:j.docs)==null?void 0:P.source}}};const F=["Paused","Unpaused","Animated"];export{d as Animated,l as Paused,c as Unpaused,F as __namedExportsOrder,W as default};