@app-studio/web 0.9.12 → 0.9.14

package/dist/components/Title/Title/Title.props.d.ts

@@ -61,11 +61,27 @@ export interface TitleProps extends ViewProps {
      * This should be an animation object with properties like from, to, duration, etc.
      */
     animate?: AnimationProps | AnimationProps[];
+    /**
+     * Controls the animation loop behavior for the title animation
+     * @default '1' (play once)
+     */
+    animationLoop?: number | 'infinite';
+    /**
+     * Controls the animation loop behavior for the highlight animation
+     * @default '1' (play once)
+     */
+    highlightAnimationLoop?: number | 'infinite';
     /**
      * Size of the title
      * @default 'xl'
      */
     size?: TitleSize;
+    /**
+     * Whether to enable responsive sizing based on breakpoints
+     * When true, the title will automatically adapt its size across mobile/tablet/desktop
+     * @default false
+     */
+    responsive?: boolean;
     /**
      * Whether to center the title
      * @default false

package/dist/components/Title/Title/Title.style.d.ts

@@ -14,6 +14,33 @@ export declare const TitleSizes: {
  * Line heights for different title sizes
  */
 export declare const LineHeights: Record<TitleSize, number>;
+/**
+ * Responsive typography system that maps title sizes to responsive breakpoints
+ * Based on the Typography system with dynamic breakpoint sizing
+ */
+export declare const ResponsiveTypography: Record<TitleSize, {
+    lineHeight: string;
+    fontWeight: number;
+    marginBottom?: number;
+    letterSpacing?: number;
+    media: {
+        mobile: {
+            fontSize: number;
+            width?: string;
+            minWidth?: string;
+        };
+        tablet: {
+            fontSize: number;
+            width?: string;
+            minWidth?: string;
+        };
+        desktop: {
+            fontSize: number;
+            width?: string;
+            minWidth?: string;
+        };
+    };
+}>;
 /**
  * Default styles for different highlight types
  */

package/dist/components/Title/examples/animationLoop.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Examples of Title with different animation loop controls
+ */
+export declare const AnimationLoopTitle: () => React.JSX.Element;

package/dist/components/Title/examples/index.d.ts

@@ -1,6 +1,7 @@
 export * from './default';
 export * from './highlighted';
 export * from './animated';
+export * from './animationLoop';
 export * from './hero';
 export * from './responsive';
 export * from './custom';

package/dist/components/Title/examples/responsive.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Example of responsive Title using media queries
+ * Example of responsive Title using the new responsive prop
  */
 export declare const ResponsiveTitle: () => React.JSX.Element;

package/dist/components/Toggle/Toggle/Toggle.style.d.ts

@@ -1,2 +1,8 @@
-import { Shape } from './Toggle.type';
+import { ViewProps } from 'app-studio';
+import { Shape, Variant } from './Toggle.type';
 export declare const ToggleShapes: Record<Shape, number | string>;
+/**
+ * Generate toggle variants with proper color combinations based on main color and contrast
+ * Similar to Button's getButtonVariants function
+ */
+export declare const getToggleVariants: (color: string, isLight: boolean) => Record<Variant, ViewProps>;

package/dist/components/Toggle/Toggle/Toggle.view.d.ts

@@ -5,6 +5,9 @@ interface Props extends ToggleViewProps {
     views?: {
         container?: ViewProps;
     };
+    backgroundColor?: string;
+    color?: string;
+    themeMode?: 'light' | 'dark';
 }
 declare const ToggleView: React.FC<Props>;
 export default ToggleView;

package/dist/pages/responsive-title-demo.page.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Demo page showcasing the responsive Title component functionality
+ */
+export declare const ResponsiveTitleDemoPage: () => React.JSX.Element;
+export default ResponsiveTitleDemoPage;

package/dist/web.cjs.development.js

@@ -16604,6 +16604,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
  */
@@ -16722,7 +16815,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, '\\$&');
 }
@@ -16733,11 +16826,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,
@@ -16775,8 +16871,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) {
@@ -16800,16 +16915,19 @@ var TitleView = _ref => {
     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)),
@@ -16822,15 +16940,18 @@ var TitleView = _ref => {
     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)),
@@ -16842,11 +16963,14 @@ var TitleView = _ref => {
   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);
 };
 
@@ -16912,8 +17036,78 @@ var useToggleState = defaultToggled => {
   };
 };
 
-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',
@@ -16924,25 +17118,30 @@ var ToggleView = _ref => {
       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) {
@@ -16959,14 +17158,15 @@ var ToggleView = _ref => {
     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"];