@app-studio/web 0.9.12 → 0.9.14

package/dist/web.umd.development.js

@@ -16573,6 +16573,99 @@
     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
    */
@@ -16691,7 +16784,7 @@
     }))))));
   };
 
-  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, '\\$&');
   }
@@ -16702,11 +16795,14 @@
         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,
@@ -16744,8 +16840,27 @@
       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) {
@@ -16769,16 +16884,19 @@
       return /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(appStudio.Text, 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__default.createElement(TypewriterEffect, {
         text: part.text,
         typingSpeed: Math.max(30, highlightTypewriterDuration / (part.text.length * 10)),
@@ -16791,15 +16909,18 @@
       return /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(appStudio.Text, 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__default.createElement(TypewriterEffect, {
         text: text,
         typingSpeed: Math.max(30, highlightTypewriterDuration / (text.length * 10)),
@@ -16811,11 +16932,14 @@
     return /*#__PURE__*/React__default.createElement(appStudio.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);
   };
 
@@ -16881,8 +17005,78 @@
     };
   };
 
-  var _excluded$T = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
+  var ToggleShapes = {
+    sharp: 0,
+    rounded: 4,
+    pillShaped: 24
+  };
+  /**
+   * Generate toggle variants with proper color combinations based on main color and contrast
+   * Similar to Button's getButtonVariants function
+   */
+  var getToggleVariants = (color, isLight) => ({
+    outline: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: color,
+      _hover: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(-1px)'
+      },
+      _active: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(0)'
+      },
+      transition: 'all 0.2s ease'
+    },
+    ghost: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 0,
+      borderStyle: 'none',
+      borderColor: 'transparent',
+      _hover: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(-1px)'
+      },
+      _active: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(0)'
+      },
+      transition: 'all 0.2s ease'
+    },
+    link: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px',
+      _hover: {
+        borderColor: color,
+        textDecorationThickness: '2px',
+        transform: 'translateY(-1px)'
+      },
+      _active: {
+        borderColor: color,
+        textDecorationThickness: '2px',
+        transform: 'translateY(0)'
+      },
+      transition: 'all 0.2s ease'
+    }
+  });
+
+  var _excluded$T = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
   var ToggleView = _ref => {
+    var _ref2;
     var {
         children,
         shape = 'rounded',
@@ -16893,25 +17087,30 @@
         isToggle,
         setIsToggled,
         onToggle,
-        views
+        views,
+        backgroundColor,
+        // primary candidate for main color
+        color,
+        // 2nd candidate for main color
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
-    var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
+    /* theme helpers */
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var mode = elementMode != null ? elementMode : themeMode;
+    /* MAIN COLOR – determines the entire palette */
+    var mainColorKey = (_ref2 = backgroundColor != null ? backgroundColor : color) != null ? _ref2 : 'theme.primary';
+    var mainTone = getColor(isDisabled ? 'theme.disabled' : mainColorKey, {
+      themeMode: mode
+    });
+    var tone = contrast(mainTone);
+    /* variant palette */
+    var palette = React.useMemo(() => getToggleVariants(mainTone, tone === 'light'), [mainTone, tone]);
+    var base = palette[variant];
     var isActive = !!(isToggle || isHovered);
-    var toggleVariants = {
-      outline: {
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'color.trueGray.400'
-      },
-      link: {
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: isActive ? toggleColor : 'transparent',
-        textDecoration: 'underline'
-      },
-      ghost: {}
-    };
     var handleHover = () => setIsHovered(!isHovered);
     var handleToggle = () => {
       if (!isDisabled) {
@@ -16928,14 +17127,15 @@
       role: "Toggle",
       padding: shape === 'pillShaped' ? '10px 12px' : '8px',
       width: "fit-content",
-      color: isActive ? 'color.white' : toggleColor,
-      backgroundColor: isActive ? toggleColor : 'transparent',
-      onMouseEnter: handleHover,
-      onMouseLeave: () => setIsHovered(false),
       cursor: isDisabled ? 'not-allowed' : 'pointer',
-      borderRadius: shape === 'pillShaped' ? '50px' : '8px',
-      onClick: handleToggle
-    }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
+      borderRadius: ToggleShapes[shape],
+      onClick: handleToggle,
+      onMouseEnter: handleHover,
+      onMouseLeave: () => setIsHovered(false)
+    }, base, isActive && {
+      backgroundColor: mainTone,
+      color: tone === 'light' ? 'color.black' : 'color.white'
+    }, props, views == null ? void 0 : views.container), children);
   };
 
   var _excluded$U = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];