@app-studio/web 0.9.10 → 0.9.11

package/dist/web.umd.development.js

@@ -26547,14 +26547,305 @@
       backgroundPosition: '50% 50%, 50% 50%'
     }
   };
+  /**
+   * Background Image styles
+   */
+  var BackgroundImageStyles = {
+    container: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden'
+    },
+    image: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundAttachment: 'scroll'
+    },
+    overlay: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    },
+    content: {
+      position: 'relative',
+      zIndex: 2
+    }
+  };
 
-  var _excluded$1e = ["children", "showRadialGradient", "views", "themeMode"],
+  /**
+   * Gradient Styles
+   *
+   * Defines the styles for the Gradient component following the design guidelines:
+   * - Typography: Inter/Geist font, specific sizes/weights
+   * - Spacing: 4px grid system
+   * - Colors: Neutral palette with semantic colors
+   * - Rounded corners: Consistent border radius
+   * - Transitions: Subtle animations
+   */
+  /**
+   * Maps direction strings to CSS gradient directions
+   */
+  var DirectionMap = {
+    'to-right': 'to right',
+    'to-left': 'to left',
+    'to-bottom': 'to bottom',
+    'to-top': 'to top',
+    'to-top-right': 'to top right',
+    'to-top-left': 'to top left',
+    'to-bottom-right': 'to bottom right',
+    'to-bottom-left': 'to bottom left'
+  };
+  /**
+   * Maps position strings to CSS position values
+   */
+  var PositionMap = {
+    center: 'center',
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left',
+    'top-right': 'top right',
+    'top-left': 'top left',
+    'bottom-right': 'bottom right',
+    'bottom-left': 'bottom left'
+  };
+  /**
+   * Default color stops for different gradient types
+   */
+  var DefaultColorStops = {
+    linear: [{
+      color: 'color.blue.500',
+      position: '0%'
+    }, {
+      color: 'color.purple.500',
+      position: '100%'
+    }],
+    radial: [{
+      color: 'color.blue.500',
+      position: '0%'
+    }, {
+      color: 'color.purple.500',
+      position: '100%'
+    }],
+    conic: [{
+      color: 'color.red.500',
+      position: '0deg'
+    }, {
+      color: 'color.yellow.500',
+      position: '90deg'
+    }, {
+      color: 'color.green.500',
+      position: '180deg'
+    }, {
+      color: 'color.blue.500',
+      position: '270deg'
+    }, {
+      color: 'color.red.500',
+      position: '360deg'
+    }]
+  };
+  /**
+   * Generates a CSS gradient string based on the provided parameters
+   */
+  var generateGradientString = (type, colors, direction, shape, position) => {
+    // Format color stops
+    var colorStopsString = colors.map(stop => stop.color + " " + (stop.position || '')).join(', ');
+    // Generate the appropriate gradient string based on type
+    switch (type) {
+      case 'linear':
+        var dir = direction && DirectionMap[direction] ? DirectionMap[direction] : direction || 'to right';
+        return "linear-gradient(" + dir + ", " + colorStopsString + ")";
+      case 'radial':
+        var pos = position && PositionMap[position] ? PositionMap[position] : position || 'center';
+        var shapeValue = shape || 'circle';
+        return "radial-gradient(" + shapeValue + " at " + pos + ", " + colorStopsString + ")";
+      case 'conic':
+        var conicPos = position && PositionMap[position] ? PositionMap[position] : position || 'center';
+        return "conic-gradient(from 0deg at " + conicPos + ", " + colorStopsString + ")";
+      default:
+        return "linear-gradient(to right, " + colorStopsString + ")";
+    }
+  };
+  /**
+   * Animation styles for animated gradients using app-studio's animation system
+   */
+  var GradientAnimations = {
+    linear: {
+      backgroundSize: '200% 200%',
+      transition: 'background-position 3s ease-in-out',
+      animate: {
+        from: {
+          backgroundPosition: '0% 50%'
+        },
+        '50%': {
+          backgroundPosition: '100% 50%'
+        },
+        to: {
+          backgroundPosition: '0% 50%'
+        }
+      }
+    },
+    radial: {
+      backgroundSize: '100% 100%',
+      transition: 'all 3s ease-in-out',
+      animate: {
+        from: {
+          backgroundPosition: 'center',
+          backgroundSize: '100% 100%'
+        },
+        '50%': {
+          backgroundSize: '120% 120%'
+        },
+        to: {
+          backgroundPosition: 'center',
+          backgroundSize: '100% 100%'
+        }
+      }
+    },
+    conic: {
+      transition: 'transform 3s linear',
+      animate: {
+        from: {
+          transform: 'rotate(0deg)'
+        },
+        to: {
+          transform: 'rotate(360deg)'
+        }
+      }
+    }
+  };
+  /**
+   * Default styles for the Gradient component
+   */
+  var DefaultGradientStyles = {
+    container: {
+      position: 'relative',
+      overflow: 'hidden',
+      borderRadius: '8px',
+      transition: 'all 0.2s ease'
+    },
+    content: {
+      position: 'relative',
+      zIndex: 1,
+      width: '100%',
+      height: '100%',
+      padding: '16px'
+    }
+  };
+
+  var _excluded$1e = ["type", "direction", "shape", "position", "from", "to", "colors", "animate", "animationDuration", "children", "views", "themeMode"];
+  var GradientView = _ref => {
+    var {
+        type = 'linear',
+        direction = 'to-right',
+        shape = 'circle',
+        position = 'center',
+        from,
+        to,
+        colors,
+        animate = false,
+        animationDuration = 3,
+        children,
+        views,
+        themeMode: elementMode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    // Determine color stops to use
+    var colorStops = React.useMemo(() => {
+      // If colors array is provided, use it
+      if (colors && colors.length > 0) {
+        return colors;
+      }
+      // If from and to are provided, create a two-color gradient
+      if (from && to) {
+        return [{
+          color: from,
+          position: '0%'
+        }, {
+          color: to,
+          position: '100%'
+        }];
+      }
+      // Otherwise use default colors for the selected gradient type
+      return DefaultColorStops[type];
+    }, [colors, from, to, type]);
+    // Generate the gradient string
+    var gradientString = React.useMemo(() => {
+      // Process color stops to resolve theme colors
+      var processedColorStops = colorStops.map(stop => Object.assign({}, stop, {
+        color: getColor(stop.color, elementMode ? {
+          themeMode: elementMode
+        } : undefined)
+      }));
+      return generateGradientString(type, processedColorStops, direction, shape, position);
+    }, [type, colorStops, direction, shape, position, getColor, themeMode, elementMode]);
+    // Prepare animation styles if animation is enabled
+    var animationStyles = React.useMemo(() => {
+      if (!animate) return {};
+      var baseAnimation = GradientAnimations[type];
+      return Object.assign({}, baseAnimation, {
+        transition: baseAnimation.transition.replace('3s', animationDuration + "s"),
+        // Apply animation properties
+        animationDuration: animationDuration + "s",
+        animationIterationCount: 'infinite',
+        animationTimingFunction: type === 'conic' ? 'linear' : 'ease-in-out'
+      });
+    }, [animate, animationDuration, type]);
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      background: gradientString
+    }, DefaultGradientStyles.container, animationStyles, views == null ? void 0 : views.container, props), children && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultGradientStyles.content, views == null ? void 0 : views.content), children)));
+  };
+
+  /**
+   * Gradient Component
+   *
+   * @example
+   * // Basic linear gradient
+   * <Gradient from="blue.500" to="purple.500" height="200px" width="100%" />
+   *
+   * @example
+   * // Radial gradient with content
+   * <Gradient
+   *   type="radial"
+   *   colors={[
+   *     { color: 'red.500', position: '0%' },
+   *     { color: 'orange.500', position: '50%' },
+   *     { color: 'yellow.500', position: '100%' }
+   *   ]}
+   *   height="200px"
+   * >
+   *   <Text color="white">Content inside gradient</Text>
+   * </Gradient>
+   */
+  var Gradient = props => {
+    return /*#__PURE__*/React__default.createElement(GradientView, Object.assign({}, props));
+  };
+
+  var _excluded$1f = ["children", "showRadialGradient", "views", "themeMode"],
     _excluded2$l = ["number"],
     _excluded3$g = ["rows", "cols", "squareSize"],
     _excluded4$d = ["count", "colors", "speed", "shapes"],
     _excluded5$6 = ["gridSize", "lineColor", "pulseColor", "animationSpeed"],
     _excluded6$4 = ["rippleCount", "colors", "maxSize", "frequency"],
-    _excluded7$1 = ["children", "views"];
+    _excluded7$1 = ["children", "src", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "imageOpacity", "overlay", "blendMode", "views", "themeMode"],
+    _excluded8$1 = ["children"],
+    _excluded9$1 = ["children", "views"];
   // Background Context
   var BackgroundContext = /*#__PURE__*/React.createContext({});
   /**
@@ -26566,7 +26857,7 @@
         showRadialGradient = true,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
     var gradientColors = {
       white: 'rgba(255,255,255,1)',
       transparent: 'rgba(255,255,255,0)'
@@ -26927,12 +27218,64 @@
       }
     }))));
   };
-  var BackgroundViewBase = _ref7 => {
+  /**
+   * Background Image Component
+   */
+  var BackgroundImage = _ref7 => {
     var {
         children,
-        views
+        src,
+        backgroundSize = 'cover',
+        backgroundPosition = 'center',
+        backgroundRepeat = 'no-repeat',
+        backgroundAttachment = 'scroll',
+        imageOpacity = 1,
+        overlay,
+        blendMode = 'normal',
+        views,
+        themeMode: elementMode
       } = _ref7,
       props = _objectWithoutPropertiesLoose(_ref7, _excluded7$1);
+    var {
+      getColor
+    } = appStudio.useTheme();
+    var imageStyle = Object.assign({}, BackgroundImageStyles.image, {
+      backgroundImage: "url(" + src + ")",
+      backgroundSize,
+      backgroundPosition,
+      backgroundRepeat,
+      backgroundAttachment,
+      opacity: imageOpacity
+    });
+    var overlayStyle = overlay ? Object.assign({}, BackgroundImageStyles.overlay, {
+      backgroundColor: getColor(overlay, elementMode ? {
+        themeMode: elementMode
+      } : undefined),
+      mixBlendMode: blendMode
+    }) : {};
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, BackgroundImageStyles.container, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      style: imageStyle
+    }, views == null ? void 0 : views.image)), overlay && /*#__PURE__*/React__default.createElement(appStudio.View, {
+      style: overlayStyle
+    }), children && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, BackgroundImageStyles.content, views == null ? void 0 : views.content), children)));
+  };
+  /**
+   * Background Gradient Component
+   * Uses the existing Gradient component as a background
+   */
+  var BackgroundGradient = _ref8 => {
+    var {
+        children
+      } = _ref8,
+      gradientProps = _objectWithoutPropertiesLoose(_ref8, _excluded8$1);
+    return /*#__PURE__*/React__default.createElement(Gradient, Object.assign({}, gradientProps), children);
+  };
+  var BackgroundViewBase = _ref9 => {
+    var {
+        children,
+        views
+      } = _ref9,
+      props = _objectWithoutPropertiesLoose(_ref9, _excluded9$1);
     return /*#__PURE__*/React__default.createElement(BackgroundContext.Provider, {
       value: {}
     }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultBackgroundStyles.container, views == null ? void 0 : views.container, props), children));
@@ -26946,6 +27289,8 @@
   BackgroundView.Particles = Particles;
   BackgroundView.Grid = Grid;
   BackgroundView.Ripples = Ripples;
+  BackgroundView.Image = BackgroundImage;
+  BackgroundView.Gradient = BackgroundGradient;
 
   /**
    * Background Component with compound pattern
@@ -26975,6 +27320,18 @@
    * @example
    * // Ripples effect
    * <Background.Ripples rippleCount={5} maxSize={200} frequency={3} />
+   *
+   * @example
+   * // Background Image
+   * <Background.Image src="/path/to/image.jpg" size="cover" overlay="rgba(0,0,0,0.5)">
+   *   <Text color="white">Content over image</Text>
+   * </Background.Image>
+   *
+   * @example
+   * // Background Gradient
+   * <Background.Gradient from="blue.500" to="purple.500" animate={true}>
+   *   <Text color="white">Content over gradient</Text>
+   * </Background.Gradient>
    */
   var BackgroundComponent = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(BackgroundView, Object.assign({}, props, {
     ref: ref
@@ -26986,7 +27343,9 @@
     Wall: BackgroundView.Wall,
     Particles: BackgroundView.Particles,
     Grid: BackgroundView.Grid,
-    Ripples: BackgroundView.Ripples
+    Ripples: BackgroundView.Ripples,
+    Image: BackgroundView.Image,
+    Gradient: BackgroundView.Gradient
   });
   Background.displayName = 'Background';