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