@app-studio/web 0.9.69 → 0.9.70

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

@@ -12,6 +12,19 @@ export interface BackgroundProps extends ViewProps {
         content?: ViewProps;
     };
     themeMode?: 'light' | 'dark';
+    shape?: 'square' | 'rounded' | 'pill';
+    decorationRotation?: number;
+    decorationScale?: number;
+    decorationOpacity?: number;
+}
+export interface BackgroundLayoutProps extends BackgroundProps {
+    shape?: 'square' | 'rounded' | 'pill';
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+        back?: ViewProps;
+        front?: ViewProps;
+    };
 }
 /**
  * Aurora Background component props

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, BackgroundImageProps, BackgroundVideoProps, BackgroundGradientProps, BackgroundOverlayProps } from './Background.props';
+import { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps, ParticlesProps, GridProps, RipplesProps, BackgroundImageProps, BackgroundVideoProps, BackgroundGradientProps, BackgroundOverlayProps, BackgroundLayoutProps } from './Background.props';
 /**
  * Main Background View Component with compound pattern
  */
@@ -14,6 +14,8 @@ interface BackgroundViewComponent extends React.FC<BackgroundProps> {
     Video: React.FC<BackgroundVideoProps>;
     Gradient: React.FC<BackgroundGradientProps>;
     Overlay: React.FC<BackgroundOverlayProps>;
+    Layout: React.FC<BackgroundLayoutProps>;
 }
+export declare const BackgroundLayout: React.ForwardRefExoticComponent<Pick<BackgroundLayoutProps, string | number> & React.RefAttributes<HTMLDivElement>>;
 export declare const BackgroundView: BackgroundViewComponent;
 export {};

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

@@ -9,6 +9,7 @@
 import React from 'react';
 import { BackgroundProps } from './Background/Background.props';
 export declare const Background: React.ForwardRefExoticComponent<Pick<BackgroundProps, string | number> & React.RefAttributes<HTMLDivElement>> & {
+    Layout: React.FC<import("./Background/Background.props").BackgroundLayoutProps>;
     Aurora: React.FC<import("./Background/Background.props").AuroraBackgroundProps>;
     Meteors: React.FC<import("./Background/Background.props").MeteorsProps>;
     Wall: React.FC<import("./Background/Background.props").WallProps>;

package/dist/web.cjs.development.js

@@ -25785,7 +25785,8 @@ var _excluded$1o = ["children", "showRadialGradient", "views", "themeMode"],
   _excluded8 = ["children", "src", "autoPlay", "loop", "muted", "playsInline", "overlay", "blendMode", "views", "themeMode"],
   _excluded9 = ["children"],
   _excluded10 = ["contentPosition"],
-  _excluded11 = ["children", "views"];
+  _excluded11 = ["children", "views"],
+  _excluded12 = ["children", "designProps", "shape", "decorationRotation", "decorationScale", "decorationOpacity", "views"];
 // Background Context
 var BackgroundContext = /*#__PURE__*/React.createContext({});
 /**
@@ -26244,15 +26245,15 @@ var BackgroundOverlay = _ref10 => {
   var getDefaultOverlay = () => {
     switch (contentPosition) {
       case 'left':
-        return 'radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%)';
+        return 'radial-gradient(circle at 80% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
       case 'right':
-        return 'radial-gradient(circle at 30% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%)';
+        return 'radial-gradient(circle at 20% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
       case 'top':
-        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%)';
+        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
       case 'bottom':
-        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%)';
+        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
       case 'center':
-        return 'radial-gradient(circle at 50% 90%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)';
+        return 'radial-gradient(circle at 50% 70%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)';
       default:
         return 'rgba(0,0,0,0.5)';
     }
@@ -26279,6 +26280,78 @@ var BackgroundViewBase = _ref11 => {
     value: {}
   }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultBackgroundStyles.container, views == null ? void 0 : views.container, props), children));
 };
+var BackgroundLayout = /*#__PURE__*/React__default.forwardRef((_ref12, ref) => {
+  var _props$backgroundColo, _props$padding;
+  var {
+      children,
+      shape = 'rounded',
+      decorationRotation = 5,
+      decorationScale = 1,
+      decorationOpacity = 0.8,
+      views
+    } = _ref12,
+    props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
+  var getBorderRadius = shape => {
+    switch (shape) {
+      case 'square':
+        return '0px';
+      case 'pill':
+        return '9999px';
+      case 'rounded':
+      default:
+        return '16px';
+    }
+  };
+  var radius = getBorderRadius(shape);
+  // Calculate the extra space needed for the rotated/scaled decoration
+  // When rotated, corners extend beyond the original bounds
+  // Extra space ≈ sin(rotation) × dimension + (scale - 1) × dimension
+  var rotationRad = Math.abs(decorationRotation) * (Math.PI / 180);
+  var rotationOffset = Math.sin(rotationRad) * 100; // percentage-based estimate
+  var scaleOffset = (decorationScale - 1) * 100 / 2;
+  var extraPadding = Math.ceil(rotationOffset + scaleOffset);
+  var backgroundColor = (_props$backgroundColo = props.backgroundColor) != null ? _props$backgroundColo : 'theme.primary';
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, props, {
+    ref: ref,
+    backgroundColor: 'transparent',
+    position: "relative",
+    overflow: "visible"
+  }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    padding: (_props$padding = props.padding) != null ? _props$padding : 96 + extraPadding + "px " + extraPadding + "px",
+    position: "relative",
+    overflow: "visible"
+  }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    position: "absolute",
+    top: extraPadding,
+    left: extraPadding,
+    right: extraPadding,
+    bottom: extraPadding,
+    backgroundColor: backgroundColor,
+    borderRadius: radius,
+    opacity: decorationOpacity / 1.5,
+    transform: "scale(" + decorationScale + ")",
+    pointerEvents: "none",
+    zIndex: 1
+  }, views == null ? void 0 : views.back)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    position: "absolute",
+    top: extraPadding,
+    left: extraPadding,
+    right: extraPadding,
+    bottom: extraPadding,
+    transform: "rotate(" + decorationRotation + "deg) scale(" + decorationScale + ")",
+    opacity: decorationOpacity / 1.2,
+    backgroundColor: backgroundColor,
+    borderRadius: radius,
+    pointerEvents: "none",
+    zIndex: 2
+  }, views == null ? void 0 : views.front)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    margin: "0 auto",
+    //width="100%"
+    position: "relative",
+    zIndex: 3
+  }, views == null ? void 0 : views.content), children)));
+});
+BackgroundLayout.displayName = 'Background.Layout';
 // Create the compound component
 var BackgroundView = BackgroundViewBase;
 // Attach compound components
@@ -26292,6 +26365,7 @@ BackgroundView.Image = BackgroundImage;
 BackgroundView.Video = BackgroundVideo;
 BackgroundView.Gradient = BackgroundGradient;
 BackgroundView.Overlay = BackgroundOverlay;
+BackgroundView.Layout = BackgroundLayout;
 
 /**
  * Background Component with compound pattern
@@ -26345,6 +26419,7 @@ var BackgroundComponent = /*#__PURE__*/React__default.forwardRef((props, ref) =>
 })));
 BackgroundComponent.displayName = 'Background';
 var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
+  Layout: BackgroundView.Layout,
   Aurora: BackgroundView.Aurora,
   Meteors: BackgroundView.Meteors,
   Wall: BackgroundView.Wall,