@sonardigital/carbon-ui 1.2.15 → 1.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@sonardigital/carbon-ui",
-   "version": "1.2.15",
+   "version": "1.2.18",
    "description": "",
    "main": "src/index.ts",
    "files": [

package/src/components/atoms/bounce/Bounce.tsx

@@ -0,0 +1,55 @@
+import { motion, useReducedMotion, type Transition } from 'framer-motion';
+
+export type BounceProps = React.PropsWithChildren<{
+   className?: string;
+   style?: React.CSSProperties;
+   disabled?: boolean;
+   tapScale?: number;
+   tapY?: number;
+   transition?: Transition;
+}>;
+
+export function Bounce({
+   children,
+   className,
+   style,
+   disabled = false,
+   tapScale = 0.98,
+   tapY = 0,
+   transition,
+}: BounceProps): React.ReactElement {
+   const reducedMotion = useReducedMotion();
+
+   const effectiveDisabled = disabled || reducedMotion;
+   const effectiveTransition: Transition = transition ?? {
+      type: 'spring',
+      stiffness: 520,
+      damping: 22,
+      mass: 0.55,
+   };
+
+   return (
+      <motion.span
+         className={className}
+         style={{
+            display: 'inline-flex',
+            willChange: effectiveDisabled ? undefined : 'transform',
+            transform: effectiveDisabled ? undefined : 'translateZ(0)',
+            backfaceVisibility: 'hidden',
+            transformOrigin: 'center',
+            ...style,
+         }}
+         whileTap={
+            effectiveDisabled
+               ? undefined
+               : {
+                    ...(tapScale != null ? { scale: tapScale } : null),
+                    ...(tapY ? { y: tapY } : null),
+                 }
+         }
+         transition={effectiveTransition}
+      >
+         {children}
+      </motion.span>
+   );
+}

package/src/components/atoms/bounce/index.ts

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

package/src/components/atoms/index.ts

@@ -1,2 +1,4 @@
 export * from './cursor/Cursor';
 export * from './alert/Alert';
+export * from './bounce/Bounce';
+export * from './pulsing-badge/PulsingBadge';

package/src/components/atoms/pulsing-badge/PulsingBadge.tsx

@@ -0,0 +1,106 @@
+import { Box, keyframes, type BoxProps } from '@mui/material';
+
+const pulseRing = keyframes`
+   0% {
+      transform: scale(1);
+      opacity: 0.5;
+   }
+   100% {
+      transform: scale(1.35);
+      opacity: 0;
+   }
+`;
+
+const pulseScale = keyframes`
+   0%, 100% {
+      transform: scale(1);
+   }
+   50% {
+      transform: scale(1.04);
+   }
+`;
+
+export type PulsingBadgeProps = BoxProps & {
+   children: React.ReactNode;
+   showBadge?: boolean;
+   badgePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+   badgeSize?: number;
+   badgeColor?: string;
+   pulseContent?: boolean;
+};
+
+export function PulsingBadge({
+   children,
+   showBadge = true,
+   badgePosition = 'top-right',
+   badgeSize = 10,
+   badgeColor = 'primary.main',
+   pulseContent = false,
+   sx,
+   ...props
+}: PulsingBadgeProps): React.ReactElement {
+   const badgeOffsets =
+      badgePosition === 'top-left'
+         ? { top: -4, left: -4 }
+         : badgePosition === 'bottom-right'
+           ? { bottom: -4, right: -4 }
+           : badgePosition === 'bottom-left'
+             ? { bottom: -4, left: -4 }
+             : { top: -4, right: -4 };
+
+   return (
+      <Box
+         {...props}
+         sx={{
+            position: 'relative',
+            display: 'inline-flex',
+            '& > *': {
+               position: 'relative',
+               zIndex: 1,
+               ...(pulseContent
+                  ? { animation: `${pulseScale} 2s ease-in-out infinite` }
+                  : null),
+            },
+            ...(showBadge
+               ? {
+                    '& .PulsingBadge-badge': {
+                       position: 'absolute',
+                       zIndex: 2,
+                       width: badgeSize,
+                       height: badgeSize,
+                       borderRadius: 999,
+                       backgroundColor: badgeColor,
+                       boxShadow: theme =>
+                          `0 0 0 2px ${theme.palette.background.paper}`,
+                       pointerEvents: 'none',
+                       ...badgeOffsets,
+                       '&::before': {
+                          content: '""',
+                          position: 'absolute',
+                          inset: -6,
+                          borderRadius: 999,
+                          border: '2px solid',
+                          borderColor: badgeColor,
+                          opacity: 0.6,
+                          animation: `${pulseRing} 1.8s ease-out infinite`,
+                       },
+                    },
+                 }
+               : null),
+            '@media (prefers-reduced-motion: reduce)': {
+               '& .PulsingBadge-badge::before': {
+                  animation: 'none',
+                  opacity: 0,
+               },
+               '& > *': { animation: 'none' },
+            },
+            ...sx,
+         }}
+      >
+         {children}
+         {showBadge ? (
+            <Box component="span" className="PulsingBadge-badge" />
+         ) : null}
+      </Box>
+   );
+}

package/src/components/atoms/pulsing-badge/index.ts

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

package/src/theme/constants/components.ts

@@ -1,5 +1,10 @@
 import { Theme } from '@emotion/react';
-import { Components, CssVarsTheme, linearProgressClasses } from '@mui/material';
+import {
+   ButtonProps,
+   Components,
+   CssVarsTheme,
+   linearProgressClasses,
+} from '@mui/material';
 import { palette } from './palette';
 
 const defaultButtonStyle = {
@@ -13,6 +18,27 @@ const defaultButtonStyle = {
 
 const borderRadius = 1;
 
+const generateButtonVariants = (
+   color: Exclude<NonNullable<ButtonProps['color']>, 'inherit'>,
+) => {
+   return {
+      props: {
+         variant: 'contained' as const,
+         color,
+      },
+      style: ({ theme }: any) => ({
+         ...defaultButtonStyle,
+         backgroundColor: theme.palette[color].light,
+         color: theme.palette[color].main,
+         '&:hover': {
+            boxShadow: 0,
+            backgroundColor: theme.palette[color].main,
+            color: 'white',
+         },
+      }),
+   };
+};
+
 export const components: Components<
    Omit<Theme, 'components' | 'palette'> & CssVarsTheme
 > = {
@@ -202,7 +228,15 @@ export const components: Components<
          },
       },
    },
-
+   MuiSkeleton: {
+      defaultProps: {
+         variant: 'rounded',
+         animation: 'wave',
+         sx: {
+            bgcolor: 'grey.100',
+         },
+      },
+   },
    MuiAccordionDetails: {
       defaultProps: {
          sx: {
@@ -290,54 +324,12 @@ export const components: Components<
    },
    MuiButton: {
       variants: [
-         {
-            props: {
-               variant: 'contained',
-               color: 'primary',
-            },
-            style: ({ theme }) => ({
-               ...defaultButtonStyle,
-               backgroundColor: theme.palette.primary.light,
-               color: theme.palette.primary.main,
-               '&:hover': {
-                  boxShadow: 0,
-                  backgroundColor: theme.palette.primary.main,
-                  color: 'white',
-               },
-            }),
-         },
-         {
-            props: {
-               variant: 'contained',
-               color: 'secondary',
-            },
-            style: ({ theme }) => ({
-               ...defaultButtonStyle,
-               backgroundColor: theme.palette.secondary.light,
-               color: theme.palette.secondary.main,
-               '&:hover': {
-                  boxShadow: 0,
-                  backgroundColor: theme.palette.secondary.main,
-                  color: 'white',
-               },
-            }),
-         },
-         {
-            props: {
-               variant: 'contained',
-               color: 'info',
-            },
-            style: ({ theme }) => ({
-               ...defaultButtonStyle,
-               paddingTop: 10,
-               backgroundColor: theme.palette.info.light,
-               color: theme.palette.info.main,
-               '&:hover': {
-                  backgroundColor: theme.palette.info.main,
-                  color: 'white',
-               },
-            }),
-         },
+         generateButtonVariants('primary'),
+         generateButtonVariants('secondary'),
+         generateButtonVariants('info'),
+         generateButtonVariants('error'),
+         generateButtonVariants('success'),
+         generateButtonVariants('warning'),
          {
             props: {
                variant: 'text',