hypnagaga/packages/graphics-components/docs/assets/Spinner.stories-BHVoSObm.js

9 lines
2.7 KiB
JavaScript

import{p as t,f as g,a as v}from"./props-b4vEeO_8.js";import{J as h,I as b,B as x,G as _}from"./runtime-C3rQLW--.js";import{i as k}from"./lifecycle-F2p_Qkk3.js";import{c as w,d as S}from"./create-runtime-stories-7AWWVphH.js";import{s as a}from"./style-DvJ3IcV1.js";var P=g('<div class="component-container flex items-center justify-center"><div><div class="spinner-container relative svelte-1m9xbtd"><div class="spinner absolute svelte-1m9xbtd"></div></div></div></div>');function d(i,e){let c=t(e,"colour",3,"#666"),n=t(e,"width",3,40),r=t(e,"ringWidth",3,6),m=t(e,"speed",3,.8),u=t(e,"containerPadding",3,10);var s=P();let o;var y=b(s);h(f=>{o=a(s,"",o,f),a(y,`
--spinner-colour: ${c()??""};
--spinner-ring-width: ${r()??""}px;
--spinner-ring-offset: -${r()??""}px;
--spinner-speed: ${m()??""}s;
width: ${n()??""}px;
height: ${n()??""}px;
margin: 0 auto;
`)},[()=>({width:"100%",height:`${n()+u()*2}px`})]),v(i,s)}d.__docgen={data:[{name:"colour",visibility:"public",description:"Primary colour of the spinner.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"#666"'},{name:"width",visibility:"public",description:"Outer width of the spinner",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"40"},{name:"ringWidth",visibility:"public",description:"Width of the spinner ring",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"6"},{name:"speed",visibility:"public",description:"How fast the spinner spins in seconds",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0.8"},{name:"containerPadding",visibility:"public",description:"Vertical padding for the spinner's container",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"10"}],name:"Spinner.svelte"};const l={title:"Components/Utilities/Spinner",component:d,argTypes:{colour:{control:"color"},ringWidth:{control:{type:"range",min:2,max:20,step:1}},width:{control:{type:"range",min:5,max:100,step:5}},speed:{control:{type:"range",min:.2,max:1,step:.1}},containerPadding:{control:{type:"range",min:5,max:100,step:5}}}},{Story:V}=S();function p(i,e){x(e,!1),k(),V(i,{name:"Demo",parameters:{__svelteCsf:{rawCode:"<Spinner {...args} />"}}}),_()}p.__docgen={version:3,name:"Spinner.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const D=w(p,l),W=["Demo"],O=D.Demo,B=Object.freeze(Object.defineProperty({__proto__:null,Demo:O,__namedExportsOrder:W,default:l},Symbol.toStringTag,{value:"Module"}));export{O as D,B as S};