@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.57 kB
JavaScript
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{styled as n,Box as i,Button as r,boxClasses as o,useTheme as a,Slide as s,Fade as c,Grow as l}from"@mui/material";import{mergeSx as p}from"merge-sx";import{useRef as m}from"react";import u from"../../BrandCore/Icon/Icon.js";import{buttonInteraction as d}from"../ButtonBase/Button.variant-helpers.js";import"../ButtonBase/ButtonBase.js";import g from"../Typography/Typography.js";const h=n(i)(({theme:t})=>({alignItems:"center",cursor:"pointer",display:"flex",flexDirection:"column",gap:t.spacing(.5),justifyContent:"center",transition:t.custom.easing.input})),f=n(i)(({theme:t})=>({alignItems:"center",color:t.custom.palette.text.secondary,display:"flex",opacity:0,transition:t.custom.easing.input})),y=n(g)(({active:t,theme:e})=>({color:t?e.custom.palette.text.primary:e.custom.palette.text.secondary,textAlign:"center"})),x=(t,e)=>{switch(t){case"sm":return e.spacing(.5625);case"md":return e.spacing(.8125);case"lg":return e.spacing(1)}},v=n(r,{shouldForwardProp:t=>!["active","sizing"].includes(t)})(({active:t,fullWidth:e,sizing:n,theme:i})=>({...d(i,t),alignItems:"center",backgroundColor:t?i.custom.palette.interaction.press:"transparent",borderRadius:i.spacing(i.custom.radius.md),color:i.custom.palette.text.primary,display:"flex",gap:i.spacing(1),justifyContent:e?"space-between":"center",minWidth:0,padding:x(n,i),textTransform:"none",width:e?"100%":"auto","&:hover":{...d(i,t)["&:hover"],[`.${o.root}`]:{opacity:1}},"&:focus":{...d(i,t)["&:focus"],[`.${o.root}`]:{opacity:1}}})),j=({active:n,fullWidth:r=!0,danger:o,href:d,target:x,external:j=!1,icon:B,label:b,navigationSizing:w,onClick:z,sizing:C="lg"})=>{const I=a(),k=m(null);return t(h,{onClick:j&&d?()=>window.open(d,x||"_blank"):z,children:[t(v,{active:!d&&n,sizing:C,fullWidth:r,children:[t(i,{display:"flex",alignItems:"center",justifyContent:"center",gap:1.5,ref:k,children:[B&&e(u,{name:B,size:24}),"lg"===w&&e(s,{in:!0,direction:"right",container:k.current,children:e(i,{sx:{display:"flex"},children:e(c,{in:!0,style:{transitionDelay:"100ms"},children:e(i,{sx:{display:"flex"},children:e(g,{component:"p",variation:"sm"===C?"xs":"md",type:"button",clamp:1,sx:p(o&&{color:I.custom.palette.text.negative}),children:b})})})})})]}),"lg"===w&&j&&e(f,{children:e(u,{name:"open-in-new",size:20})})]}),"sm"===w&&e(l,{in:!0,style:{transformOrigin:"0 100%",transitionDelay:"100ms"},children:e(i,{children:e(y,{active:n,component:"p",type:"button",variation:"xs",sx:p(o&&{color:I.custom.palette.text.negative}),children:b})})})]})};export{j as default};