@lanaco/lnc-react-ui/dist/Spinner.cjs

React component library

"use strict";const s=require("react/jsx-runtime"),n=require("./index-BPVoEhTF.cjs"),i=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),u=require("./emotion-react.browser.esm-1R69UXoj.cjs"),t=require("./utils-NZLCh-J5.cjs"),g=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),p={small:"0.6rem",medium:"0.7rem",large:"0.8rem"},b=(e,r)=>{if(e==="small")return`
          width: ${r.sizes.small};
          height: ${r.sizes.small};
        `;if(e==="medium")return`
            width: ${r.sizes.medium};
            height: ${r.sizes.medium};
        `;if(e==="large")return`
          width: ${r.sizes.large};
          height: ${r.sizes.large};
        `},h=u.keyframes`
  to {
    transform: rotate(360deg);
  }
`,y=i.newStyled.div`
  position: relative;
  height: max-content;
  width: max-content;
  display: flex;
  & .label-text {
    display: ${e=>e.label?"unset":"none"};
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    ${e=>t.getComponentTypographyCss(e.theme,"Spinner",e.size,"enabled")};
    font-size: ${e=>p[e.size]};
    color: ${e=>t.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","text")};
  }
`,$=i.newStyled.div`
  display: inline-block;
  ${e=>b(e.size,e.theme)}
  border: ${e=>`0.3125rem solid ${t.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","unfilled")}`};
  border-radius: 50%;
  border-top-color: ${e=>t.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","background")};
  border-right-color: ${e=>t.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","background")};

  animation: ${h} 0.8s ease-in-out infinite;
`,l=e=>{const{label:r,className:a="",style:m={},size:c="small",color:d="primary"}=e,o={theme:g.useTheme(),size:c,color:d};return s.jsxs(y,{...o,className:"lnc-ui-spinner "+a,style:m,label:r,children:[s.jsx($,{...o}),s.jsx("div",{className:"label-text",children:r})]})};l.propTypes={label:n.PropTypes.string,className:n.PropTypes.string,style:n.PropTypes.object,size:n.PropTypes.oneOf(["small","medium","large"]),color:n.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=l;