@app-studio/web 0.9.73 → 0.9.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Title/Title/Title.style.d.ts +0 -3
- package/dist/web.cjs.development.js +6 -97
- package/dist/web.cjs.development.js.map +1 -1
- package/dist/web.cjs.production.min.js +1 -1
- package/dist/web.cjs.production.min.js.map +1 -1
- package/dist/web.esm.js +6 -97
- package/dist/web.esm.js.map +1 -1
- package/dist/web.umd.development.js +6 -97
- package/dist/web.umd.development.js.map +1 -1
- package/dist/web.umd.production.min.js +1 -1
- package/dist/web.umd.production.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -19,9 +19,6 @@ export declare const LineHeights: Record<TitleSize, number>;
|
|
|
19
19
|
* Based on the Typography system with dynamic breakpoint sizing
|
|
20
20
|
*/
|
|
21
21
|
export declare const ResponsiveTypography: Record<TitleSize, {
|
|
22
|
-
fontWeight: number;
|
|
23
|
-
marginBottom?: number;
|
|
24
|
-
letterSpacing?: number;
|
|
25
22
|
media: {
|
|
26
23
|
mobile: {
|
|
27
24
|
fontSize: number;
|
|
@@ -17055,90 +17055,6 @@ var TitleSizes = {
|
|
|
17055
17055
|
lg: 64,
|
|
17056
17056
|
xl: 72
|
|
17057
17057
|
};
|
|
17058
|
-
/**
|
|
17059
|
-
* Responsive typography system that maps title sizes to responsive breakpoints
|
|
17060
|
-
* Based on the Typography system with dynamic breakpoint sizing
|
|
17061
|
-
*/
|
|
17062
|
-
var ResponsiveTypography = {
|
|
17063
|
-
// xl maps to H1 - Largest heading
|
|
17064
|
-
xl: {
|
|
17065
|
-
fontWeight: 500,
|
|
17066
|
-
letterSpacing: 1.25,
|
|
17067
|
-
media: {
|
|
17068
|
-
mobile: {
|
|
17069
|
-
fontSize: 60
|
|
17070
|
-
},
|
|
17071
|
-
tablet: {
|
|
17072
|
-
fontSize: 60
|
|
17073
|
-
},
|
|
17074
|
-
desktop: {
|
|
17075
|
-
fontSize: 96
|
|
17076
|
-
}
|
|
17077
|
-
}
|
|
17078
|
-
},
|
|
17079
|
-
// lg maps to H2 - Large heading
|
|
17080
|
-
lg: {
|
|
17081
|
-
fontWeight: 500,
|
|
17082
|
-
media: {
|
|
17083
|
-
mobile: {
|
|
17084
|
-
fontSize: 48
|
|
17085
|
-
},
|
|
17086
|
-
tablet: {
|
|
17087
|
-
fontSize: 48
|
|
17088
|
-
},
|
|
17089
|
-
desktop: {
|
|
17090
|
-
fontSize: 70
|
|
17091
|
-
}
|
|
17092
|
-
}
|
|
17093
|
-
},
|
|
17094
|
-
// md maps to H3 - Medium heading
|
|
17095
|
-
md: {
|
|
17096
|
-
fontWeight: 500,
|
|
17097
|
-
media: {
|
|
17098
|
-
mobile: {
|
|
17099
|
-
fontSize: 32
|
|
17100
|
-
},
|
|
17101
|
-
tablet: {
|
|
17102
|
-
fontSize: 40
|
|
17103
|
-
},
|
|
17104
|
-
desktop: {
|
|
17105
|
-
fontSize: 56
|
|
17106
|
-
}
|
|
17107
|
-
}
|
|
17108
|
-
},
|
|
17109
|
-
// sm maps to T1 - Title text
|
|
17110
|
-
sm: {
|
|
17111
|
-
fontWeight: 400,
|
|
17112
|
-
letterSpacing: -0.2,
|
|
17113
|
-
media: {
|
|
17114
|
-
mobile: {
|
|
17115
|
-
fontSize: 20
|
|
17116
|
-
},
|
|
17117
|
-
tablet: {
|
|
17118
|
-
fontSize: 24
|
|
17119
|
-
},
|
|
17120
|
-
desktop: {
|
|
17121
|
-
fontSize: 32
|
|
17122
|
-
}
|
|
17123
|
-
}
|
|
17124
|
-
},
|
|
17125
|
-
// xs maps to S1 - Subtitle text
|
|
17126
|
-
xs: {
|
|
17127
|
-
fontWeight: 400,
|
|
17128
|
-
letterSpacing: -0.2,
|
|
17129
|
-
media: {
|
|
17130
|
-
mobile: {
|
|
17131
|
-
fontSize: 14
|
|
17132
|
-
},
|
|
17133
|
-
tablet: {
|
|
17134
|
-
fontSize: 18
|
|
17135
|
-
},
|
|
17136
|
-
desktop: {
|
|
17137
|
-
fontSize: 20
|
|
17138
|
-
}
|
|
17139
|
-
}
|
|
17140
|
-
}
|
|
17141
|
-
};
|
|
17142
17058
|
/**
|
|
17143
17059
|
* Default styles for different highlight types
|
|
17144
17060
|
*/
|
|
@@ -17361,7 +17277,8 @@ var SlideEffect = _ref => {
|
|
|
17361
17277
|
position: 'relative',
|
|
17362
17278
|
overflow: 'hidden',
|
|
17363
17279
|
verticalAlign: 'bottom',
|
|
17364
|
-
whiteSpace: 'nowrap'
|
|
17280
|
+
whiteSpace: 'nowrap',
|
|
17281
|
+
lineHeight: 'normal'
|
|
17365
17282
|
}, textStyle), [textStyle]);
|
|
17366
17283
|
// Word row container style
|
|
17367
17284
|
var wordRowStyle = React.useMemo(() => ({
|
|
@@ -17438,7 +17355,7 @@ var SlideEffect = _ref => {
|
|
|
17438
17355
|
})));
|
|
17439
17356
|
};
|
|
17440
17357
|
|
|
17441
|
-
var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "
|
|
17358
|
+
var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode", "textComponent"];
|
|
17442
17359
|
function escapeRegExp(string) {
|
|
17443
17360
|
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
17444
17361
|
}
|
|
@@ -17450,7 +17367,6 @@ var TitleView = _ref => {
|
|
|
17450
17367
|
highlightColor = 'theme.primary',
|
|
17451
17368
|
highlightSecondaryColor,
|
|
17452
17369
|
size = 'lg',
|
|
17453
|
-
responsive = true,
|
|
17454
17370
|
views,
|
|
17455
17371
|
highlightAnimate,
|
|
17456
17372
|
animate,
|
|
@@ -17518,10 +17434,7 @@ var TitleView = _ref => {
|
|
|
17518
17434
|
highlightSlideSequential
|
|
17519
17435
|
}, props));
|
|
17520
17436
|
var TextComponent = textComponent || appStudio.Text;
|
|
17521
|
-
// Common style calculations
|
|
17522
|
-
var useResponsive = responsive && !props.media;
|
|
17523
17437
|
var fontSize = TitleSizes[size];
|
|
17524
|
-
var responsiveStyles = useResponsive ? ResponsiveTypography[size] : null;
|
|
17525
17438
|
// Highlight style props
|
|
17526
17439
|
var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
|
|
17527
17440
|
// Apply loop control to animations
|
|
@@ -17546,10 +17459,7 @@ var TitleView = _ref => {
|
|
|
17546
17459
|
animate: inView ? controlledAnimate : undefined
|
|
17547
17460
|
}, !textComponent && {
|
|
17548
17461
|
as: 'h1',
|
|
17549
|
-
fontSize
|
|
17550
|
-
fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
|
|
17551
|
-
letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
|
|
17552
|
-
media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
|
|
17462
|
+
fontSize
|
|
17553
17463
|
});
|
|
17554
17464
|
// Render highlighted text content (typewriter, slide, or plain)
|
|
17555
17465
|
var renderHighlightedContent = content => {
|
|
@@ -17577,8 +17487,7 @@ var TitleView = _ref => {
|
|
|
17577
17487
|
stagger: stateHighlightSlideStagger,
|
|
17578
17488
|
sequential: stateHighlightSlideSequential,
|
|
17579
17489
|
direction: "up",
|
|
17580
|
-
fontSize:
|
|
17581
|
-
fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
|
|
17490
|
+
fontSize: fontSize,
|
|
17582
17491
|
wordProps: highlightProps,
|
|
17583
17492
|
textComponent: TextComponent
|
|
17584
17493
|
});
|
|
@@ -17601,7 +17510,7 @@ var TitleView = _ref => {
|
|
|
17601
17510
|
}
|
|
17602
17511
|
if (lastIndex < text.length) parts.push(text.substring(lastIndex));
|
|
17603
17512
|
return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
|
|
17604
|
-
fontSize:
|
|
17513
|
+
fontSize: fontSize
|
|
17605
17514
|
}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React__default.createElement(TextComponent, {
|
|
17606
17515
|
key: "text-" + idx,
|
|
17607
17516
|
as: "span",
|