app-studio 0.4.7 → 0.5.1

package/dist/app-studio.cjs.development.js

@@ -578,7 +578,7 @@ const toKebabCase = str => str.replace(/([A-Z])/g, match => '-' + match.toLowerC
 //   return !excludedKeys.has(prop);
 // };
 //const cssExtraProps: Array<keyof CSSProperties> = [
-const cssExtraProps = ['textJustify', 'lineClamp', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomWidth', 'borderLeftWidth', 'borderRadius', 'borderRightWidth', 'borderSpacing', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopWidth', 'borderWidth', 'bottom', 'columnGap', 'columnRuleWidth', 'columnWidth', 'fontSize', 'gap', 'height', 'left', 'letterSpacing', 'lineHeight', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'outlineOffset', 'outlineWidth', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'perspective', 'right', 'rowGap', 'textIndent', 'top', 'width'];
+const cssExtraProps = ['textJustify', 'lineClamp', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomWidth', 'borderLeftWidth', 'borderRadius', 'borderRightWidth', 'borderSpacing', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopWidth', 'borderWidth', 'bottom', 'columnGap', 'columnRuleWidth', 'columnWidth', 'fontSize', 'gap', 'height', 'left', 'letterSpacing', 'lineHeight', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'outlineOffset', 'outlineWidth', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'perspective', 'right', 'rowGap', 'textIndent', 'top', 'width', 'animation'];
 // Create a set of all valid CSS properties
 const StyleProps = [... /*#__PURE__*/Object.keys( /*#__PURE__*/document.createElement('div').style), ...cssExtraProps];
 // Create a set of all valid CSS properties
@@ -779,7 +779,7 @@ class UtilityClassManager {
   addToCache(key, className) {
     if (this.classCache.size >= this.maxCacheSize) {
       const firstKey = this.classCache.keys().next().value;
-      this.classCache.delete(firstKey);
+      if (firstKey) this.classCache.delete(firstKey);
     }
     this.classCache.set(key, className);
   }
@@ -818,10 +818,10 @@ class UtilityClassManager {
         processedValue = `${processedValue}px`;
       }
     }
-    let formatedValue = processedValue.toString().split(' ').join('-');
-    let key = `${property}:${formatedValue}`;
-    if (modifier) {
-      key = `${property}:${formatedValue}|${modifier}`;
+    let formattedValue = processedValue.toString().split(' ').join('-');
+    let key = `${property}:${formattedValue}`;
+    if (modifier && context !== 'base') {
+      key = `${property}:${formattedValue}|${context}:${modifier}`;
     }
     if (this.classCache.has(key)) {
       return [this.classCache.get(key)];
@@ -833,7 +833,7 @@ class UtilityClassManager {
     }
     // console.log({ shorthand, property, processedValue });
     // Normaliser la valeur pour le nom de classe
-    let normalizedValue = formatedValue.toString().replace(/\./g, 'p') // Replace dots with 'p'
+    let normalizedValue = formattedValue.toString().replace(/\./g, 'p') // Replace dots with 'p'
     .replace(/\s+/g, '-') // Replace spaces with '-'
     .replace(/[^a-zA-Z0-9\-]/g, '') // Remove other special characters
     .replace(/%/g, 'pct') // Replace % with 'pct'
@@ -843,7 +843,7 @@ class UtilityClassManager {
     .replace(/rem/g, 'rem'); // Keep 'rem' as is
     let baseClassName = `${shorthand}-${normalizedValue}`;
     // Préfixer les noms de classe pour les pseudo-classes et media queries
-    let classNames = [];
+    let classNames = [baseClassName]; // Utiliser le nom de classe de base
     if (context === 'pseudo' && modifier) {
       // Pseudo-class : ajouter '-modifier' suffix
       const pseudoClassName = `${baseClassName}-${modifier}`;
@@ -875,8 +875,8 @@ class UtilityClassManager {
           cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
           break;
         case 'pseudo':
-          // Appliquer la pseudo-classe directement à la classe principale
-          cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
+          // Appliquer le pseudo-sélecteur au sélecteur de classe
+          cssRules.push(`.${escapedClassName}:${modifier} { ${cssProperty}: ${valueForCss}; }`);
           break;
         case 'media':
           // Les media queries sont gérées séparément
@@ -1004,22 +1004,40 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
   }
   // Gestion des animations
   if (props.animate) {
-    const animation = props.animate;
-    const {
-      keyframesName,
-      keyframes
-    } = generateKeyframes(animation);
-    if (keyframes && typeof document !== 'undefined') {
-      utilityClassManager.injectRule(keyframes);
-    }
-    computedStyles.animationName = keyframesName;
-    if (animation.duration) computedStyles.animationDuration = animation.duration;
-    if (animation.timingFunction) computedStyles.animationTimingFunction = animation.timingFunction;
-    if (animation.delay) computedStyles.animationDelay = animation.delay;
-    if (animation.iterationCount !== undefined) computedStyles.animationIterationCount = `${animation.iterationCount}`;
-    if (animation.direction) computedStyles.animationDirection = animation.direction;
-    if (animation.fillMode) computedStyles.animationFillMode = animation.fillMode;
-    if (animation.playState) computedStyles.animationPlayState = animation.playState;
+    const animations = Array.isArray(props.animate) ? props.animate : [props.animate];
+    const animationNames = [];
+    const animationDurations = [];
+    const animationTimingFunctions = [];
+    const animationDelays = [];
+    const animationIterationCounts = [];
+    const animationDirections = [];
+    const animationFillModes = [];
+    const animationPlayStates = [];
+    animations.forEach(animation => {
+      const {
+        keyframesName,
+        keyframes
+      } = generateKeyframes(animation);
+      if (keyframes && typeof document !== 'undefined') {
+        utilityClassManager.injectRule(keyframes);
+      }
+      animationNames.push(keyframesName);
+      animationDurations.push(animation.duration || '0s');
+      animationTimingFunctions.push(animation.timingFunction || 'ease');
+      animationDelays.push(animation.delay || '0s');
+      animationIterationCounts.push(animation.iterationCount !== undefined ? `${animation.iterationCount}` : '1');
+      animationDirections.push(animation.direction || 'normal');
+      animationFillModes.push(animation.fillMode || 'none');
+      animationPlayStates.push(animation.playState || 'running');
+    });
+    computedStyles.animationName = animationNames.join(', ');
+    computedStyles.animationDuration = animationDurations.join(', ');
+    computedStyles.animationTimingFunction = animationTimingFunctions.join(', ');
+    computedStyles.animationDelay = animationDelays.join(', ');
+    computedStyles.animationIterationCount = animationIterationCounts.join(', ');
+    computedStyles.animationDirection = animationDirections.join(', ');
+    computedStyles.animationFillMode = animationFillModes.join(', ');
+    computedStyles.animationPlayState = animationPlayStates.join(', ');
   }
   /**
    * Génère des classes utilitaires pour un ensemble de styles.
@@ -1070,24 +1088,58 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
           Object.keys(value).forEach(event => {
             const eventStyles = value[event];
             // Séparer les propriétés de transition et les autres propriétés
-            const transitionStyles = {};
-            const nonTransitionStyles = {};
-            Object.keys(eventStyles).forEach(prop => {
-              if (prop === 'transition') {
-                transitionStyles[prop] = eventStyles[prop];
-              } else {
-                nonTransitionStyles[prop] = eventStyles[prop];
-              }
-            });
-            // Appliquer les transitions aux styles de base
-            if (Object.keys(transitionStyles).length > 0) {
-              generateUtilityClasses(transitionStyles, 'base');
+            // Extraire 'animate' des styles d'événement
+            const {
+              animate,
+              ...otherEventStyles
+            } = eventStyles;
+            // Gestion des animations dans les événements
+            if (animate) {
+              const animations = Array.isArray(animate) ? animate : [animate];
+              const animationNames = [];
+              const animationDurations = [];
+              const animationTimingFunctions = [];
+              const animationDelays = [];
+              const animationIterationCounts = [];
+              const animationDirections = [];
+              const animationFillModes = [];
+              const animationPlayStates = [];
+              animations.forEach(animation => {
+                const {
+                  keyframesName,
+                  keyframes
+                } = generateKeyframes(animation);
+                if (keyframes && typeof document !== 'undefined') {
+                  utilityClassManager.injectRule(keyframes);
+                }
+                animationNames.push(keyframesName);
+                animationDurations.push(animation.duration || '0s');
+                animationTimingFunctions.push(animation.timingFunction || 'ease');
+                animationDelays.push(animation.delay || '0s');
+                animationIterationCounts.push(animation.iterationCount !== undefined ? `${animation.iterationCount}` : '1');
+                animationDirections.push(animation.direction || 'normal');
+                animationFillModes.push(animation.fillMode || 'none');
+                animationPlayStates.push(animation.playState || 'running');
+              });
+              // Créer un objet avec les propriétés d'animation
+              const animationStyles = {
+                animationName: animationNames.join(', '),
+                animationDuration: animationDurations.join(', '),
+                animationTimingFunction: animationTimingFunctions.join(', '),
+                animationDelay: animationDelays.join(', '),
+                animationIterationCount: animationIterationCounts.join(', '),
+                animationDirection: animationDirections.join(', '),
+                animationFillMode: animationFillModes.join(', '),
+                animationPlayState: animationPlayStates.join(', ')
+              };
+              // Fusionner les styles d'animation avec les autres styles de l'événement
+              Object.assign(otherEventStyles, animationStyles);
             }
             // Générer les classes pour les pseudo-classes
-            if (Object.keys(nonTransitionStyles).length > 0) {
+            if (Object.keys(otherEventStyles).length > 0) {
               const pseudo = mapEventToPseudo(event);
               if (pseudo) {
-                generateUtilityClasses(nonTransitionStyles, 'pseudo', pseudo);
+                generateUtilityClasses(otherEventStyles, 'pseudo', pseudo);
               }
             }
           });
@@ -1182,7 +1234,9 @@ const Image = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__defa
 })));
 
 const Text = /*#__PURE__*/React__default.memo(props => {
-  return /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props));
+  return /*#__PURE__*/React__default.createElement(Element, Object.assign({
+    as: "span"
+  }, props));
 });
 
 // Utilisation de React.memo pour une meilleure performance
@@ -1197,124 +1251,108 @@ const Button = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__def
 })));
 
 // animations.ts
-const fadeIn = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease';
-  }
+const fadeIn = _ref => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease'
+  } = _ref;
   return {
     from: {
       opacity: 0
     },
-    enter: {
+    to: {
       opacity: 1
     },
     duration,
     timingFunction
   };
 };
-const fadeOut = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease';
-  }
+const fadeOut = _ref2 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease'
+  } = _ref2;
   return {
     from: {
       opacity: 1
     },
-    enter: {
+    to: {
       opacity: 0
     },
     duration,
     timingFunction
   };
 };
-const slideInLeft = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '0.5s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const slideInLeft = _ref3 => {
+  let {
+    duration = '0.5s',
+    timingFunction = 'ease-out'
+  } = _ref3;
   return {
     from: {
       transform: 'translateX(-100%)'
     },
-    enter: {
+    to: {
       transform: 'translateX(0)'
     },
     duration,
     timingFunction
   };
 };
-const slideInRight = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '0.5s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const slideInRight = _ref4 => {
+  let {
+    duration = '0.5s',
+    timingFunction = 'ease-out'
+  } = _ref4;
   return {
     from: {
       transform: 'translateX(100%)'
     },
-    enter: {
+    to: {
       transform: 'translateX(0)'
     },
     duration,
     timingFunction
   };
 };
-const slideInDown = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '0.5s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const slideInDown = _ref5 => {
+  let {
+    duration = '0.5s',
+    timingFunction = 'ease-out'
+  } = _ref5;
   return {
     from: {
       transform: 'translateY(-100%)'
     },
-    enter: {
+    to: {
       transform: 'translateY(0)'
     },
     duration,
     timingFunction
   };
 };
-const slideInUp = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '0.5s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const slideInUp = _ref6 => {
+  let {
+    duration = '0.5s',
+    timingFunction = 'ease-out'
+  } = _ref6;
   return {
     from: {
       transform: 'translateY(100%)'
     },
-    enter: {
+    to: {
       transform: 'translateY(0)'
     },
     duration,
     timingFunction
   };
 };
-const bounce = function (duration, timingFunction, iterationCount) {
-  if (duration === void 0) {
-    duration = '2s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const bounce = _ref7 => {
+  let {
+    duration = '2s',
+    timingFunction = 'ease',
+    iterationCount = 'infinite'
+  } = _ref7;
   return {
     from: {
       transform: 'translateY(0)'
@@ -1331,7 +1369,7 @@ const bounce = function (duration, timingFunction, iterationCount) {
     '80%': {
       transform: 'translateY(0)'
     },
-    enter: {
+    to: {
       transform: 'translateY(0)'
     },
     duration,
@@ -1339,21 +1377,17 @@ const bounce = function (duration, timingFunction, iterationCount) {
     iterationCount
   };
 };
-const rotate = function (duration, timingFunction, iterationCount) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'linear';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const rotate = _ref8 => {
+  let {
+    duration = '1s',
+    timingFunction = 'linear',
+    iterationCount = 'infinite'
+  } = _ref8;
   return {
     from: {
       transform: 'rotate(0deg)'
     },
-    enter: {
+    to: {
       transform: 'rotate(360deg)'
     },
     duration,
@@ -1361,16 +1395,12 @@ const rotate = function (duration, timingFunction, iterationCount) {
     iterationCount
   };
 };
-const pulse = function (duration, timingFunction, iterationCount) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in-out';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const pulse = _ref9 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-in-out',
+    iterationCount = 'infinite'
+  } = _ref9;
   return {
     from: {
       transform: 'scale(1)'
@@ -1378,7 +1408,7 @@ const pulse = function (duration, timingFunction, iterationCount) {
     '50%': {
       transform: 'scale(1.05)'
     },
-    enter: {
+    to: {
       transform: 'scale(1)'
     },
     duration,
@@ -1386,49 +1416,43 @@ const pulse = function (duration, timingFunction, iterationCount) {
     iterationCount
   };
 };
-const zoomIn = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '0.5s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const zoomIn = _ref10 => {
+  let {
+    duration = '0.5s',
+    timingFunction = 'ease-out'
+  } = _ref10;
   return {
     from: {
       transform: 'scale(0)'
     },
-    enter: {
+    to: {
       transform: 'scale(1)'
     },
     duration,
     timingFunction
   };
 };
-const zoomOut = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '0.5s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const zoomOut = _ref11 => {
+  let {
+    duration = '0.5s',
+    timingFunction = 'ease-out'
+  } = _ref11;
   return {
     from: {
       transform: 'scale(1)'
     },
-    enter: {
+    to: {
       transform: 'scale(0)'
     },
     duration,
     timingFunction
   };
 };
-const flash = function (duration, iterationCount) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const flash = _ref12 => {
+  let {
+    duration = '1s',
+    iterationCount = 'infinite'
+  } = _ref12;
   return {
     from: {
       opacity: 1
@@ -1436,20 +1460,18 @@ const flash = function (duration, iterationCount) {
     '50%': {
       opacity: 0
     },
-    enter: {
+    to: {
       opacity: 1
     },
     duration,
     iterationCount
   };
 };
-const shake = function (duration, iterationCount) {
-  if (duration === void 0) {
-    duration = '0.5s';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const shake = _ref13 => {
+  let {
+    duration = '0.5s',
+    iterationCount = 'infinite'
+  } = _ref13;
   return {
     from: {
       transform: 'translateX(0)'
@@ -1481,20 +1503,18 @@ const shake = function (duration, iterationCount) {
     '90%': {
       transform: 'translateX(-10px)'
     },
-    enter: {
+    to: {
       transform: 'translateX(0)'
     },
     duration,
     iterationCount
   };
 };
-const swing = function (duration, iterationCount) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const swing = _ref14 => {
+  let {
+    duration = '1s',
+    iterationCount = 'infinite'
+  } = _ref14;
   return {
     from: {
       transform: 'rotate(0deg)'
@@ -1511,20 +1531,18 @@ const swing = function (duration, iterationCount) {
     '80%': {
       transform: 'rotate(-5deg)'
     },
-    enter: {
+    to: {
       transform: 'rotate(0deg)'
     },
     duration,
     iterationCount
   };
 };
-const rubberBand = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in-out';
-  }
+const rubberBand = _ref15 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-in-out'
+  } = _ref15;
   return {
     from: {
       transform: 'scale3d(1, 1, 1)'
@@ -1544,17 +1562,17 @@ const rubberBand = function (duration, timingFunction) {
     '75%': {
       transform: 'scale3d(1.05, 0.95, 1)'
     },
-    enter: {
+    to: {
       transform: 'scale3d(1, 1, 1)'
     },
     duration,
     timingFunction
   };
 };
-const wobble = function (duration) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
+const wobble = _ref16 => {
+  let {
+    duration = '1s'
+  } = _ref16;
   return {
     from: {
       transform: 'translateX(0%)'
@@ -1574,16 +1592,16 @@ const wobble = function (duration) {
     '75%': {
       transform: 'translateX(-5%) rotate(-1deg)'
     },
-    enter: {
+    to: {
       transform: 'translateX(0%)'
     },
     duration
   };
 };
-const flip = function (duration) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
+const flip = _ref17 => {
+  let {
+    duration = '1s'
+  } = _ref17;
   return {
     from: {
       transform: 'perspective(400px) rotateY(0deg)'
@@ -1591,19 +1609,17 @@ const flip = function (duration) {
     '40%': {
       transform: 'perspective(400px) rotateY(-180deg)'
     },
-    enter: {
+    to: {
       transform: 'perspective(400px) rotateY(-360deg)'
     },
     duration
   };
 };
-const heartBeat = function (duration, iterationCount) {
-  if (duration === void 0) {
-    duration = '1.3s';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const heartBeat = _ref18 => {
+  let {
+    duration = '1.3s',
+    iterationCount = 'infinite'
+  } = _ref18;
   return {
     from: {
       transform: 'scale(1)'
@@ -1620,52 +1636,50 @@ const heartBeat = function (duration, iterationCount) {
     '70%': {
       transform: 'scale(1)'
     },
-    enter: {
+    to: {
       transform: 'scale(1)'
     },
     duration,
     iterationCount
   };
 };
-const rollIn = function (duration) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
+const rollIn = _ref19 => {
+  let {
+    duration = '1s'
+  } = _ref19;
   return {
     from: {
       opacity: 0,
       transform: 'translateX(-100%) rotate(-120deg)'
     },
-    enter: {
+    to: {
       opacity: 1,
       transform: 'translateX(0px) rotate(0deg)'
     },
     duration
   };
 };
-const rollOut = function (duration) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
+const rollOut = _ref20 => {
+  let {
+    duration = '1s'
+  } = _ref20;
   return {
     from: {
       opacity: 1,
       transform: 'translateX(0px) rotate(0deg)'
     },
-    enter: {
+    to: {
       opacity: 0,
       transform: 'translateX(100%) rotate(120deg)'
     },
     duration
   };
 };
-const lightSpeedIn = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const lightSpeedIn = _ref21 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-out'
+  } = _ref21;
   return {
     from: {
       transform: 'translateX(100%) skewX(-30deg)',
@@ -1678,7 +1692,7 @@ const lightSpeedIn = function (duration, timingFunction) {
     '80%': {
       transform: 'skewX(-5deg)'
     },
-    enter: {
+    to: {
       transform: 'translateX(0)',
       opacity: 1
     },
@@ -1686,13 +1700,11 @@ const lightSpeedIn = function (duration, timingFunction) {
     timingFunction
   };
 };
-const lightSpeedOut = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in';
-  }
+const lightSpeedOut = _ref22 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-in'
+  } = _ref22;
   return {
     from: {
       opacity: 1
@@ -1701,7 +1713,7 @@ const lightSpeedOut = function (duration, timingFunction) {
       opacity: 1,
       transform: 'translateX(-20%) skewX(20deg)'
     },
-    enter: {
+    to: {
       opacity: 0,
       transform: 'translateX(-100%) skewX(30deg)'
     },
@@ -1709,13 +1721,11 @@ const lightSpeedOut = function (duration, timingFunction) {
     timingFunction
   };
 };
-const hinge = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '2s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in-out';
-  }
+const hinge = _ref23 => {
+  let {
+    duration = '2s',
+    timingFunction = 'ease-in-out'
+  } = _ref23;
   return {
     from: {
       transform: 'rotate(0deg)',
@@ -1738,7 +1748,7 @@ const hinge = function (duration, timingFunction) {
       transform: 'rotate(60deg)',
       opacity: 1
     },
-    enter: {
+    to: {
       transform: 'translateY(700px)',
       opacity: 0
     },
@@ -1746,13 +1756,11 @@ const hinge = function (duration, timingFunction) {
     timingFunction
   };
 };
-const jackInTheBox = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease';
-  }
+const jackInTheBox = _ref24 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease'
+  } = _ref24;
   return {
     from: {
       opacity: 0,
@@ -1765,7 +1773,7 @@ const jackInTheBox = function (duration, timingFunction) {
     '70%': {
       transform: 'rotate(3deg)'
     },
-    enter: {
+    to: {
       opacity: 1,
       transform: 'scale(1) rotate(0deg)'
     },
@@ -1773,13 +1781,11 @@ const jackInTheBox = function (duration, timingFunction) {
     timingFunction
   };
 };
-const flipInX = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in';
-  }
+const flipInX = _ref25 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-in'
+  } = _ref25;
   return {
     from: {
       transform: 'perspective(400px) rotateX(90deg)',
@@ -1789,20 +1795,18 @@ const flipInX = function (duration, timingFunction) {
       transform: 'perspective(400px) rotateX(-10deg)',
       opacity: 1
     },
-    enter: {
+    to: {
       transform: 'perspective(400px) rotateX(0deg)'
     },
     duration,
     timingFunction
   };
 };
-const flipInY = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in';
-  }
+const flipInY = _ref26 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-in'
+  } = _ref26;
   return {
     from: {
       transform: 'perspective(400px) rotateY(90deg)',
@@ -1812,20 +1816,18 @@ const flipInY = function (duration, timingFunction) {
       transform: 'perspective(400px) rotateY(-10deg)',
       opacity: 1
     },
-    enter: {
+    to: {
       transform: 'perspective(400px) rotateY(0deg)'
     },
     duration,
     timingFunction
   };
 };
-const headShake = function (duration, iterationCount) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const headShake = _ref27 => {
+  let {
+    duration = '1s',
+    iterationCount = 'infinite'
+  } = _ref27;
   return {
     from: {
       transform: 'translateX(0)'
@@ -1849,13 +1851,11 @@ const headShake = function (duration, iterationCount) {
     iterationCount
   };
 };
-const tada = function (duration, iterationCount) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const tada = _ref28 => {
+  let {
+    duration = '1s',
+    iterationCount = 'infinite'
+  } = _ref28;
   return {
     from: {
       transform: 'scale3d(1, 1, 1)',
@@ -1870,7 +1870,7 @@ const tada = function (duration, iterationCount) {
     '40%, 60%, 80%': {
       transform: 'scale3d(1.1, 1.1, 1.1) rotate(-3deg)'
     },
-    enter: {
+    to: {
       transform: 'scale3d(1, 1, 1)',
       opacity: 1
     },
@@ -1878,13 +1878,11 @@ const tada = function (duration, iterationCount) {
     iterationCount
   };
 };
-const jello = function (duration, iterationCount) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const jello = _ref29 => {
+  let {
+    duration = '1s',
+    iterationCount = 'infinite'
+  } = _ref29;
   return {
     from: {
       transform: 'none'
@@ -1913,26 +1911,24 @@ const jello = function (duration, iterationCount) {
     '88.8%': {
       transform: 'skewX(0.09765625deg) skewY(0.09765625deg)'
     },
-    enter: {
+    to: {
       transform: 'none'
     },
     duration,
     iterationCount
   };
 };
-const fadeInDown = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const fadeInDown = _ref30 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-out'
+  } = _ref30;
   return {
     from: {
       opacity: 0,
       transform: 'translateY(-100%)'
     },
-    enter: {
+    to: {
       opacity: 1,
       transform: 'translateY(0)'
     },
@@ -1940,19 +1936,17 @@ const fadeInDown = function (duration, timingFunction) {
     timingFunction
   };
 };
-const fadeInUp = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const fadeInUp = _ref31 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-out'
+  } = _ref31;
   return {
     from: {
       opacity: 0,
       transform: 'translateY(100%)'
     },
-    enter: {
+    to: {
       opacity: 1,
       transform: 'translateY(0)'
     },
@@ -1960,13 +1954,11 @@ const fadeInUp = function (duration, timingFunction) {
     timingFunction
   };
 };
-const bounceIn = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '0.75s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in';
-  }
+const bounceIn = _ref32 => {
+  let {
+    duration = '0.75s',
+    timingFunction = 'ease-in'
+  } = _ref32;
   return {
     from: {
       opacity: 0,
@@ -1979,20 +1971,18 @@ const bounceIn = function (duration, timingFunction) {
     '70%': {
       transform: 'scale(0.9)'
     },
-    enter: {
+    to: {
       transform: 'scale(1)'
     },
     duration,
     timingFunction
   };
 };
-const bounceOut = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '0.75s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const bounceOut = _ref33 => {
+  let {
+    duration = '0.75s',
+    timingFunction = 'ease-out'
+  } = _ref33;
   return {
     from: {
       transform: 'scale(1)'
@@ -2004,7 +1994,7 @@ const bounceOut = function (duration, timingFunction) {
       opacity: 1,
       transform: 'scale(1.1)'
     },
-    enter: {
+    to: {
       opacity: 0,
       transform: 'scale(0.3)'
     },
@@ -2012,49 +2002,43 @@ const bounceOut = function (duration, timingFunction) {
     timingFunction
   };
 };
-const slideOutLeft = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '0.5s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in';
-  }
+const slideOutLeft = _ref34 => {
+  let {
+    duration = '0.5s',
+    timingFunction = 'ease-in'
+  } = _ref34;
   return {
     from: {
       transform: 'translateX(0)'
     },
-    enter: {
+    to: {
       transform: 'translateX(-100%)'
     },
     duration,
     timingFunction
   };
 };
-const slideOutRight = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '0.5s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in';
-  }
+const slideOutRight = _ref35 => {
+  let {
+    duration = '0.5s',
+    timingFunction = 'ease-in'
+  } = _ref35;
   return {
     from: {
       transform: 'translateX(0)'
     },
-    enter: {
+    to: {
       transform: 'translateX(100%)'
     },
     duration,
     timingFunction
   };
 };
-const zoomInDown = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-out';
-  }
+const zoomInDown = _ref36 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-out'
+  } = _ref36;
   return {
     from: {
       opacity: 0,
@@ -2064,20 +2048,18 @@ const zoomInDown = function (duration, timingFunction) {
       opacity: 1,
       transform: 'scale(0.475) translateY(60px)'
     },
-    enter: {
+    to: {
       transform: 'scale(1) translateY(0)'
     },
     duration,
     timingFunction
   };
 };
-const zoomOutUp = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in';
-  }
+const zoomOutUp = _ref37 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-in'
+  } = _ref37;
   return {
     from: {
       opacity: 1,
@@ -2087,7 +2069,7 @@ const zoomOutUp = function (duration, timingFunction) {
       opacity: 1,
       transform: 'scale(0.475) translateY(-60px)'
     },
-    enter: {
+    to: {
       opacity: 0,
       transform: 'scale(0.1) translateY(-1000px)'
     },
@@ -2095,19 +2077,17 @@ const zoomOutUp = function (duration, timingFunction) {
     timingFunction
   };
 };
-const backInDown = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in';
-  }
+const backInDown = _ref38 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-in'
+  } = _ref38;
   return {
     from: {
       opacity: 0.7,
       transform: 'translateY(-2000px) scaleY(2.5) scaleX(0.2)'
     },
-    enter: {
+    to: {
       opacity: 1,
       transform: 'translateY(0) scaleY(1) scaleX(1)'
     },
@@ -2115,13 +2095,11 @@ const backInDown = function (duration, timingFunction) {
     timingFunction
   };
 };
-const backOutUp = function (duration, timingFunction) {
-  if (duration === void 0) {
-    duration = '1s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'ease-in';
-  }
+const backOutUp = _ref39 => {
+  let {
+    duration = '1s',
+    timingFunction = 'ease-in'
+  } = _ref39;
   return {
     from: {
       opacity: 1,
@@ -2131,7 +2109,7 @@ const backOutUp = function (duration, timingFunction) {
       opacity: 0.7,
       transform: 'translateY(-20px)'
     },
-    enter: {
+    to: {
       opacity: 0,
       transform: 'translateY(-2000px)'
     },
@@ -2139,16 +2117,12 @@ const backOutUp = function (duration, timingFunction) {
     timingFunction
   };
 };
-const shimmer = function (duration, timingFunction, iterationCount) {
-  if (duration === void 0) {
-    duration = '2s';
-  }
-  if (timingFunction === void 0) {
-    timingFunction = 'linear';
-  }
-  if (iterationCount === void 0) {
-    iterationCount = 'infinite';
-  }
+const shimmer = _ref40 => {
+  let {
+    duration = '2s',
+    timingFunction = 'linear',
+    iterationCount = 'infinite'
+  } = _ref40;
   return {
     from: {
       transform: 'translateX(-100%)'
@@ -2156,7 +2130,7 @@ const shimmer = function (duration, timingFunction, iterationCount) {
     '50%': {
       transform: 'translateX(100%)'
     },
-    enter: {
+    to: {
       transform: 'translateX(100%)'
     },
     duration,
@@ -2164,6 +2138,74 @@ const shimmer = function (duration, timingFunction, iterationCount) {
     iterationCount
   };
 };
+const progress = _ref41 => {
+  let {
+    duration = '2s',
+    timingFunction = 'linear',
+    direction = 'forwards',
+    prop = 'width',
+    from = '0%',
+    to = '100%'
+  } = _ref41;
+  return {
+    from: {
+      [prop]: from
+    },
+    to: {
+      [prop]: to
+    },
+    duration,
+    timingFunction,
+    direction
+  };
+};
+const typewriter = _ref42 => {
+  let {
+    duration = '10s',
+    steps = 10,
+    iterationCount = '1',
+    width = 0
+  } = _ref42;
+  return {
+    from: {
+      width: '0px'
+    },
+    to: {
+      width: `${width}px`
+    },
+    timingFunction: `steps(${steps})`,
+    duration,
+    iterationCount
+  };
+};
+const blinkCursor = _ref43 => {
+  let {
+    duration = '0.75s',
+    timingFunction = 'step-end',
+    iterationCount = 'infinite',
+    color = 'black'
+  } = _ref43;
+  return {
+    from: {
+      color: color
+    },
+    to: {
+      color: color
+    },
+    '0%': {
+      color: color
+    },
+    '50%': {
+      color: 'transparent'
+    },
+    '100%': {
+      color: color
+    },
+    duration,
+    timingFunction,
+    iterationCount
+  };
+};
 
 var Animation = {
   __proto__: null,
@@ -2206,7 +2248,10 @@ var Animation = {
   zoomOutUp: zoomOutUp,
   backInDown: backInDown,
   backOutUp: backOutUp,
-  shimmer: shimmer
+  shimmer: shimmer,
+  progress: progress,
+  typewriter: typewriter,
+  blinkCursor: blinkCursor
 };
 
 const Skeleton = /*#__PURE__*/React__default.memo(_ref => {
@@ -2225,11 +2270,129 @@ const Skeleton = /*#__PURE__*/React__default.memo(_ref => {
     inset: 0,
     width: '100%',
     height: '100%',
-    animate: shimmer(duration, timingFunction, iterationCount),
+    animate: shimmer({
+      duration,
+      timingFunction,
+      iterationCount
+    }),
     background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent)"
   }));
 });
 
+const Typewriter = _ref => {
+  let {
+    text,
+    duration = '10s',
+    cursorDuration = '0.75s',
+    cursorTimingFunction = 'step-end',
+    color = 'black',
+    cursor = true,
+    fontSize = 18,
+    width = 100,
+    ...props
+  } = _ref;
+  const [visibleLines, setVisibleLines] = React.useState([]);
+  const [isComplete, setIsComplete] = React.useState(false);
+  // Calculate milliseconds once
+  const durationMs = React.useMemo(() => parseFloat(duration.replace('s', '')) * 1000, [duration]);
+  // Split text into lines with width calculation
+  const lines = React.useMemo(() => {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context) return [];
+    context.font = `${fontSize}px sans-serif`;
+    const words = text.split(' ');
+    const result = [];
+    let currentLine = '';
+    for (const word of words) {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      const metrics = context.measureText(testLine);
+      if (metrics.width > width && currentLine) {
+        const currentMetrics = context.measureText(currentLine);
+        result.push({
+          text: currentLine,
+          width: currentMetrics.width
+        });
+        currentLine = word;
+      } else {
+        currentLine = testLine;
+      }
+    }
+    if (currentLine) {
+      const finalMetrics = context.measureText(currentLine);
+      result.push({
+        text: currentLine,
+        width: finalMetrics.width
+      });
+    }
+    return result;
+  }, [text, width, fontSize]);
+  // Handle animation timing
+  React.useEffect(() => {
+    if (!lines.length) return;
+    setVisibleLines([]);
+    setIsComplete(false);
+    const timeoutIds = [];
+    const perLineDuration = durationMs / lines.length;
+    lines.forEach((line, index) => {
+      const timeoutId = setTimeout(() => {
+        setVisibleLines(prev => {
+          const newLines = [...prev, line];
+          // Set complete when all lines are visible
+          if (newLines.length === lines.length) {
+            // Add small delay to ensure the last line's animation is complete
+            setTimeout(() => setIsComplete(true), parseFloat(getLineAnimation(line).duration));
+          }
+          return newLines;
+        });
+      }, perLineDuration * index);
+      timeoutIds.push(timeoutId);
+    });
+    return () => {
+      timeoutIds.forEach(clearTimeout);
+      setIsComplete(false);
+    };
+  }, [lines, durationMs]);
+  // Calculate animation parameters
+  const getLineAnimation = React.useCallback(line => {
+    const perCharDuration = durationMs / text.length;
+    const lineDuration = `${line.text.length * perCharDuration}ms`;
+    return {
+      duration: lineDuration,
+      width: line.width
+    };
+  }, [durationMs, text.length]);
+  if (!lines.length) return null;
+  return /*#__PURE__*/React__default.createElement(View, {
+    width: width
+  }, visibleLines.map((line, index) => {
+    const animation = getLineAnimation(line);
+    const isLastLine = index === visibleLines.length - 1;
+    return /*#__PURE__*/React__default.createElement(View, {
+      key: `line-${index}`,
+      display: "flex",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+      display: "inline-block",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      animate: typewriter({
+        duration: animation.duration,
+        steps: line.text.length,
+        width: animation.width
+      })
+    }, props), line.text), cursor && isLastLine && !isComplete && /*#__PURE__*/React__default.createElement(Text, {
+      paddingLeft: 4,
+      display: "inline-block",
+      animate: blinkCursor({
+        duration: cursorDuration,
+        timingFunction: cursorTimingFunction,
+        color
+      })
+    }, "|"));
+  }));
+};
+
 const Typography = {
   letterSpacings: {
     tighter: -0.08,
@@ -2376,6 +2539,7 @@ exports.Span = Span;
 exports.Text = Text;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
+exports.Typewriter = Typewriter;
 exports.Typography = Typography;
 exports.View = View;
 exports.createQuery = createQuery;