@app-studio/web 0.9.10 → 0.9.11

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 import { ViewProps } from 'app-studio';
+import { GradientProps } from '../../Gradient/Gradient/Gradient.props';
+import { BackgroundSize, BackgroundPosition, BackgroundRepeat, BlendMode } from './Background.type';
 /**
  * Base Background component props
  */
@@ -58,6 +60,64 @@ export interface RipplesProps extends Omit<ViewProps, 'colors'> {
     maxSize?: number;
     frequency?: number;
 }
+/**
+ * Background Image component props
+ */
+export interface BackgroundImageProps extends Omit<BackgroundProps, 'position'> {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Background size
+     * @default 'cover'
+     */
+    backgroundSize?: BackgroundSize;
+    /**
+     * Background position
+     * @default 'center'
+     */
+    backgroundPosition?: BackgroundPosition;
+    /**
+     * Background repeat
+     * @default 'no-repeat'
+     */
+    backgroundRepeat?: BackgroundRepeat;
+    /**
+     * Background attachment
+     * @default 'scroll'
+     */
+    backgroundAttachment?: 'scroll' | 'fixed' | 'local';
+    /**
+     * Image opacity
+     * @default 1
+     */
+    imageOpacity?: number;
+    /**
+     * Overlay color to blend with image
+     */
+    overlay?: string;
+    /**
+     * Blend mode for overlay
+     * @default 'normal'
+     */
+    blendMode?: BlendMode;
+    /**
+     * Custom views for styling
+     */
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+        image?: ViewProps;
+        overlay?: ViewProps;
+    };
+}
+/**
+ * Background Gradient component props
+ * Extends GradientProps and adds Background-specific functionality
+ */
+export interface BackgroundGradientProps extends GradientProps {
+}
 /**
  * Background styles for customization
  */
@@ -66,4 +126,6 @@ export interface BackgroundStyles {
     content?: ViewProps;
     aurora?: ViewProps;
     meteors?: ViewProps;
+    image?: ViewProps;
+    gradient?: ViewProps;
 }

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

@@ -13,6 +13,15 @@ export declare const AuroraStyles: {
     container: ViewProps;
     gradient: ViewProps;
 };
+/**
+ * Background Image styles
+ */
+export declare const BackgroundImageStyles: {
+    container: ViewProps;
+    image: ViewProps;
+    overlay: ViewProps;
+    content: ViewProps;
+};
 /**
  * Meteors effect styles
  */

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

@@ -2,7 +2,7 @@ import { ViewProps } from 'app-studio';
 /**
  * Background effect types
  */
-export declare type BackgroundEffect = 'aurora' | 'meteors' | 'borderMoving' | 'animatedStroke';
+export declare type BackgroundEffect = 'aurora' | 'meteors' | 'particles' | 'grid' | 'ripples' | 'wall' | 'image' | 'gradient' | 'borderMoving' | 'animatedStroke';
 /**
  * Aurora gradient direction options
  */
@@ -32,6 +32,22 @@ export declare type StrokeAnimationStyles = {
     rect?: ViewProps;
     text?: ViewProps;
 };
+/**
+ * Background image sizing options
+ */
+export declare type BackgroundSize = 'auto' | 'cover' | 'contain' | string;
+/**
+ * Background image positioning options
+ */
+export declare type BackgroundPosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | string;
+/**
+ * Background image repeat options
+ */
+export declare type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round';
+/**
+ * CSS blend mode options for overlays
+ */
+export declare type BlendMode = 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion';
 /**
  * Background context type for compound components
  */

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

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

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

@@ -1,8 +1,10 @@
 /**
  * Background Component
  *
- * A collection of animated background effects including Aurora, Meteors,
- * and animated border effects following the design system guidelines.
+ * A comprehensive collection of background effects including animated backgrounds
+ * (Aurora, Meteors, Particles, Grid, Ripples, Wall), background images with overlays,
+ * and gradient backgrounds. All components follow the design system guidelines and
+ * integrate seamlessly with the app-studio theme system.
  */
 import React from 'react';
 import { BackgroundProps } from './Background/Background.props';
@@ -13,4 +15,6 @@ export declare const Background: React.ForwardRefExoticComponent<Pick<Background
     Particles: React.FC<import("./Background/Background.props").ParticlesProps>;
     Grid: React.FC<import("./Background/Background.props").GridProps>;
     Ripples: React.FC<import("./Background/Background.props").RipplesProps>;
+    Image: React.FC<import("./Background/Background.props").BackgroundImageProps>;
+    Gradient: React.FC<import("./Background/Background.props").BackgroundGradientProps>;
 };

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

@@ -1,3 +1,3 @@
 export { Background } from './Background';
-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';
+export type { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps, ParticlesProps, GridProps, RipplesProps, BackgroundImageProps, BackgroundGradientProps, BackgroundStyles, } from './Background/Background.props';
+export type { BackgroundEffect, AuroraDirection, MeteorTiming, BorderAnimationStyles, StrokeAnimationStyles, BackgroundContextType, BackgroundSize, BackgroundPosition, BackgroundRepeat, BlendMode, } from './Background/Background.type';

package/dist/web.cjs.development.js

@@ -26578,14 +26578,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
+  } = 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({});
 /**
@@ -26597,7 +26888,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)'
@@ -26958,12 +27249,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
+  } = 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));
@@ -26977,6 +27320,8 @@ BackgroundView.Wall = Wall;
 BackgroundView.Particles = Particles;
 BackgroundView.Grid = Grid;
 BackgroundView.Ripples = Ripples;
+BackgroundView.Image = BackgroundImage;
+BackgroundView.Gradient = BackgroundGradient;
 
 /**
  * Background Component with compound pattern
@@ -27006,6 +27351,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__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(BackgroundView, Object.assign({}, props, {
   ref: ref
@@ -27017,7 +27374,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';