@sonardigital/carbon-ui 1.1.73 → 1.1.75

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@sonardigital/carbon-ui",
-   "version": "1.1.73",
+   "version": "1.1.75",
    "description": "",
    "main": "src/index.ts",
    "files": [
@@ -61,6 +61,7 @@
       "dayjs": "^1.11.18",
       "eslint-plugin-react": "^7.34.3",
       "eslint-plugin-storybook": "^0.8.0",
+      "framer-motion": "^12.38.0",
       "husky": "^9.1.7",
       "lint-staged": "^16.0.0",
       "react": "^19.1.0",

package/src/components/index.ts

@@ -2,3 +2,4 @@ export * from './atoms';
 export * from './layout';
 export * from './inputs';
 export * from './form';
+export * from './transitions';

package/src/components/layout/accordions/Accordions.tsx

@@ -7,7 +7,7 @@ import {
 } from '@mui/material';
 import { useState } from 'react';
 
-interface AccordionsProps {
+export interface AccordionsProps {
    items: {
       title: string;
       description: string;

package/src/components/layout/scolling-cards/ScrollingCards.tsx

@@ -29,8 +29,8 @@ export function ScrollingCards({
 
    return (
       <Grid container spacing={2}>
-         {items?.map(contact => (
-            <Grid size={{ xs: 12, sm: 4 }}>
+         {items?.map((contact, i) => (
+            <Grid size={{ xs: 12, sm: 4 }} key={i}>
                <Tooltip title={contact.tooltip} sx={{ width: '100%' }}>
                   <ButtonBase
                      sx={{

package/src/components/transitions/TransitionReveal.tsx

@@ -0,0 +1,22 @@
+import { HTMLMotionProps, motion } from 'framer-motion';
+
+interface TransitionRevealProps extends HTMLMotionProps<'div'> {
+   children: React.ReactNode;
+}
+
+export function TransitionReveal({
+   children,
+   ...props
+}: TransitionRevealProps): React.ReactElement {
+   return (
+      <motion.div
+         initial={{ opacity: 0, y: 30 }}
+         whileInView={{ opacity: 1, y: 0 }}
+         viewport={{ once: true, margin: '-150px' }}
+         transition={{ duration: 0.5, ease: 'easeOut' }}
+         {...props}
+      >
+         {children}
+      </motion.div>
+   );
+}

package/src/components/transitions/index.ts

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