@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 3.03 kB
JavaScript
import{styled as e,Box as i,ListItemButton as t,formControlLabelClasses as o,checkboxClasses as n,Stack as a}from"@mui/material";const r=450,s=16,d=e(i)(({theme:e})=>({height:24,width:24,margin:e.spacing(.5)})),h=e(i,{shouldForwardProp:e=>!["maxHeight","responsive"].includes(e)})(({theme:e,maxHeight:i,responsive:t})=>({display:"flex",flexDirection:"row",alignItems:"flex-end",gap:e.spacing(.5),width:"100%",minWidth:t?"auto":450,minHeight:i+32,padding:"0 16px",boxSizing:"border-box",overflow:"hidden"})),l=e(t,{shouldForwardProp:e=>!["maxHeight","responsive"].includes(e)})(({theme:e,maxHeight:i,responsive:t})=>({padding:t?e.spacing(.25):e.spacing(.5),paddingBottom:e.spacing(1),borderRadius:e.spacing(e.custom.radius.md),backgroundColor:e.custom.palette.interaction.none,display:"flex",minWidth:t?0:33,flex:t?1:"none",flexDirection:"column",alignItems:"center",justifyContent:"flex-end",height:i,"&:hover":{backgroundColor:e.custom.palette.interaction.hover,[`& .${o.root}`]:{[`& .${n.root}`]:{backgroundColor:e.custom.palette.blue[0]}}},"&:active":{backgroundColor:e.custom.palette.interaction.press},"&.Mui-selected":{backgroundColor:e.custom.palette.interaction.press},"&.Mui-disabled":{opacity:1}})),g=e(i,{shouldForwardProp:e=>!["maxHeight","responsive"].includes(e)})(({theme:e,maxHeight:i,responsive:t})=>({display:"flex",alignItems:"center",gap:t?0:e.spacing(.5),height:i,width:"100%"})),c=e(i)(()=>({height:22,display:"flex",alignItems:"center",width:"100%",minWidth:0,justifyContent:"center",overflow:"hidden"})),p=e(i)(({theme:e,value:i,disabled:t,checked:o})=>({transition:"background 200ms ease",width:"100%",height:i,backgroundColor:t||!o?e.custom.palette.neutral[100]:e.custom.palette.purple[500],borderRadius:e.spacing(e.custom.radius.sm)})),m=e(a)(()=>({alignItems:"center",display:"flex",justifyContent:"flex-end",minWidth:0})),u=e(i)(({theme:e})=>({height:24,marginTop:e.spacing(1),display:"flex",alignItems:"center"})),x=e(a,{shouldForwardProp:e=>!["maxHeight"].includes(e)})(({maxHeight:e})=>({height:e,boxSizing:"border-box"})),b=e(a,{shouldForwardProp:e=>!["maxHeight","hideLabel","hideCheckbox"].includes(e)})(({theme:e,hideLabel:i,hideCheckbox:t,maxHeight:o})=>({height:o,display:"flex",justifyContent:"space-between",paddingRight:e.spacing(e.custom.margin.sm),paddingTop:i||t?e.spacing(.5):e.spacing(2),boxSizing:"border-box"})),f=e(i,{shouldForwardProp:e=>!["showGraphLines","graphWidth"].includes(e)})(({showGraphLines:e,theme:i,graphWidth:t})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",height:18,width:32,textAlign:"right",position:"relative","&:after":{content:'""',position:"absolute",left:`calc(100% + ${i.spacing(2)})`,bottom:8,width:e?t?t-50:400:0,height:1,backgroundColor:"currentColor",opacity:.1}}));export{x as Axis,f as AxisSegment,b as AxisSegmentWrapper,s as GRAPH_PADDING,r as GRAPH_WIDTH,g as SliderGraphBarWrapper,h as SliderGraphWrapper,d as Spacer,p as VerticalBar,m as VerticalBarActions,u as VerticalBarLabel,c as VerticalBarValue,l as VeticalBarWrapper};