@app-studio/web 0.9.69 → 0.9.70

package/dist/web.esm.js

@@ -25778,7 +25778,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__*/createContext({});
 /**
@@ -26237,15 +26238,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)';
     }
@@ -26272,6 +26273,78 @@ var BackgroundViewBase = _ref11 => {
     value: {}
   }, /*#__PURE__*/React.createElement(View, Object.assign({}, DefaultBackgroundStyles.container, views == null ? void 0 : views.container, props), children));
 };
+var BackgroundLayout = /*#__PURE__*/React.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.createElement(View, Object.assign({}, props, {
+    ref: ref,
+    backgroundColor: 'transparent',
+    position: "relative",
+    overflow: "visible"
+  }, views == null ? void 0 : views.container), /*#__PURE__*/React.createElement(View, {
+    padding: (_props$padding = props.padding) != null ? _props$padding : 96 + extraPadding + "px " + extraPadding + "px",
+    position: "relative",
+    overflow: "visible"
+  }, /*#__PURE__*/React.createElement(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.createElement(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.createElement(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
@@ -26285,6 +26358,7 @@ BackgroundView.Image = BackgroundImage;
 BackgroundView.Video = BackgroundVideo;
 BackgroundView.Gradient = BackgroundGradient;
 BackgroundView.Overlay = BackgroundOverlay;
+BackgroundView.Layout = BackgroundLayout;
 
 /**
  * Background Component with compound pattern
@@ -26338,6 +26412,7 @@ var BackgroundComponent = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PUR
 })));
 BackgroundComponent.displayName = 'Background';
 var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
+  Layout: BackgroundView.Layout,
   Aurora: BackgroundView.Aurora,
   Meteors: BackgroundView.Meteors,
   Wall: BackgroundView.Wall,