@sonardigital/carbon-ui 1.2.17 → 1.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@sonardigital/carbon-ui",
-   "version": "1.2.17",
+   "version": "1.2.19",
    "description": "",
    "main": "src/index.ts",
    "files": [
@@ -52,6 +52,7 @@
       ]
    },
    "dependencies": {
+      "@base-ui/react": "^1.6.0",
       "@emotion/react": "^11.14.0",
       "@emotion/styled": "^11.14.1",
       "@mui/icons-material": "^7.3.2",

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/components/form/fields/FormNumber.tsx

@@ -0,0 +1,33 @@
+import { Stack } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import { FormLabel } from '../layout';
+import { FormError } from '../layout/FormError';
+import { NumberProps } from '../../inputs';
+import { Number } from '../../inputs/Number';
+
+interface FormNumberProps extends NumberProps {
+   name: string;
+   label: string;
+}
+
+export function FormNumber({
+   name,
+   label,
+   ...props
+}: FormNumberProps): React.ReactElement {
+   return (
+      <Controller
+         name={name}
+         render={({ field, fieldState }) => (
+            <FormLabel label={label}>
+               <Stack gap={0.8}>
+                  <Number {...field} {...props} />
+                  {fieldState.error && (
+                     <FormError label={fieldState.error?.message ?? ''} />
+                  )}
+               </Stack>
+            </FormLabel>
+         )}
+      />
+   );
+}

package/src/components/form/fields/index.ts

@@ -8,3 +8,4 @@ export * from './form-list/FormList';
 export * from './FormDatePicker';
 export * from './FormBox';
 export * from './FormBoxes';
+export * from './FormNumber';

package/src/components/inputs/Number.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { TextField } from '@mui/material';
+
+/**
+ * This component is a placeholder for FormControl to correctly set the shrink label state on SSR.
+ */
+function SSRInitialFilled(_: BaseNumberField.Root.Props) {
+   return null;
+}
+SSRInitialFilled.muiName = 'Input';
+
+export interface NumberProps extends Omit<
+   BaseNumberField.Root.Props,
+   'render' | 'label' | 'size'
+> {
+   error?: boolean;
+}
+
+export function Number({
+   id: idProp,
+   error,
+   ...other
+}: BaseNumberField.Root.Props & {
+   label?: React.ReactNode;
+   error?: boolean;
+}) {
+   const size = 'medium';
+
+   let id = React.useId();
+   if (idProp) {
+      id = idProp;
+   }
+   return (
+      <BaseNumberField.Root {...other}>
+         <SSRInitialFilled {...other} />
+         <BaseNumberField.Input
+            id={id}
+            render={(props, state) => (
+               <TextField
+                  aria-describedby={`${id}-helper-text`}
+                  inputRef={props.ref}
+                  value={state.inputValue}
+                  onBlur={props.onBlur}
+                  onChange={props.onChange}
+                  onKeyUp={props.onKeyUp}
+                  onKeyDown={props.onKeyDown}
+                  onFocus={props.onFocus}
+                  InputProps={{
+                     inputProps: {
+                        sx: {
+                           height: 19,
+                           fontWeight: 400,
+                        },
+                     },
+                     endAdornment: (
+                        <InputAdornment
+                           position="end"
+                           sx={{
+                              flexDirection: 'column',
+                              maxHeight: 'unset',
+                              alignSelf: 'stretch',
+                              borderLeft: '1px solid',
+                              borderColor: 'divider',
+                              '& button': {
+                                 py: 0,
+                                 flex: 1,
+                                 borderRadius: 0.5,
+                              },
+                           }}
+                        >
+                           <BaseNumberField.Increment
+                              render={<IconButton aria-label="Increase" />}
+                           >
+                              <KeyboardArrowUpIcon
+                                 fontSize={size}
+                                 sx={{ transform: 'translateY(2px)' }}
+                              />
+                           </BaseNumberField.Increment>
+
+                           <BaseNumberField.Decrement
+                              render={<IconButton aria-label="Decrease" />}
+                           >
+                              <KeyboardArrowDownIcon
+                                 fontSize={size}
+                                 sx={{ transform: 'translateY(-2px)' }}
+                              />
+                           </BaseNumberField.Decrement>
+                        </InputAdornment>
+                     ),
+                  }}
+                  sx={{ width: '100%' }}
+               />
+            )}
+         />
+      </BaseNumberField.Root>
+   );
+}

package/src/components/inputs/index.ts

@@ -1,2 +1,3 @@
 export * from './SelectAutocomplete';
 export * from './MultiselectAutocomplete';
+export * from './Number';