carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 5.59 kB
JavaScript
import e,{css as a}from"styled-components";import{margin as t}from"styled-system";import i from"../../../style/themes/apply-base-theme.js";import{Typography as r}from"../../typography/typography.component.js";import"react/jsx-runtime";import"react";import n from"../../button/button.style.js";const o={"extra-small":20,small:32,medium:64,large:80},s={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},l={small:"4px",medium:"8px",large:"16px"},d={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},m=(e,a)=>{const t=a?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:t,innerBarBackground:a?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:t,innerBarBackground:a?"#FFFFFF":"#000000"}},c=a(["display:flex;justify-content:center;text-align:center;"]),p=e.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-aaaf19f2-0"})(["display:inline-block;min-width:var(--sizing800);"]),f=e.div.attrs(i).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-aaaf19f2-1"})([""," text-align:center;white-space:nowrap;"],t),g=e.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-aaaf19f2-2"})(["",""],(({size:e,variant:t,inverse:i})=>a(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],l[e],m(t,i).outerBarBackground))),h=e.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-aaaf19f2-3"})(["",""],(({size:e,variant:t,inverse:i,animationTime:r,hasMotion:n})=>a(["@keyframes innerBarAnimationOne{0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}}@keyframes innerBarAnimationTwo{0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}}position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:innerBarAnimationOne,innerBarAnimationTwo;"," animation-iteration-count:",";"],m(t,i).innerBarBackground,l[e],n&&`animation-duration: ${r}s, ${r}s;`,n?"infinite, infinite":"none, none"))),u=e.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-aaaf19f2-4"})([""," ",' & circle[data-role="inner-arc"]{stroke:currentColor;}'],(({inverse:e,size:t,hasMotion:i,isTracked:r,isError:n,isSuccess:l,animationTime:d})=>{const m=`${o[t]}px`,c=s[t];return a(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}}animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],m,m,c,e?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",c,(({inverse:e,isSuccess:a,isError:t})=>t?"#DB004E;":a?"#00811F;":e?"#FFF;":"#000000")({inverse:e,isSuccess:l,isError:n}),r?"trackedAnimation":"untrackedAnimation",i&&`animation-duration: ${d}s;`,i?"infinite":"none")}),n),x="40px",y=e.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-aaaf19f2-5"})(["position:relative;width:",";height:",";"],x,x),k={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},w=e.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-aaaf19f2-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),v=e(r).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-aaaf19f2-7"})([""," line-height:150%;color:",";"," &{color:currentColor;}",""],c,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),n,(({size:e="medium",loaderType:t,loaderVariant:i})=>"star"===t?a(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===t?a(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===e?"16px":"14px",k[t][e]):a(["font-size:",";font-weight:500;width:",";",";"],"large"===e?"16px":"extra-small"===e?"13px":"14px","inline"===i?"auto":"100%","inline"===i?`margin-left: ${d[e]}`:`margin-top: ${k[t][e]}`))),b=e.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-aaaf19f2-8"})(["",""],(({loaderVariant:e})=>a(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===e?"row":"column","inline"===e?"auto":"100%"))),B=e.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-aaaf19f2-9"})(["",";"],(({inverse:e})=>a(["color:",";"," &{color:currentColor;}"],e?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",n)));export{h as InnerBar,g as OuterBar,B as StyledLabel,f as StyledLoader,v as StyledLoaderLabel,p as StyledLoaderPlaceholder,u as StyledRingCircleSvg,b as StyledRingLoaderWrapper,w as StyledStarLoaderWrapper,y as StyledStars};