@app-studio/web 0.9.10 → 0.9.11

package/dist/web.esm.js

@@ -26571,14 +26571,305 @@ var AuroraStyles = {
     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
+  } = useTheme();
+  // Determine color stops to use
+  var colorStops = 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 = 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 = 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.createElement(View, Object.assign({
+    background: gradientString
+  }, DefaultGradientStyles.container, animationStyles, views == null ? void 0 : views.container, props), children && (/*#__PURE__*/React.createElement(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.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__*/createContext({});
 /**
@@ -26590,7 +26881,7 @@ var AuroraBackground = _ref => {
       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)'
@@ -26951,12 +27242,64 @@ var Ripples = _ref6 => {
     }
   }))));
 };
-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
+  } = 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.createElement(View, Object.assign({}, BackgroundImageStyles.container, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(View, Object.assign({
+    style: imageStyle
+  }, views == null ? void 0 : views.image)), overlay && /*#__PURE__*/React.createElement(View, {
+    style: overlayStyle
+  }), children && (/*#__PURE__*/React.createElement(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.createElement(Gradient, Object.assign({}, gradientProps), children);
+};
+var BackgroundViewBase = _ref9 => {
+  var {
+      children,
+      views
+    } = _ref9,
+    props = _objectWithoutPropertiesLoose(_ref9, _excluded9$1);
   return /*#__PURE__*/React.createElement(BackgroundContext.Provider, {
     value: {}
   }, /*#__PURE__*/React.createElement(View, Object.assign({}, DefaultBackgroundStyles.container, views == null ? void 0 : views.container, props), children));
@@ -26970,6 +27313,8 @@ BackgroundView.Wall = Wall;
 BackgroundView.Particles = Particles;
 BackgroundView.Grid = Grid;
 BackgroundView.Ripples = Ripples;
+BackgroundView.Image = BackgroundImage;
+BackgroundView.Gradient = BackgroundGradient;
 
 /**
  * Background Component with compound pattern
@@ -26999,6 +27344,18 @@ BackgroundView.Ripples = Ripples;
  * @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.forwardRef((props, ref) => /*#__PURE__*/React.createElement(BackgroundView, Object.assign({}, props, {
   ref: ref
@@ -27010,7 +27367,9 @@ var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
   Wall: BackgroundView.Wall,
   Particles: BackgroundView.Particles,
   Grid: BackgroundView.Grid,
-  Ripples: BackgroundView.Ripples
+  Ripples: BackgroundView.Ripples,
+  Image: BackgroundView.Image,
+  Gradient: BackgroundView.Gradient
 });
 Background.displayName = 'Background';