@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.54 kB
JavaScript
import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useTheme as i,Stack as r,Box as a}from"@mui/material";import{mergeSx as m}from"merge-sx";import{forwardRef as n}from"react";import s from"../../BrandCore/Icon/Icon.js";import d from"../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js";import p from"../../WebCore/IconButton/IconButton.js";import"../../BrandCore/primitiveVariables.js";import l from"../../WebCore/Menu/Menu.js";import c from"../../WebCore/Skeleton/Skeleton.js";import h from"../../WebCore/Surface/Surface.js";import u from"../../WebCore/Typography/Typography.js";import f from"../KpiIndicator/KpiIndicator.js";import{addedStylesForExpandedableButton as g}from"./helpers/addTestKpiInteractionStates.js";const x=n(({colorScheme:n="purple",variation:x,title:b,description:y,loading:C,disabled:v=!1,onShowMoreClick:I,menuItems:j,active:w,...S},k)=>{const T=i();return e(h,{ref:k,interactive:!v,active:w,borderradius:"lg",variation:"raised",...S,sx:m({position:"relative",display:"flex",flexDirection:"column",gap:T.custom.margin.sm,border:`1px solid ${T.custom.palette.stroke.light}`,padding:T.custom.padding.md,..."dimmed"===x&&{border:`1px solid ${T.custom.palette.stroke.light}`},...g(T,T.custom.palette.surface.raised,{hover:!v,active:!v,selected:w})},S.sx),children:[e(r,{direction:"row",gap:1,children:[e(r,{direction:"row",gap:1,width:"100%",sx:{minHeight:"22px"},children:[o(t,{children:C?o(c,{sx:{width:17,height:16}}):o(a,{sx:{height:"22px",display:"flex",placeItems:"center"},children:o(f,{colorScheme:n,disabled:x&&"dimmed"===x||v})})}),C?o(c,{sx:{marginTop:"-1px"}}):o(u,{component:"p",variation:"md",weight:"bold",sx:{color:"dimmed"===x||v?T.custom.palette.text.disabled:T.custom.palette.text.primary},children:b})]}),!C&&Boolean(j?.length)&&o(l,{bindOn:v?[]:["focus","trigger"],trigger:o(p,{disabled:v,icon:o(s,{name:"more-horizontal",size:16}),variation:"outlined",className:"TestKPICard__Menu",sx:{width:28,aspectRatio:1,borderRadius:"100% !important",transition:"all 0.3s ease",opacity:0,transform:"scale(0.2)","&:focus":{background:`${T.custom.palette.interaction.press} !important`,opacity:1}}}),menuItems:j,width:128,offset:[0,-8],placement:"bottom-end"})]}),C?o(a,{display:"flex",flexDirection:"column",gap:.5,children:[...new Array(3).fill(void 0)].map((e,t)=>o(c,{height:19},`TestKPICard__Skeleton--description-${t}`))}):o(d,{clamp:3,component:"p",variation:"sm",sizing:"sm",dimmed:"dimmed"===x,disabled:v,onShowMoreClick:I,children:y})]})});export{x as default};