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

React component library

"use strict";const n=require("react/jsx-runtime"),s=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),d=require("./emotion-react.browser.esm-Cvnp-zmB.cjs"),r=require("./utils-BK6B_Y9X.cjs"),c=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),u={small:"0.6rem",medium:"0.7rem",large:"0.8rem"},b=(e,t)=>{if(e==="small")return`
          width: ${t.sizes.small};
          height: ${t.sizes.small};
        `;if(e==="medium")return`
            width: ${t.sizes.medium};
            height: ${t.sizes.medium};
        `;if(e==="large")return`
          width: ${t.sizes.large};
          height: ${t.sizes.large};
        `},g=d.keyframes`
  to {
    transform: rotate(360deg);
  }
`,h=s.styled.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=>r.getComponentTypographyCss(e.theme,"Spinner",e.size,"enabled")};
    font-size: ${e=>u[e.size]};
    color: ${e=>r.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","text")};
  }
`,$=s.styled.div`
  display: inline-block;
  ${e=>b(e.size,e.theme)}
  border: ${e=>`0.3125rem solid ${r.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","unfilled")}`};
  border-radius: 50%;
  border-top-color: ${e=>r.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","background")};
  border-right-color: ${e=>r.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","background")};

  animation: ${g} 0.8s ease-in-out infinite;
`,p=e=>{const{label:t,className:o="",style:l={},size:a="small",color:m="primary"}=e,i={theme:c.useTheme(),size:a,color:m};return n.jsxs(h,{...i,className:"lnc-ui-spinner "+o,style:l,label:t,children:[n.jsx($,{...i}),n.jsx("div",{className:"label-text",children:t})]})};module.exports=p;