@app-studio/web 0.9.6 → 0.9.7

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

@@ -31,6 +31,33 @@ export interface WallProps extends ViewProps {
     cols?: number;
     squareSize?: number;
 }
+/**
+ * Particles component props
+ */
+export interface ParticlesProps extends Omit<ViewProps, 'colors'> {
+    count?: number;
+    colors?: string[];
+    speed?: 'slow' | 'medium' | 'fast';
+    shapes?: ('circle' | 'square' | 'triangle')[];
+}
+/**
+ * Grid component props
+ */
+export interface GridProps extends ViewProps {
+    gridSize?: number;
+    lineColor?: string;
+    pulseColor?: string;
+    animationSpeed?: 'slow' | 'medium' | 'fast';
+}
+/**
+ * Ripples component props
+ */
+export interface RipplesProps extends Omit<ViewProps, 'colors'> {
+    rippleCount?: number;
+    colors?: string[];
+    maxSize?: number;
+    frequency?: number;
+}
 /**
  * Background styles for customization
  */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps } from './Background.props';
+import { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps, ParticlesProps, GridProps, RipplesProps } from './Background.props';
 /**
  * Main Background View Component with compound pattern
  */
@@ -7,6 +7,9 @@ interface BackgroundViewComponent extends React.FC<BackgroundProps> {
     Aurora: React.FC<AuroraBackgroundProps>;
     Meteors: React.FC<MeteorsProps>;
     Wall: React.FC<WallProps>;
+    Particles: React.FC<ParticlesProps>;
+    Grid: React.FC<GridProps>;
+    Ripples: React.FC<RipplesProps>;
 }
 export declare const BackgroundView: BackgroundViewComponent;
 export {};

package/dist/components/Background/Background.d.ts

@@ -10,4 +10,7 @@ export declare const Background: React.ForwardRefExoticComponent<Pick<Background
     Aurora: React.FC<import("./Background/Background.props").AuroraBackgroundProps>;
     Meteors: React.FC<import("./Background/Background.props").MeteorsProps>;
     Wall: React.FC<import("./Background/Background.props").WallProps>;
+    Particles: React.FC<import("./Background/Background.props").ParticlesProps>;
+    Grid: React.FC<import("./Background/Background.props").GridProps>;
+    Ripples: React.FC<import("./Background/Background.props").RipplesProps>;
 };

package/dist/components/Background/examples/grid.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GridDemo: () => React.JSX.Element;

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

@@ -2,4 +2,7 @@ export { DefaultDemo } from './default';
 export { AuroraDemo } from './aurora';
 export { MeteorsDemo } from './meteors';
 export { WallDemo } from './wall';
+export { ParticlesDemo } from './particles';
+export { GridDemo } from './grid';
+export { RipplesDemo } from './ripples';
 export { CombinedEffectsDemo } from './combinedEffects';

package/dist/components/Background/examples/particles.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ParticlesDemo: () => React.JSX.Element;

package/dist/components/Background/examples/ripples.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RipplesDemo: () => React.JSX.Element;

package/dist/components/Background/index.d.ts

@@ -1,3 +1,3 @@
 export { Background } from './Background';
-export type { BackgroundProps, AuroraBackgroundProps, MeteorsProps, BackgroundStyles, } from './Background/Background.props';
+export type { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps, ParticlesProps, GridProps, RipplesProps, BackgroundStyles, } from './Background/Background.props';
 export type { BackgroundEffect, AuroraDirection, MeteorTiming, BorderAnimationStyles, StrokeAnimationStyles, BackgroundContextType, } from './Background/Background.type';

package/dist/web.cjs.development.js

@@ -25552,7 +25552,10 @@ var AuroraStyles = {
 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({});
 /**
@@ -25679,12 +25682,258 @@ var Wall = _ref3 => {
     }
   })))))));
 };
-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));
@@ -25695,6 +25944,9 @@ var BackgroundView = BackgroundViewBase;
 BackgroundView.Aurora = AuroraBackground;
 BackgroundView.Meteors = Meteors;
 BackgroundView.Wall = Wall;
+BackgroundView.Particles = Particles;
+BackgroundView.Grid = Grid;
+BackgroundView.Ripples = Ripples;
 
 /**
  * Background Component with compound pattern
@@ -25712,6 +25964,18 @@ BackgroundView.Wall = Wall;
  * @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
@@ -25720,7 +25984,10 @@ BackgroundComponent.displayName = 'Background';
 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';