@frank-auth/react/dist/cjs/components/ui/progress/progress.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),k=require("../../../theme/context.cjs"),j=require("../../../theme/styled.cjs"),t=require("@emotion/react"),C=require("@emotion/styled"),_=require("react"),g=e=>e&&e.__esModule?e:{default:e},a=g(C),q=g(_),M=e=>{const{theme:s,size:r="md"}=e;switch(r){case"xs":return t.css`
        height: ${s.spacing[1]} !important;
      `;case"sm":return t.css`
        height: ${s.spacing[2]} !important;
      `;case"md":return t.css`
        height: ${s.spacing[3]} !important;
      `;case"lg":return t.css`
        height: ${s.spacing[4]} !important;
      `;default:return t.css`
        height: ${s.spacing[3]} !important;
      `}},D=e=>{const{theme:s,radius:r="full"}=e;switch(r){case"none":return t.css`border-radius: ${s.borderRadius.none} !important;`;case"sm":return t.css`border-radius: ${s.borderRadius.sm} !important;`;case"md":return t.css`border-radius: ${s.borderRadius.md} !important;`;case"lg":return t.css`border-radius: ${s.borderRadius.lg} !important;`;case"full":return t.css`border-radius: ${s.borderRadius.full} !important;`;default:return t.css`border-radius: ${s.borderRadius.full} !important;`}},A=e=>{const{theme:s,color:r="primary",isDisabled:u}=e;if(u)return t.css`
      opacity: 0.5;
    `;const i=j.getColorVariant(s,r,500);return t.css`
    background-color: ${i};
  `},F=t.keyframes`
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
`,L=t.keyframes`
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
`,T=a.default.div`
  display: flex;
  flex-direction: column;
  gap: ${e=>e.showValueLabel?e.theme.spacing[2]:0};
  width: 100%;
`,N=a.default.div`
  position: relative;
  overflow: hidden;
  background-color: ${e=>e.theme.colors.neutral[200]};
  width: 100%;

  /* Apply size and radius styles to ensure they take precedence */
  ${M}
  ${D}

  ${e=>e.isDisabled&&t.css`
      opacity: 0.5;
    `}

    /* Custom CSS prop - applied last */
  ${e=>e.css}
`,V=a.default.div`
  height: 100%;
  border-radius: inherit;
  transition: width ${e=>e.theme.transitions.normal};
  position: relative;

  ${A}

  ${e=>e.isIndeterminate?t.css`
        width: 40%;
        position: absolute;
        animation: ${F} 1.5s infinite ease-in-out;
      `:t.css`
        width: ${e.progressValue}%;
      `}

  ${e=>e.isStriped&&t.css`
      background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
      );
      background-size: 40px 40px;
      animation: ${L} 1s linear infinite;
    `}
`,W=a.default.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`,X=a.default.span`
  color: ${e=>e.theme.colors.text.primary};
  font-size: ${e=>{switch(e.size){case"xs":return e.theme.fontSizes.xs;case"sm":return e.theme.fontSizes.xs;case"lg":return e.theme.fontSizes.base;default:return e.theme.fontSizes.sm}}};
  font-weight: ${e=>e.theme.fontWeights.medium};
`,B=a.default.span`
  color: ${e=>e.theme.colors.text.secondary};
  font-size: ${e=>{switch(e.size){case"xs":return e.theme.fontSizes.xs;case"sm":return e.theme.fontSizes.xs;case"lg":return e.theme.fontSizes.base;default:return e.theme.fontSizes.sm}}};
  font-weight: ${e=>e.theme.fontWeights.medium};
`,p=q.default.forwardRef(({value:e=0,minValue:s=0,maxValue:r=100,color:u="primary",size:i="md",radius:b="full",showValueLabel:l=!1,label:o,formatOptions:m={style:"percent",maximumFractionDigits:0},isIndeterminate:c=!1,isDisabled:$=!1,isStriped:x=!1,className:y,css:S,...w},z)=>{const{theme:d}=k.useTheme(),f=c?0:Math.min(Math.max((e-s)/(r-s)*100,0),100),P=R=>m.style==="percent"?`${Math.round(f)}%`:new Intl.NumberFormat(void 0,m).format(R),h={...w,color:u,size:i,radius:b,isDisabled:$,className:y,css:S},v={...h,progressValue:f,isIndeterminate:c,isStriped:x&&!c};return n.jsxs(T,{theme:d,ref:z,showValueLabel:l||!!o,role:"progressbar","aria-valuenow":c?void 0:e,"aria-valuemin":s,"aria-valuemax":r,"aria-label":o,children:[(o||l)&&n.jsxs(W,{children:[o&&n.jsx(X,{theme:d,size:i,children:o}),l&&!c&&n.jsx(B,{theme:d,size:i,children:P(e)})]}),n.jsx(N,{theme:d,...h,children:n.jsx(V,{theme:d,...v})})]})});p.displayName="Progress";exports.Progress=p;
//# sourceMappingURL=progress.cjs.map