@app-studio/web 0.9.12 → 0.9.13

package/dist/web.esm.js

@@ -16597,6 +16597,99 @@ var LineHeights$1 = {
   lg: 72,
   xl: 80
 };
+/**
+ * Responsive typography system that maps title sizes to responsive breakpoints
+ * Based on the Typography system with dynamic breakpoint sizing
+ */
+var ResponsiveTypography = {
+  // xl maps to H1 - Largest heading
+  xl: {
+    lineHeight: '120%',
+    fontWeight: 500,
+    marginBottom: 20,
+    letterSpacing: 1.25,
+    media: {
+      mobile: {
+        fontSize: 42,
+        width: '100%'
+      },
+      tablet: {
+        fontSize: 50,
+        width: '100%'
+      },
+      desktop: {
+        fontSize: 58,
+        minWidth: '60%'
+      }
+    }
+  },
+  // lg maps to H2 - Large heading
+  lg: {
+    lineHeight: '100%',
+    fontWeight: 500,
+    media: {
+      mobile: {
+        fontSize: 32
+      },
+      tablet: {
+        fontSize: 40
+      },
+      desktop: {
+        fontSize: 48
+      }
+    }
+  },
+  // md maps to H3 - Medium heading
+  md: {
+    lineHeight: '100%',
+    fontWeight: 500,
+    media: {
+      mobile: {
+        fontSize: 20
+      },
+      tablet: {
+        fontSize: 30
+      },
+      desktop: {
+        fontSize: 40
+      }
+    }
+  },
+  // sm maps to T1 - Title text
+  sm: {
+    lineHeight: '100%',
+    fontWeight: 400,
+    letterSpacing: -0.2,
+    media: {
+      mobile: {
+        fontSize: 16
+      },
+      tablet: {
+        fontSize: 28
+      },
+      desktop: {
+        fontSize: 32
+      }
+    }
+  },
+  // xs maps to S1 - Subtitle text
+  xs: {
+    lineHeight: '120%',
+    fontWeight: 400,
+    letterSpacing: -0.2,
+    media: {
+      mobile: {
+        fontSize: 12
+      },
+      tablet: {
+        fontSize: 18
+      },
+      desktop: {
+        fontSize: 24
+      }
+    }
+  }
+};
 /**
  * Default styles for different highlight types
  */
@@ -16715,7 +16808,7 @@ var TypewriterEffect = _ref => {
   }))))));
 };
 
-var _excluded$S = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "centered", "views", "highlightAnimate", "animate", "highlightTypewriter", "highlightTypewriterDuration"];
+var _excluded$S = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration"];
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
 }
@@ -16726,11 +16819,14 @@ var TitleView = _ref => {
       highlightStyle = 'background',
       highlightColor = 'theme.primary',
       highlightSecondaryColor,
-      size = 'xl',
+      size = 'lg',
+      responsive = true,
       centered = false,
       views,
       highlightAnimate,
       animate,
+      animationLoop = 1,
+      highlightAnimationLoop = 1,
       highlightTypewriter: propHighlightTypewriter = false,
       highlightTypewriterDuration = 3000
     } = _ref,
@@ -16768,8 +16864,27 @@ var TitleView = _ref => {
     highlightTypewriter: propHighlightTypewriter,
     highlightTypewriterDuration
   }, props));
+  // Determine if we should use responsive sizing or static sizing
+  var useResponsive = responsive && !props.media; // Don't override if media prop is already provided
   var fontSize = TitleSizes[size];
   var lineHeight = LineHeights$1[size];
+  // Get responsive styles if responsive prop is true
+  var responsiveStyles = useResponsive ? ResponsiveTypography[size] : null;
+  // Helper function to apply loop control to animations
+  var applyAnimationLoop = (animation, loopControl) => {
+    if (!animation) return animation;
+    if (Array.isArray(animation)) {
+      return animation.map(anim => Object.assign({}, anim, {
+        iterationCount: loopControl.toString()
+      }));
+    }
+    return Object.assign({}, animation, {
+      iterationCount: loopControl.toString()
+    });
+  };
+  // Apply loop control to animations
+  var controlledAnimate = applyAnimationLoop(animate, animationLoop);
+  var controlledHighlightAnimate = applyAnimationLoop(highlightAnimate, highlightAnimationLoop);
   // Get the text to display
   var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
   if (typeof text === 'string' && activeHighlightTarget) {
@@ -16793,16 +16908,19 @@ var TitleView = _ref => {
     return /*#__PURE__*/React.createElement(Element, Object.assign({
       ref: ref,
       as: "h1",
-      fontSize: fontSize,
-      lineHeight: lineHeight + "px",
-      fontWeight: "bold",
+      fontSize: useResponsive ? undefined : fontSize,
+      lineHeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.lineHeight : lineHeight + "px",
+      fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
+      letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
+      marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
       textAlign: centered ? 'center' : 'left',
-      animate: inView ? animate : undefined
+      animate: inView ? controlledAnimate : undefined,
+      media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
     }, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React.createElement(Text$1, Object.assign({
       key: part.text + "-" + idx,
       as: "span",
       display: "inline",
-      animate: inView ? highlightAnimate : undefined
+      animate: inView ? controlledHighlightAnimate : undefined
     }, HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary), views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React.createElement(TypewriterEffect, {
       text: part.text,
       typingSpeed: Math.max(30, highlightTypewriterDuration / (part.text.length * 10)),
@@ -16815,15 +16933,18 @@ var TitleView = _ref => {
     return /*#__PURE__*/React.createElement(Element, Object.assign({
       ref: ref,
       as: "h1",
-      fontSize: fontSize,
-      lineHeight: lineHeight + "px",
-      fontWeight: "bold",
+      fontSize: useResponsive ? undefined : fontSize,
+      lineHeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.lineHeight : lineHeight + "px",
+      fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
+      letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
+      marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
       textAlign: centered ? 'center' : 'left',
-      animate: inView ? animate : undefined
+      animate: inView ? controlledAnimate : undefined,
+      media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
     }, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(Text$1, Object.assign({
       as: "span",
       display: "inline",
-      animate: inView ? highlightAnimate : undefined
+      animate: inView ? controlledHighlightAnimate : undefined
     }, HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary), views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React.createElement(TypewriterEffect, {
       text: text,
       typingSpeed: Math.max(30, highlightTypewriterDuration / (text.length * 10)),
@@ -16835,11 +16956,14 @@ var TitleView = _ref => {
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     ref: ref,
     as: "h1",
-    fontSize: fontSize,
-    lineHeight: lineHeight + "px",
-    fontWeight: "bold",
+    fontSize: useResponsive ? undefined : fontSize,
+    lineHeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.lineHeight : lineHeight + "px",
+    fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
+    letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
+    marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
     textAlign: centered ? 'center' : 'left',
-    animate: inView ? animate : undefined
+    animate: inView ? controlledAnimate : undefined,
+    media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
   }, views == null ? void 0 : views.container, props), text);
 };