@am92/react-design-system 2.8.0 → 2.8.1

package/dist/Components/DsAvatar/DsAvatar.Component.d.ts

@@ -1 +1,3 @@
-export { default as DsAvatar } from '@mui/material/Avatar';
+import { FC } from 'react';
+import { DsAvatarProps } from './DsAvatar.Types';
+export declare const DsAvatar: FC<DsAvatarProps>;

package/dist/Components/DsAvatar/DsAvatar.Component.js

@@ -1 +1,5 @@
-export { default as DsAvatar } from '@mui/material/Avatar';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Avatar from '@mui/material/Avatar';
+export const DsAvatar = props => {
+    return _jsx(Avatar, { ...props });
+};

package/dist/Components/DsChip/DsChip.Component.d.ts

@@ -1 +1,3 @@
-export { default as DsChip } from '@mui/material/Chip';
+import { FC } from 'react';
+import { DsChipProps } from './DsChip.Types';
+export declare const DsChip: FC<DsChipProps>;

package/dist/Components/DsChip/DsChip.Component.js

@@ -1 +1,5 @@
-export { default as DsChip } from '@mui/material/Chip';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Chip from '@mui/material/Chip';
+export const DsChip = props => {
+    return _jsx(Chip, { ...props, variant: "chip" });
+};

package/dist/Components/DsChip/DsChip.Overrides.d.ts

@@ -7,13 +7,6 @@ export declare const DsChipOverrides: {
             props: Partial<DsChipProps>;
             style: CSSInterpolation;
         }[];
-        styleOverrides: {
-            root: CSSInterpolation;
-            filled: CSSInterpolation;
-            filledSecondary: CSSInterpolation;
-            label: CSSInterpolation;
-            icon: CSSInterpolation;
-            deleteIcon: CSSInterpolation;
-        };
+        styleOverrides: {};
     };
 };

package/dist/Components/DsChip/DsChip.Overrides.js

@@ -1,11 +1,10 @@
-import STATE_STYLES from '../../Theme/STATE_STYLES';
 import { DsChipDefaultProps } from './DsChip.Types';
 export const DsChipOverrides = {
     MuiChip: {
         defaultProps: DsChipDefaultProps,
         variants: [
             {
-                props: { 'ds-variant': 'chip' },
+                props: { variant: 'chip' },
                 style: {
                     border: 'none',
                     borderRadius: 'var(--ds-radius-quickFreeze)',
@@ -25,7 +24,7 @@ export const DsChipOverrides = {
                 }
             },
             {
-                props: { 'ds-variant': 'chip', type: 'status' },
+                props: { variant: 'chip', type: 'status' },
                 style: {
                     fontWeight: 'var(--ds-typo-supportRegularMetadata-fontWeight)',
                     fontSize: 'var(--ds-typo-supportRegularMetadata-fontSize)',
@@ -40,7 +39,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'status',
                     color: 'success'
                 },
@@ -50,7 +49,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'status',
                     color: 'warning'
                 },
@@ -60,7 +59,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'status',
                     color: 'error'
                 },
@@ -70,7 +69,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'status',
                     color: 'info'
                 },
@@ -80,7 +79,7 @@ export const DsChipOverrides = {
                 }
             },
             {
-                props: { 'ds-variant': 'chip', type: 'nudge' },
+                props: { variant: 'chip', type: 'nudge' },
                 style: {
                     fontWeight: 'var(--ds-typo-supportRegularInfo-fontWeight)',
                     fontSize: 'var(--ds-typo-supportRegularInfo-fontSize)',
@@ -95,7 +94,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'nudge',
                     color: 'success'
                 },
@@ -106,7 +105,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'nudge',
                     color: 'warning'
                 },
@@ -117,7 +116,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'nudge',
                     color: 'error'
                 },
@@ -128,7 +127,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'nudge',
                     color: 'info'
                 },
@@ -138,50 +137,6 @@ export const DsChipOverrides = {
                 }
             }
         ],
-        styleOverrides: {
-            root: {
-                paddingTop: 'var(--ds-spacing-quickFreeze)',
-                paddingBottom: 'var(--ds-spacing-quickFreeze)',
-                fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
-                fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
-                lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
-                letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)'
-            },
-            filled: {
-                backgroundColor: 'var(--ds-colour-surfacePrimary)',
-                border: '1px solid var(--ds-colour-strokeDefault)',
-                '> .MuiIcon-root': {
-                    color: 'var(--ds-colour-iconDefault)'
-                }
-            },
-            filledSecondary: {
-                backgroundColor: 'var(--ds-colour-actionSecondary)',
-                border: '1px solid var(--ds-colour-strokeSelected)',
-                fontWeight: 'var(--ds-typo-bodyBoldMedium-fontWeight)',
-                fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
-                lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
-                letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)',
-                '> .MuiIcon-root': {
-                    color: 'inherit'
-                },
-                ...STATE_STYLES.ACTION_SECONDARY_STATE_SECONDARY
-            },
-            label: {
-                paddingTop: 'var(--ds-spacing-deepFreeze)',
-                paddingBottom: 'var(--ds-spacing-deepFreeze)',
-                paddingLeft: 'var(--ds-spacing-frostbite)',
-                paddingRight: 'var(--ds-spacing-frostbite)'
-            },
-            icon: {
-                fontSize: 'var(--ds-typo-fontSizeBitterCold)',
-                marginLeft: 'var(--ds-spacing-frostbite)',
-                marginRight: 'calc(var(--ds-spacing-quickFreeze) * -1)'
-            },
-            deleteIcon: {
-                fontSize: 'var(--ds-typo-fontSizeBitterCold)',
-                marginRight: 'var(--ds-spacing-frostbite)',
-                marginLeft: 'calc(var(--ds-spacing-quickFreeze) * -1)'
-            }
-        }
+        styleOverrides: {}
     }
 };

package/dist/Components/DsChip/DsChip.Types.d.ts

@@ -1,7 +1,13 @@
 import { ChipProps } from '@mui/material';
-export interface DsChipProps extends Omit<ChipProps, 'color'> {
+export interface DsChipProps extends Omit<ChipProps, 'onDelete'> {
     type?: 'status' | 'nudge';
-    color?: Extract<ChipProps['color'], 'default' | 'info' | 'success' | 'warning' | 'error'>;
-    'ds-variant'?: 'chip';
 }
 export declare const DsChipDefaultProps: DsChipProps;
+declare module '@mui/material/Chip' {
+    interface ChipPropsVariantOverrides {
+        filled: false;
+        outlined: false;
+        chip: true;
+        tag: true;
+    }
+}

package/dist/Components/DsChip/DsChip.Types.js

@@ -1,4 +1,3 @@
 export const DsChipDefaultProps = {
-    type: 'status',
-    'ds-variant': 'chip'
+    type: 'status'
 };

package/dist/Components/DsRadio/DsRadio.Overrides.d.ts

@@ -3,6 +3,7 @@ export declare const DsRadioOverrides: {
         styleOverrides: {
             root: {
                 padding: string;
+                color: string;
             };
         };
     };

package/dist/Components/DsRadio/DsRadio.Overrides.js

@@ -2,7 +2,8 @@ export const DsRadioOverrides = {
     MuiRadio: {
         styleOverrides: {
             root: {
-                padding: 'var(--ds-spacing-quickFreeze)'
+                padding: 'var(--ds-spacing-quickFreeze)',
+                color: 'var(--ds-colour-iconDefault)'
             }
         }
     }

package/dist/Components/DsTag/DsTag.Component.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Chip from '@mui/material/Chip';
-import { DsTagDefaultProps } from './DsTag.Types';
 import { DsRemixIcon } from '../DsRemixIcon';
-export const DsTag = (inProps) => {
-    const props = { ...DsTagDefaultProps, ...inProps };
+import STATE_STYLES from '../../Theme/STATE_STYLES';
+import { useThemeProps } from '@mui/system';
+export const DsTag = inProps => {
+    const props = useThemeProps({ props: inProps, name: 'DsTag' });
     const handleClick = () => {
         const { value, onClick } = props;
         if (typeof onClick === 'function') {
@@ -18,5 +19,43 @@ export const DsTag = (inProps) => {
     };
     const { selected, onClick, onDelete, ...chipProps } = props;
     const color = (selected && 'secondary') || 'default';
-    return (_jsx(Chip, { deleteIcon: _jsx(DsRemixIcon, { className: "ri-close-circle-fill" }), skipFocusWhenDisabled: true, ...chipProps, clickable: true, color: color, onDelete: (onDelete && handleDelete) || undefined, onClick: handleClick }));
+    return (_jsx(Chip, { deleteIcon: _jsx(DsRemixIcon, { className: "ri-close-circle-fill" }), skipFocusWhenDisabled: true, sx: {
+            paddingTop: 'var(--ds-spacing-quickFreeze)',
+            paddingBottom: 'var(--ds-spacing-quickFreeze)',
+            fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
+            fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
+            lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
+            letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)',
+            backgroundColor: 'var(--ds-colour-surfacePrimary)',
+            border: '1px solid var(--ds-colour-strokeDefault)',
+            '&.MuiChip-colorSecondary': {
+                backgroundColor: 'var(--ds-colour-actionSecondary)',
+                border: '1px solid var(--ds-colour-strokeSelected)',
+                fontWeight: 'var(--ds-typo-bodyBoldMedium-fontWeight)',
+                fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
+                lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
+                letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)',
+                '> .MuiChip-icon': {
+                    color: 'inherit'
+                },
+                ...STATE_STYLES.ACTION_SECONDARY_STATE_SECONDARY
+            },
+            '> .MuiChip-label': {
+                paddingTop: 'var(--ds-spacing-deepFreeze)',
+                paddingBottom: 'var(--ds-spacing-deepFreeze)',
+                paddingLeft: 'var(--ds-spacing-frostbite)',
+                paddingRight: 'var(--ds-spacing-frostbite)'
+            },
+            '> .MuiChip-icon': {
+                color: 'var(--ds-colour-iconDefault)',
+                fontSize: 'var(--ds-typo-fontSizeBitterCold)',
+                marginLeft: 'var(--ds-spacing-frostbite)',
+                marginRight: 'calc(var(--ds-spacing-quickFreeze) * -1)'
+            },
+            '> .MuiChip-deleteIcon': {
+                fontSize: 'var(--ds-typo-fontSizeBitterCold)',
+                marginRight: 'var(--ds-spacing-frostbite)',
+                marginLeft: 'calc(var(--ds-spacing-quickFreeze) * -1)'
+            }
+        }, ...chipProps, variant: "tag", clickable: true, color: color, onDelete: (onDelete && handleDelete) || undefined, onClick: handleClick }));
 };

package/dist/Components/DsTag/DsTag.Overrides.d.ts

@@ -1 +1,5 @@
-export declare const DsTagOverrides: {};
+export declare const DsTagOverrides: {
+    DsTag: {
+        defaultProps: import("./DsTag.Types").DsTagProps;
+    };
+};

package/dist/Components/DsTag/DsTag.Overrides.js

@@ -1,2 +1,6 @@
-// NOTE: Refer DsChip for DsTag Overrides
-export const DsTagOverrides = {};
+import { DsTagDefaultProps } from './DsTag.Types';
+export const DsTagOverrides = {
+    DsTag: {
+        defaultProps: DsTagDefaultProps
+    }
+};

package/dist/Constants/TYPOGRAPGHY.d.ts

@@ -1,2 +1,5 @@
-import { DsTypographyTokens } from '../Types';
+import { DS_TYPOGRAPHY_HTML_FONT_SIZE, DsTypographyTokens } from '../Types';
 export declare const DSTYPOGRAPHY_TOKENS: DsTypographyTokens[];
+export declare const DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE: DS_TYPOGRAPHY_HTML_FONT_SIZE;
+export declare const DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE: DS_TYPOGRAPHY_HTML_FONT_SIZE;
+export declare const DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE: DS_TYPOGRAPHY_HTML_FONT_SIZE;

package/dist/Constants/TYPOGRAPGHY.js

@@ -28,3 +28,6 @@ export const DSTYPOGRAPHY_TOKENS = [
     'supportBoldTextButton',
     'supportRegularMetadata'
 ];
+export const DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE = 16;
+export const DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE = 16;
+export const DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE = 18;

package/dist/Helpers/accessibility.d.ts

@@ -0,0 +1,3 @@
+import { DS_TYPOGRAPHY_HTML_FONT_SIZE } from '../Types';
+export declare const getCurrentFontSize: () => DS_TYPOGRAPHY_HTML_FONT_SIZE;
+export declare const isValidFontSize: (fontSize: DS_TYPOGRAPHY_HTML_FONT_SIZE) => boolean;

package/dist/Helpers/accessibility.js

@@ -0,0 +1,14 @@
+import { DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE, DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE, DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE } from '../Constants';
+export const getCurrentFontSize = () => {
+    const htmlElement = document.documentElement;
+    const computedFontSize = window.getComputedStyle(htmlElement).fontSize;
+    if (computedFontSize) {
+        const parsedFontSize = parseInt(computedFontSize, 10);
+        return parsedFontSize;
+    }
+    return DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE;
+};
+export const isValidFontSize = (fontSize) => {
+    return (fontSize >= DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE &&
+        fontSize <= DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE);
+};

package/dist/Helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './accessibility';

package/dist/Helpers/index.js

@@ -0,0 +1 @@
+export * from './accessibility';

package/dist/Hooks/accessibility.d.ts

@@ -0,0 +1,9 @@
+import { DS_TYPOGRAPHY_HTML_FONT_SIZE } from '../Types';
+export declare const useFontSizeAccessibility: () => {
+    fontSize: DS_TYPOGRAPHY_HTML_FONT_SIZE;
+    disableDecrease: boolean;
+    disableIncrease: boolean;
+    increaseFontSize: () => void;
+    decreaseFontSize: () => void;
+    setFontSize: (newFontSize: DS_TYPOGRAPHY_HTML_FONT_SIZE) => void;
+};

package/dist/Hooks/accessibility.js

@@ -0,0 +1,35 @@
+import { useState, useEffect, useCallback } from 'react';
+import { DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE, DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE, DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE } from '../Constants';
+import { getCurrentFontSize, isValidFontSize } from '../Helpers';
+export const useFontSizeAccessibility = () => {
+    let currentFontSize = getCurrentFontSize();
+    if (!isValidFontSize(currentFontSize)) {
+        currentFontSize = DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE;
+    }
+    const [fontSize, setFontSize] = useState(currentFontSize);
+    useEffect(() => {
+        const htmlElement = document.documentElement;
+        htmlElement.style.fontSize = `${fontSize}px`;
+    }, [fontSize, document.documentElement.style.fontSize]);
+    const setValidFontSize = useCallback((newFontSize) => {
+        if (isValidFontSize(newFontSize)) {
+            setFontSize(newFontSize);
+        }
+    }, []);
+    const deltaChangeFontSize = (delta) => () => {
+        const newFontSize = (fontSize + delta);
+        if (isValidFontSize(newFontSize)) {
+            setFontSize(newFontSize);
+        }
+    };
+    let disableIncrease = fontSize >= DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE;
+    let disableDecrease = fontSize <= DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE;
+    return {
+        fontSize,
+        disableDecrease,
+        disableIncrease,
+        increaseFontSize: deltaChangeFontSize(1),
+        decreaseFontSize: deltaChangeFontSize(-1),
+        setFontSize: setValidFontSize
+    };
+};

package/dist/Hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './accessibility';

package/dist/Hooks/index.js

@@ -0,0 +1 @@
+export * from './accessibility';

package/dist/Theme/componentOverrides.d.ts

@@ -480,6 +480,9 @@ declare const componentOverrides: {
             };
         };
     };
+    DsTag: {
+        defaultProps: import("../Components").DsTagProps;
+    };
     MuiTabs: {
         defaultProps: import("../Components").DsTabsProps;
         variants: {
@@ -725,6 +728,7 @@ declare const componentOverrides: {
         styleOverrides: {
             root: {
                 padding: string;
+                color: string;
             };
         };
     };
@@ -1097,14 +1101,7 @@ declare const componentOverrides: {
             props: Partial<import("../Components").DsChipProps>;
             style: import("@mui/system").CSSInterpolation;
         }[];
-        styleOverrides: {
-            root: import("@mui/system").CSSInterpolation;
-            filled: import("@mui/system").CSSInterpolation;
-            filledSecondary: import("@mui/system").CSSInterpolation;
-            label: import("@mui/system").CSSInterpolation;
-            icon: import("@mui/system").CSSInterpolation;
-            deleteIcon: import("@mui/system").CSSInterpolation;
-        };
+        styleOverrides: {};
     };
     MuiCheckbox: {
         defaultProps: import("../Components").DsCheckboxProps;

package/dist/Theme/getColorScheme/dark.js

@@ -47,7 +47,7 @@ export default function getDarkModeColorScheme(colorPalette) {
         supportPositive: successGreenDark,
         supportWarning: warningOrangeDark,
         supportVariable: snackBlue,
-        supportTypical: snackBlueNeutralDark,
+        supportTypical: typical,
         supportNegativeNeutral: errorRedNeutralDark,
         supportPositiveNeutral: successGreenNeutralDark,
         supportWarningNeutral: warningOrangeNeutralDark,

package/dist/Types/DsAccessibility.d.ts

@@ -0,0 +1 @@
+export type DS_TYPOGRAPHY_HTML_FONT_SIZE = 16 | 17 | 18;

package/dist/Types/DsAccessibility.js

@@ -0,0 +1 @@
+export {};

package/dist/Types/index.d.ts

@@ -4,3 +4,4 @@ export * from './DsElevation';
 export * from './DsSpacing';
 export * from './DsPalette';
 export * from './DsRadius';
+export * from './DsAccessibility';

package/dist/Types/index.js

@@ -4,3 +4,4 @@ export * from './DsElevation';
 export * from './DsSpacing';
 export * from './DsPalette';
 export * from './DsRadius';
+export * from './DsAccessibility';

package/dist/index.d.ts

@@ -10,3 +10,4 @@ export * from './transitions';
 export * from './utils';
 export * from './x-datepicker';
 export * from './x-charts';
+export * from './Hooks';

package/dist/index.js

@@ -10,3 +10,4 @@ export * from './transitions';
 export * from './utils';
 export * from './x-datepicker';
 export * from './x-charts';
+export * from './Hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",