@useloops/design-system 1.4.557 → 1.4.558

package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts

@@ -5,9 +5,27 @@ import * as _mui_system from '@mui/system';
 import * as _mui_material from '@mui/material';
 import { SliderGraphBarProps, CommonComponentProps } from '../types.js';
 
-declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
-declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "autoFocus" | "tabIndex" | "disableGutters" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
-declare const SliderGraphBarWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+    component?: React.ElementType;
+} & {
+    maxHeight: number;
+} & {
+    responsive?: boolean;
+}, {}, {}>;
+declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "autoFocus" | "tabIndex" | "disableGutters" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
+    component?: React.ElementType;
+} & {
+    maxHeight: number;
+} & {
+    responsive?: boolean;
+}, {}, {}>;
+declare const SliderGraphBarWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+    component?: React.ElementType;
+} & {
+    maxHeight: number;
+} & {
+    responsive?: boolean;
+}, {}, {}>;
 declare const VerticalBarValue: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType;
 }, {}, {}>;
@@ -25,11 +43,14 @@ declare const VerticalBarLabel: _emotion_styled.StyledComponent<_mui_system.BoxO
 }, {}, {}>;
 declare const AxisSegmentWrapper: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     component?: React.ElementType;
+} & {
+    maxHeight: number;
 } & Partial<SliderGraphBarProps>, {}, {}>;
 declare const AxisSegment: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType;
 } & {
     showGraphLines?: boolean;
+    graphWidth?: number;
 }, {}, {}>;
 
 export { AxisSegment, AxisSegmentWrapper, SliderGraphBarWrapper, SliderGraphWrapper, VerticalBar, VerticalBarActions, VerticalBarLabel, VerticalBarValue, VeticalBarWrapper };

package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.js

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

package/dist/systems/Platform/SliderGraph/types.d.ts

@@ -18,10 +18,12 @@ interface SliderGraphYAxisProps extends CommonComponentProps {
     rounding: number | null;
     tickInterval: TickInterval | null;
     yAxisMax: number;
+    graphMaxHeight: number;
     hideLabel?: boolean;
     hideCheckbox?: boolean;
     showGraphLines?: boolean;
     yAxisTickData?: number[];
+    responsive?: boolean;
     slotProps?: {
         root?: StackProps;
     };
@@ -38,6 +40,7 @@ interface SliderGraphProps extends CommonComponentProps {
         root?: BoxProps;
         yAxis?: StackProps;
         barsWrapper?: BoxProps;
+        bar?: Partial<SliderGraphBarProps>;
     };
     hideYAxis?: boolean;
     hideCheckboxes?: boolean;
@@ -45,6 +48,8 @@ interface SliderGraphProps extends CommonComponentProps {
     hideValues?: boolean;
     showGraphLines?: boolean;
     disableTooltips?: boolean;
+    maxHeight?: number;
+    responsive?: boolean;
 }
 interface SliderGraphBarProps extends CommonComponentProps {
     id: string;
@@ -64,6 +69,8 @@ interface SliderGraphBarProps extends CommonComponentProps {
     hideCheckbox?: boolean;
     animateBar?: boolean;
     onChange?: (id: string, checked: boolean) => void;
+    graphMaxHeight: number;
+    responsive?: boolean;
     percentageSymbol?: boolean;
     slotProps?: {
         barWrapper?: ListItemButtonProps;

package/dist/systems/Platform/SliderGraph/utils/heightBasedOnPercentage.js

@@ -1 +1 @@
-"use strict";var e=require("../_partials/StyledComponents.js");exports.heightBasedOnPercentage=(t,r,a)=>{if(t<=0)return 1;const s=e.GRAPH_HEIGHT-85,n=Math.ceil(a/r)*r;return Math.max(1,t/n*s)};
+"use strict";exports.heightBasedOnPercentage=(e,t,h,a,i={})=>{if(e<=0)return 1;let r=12;i.hideValue||(r+=22),i.hideLabel||(r+=32),i.hideCheckbox||(r+=24);const c=a-r,n=Math.ceil(h/t)*t;return Math.max(1,e/n*c)};

package/dist/systems/Platform/SliderGraph/utils/mockData.js

@@ -1 +1 @@
-"use strict";var e=require("../../../../node_modules/@faker-js/faker/dist/chunk-KZPPZA2C.js");function t(t){const n=e.a.number.int({min:1,max:10}),a=e.a.number.float({min:0,max:100,fractionDigits:1}),r=Math.min(e.a.number.float({min:0,max:125,fractionDigits:0}),100);return{amount:n,percentage:a,name:t.toString(),relativePercentage:r}}exports.generateSliderGraphDataItem=t,exports.generateSliderGraphMockData=function(){const n=e.a.number.int({min:1,max:11});return[...new Array(n)].map((e,n)=>t(n))},exports.generateZeroDataItem=function(e){return{amount:0,name:e.toString(),percentage:0,relativePercentage:0}};
+"use strict";var e=require("../../../../node_modules/@faker-js/faker/dist/chunk-KZPPZA2C.js");function t(t){const n=e.a.number.int({min:1,max:10}),a=e.a.number.float({min:0,max:100,fractionDigits:1}),r=Math.min(e.a.number.float({min:0,max:125,fractionDigits:0}),100);return{amount:n,percentage:a,name:t.toString(),relativePercentage:r}}exports.generateSliderGraphDataItem=t,exports.generateSliderGraphMockData=function(){const n=e.a.number.int({min:3,max:11});return[...new Array(n)].map((e,n)=>t(n))},exports.generateZeroDataItem=function(e){return{amount:0,name:e.toString(),percentage:0,relativePercentage:0}};

package/dist/systems/Platform/SliderGraph/utils/useSliderGraphProps.d.ts

@@ -4,9 +4,9 @@ import { SliderGraphDataItem, SliderGraphBarProps } from '../types.js';
 interface UseSliderGraphPropsReturn {
     storedData: SliderGraphBarProps[];
     setStoredData: react__default.Dispatch<react__default.SetStateAction<SliderGraphBarProps[]>>;
-    createInitialData: (data: SliderGraphDataItem[]) => SliderGraphBarProps[];
+    createInitialData: (data: SliderGraphDataItem[], graphMaxHeight?: number) => SliderGraphBarProps[];
 }
-declare const useSliderGraphProps: (data: SliderGraphDataItem[]) => UseSliderGraphPropsReturn;
+declare const useSliderGraphProps: (data: SliderGraphDataItem[], graphMaxHeight?: number) => UseSliderGraphPropsReturn;
 
 export { useSliderGraphProps as default };
 export type { UseSliderGraphPropsReturn };

package/dist/systems/Platform/SliderGraph/utils/useSliderGraphProps.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../../../../node_modules/uuid/dist/esm-browser/v4.js");function t(e){return e&&e.__esModule?e:{default:e}}var r=t(e);const n=e=>{const t=Math.max(...e.map(e=>e.percentage));return e.map(e=>({percentage:e.percentage,amount:e.amount,label:e.name,relativePercentage:e.relativePercentage,id:a(),checked:!0,tickInterval:10,disableTooltip:!1,hideCheckbox:!1,hideLabel:!1,hideValue:!1,animateBar:!0,disabled:!1,loading:!1,onChange:(a,t)=>console.warn(e,t),value:e.percentage,toolTipContent:`${e.percentage}%`,maxDataValue:t}))};exports.createInitialData=n,exports.default=e=>{const[a,t]=r.default.useState(()=>n(e));return{storedData:a,setStoredData:t,createInitialData:n}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../../../../node_modules/uuid/dist/esm-browser/v4.js");function t(e){return e&&e.__esModule?e:{default:e}}var r=t(e);const n=(e,t=465)=>{const r=Math.max(...e.map(e=>e.percentage));return e.map(e=>({percentage:e.percentage,amount:e.amount,label:e.name,relativePercentage:e.relativePercentage,id:a(),checked:!0,tickInterval:10,disableTooltip:!1,hideCheckbox:!1,hideLabel:!1,hideValue:!1,animateBar:!0,disabled:!1,loading:!1,onChange:(a,t)=>console.warn(e,t),value:e.percentage,toolTipContent:`${e.percentage}%`,maxDataValue:r,graphMaxHeight:t}))};exports.createInitialData=n,exports.default=(e,a=465)=>{const[t,o]=r.default.useState(()=>n(e,a));return{storedData:t,setStoredData:o,createInitialData:n}};

package/dist/systems/WebCore/Typography/Typography.d.ts

@@ -9,6 +9,8 @@ interface TypographyProps extends Omit<TypographyProps$1, 'ref'> {
     weight?: 'default' | 'bold';
     monospaced?: boolean;
     sx?: SxProps<Theme>;
+    secondary?: boolean;
+    textColor?: string;
 }
 declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLHeadingElement | HTMLParagraphElement>>;
 

package/dist/systems/WebCore/Typography/Typography.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx"),i=require("react"),a=require("../../BrandCore/types.js");const o=e=>"bold"===e?a.FontWeight.BOLD:a.FontWeight.DEFAULT,n=i.forwardRef(({component:i,weight:a="default",variation:n,clamp:u=0,type:s="default",monospaced:m,...l},p)=>e.jsx(t.Typography,{ref:p,variant:n,fontWeight:o(a),component:i,...l,sx:r.mergeSx(l.sx,!!u&&{display:"-webkit-box",overflow:"hidden",WebkitBoxOrient:"vertical",WebkitLineClamp:u},"button"===s&&{lineHeight:1.2},m&&{fontVariantNumeric:"tabular-nums"})}));module.exports=n;
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx"),o=require("react"),i=require("../../BrandCore/types.js");const a=e=>"bold"===e?i.FontWeight.BOLD:i.FontWeight.DEFAULT,n=o.forwardRef(({component:o,weight:i="default",variation:n,clamp:s=0,type:u="default",monospaced:l,secondary:c,textColor:m,...d},p)=>{const x=t.useTheme();return e.jsx(t.Typography,{ref:p,variant:n,fontWeight:a(i),component:o,...d,sx:r.mergeSx(d.sx,!!s&&{display:"-webkit-box",overflow:"hidden",WebkitBoxOrient:"vertical",WebkitLineClamp:s},"button"===u&&{lineHeight:1.2},l&&{fontVariantNumeric:"tabular-nums"},c&&{color:x.custom.palette.text.secondary},Boolean(m)&&{color:m})})});module.exports=n;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@useloops/design-system",
-    "version": "1.4.557",
+    "version": "1.4.558",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",