@sonardigital/carbon-ui 1.2.17 → 1.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@sonardigital/carbon-ui",
-   "version": "1.2.17",
+   "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';