@app-studio/web 0.9.69 → 0.9.71

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/components/Title/Title/Title.type.d.ts

@@ -2,7 +2,7 @@ import { ViewProps } from 'app-studio';
 /**
  * Highlight style options for the Title component
  */
-export declare type HighlightStyle = 'underline' | 'background' | 'gradient' | 'outline' | 'glow';
+export declare type HighlightStyle = 'underline' | 'background' | 'gradient' | 'outline' | 'glow' | 'default';
 /**
  * Title size options
  */

package/dist/components/index.d.ts

@@ -39,7 +39,6 @@ export * from './Table/Table';
 export * from './Tabs/Tabs';
 export * from './Title/Title';
 export * from './Icon/Icon';
-export * as Icon from './Icon/Icon';
 export * from './Toggle/Toggle';
 export * from './ToggleGroup/ToggleGroup';
 export * from './DragAndDrop/DragAndDrop';

package/dist/web.cjs.development.js

@@ -527,9 +527,9 @@ var createIcon = function createIcon(name, defaultProps) {
   if (defaultProps === void 0) {
     defaultProps = {};
   }
-  var IconComponent = props => /*#__PURE__*/React__default.createElement(Icon, Object.assign({
+  var IconComponent = props => (/*#__PURE__*/React__default.createElement(Icon, Object.assign({
     name: name
-  }, defaultProps, props));
+  }, defaultProps, props)));
   IconComponent.displayName = name + "Icon";
   return IconComponent;
 };
@@ -708,9 +708,9 @@ var UploadIcon = /*#__PURE__*/createIcon('upload', {
 });
 // Restored icons
 var CheckIcon = TickIcon;
-var BackIcon = props => /*#__PURE__*/React__default.createElement(ChevronIcon, Object.assign({
+var BackIcon = props => (/*#__PURE__*/React__default.createElement(ChevronIcon, Object.assign({
   orientation: "left"
-}, props));
+}, props)));
 var ZoomOutIcon = /*#__PURE__*/createIcon('zoom-out', {
   filled: false
 });
@@ -815,106 +815,6 @@ var DragHandleLinesIcon = /*#__PURE__*/createIcon('grip-horizontal', {
   filled: false
 });
 
-var Icon$1 = {
-  __proto__: null,
-  Icon: Icon,
-  UserIcon: UserIcon,
-  HelpIcon: HelpIcon,
-  FolderIcon: FolderIcon,
-  ChevronIcon: ChevronIcon,
-  DragHandleIcon: DragHandleIcon,
-  FileIcon: FileIcon,
-  VideoIcon: VideoIcon,
-  ImageIcon: ImageIcon,
-  AudioIcon: AudioIcon,
-  TwitterIcon: TwitterIcon,
-  XIcon: XIcon,
-  TwitchIcon: TwitchIcon,
-  CloseIcon: CloseIcon,
-  InstagramIcon: InstagramIcon,
-  YoutubeIcon: YoutubeIcon,
-  FacebookIcon: FacebookIcon,
-  LinkedinIcon: LinkedinIcon,
-  ThreadsIcon: ThreadsIcon,
-  MinusIcon: MinusIcon,
-  InfoIcon: InfoIcon,
-  PlayIcon: PlayIcon,
-  PauseIcon: PauseIcon,
-  HeartIcon: HeartIcon,
-  StarIcon: StarIcon,
-  SaveIcon: SaveIcon,
-  WarningIcon: WarningIcon,
-  BatteryIcon: BatteryIcon,
-  BookmarkIcon: BookmarkIcon,
-  CloudIcon: CloudIcon,
-  CopyIcon: CopyIcon,
-  DustBinIcon: DustBinIcon,
-  DeleteIcon: DeleteIcon,
-  EditIcon: EditIcon,
-  MicrophoneIcon: MicrophoneIcon,
-  StopIcon: StopIcon,
-  SendIcon: SendIcon,
-  LoadingSpinnerIcon: LoadingSpinnerIcon,
-  AttachmentIcon: AttachmentIcon,
-  SearchIcon: SearchIcon,
-  HomeIcon: HomeIcon,
-  SettingsIcon: SettingsIcon,
-  DownloadIcon: DownloadIcon,
-  ShareIcon: ShareIcon,
-  TickIcon: TickIcon,
-  PlusIcon: PlusIcon,
-  CloseEyeIcon: CloseEyeIcon,
-  OpenEyeIcon: OpenEyeIcon,
-  LockIcon: LockIcon,
-  ProfileIcon: ProfileIcon,
-  ExternalLinkIcon: ExternalLinkIcon,
-  SuccessIcon: SuccessIcon,
-  ErrorIcon: ErrorIcon,
-  NotificationIcon: NotificationIcon,
-  DocumentIcon: DocumentIcon,
-  ChartIcon: ChartIcon,
-  MoonIcon: MoonIcon,
-  PanelIcon: PanelIcon,
-  UploadIcon: UploadIcon,
-  CheckIcon: CheckIcon,
-  BackIcon: BackIcon,
-  ZoomOutIcon: ZoomOutIcon,
-  TextIcon: TextIcon,
-  ShapeIcon: ShapeIcon,
-  RotateIcon: RotateIcon,
-  GiftIcon: GiftIcon,
-  ShieldIcon: ShieldIcon,
-  LogoutIcon: LogoutIcon,
-  PowerOffIcon: PowerOffIcon,
-  LinkIcon: LinkIcon,
-  LayoutIcon: LayoutIcon,
-  ZapIcon: ZapIcon,
-  CreditCardIcon: CreditCardIcon,
-  MoreIcon: MoreIcon,
-  TrashIcon: TrashIcon,
-  FilterIcon: FilterIcon,
-  CalendarIcon: CalendarIcon,
-  ClockIcon: ClockIcon,
-  MapPinIcon: MapPinIcon,
-  MenuIcon: MenuIcon,
-  RefreshIcon: RefreshIcon,
-  PrintIcon: PrintIcon,
-  MagicWandIcon: MagicWandIcon,
-  UnLikeIcon: UnLikeIcon,
-  LikeIcon: LikeIcon,
-  CameraIcon: CameraIcon,
-  BluetoothIcon: BluetoothIcon,
-  UnlockIcon: UnlockIcon,
-  WifiIcon: WifiIcon,
-  BoldArrowIcon: BoldArrowIcon,
-  ArrowIcon: ArrowIcon,
-  SpinnerIcon: SpinnerIcon,
-  SliderIcon: SliderIcon,
-  CropIcon: CropIcon,
-  ZoomInIcon: ZoomInIcon,
-  DragHandleLinesIcon: DragHandleLinesIcon
-};
-
 /**
  * Alert Styles
  *
@@ -17273,7 +17173,8 @@ var HighlightStyles = {
   glow: color => ({
     color: color,
     textShadow: "0 0 10px " + color + "80, 0 0 20px " + color + "40, 0 0 30px " + color + "20"
-  })
+  }),
+  default: () => ({})
 };
 
 var _excluded$Z = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "textComponent", "as"];
@@ -17545,7 +17446,7 @@ var TitleView = _ref => {
   var {
       children,
       highlightText,
-      highlightStyle = 'background',
+      highlightStyle = 'default',
       highlightColor = 'theme.primary',
       highlightSecondaryColor,
       size = 'lg',
@@ -17642,9 +17543,9 @@ var TitleView = _ref => {
   // Common container props
   var containerProps = Object.assign({
     ref,
-    as: 'h1',
     animate: inView ? controlledAnimate : undefined
   }, !textComponent && {
+    as: 'h1',
     fontSize: useResponsive ? undefined : fontSize,
     fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
     letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
@@ -17700,25 +17601,27 @@ var TitleView = _ref => {
       lastIndex = match.index + match[0].length;
     }
     if (lastIndex < text.length) parts.push(text.substring(lastIndex));
-    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+      fontSize: useResponsive ? undefined : fontSize
+    }, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
       key: "highlight-" + idx,
       as: "span",
       display: "inline",
-      animate: inView ? controlledHighlightAnimate : undefined,
-      fontSize: useResponsive ? undefined : fontSize
+      animate: inView ? controlledHighlightAnimate : undefined
     }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(part.text)))));
   }
   // Case 2: Has highlight style but no highlight target - apply style to entire title
   if (highlightStyle && !activeHighlightTarget) {
-    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+      fontSize: fontSize
+    }, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
       as: "span",
-      fontSize: fontSize,
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined
     }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
   }
   // Case 3: Default - no highlighting
-  return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), text);
+  return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), text);
 };
 
 /**
@@ -25785,7 +25688,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 +26148,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 +26183,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 +26268,7 @@ BackgroundView.Image = BackgroundImage;
 BackgroundView.Video = BackgroundVideo;
 BackgroundView.Gradient = BackgroundGradient;
 BackgroundView.Overlay = BackgroundOverlay;
+BackgroundView.Layout = BackgroundLayout;
 
 /**
  * Background Component with compound pattern
@@ -26345,6 +26322,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,
@@ -26444,7 +26422,7 @@ exports.HeartIcon = HeartIcon;
 exports.HelpIcon = HelpIcon;
 exports.HomeIcon = HomeIcon;
 exports.HoverCard = HoverCard;
-exports.Icon = Icon$1;
+exports.Icon = Icon;
 exports.ImageIcon = ImageIcon;
 exports.InfoIcon = InfoIcon;
 exports.InstagramIcon = InstagramIcon;