@app-studio/web 0.9.6 → 0.9.7

package/dist/web.umd.development.js

@@ -25521,7 +25521,10 @@
   var _excluded$1c = ["children", "showRadialGradient", "views", "themeMode"],
     _excluded2$l = ["number"],
     _excluded3$g = ["rows", "cols", "squareSize"],
-    _excluded4$d = ["children", "views"];
+    _excluded4$d = ["count", "colors", "speed", "shapes"],
+    _excluded5$6 = ["gridSize", "lineColor", "pulseColor", "animationSpeed"],
+    _excluded6$4 = ["rippleCount", "colors", "maxSize", "frequency"],
+    _excluded7$1 = ["children", "views"];
   // Background Context
   var BackgroundContext = /*#__PURE__*/React.createContext({});
   /**
@@ -25648,12 +25651,258 @@
       }
     })))))));
   };
-  var BackgroundViewBase = _ref4 => {
+  /**
+   * Particles Component
+   */
+  var defaultParticleColors = ['rgb(59, 130, 246)', 'rgb(147, 51, 234)', 'rgb(236, 72, 153)', 'rgb(34, 197, 94)', 'rgb(251, 146, 60)', 'rgb(168, 85, 247)'];
+  var Particles = _ref4 => {
     var {
-        children,
-        views
+        count = 50,
+        colors = defaultParticleColors,
+        speed = 'medium',
+        shapes = ['circle']
       } = _ref4,
       props = _objectWithoutPropertiesLoose(_ref4, _excluded4$d);
+    var particles = Array.from({
+      length: count
+    }, (_, i) => i);
+    var getSpeedMultiplier = () => {
+      switch (speed) {
+        case 'slow':
+          return 0.5;
+        case 'fast':
+          return 2;
+        default:
+          return 1;
+      }
+    };
+    var getRandomShape = () => shapes[Math.floor(Math.random() * shapes.length)];
+    var getRandomColor = () => colors[Math.floor(Math.random() * colors.length)];
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      width: 400,
+      height: 300,
+      position: "relative",
+      overflow: "hidden",
+      backgroundColor: "color.gray.900"
+    }, props), particles.map(idx => {
+      var size = Math.random() * 8 + 4; // 4-12px
+      var startX = Math.random() * 400;
+      var startY = Math.random() * 300;
+      var endX = Math.random() * 400;
+      var endY = Math.random() * 300;
+      var duration = (Math.random() * 10 + 5) / getSpeedMultiplier(); // 5-15s adjusted by speed
+      var delay = Math.random() * 5; // 0-5s delay
+      var shape = getRandomShape();
+      var color = getRandomColor();
+      var shapeStyles = {
+        circle: {
+          borderRadius: '50%'
+        },
+        square: {
+          borderRadius: '2px'
+        },
+        triangle: {
+          borderRadius: '0',
+          clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)'
+        }
+      };
+      return /*#__PURE__*/React__default.createElement(appStudio.View, {
+        key: idx,
+        position: "absolute",
+        width: size,
+        height: size,
+        backgroundColor: color,
+        opacity: 0.7,
+        style: Object.assign({
+          left: startX,
+          top: startY
+        }, shapeStyles[shape]),
+        animate: {
+          from: {
+            transform: "translate(0px, 0px) scale(0.5)",
+            opacity: 0
+          },
+          to: {
+            transform: "translate(" + (endX - startX) + "px, " + (endY - startY) + "px) scale(1)",
+            opacity: 0.7
+          },
+          iterationCount: 'infinite',
+          direction: 'alternate',
+          timingFunction: 'ease-in-out',
+          duration: duration + "s",
+          delay: delay + "s"
+        }
+      });
+    }));
+  };
+  /**
+   * Grid Component
+   */
+  var Grid = _ref5 => {
+    var {
+        gridSize = 30,
+        lineColor = 'rgba(59, 130, 246, 0.3)',
+        pulseColor = 'rgba(59, 130, 246, 0.8)',
+        animationSpeed = 'medium'
+      } = _ref5,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded5$6);
+    var getSpeedValue = () => {
+      switch (animationSpeed) {
+        case 'slow':
+          return 4;
+        case 'fast':
+          return 1;
+        default:
+          return 2;
+      }
+    };
+    var cols = Math.floor(400 / gridSize);
+    var rows = Math.floor(300 / gridSize);
+    var totalCells = cols * rows;
+    var cells = Array.from({
+      length: totalCells
+    }, (_, i) => i);
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      width: 400,
+      height: 300,
+      position: "relative",
+      overflow: "hidden",
+      backgroundColor: "color.gray.900"
+    }, props), Array.from({
+      length: cols + 1
+    }, (_, i) => (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      key: "v-line-" + i,
+      position: "absolute",
+      left: i * gridSize,
+      top: 0,
+      width: 1,
+      height: "100%",
+      backgroundColor: lineColor
+    }))), Array.from({
+      length: rows + 1
+    }, (_, i) => (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      key: "h-line-" + i,
+      position: "absolute",
+      left: 0,
+      top: i * gridSize,
+      width: "100%",
+      height: 1,
+      backgroundColor: lineColor
+    }))), cells.map(cellIndex => {
+      var col = cellIndex % cols;
+      var row = Math.floor(cellIndex / cols);
+      var delay = (col + row) * 0.1; // Diagonal wave effect
+      return /*#__PURE__*/React__default.createElement(appStudio.View, {
+        key: cellIndex,
+        position: "absolute",
+        left: col * gridSize + 1,
+        top: row * gridSize + 1,
+        width: gridSize - 2,
+        height: gridSize - 2,
+        backgroundColor: "transparent",
+        animate: {
+          from: {
+            backgroundColor: 'transparent'
+          },
+          to: {
+            backgroundColor: pulseColor
+          },
+          iterationCount: 'infinite',
+          direction: 'alternate',
+          timingFunction: 'ease-in-out',
+          duration: getSpeedValue() + "s",
+          delay: delay + "s"
+        }
+      });
+    }));
+  };
+  /**
+   * Ripples Component
+   */
+  var defaultRippleColors = ['rgba(59, 130, 246, 0.6)', 'rgba(147, 51, 234, 0.6)', 'rgba(236, 72, 153, 0.6)', 'rgba(34, 197, 94, 0.6)'];
+  var Ripples = _ref6 => {
+    var {
+        rippleCount = 5,
+        colors = defaultRippleColors,
+        maxSize = 200,
+        frequency = 3
+      } = _ref6,
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded6$4);
+    var ripples = Array.from({
+      length: rippleCount
+    }, (_, i) => ({
+      id: i,
+      x: Math.random() * 400,
+      y: Math.random() * 300,
+      color: colors[i % colors.length],
+      delay: i * (frequency / rippleCount),
+      duration: 3 + Math.random() * 2
+    }));
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      width: 400,
+      height: 300,
+      position: "relative",
+      overflow: "hidden",
+      backgroundColor: "color.gray.100"
+    }, props), ripples.map(ripple => (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      key: ripple.id,
+      position: "absolute",
+      width: 20,
+      height: 20,
+      borderRadius: "50%",
+      style: {
+        left: ripple.x - 10,
+        top: ripple.y - 10,
+        border: "2px solid " + ripple.color,
+        backgroundColor: 'transparent'
+      },
+      animate: {
+        from: {
+          transform: 'scale(0)',
+          opacity: 1
+        },
+        to: {
+          transform: "scale(" + maxSize / 20 + ")",
+          opacity: 0
+        },
+        iterationCount: 'infinite',
+        timingFunction: 'ease-out',
+        duration: ripple.duration + "s",
+        delay: ripple.delay + "s"
+      }
+    }))), ripples.map(ripple => (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      key: "secondary-" + ripple.id,
+      position: "absolute",
+      width: 10,
+      height: 10,
+      borderRadius: "50%",
+      style: {
+        left: ripple.x - 5,
+        top: ripple.y - 5,
+        backgroundColor: ripple.color
+      },
+      animate: {
+        from: {
+          transform: 'scale(1)',
+          opacity: 0.8
+        },
+        to: {
+          transform: "scale(" + maxSize / 40 + ")",
+          opacity: 0
+        },
+        iterationCount: 'infinite',
+        timingFunction: 'ease-out',
+        duration: ripple.duration * 1.2 + "s",
+        delay: ripple.delay + 0.5 + "s"
+      }
+    }))));
+  };
+  var BackgroundViewBase = _ref7 => {
+    var {
+        children,
+        views
+      } = _ref7,
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded7$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));
@@ -25664,6 +25913,9 @@
   BackgroundView.Aurora = AuroraBackground;
   BackgroundView.Meteors = Meteors;
   BackgroundView.Wall = Wall;
+  BackgroundView.Particles = Particles;
+  BackgroundView.Grid = Grid;
+  BackgroundView.Ripples = Ripples;
 
   /**
    * Background Component with compound pattern
@@ -25681,6 +25933,18 @@
    * @example
    * // Wall effect
    * <Background.Wall rows={15} cols={10} squareSize={40} />
+   *
+   * @example
+   * // Particles effect
+   * <Background.Particles count={50} speed="medium" shapes={['circle', 'square']} />
+   *
+   * @example
+   * // Grid effect
+   * <Background.Grid gridSize={30} animationSpeed="medium" />
+   *
+   * @example
+   * // Ripples effect
+   * <Background.Ripples rippleCount={5} maxSize={200} frequency={3} />
    */
   var BackgroundComponent = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(BackgroundView, Object.assign({}, props, {
     ref: ref
@@ -25689,7 +25953,10 @@
   var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
     Aurora: BackgroundView.Aurora,
     Meteors: BackgroundView.Meteors,
-    Wall: BackgroundView.Wall
+    Wall: BackgroundView.Wall,
+    Particles: BackgroundView.Particles,
+    Grid: BackgroundView.Grid,
+    Ripples: BackgroundView.Ripples
   });
   Background.displayName = 'Background';