funuicss 3.8.12 → 3.8.14

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.
Files changed (10) hide show
  1. package/css/fun.css +0 -152
  2. package/package.json +1 -1
  3. package/ui/feature/Feature.d.ts +40 -70
  4. package/ui/feature/Feature.js +913 -175
  5. package/ui/text/Text.d.ts +3 -0
  6. package/ui/text/Text.js +15 -2
  7. package/ui/vista/Vista.d.ts +19 -5
  8. package/ui/vista/Vista.js +210 -55
  9. package/utils/componentUtils.d.ts +2 -2
  10. package/utils/componentUtils.js +361 -310
package/ui/text/Text.d.ts CHANGED
@@ -42,6 +42,9 @@ type TypographyProps = {
42
42
  variant?: string;
43
43
  margin?: string;
44
44
  padding?: string;
45
+ dangerouslySetInnerHTML?: {
46
+ __html: string;
47
+ } | boolean;
45
48
  style?: React.CSSProperties;
46
49
  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | string;
47
50
  };
package/ui/text/Text.js CHANGED
@@ -31,11 +31,11 @@ var pi_1 = require("react-icons/pi");
31
31
  var componentUtils_1 = require("../../utils/componentUtils");
32
32
  var Text = function (_a) {
33
33
  var _b;
34
- var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, opacity = _a.opacity, _c = _a.variant, variant = _c === void 0 ? '' : _c, size = _a.size, margin = _a.margin, style = _a.style, padding = _a.padding, rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "opacity", "variant", "size", "margin", "style", "padding"]);
34
+ var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, opacity = _a.opacity, _c = _a.variant, variant = _c === void 0 ? '' : _c, size = _a.size, margin = _a.margin, style = _a.style, dangerouslySetInnerHTML = _a.dangerouslySetInnerHTML, padding = _a.padding, rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "opacity", "variant", "size", "margin", "style", "dangerouslySetInnerHTML", "padding"]);
35
35
  // Use component configuration (simplified - let the hook handle empty variant)
36
36
  var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Text', variant).mergeWithLocal;
37
37
  // Create local props object - include ALL props
38
- var localProps = __assign({ bg: bg, color: color, hoverBg: hoverBg, hoverText: hoverText, funcss: funcss, emp: emp, bold: bold, block: block, body: body, article: article, light: light, lighter: lighter, italic: italic, weight: weight, underline: underline, align: align, lineHeight: lineHeight, letterSpacing: letterSpacing, uppercase: uppercase, lowercase: lowercase, capitalize: capitalize, textDecoration: textDecoration, textTransform: textTransform, whiteSpace: whiteSpace, wordBreak: wordBreak, fontFamily: fontFamily, truncate: truncate, textShadow: textShadow, textAlign: textAlign, monospace: monospace, quote: quote, opacity: opacity, size: size, margin: margin, padding: padding }, rest);
38
+ var localProps = __assign({ bg: bg, color: color, hoverBg: hoverBg, hoverText: hoverText, funcss: funcss, emp: emp, bold: bold, block: block, body: body, article: article, light: light, lighter: lighter, italic: italic, weight: weight, underline: underline, align: align, lineHeight: lineHeight, letterSpacing: letterSpacing, uppercase: uppercase, lowercase: lowercase, capitalize: capitalize, textDecoration: textDecoration, textTransform: textTransform, whiteSpace: whiteSpace, wordBreak: wordBreak, fontFamily: fontFamily, truncate: truncate, textShadow: textShadow, textAlign: textAlign, monospace: monospace, quote: quote, opacity: opacity, size: size, margin: margin, style: style, dangerouslySetInnerHTML: dangerouslySetInnerHTML, padding: padding }, rest);
39
39
  // Merge with config - LOCAL PROPS OVERRIDE CONFIG (consistent with Button)
40
40
  var mergedProps = mergeWithLocal(localProps).props;
41
41
  // Extract final values - use NULLISH COALESCING like Button component
@@ -77,6 +77,7 @@ var Text = function (_a) {
77
77
  margin: margin !== null && margin !== void 0 ? margin : mergedProps.margin,
78
78
  text: text !== null && text !== void 0 ? text : mergedProps.text,
79
79
  padding: padding !== null && padding !== void 0 ? padding : mergedProps.padding,
80
+ dangerouslySetInnerHTML: dangerouslySetInnerHTML !== null && dangerouslySetInnerHTML !== void 0 ? dangerouslySetInnerHTML : mergedProps.dangerouslySetInnerHTML,
80
81
  };
81
82
  // If margin is provided, force block display
82
83
  var shouldBeBlock = final.block || !!final.margin;
@@ -120,6 +121,18 @@ var Text = function (_a) {
120
121
  ]
121
122
  .filter(Boolean)
122
123
  .join(' ');
124
+ // Handle dangerouslySetInnerHTML
125
+ var hasDangerousHTML = Boolean(final.dangerouslySetInnerHTML);
126
+ var dangerousHTMLContent = hasDangerousHTML
127
+ ? (typeof final.dangerouslySetInnerHTML === 'boolean'
128
+ ? { __html: String(final.text || '') }
129
+ : final.dangerouslySetInnerHTML)
130
+ : null;
131
+ // KEY FIX: Don't pass children when using dangerouslySetInnerHTML
132
+ if (hasDangerousHTML) {
133
+ return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles, dangerouslySetInnerHTML: dangerousHTMLContent }, rest)));
134
+ }
135
+ // Normal render without dangerouslySetInnerHTML
123
136
  return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles }, rest),
124
137
  final.quote && (react_1.default.createElement("div", null,
125
138
  react_1.default.createElement(pi_1.PiQuotesLight, null))),
package/ui/vista/Vista.d.ts CHANGED
@@ -1,5 +1,22 @@
1
1
  import React from 'react';
2
2
  type VistaProps = {
3
+ backgroundMode?: 'plain' | 'background';
4
+ gradientOverlay?: boolean;
5
+ gradientColor?: string;
6
+ gradientOpacity?: number;
7
+ gradientDirection?: 'linear' | 'radial';
8
+ gradientLinearDirection?: 'to right' | 'to left' | 'to top' | 'to bottom' | 'to top right' | 'to top left' | 'to bottom right' | 'to bottom left';
9
+ backgroundMedia?: 'none' | 'image' | 'video';
10
+ backgroundImage?: string;
11
+ backgroundVideo?: string;
12
+ backgroundImageSize?: 'cover' | 'contain' | 'auto';
13
+ backgroundImagePosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
14
+ backgroundImageRepeat?: boolean;
15
+ videoAutoplay?: boolean;
16
+ videoLoop?: boolean;
17
+ videoMuted?: boolean;
18
+ videoPoster?: string;
19
+ videoControls?: boolean;
3
20
  layout?: 'centered' | 'mediaLeft' | 'mediaRight' | 'stacked';
4
21
  pattern?: 'grid' | 'dots' | 'diagonal' | 'checkerboard' | 'horizontal' | 'vertical';
5
22
  patternOpacity?: number;
@@ -86,11 +103,6 @@ type VistaProps = {
86
103
  ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
87
104
  mediaType?: 'image' | 'video' | 'iframe' | 'custom';
88
105
  videoUrl?: string;
89
- videoAutoplay?: boolean;
90
- videoLoop?: boolean;
91
- videoMuted?: boolean;
92
- videoPoster?: string;
93
- videoControls?: boolean;
94
106
  iframeUrl?: string;
95
107
  iframeSize?: string;
96
108
  customMedia?: React.ReactNode;
@@ -103,6 +115,8 @@ type VistaProps = {
103
115
  hoverEffect?: 'lift' | 'scale' | 'tilt' | 'glow' | 'none';
104
116
  parallax?: boolean;
105
117
  parallaxSpeed?: number;
118
+ backgroundParallax?: boolean;
119
+ backgroundParallaxSpeed?: number;
106
120
  };
107
121
  declare const Vista: React.FC<VistaProps>;
108
122
  export default Vista;
package/ui/vista/Vista.js CHANGED
@@ -59,32 +59,60 @@ var Vista = function (localProps) {
59
59
  var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', localProps.variant).mergeWithLocal;
60
60
  var mergedProps = mergeWithLocal(localProps).props;
61
61
  var final = mergedProps;
62
- var _a = (0, react_1.useState)(0), scrollY = _a[0], setScrollY = _a[1];
62
+ var _a = (0, react_1.useState)(0), scrollProgress = _a[0], setScrollProgress = _a[1];
63
63
  var sectionRef = (0, react_1.useRef)(null);
64
- // Parallax effect
64
+ var videoRef = (0, react_1.useRef)(null);
65
+ var bgRef = (0, react_1.useRef)(null);
66
+ var contentRef = (0, react_1.useRef)(null);
67
+ // Helper function to get color from CSS variable name
68
+ var getColorValue = function (colorName, fallback) {
69
+ if (fallback === void 0) { fallback = '#000000'; }
70
+ if (!colorName)
71
+ return fallback;
72
+ return (0, getCssVariable_1.getCssVariableValue)(colorName) || fallback;
73
+ };
74
+ // Check if there's a background image/video
75
+ var hasBackgroundMedia = function () {
76
+ return final.backgroundMode === 'background' &&
77
+ final.backgroundMedia !== 'none' &&
78
+ (final.backgroundImage || final.backgroundVideo);
79
+ };
80
+ // Get default text colors based on background
81
+ var getDefaultTextColor = function () {
82
+ if (hasBackgroundMedia() || final.bg) {
83
+ return 'white';
84
+ }
85
+ return 'dark';
86
+ };
87
+ // Smooth parallax effect using Intersection Observer (CSS-like)
65
88
  (0, react_1.useEffect)(function () {
66
- if (!final.parallax)
89
+ if (!final.parallax && !final.backgroundParallax)
67
90
  return;
68
91
  var handleScroll = function () {
69
- if (sectionRef.current) {
70
- var rect = sectionRef.current.getBoundingClientRect();
71
- var scrollProgress = -rect.top;
72
- setScrollY(scrollProgress * (final.parallaxSpeed || 0.5));
73
- }
92
+ if (!sectionRef.current)
93
+ return;
94
+ var rect = sectionRef.current.getBoundingClientRect();
95
+ var windowHeight = window.innerHeight;
96
+ var elementTop = rect.top;
97
+ var elementHeight = rect.height;
98
+ // Calculate scroll progress (0 when element is at bottom of viewport, 1 when at top)
99
+ var progress = 1 - (elementTop + elementHeight) / (windowHeight + elementHeight);
100
+ progress = Math.max(0, Math.min(1, progress));
101
+ setScrollProgress(progress);
74
102
  };
75
103
  window.addEventListener('scroll', handleScroll);
104
+ handleScroll(); // Initial call
76
105
  return function () { return window.removeEventListener('scroll', handleScroll); };
77
- }, [final.parallax, final.parallaxSpeed]);
78
- // Get media size - updated logic for all media types
106
+ }, [final.parallax, final.backgroundParallax]);
107
+ // Get gradient color value
108
+ var getGradientColorValue = function () {
109
+ return getColorValue(final.gradientColor, 'primary');
110
+ };
111
+ // Get media size
79
112
  var getMediaSize = function () {
80
- // Priority order for mediaSize:
81
- // 1. If mediaSize is passed, it affects all media types
82
- // 2. For backward compatibility, also check iframeSize for iframes
83
- // 3. Fallback to undefined
84
113
  if (final.mediaSize) {
85
114
  return final.mediaSize;
86
115
  }
87
- // For backward compatibility with iframeSize
88
116
  if (final.mediaType === 'iframe' && final.iframeSize) {
89
117
  return final.iframeSize;
90
118
  }
@@ -103,7 +131,7 @@ var Vista = function (localProps) {
103
131
  return '';
104
132
  return "vista-hover-".concat(final.hoverEffect);
105
133
  };
106
- // Filter styles helper - used for all media types
134
+ // Filter styles helper
107
135
  var getFilterStyle = function (filter, filterValue) {
108
136
  if (!filter || filter === 'none')
109
137
  return '';
@@ -133,15 +161,37 @@ var Vista = function (localProps) {
133
161
  final.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: final.secondaryButtonOutlined, onClick: function () { return final.ctaSecondaryUrl && (window.location.href = final.ctaSecondaryUrl); }, rounded: final.ctaSecondaryRounded, flat: final.ctaSecondaryFlat, stringPrefix: final.ctaSecondaryPrefix, stringSuffix: final.ctaSecondarySuffix, iconSize: final.secondaryIconSize, funcss: final.secondaryButtonFuncss, small: final.secondaryButtonSmall }, final.ctaSecondaryText)),
134
162
  final.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: final.accentButtonOutlined, onClick: function () { return final.ctaAccentUrl && (window.location.href = final.ctaAccentUrl); }, rounded: final.ctaAccentRounded, flat: final.ctaAccentFlat, stringPrefix: final.ctaAccentPrefix, stringSuffix: final.ctaAccentSuffix, iconSize: final.accentIconSize, funcss: final.accentButtonFuncss, small: final.accentButtonSmall }, final.ctaAccentText))));
135
163
  };
164
+ // Calculate parallax translation
165
+ var getParallaxTranslation = function (speed, isBackground) {
166
+ if (speed === void 0) { speed = 0.5; }
167
+ if (isBackground === void 0) { isBackground = false; }
168
+ if (!scrollProgress)
169
+ return 0;
170
+ // For background: move slower than content
171
+ if (isBackground) {
172
+ var bgSpeed = final.backgroundParallaxSpeed || 0.3;
173
+ return scrollProgress * bgSpeed * 50; // Move 50px max
174
+ }
175
+ // For content: subtle movement
176
+ var contentSpeed = final.parallaxSpeed || 0.5;
177
+ return scrollProgress * contentSpeed * 30; // Move 30px max
178
+ };
136
179
  // Enhanced Text Content
137
- var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass || '') },
138
- final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize, weight: final.headingWeight, color: final.headingColor, funcss: final.headingClass }, final.heading)),
139
- final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, funcss: "mt-2 ".concat(final.subheadingClass || '') }, final.subheading)),
140
- final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor, funcss: "mt-4 ".concat(final.contentClass || ''), article: true }, localProps.children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
180
+ var TextContent = (react_1.default.createElement("div", { ref: contentRef, className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass || ''), style: {
181
+ position: 'relative',
182
+ zIndex: 2,
183
+ transform: final.parallax ? "translateY(".concat(getParallaxTranslation(final.parallaxSpeed, false), "px)") : undefined,
184
+ transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
185
+ } },
186
+ final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize || "6xl", weight: final.headingWeight, color: final.headingColor || getDefaultTextColor(), funcss: final.headingClass }, final.heading)),
187
+ final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize || "lg", weight: final.subheadingWeight, color: final.subheadingColor || getDefaultTextColor(), funcss: "mt-2 ".concat(final.subheadingClass || '') }, final.subheading)),
188
+ final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor || getDefaultTextColor(), funcss: "mt-4 ".concat(final.contentClass || ''), article: true }, localProps.children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
141
189
  final.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass || '') }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
142
- // Enhanced Media Content
190
+ // Enhanced Media Content (only shown when not in background mode)
143
191
  var MediaContent = function () {
144
192
  var _a;
193
+ if (final.backgroundMode === 'background')
194
+ return null;
145
195
  var mediaType = final.mediaType || 'image';
146
196
  var hasMedia = final.media || final.mediaUrl || final.videoUrl || final.iframeUrl || final.customMedia;
147
197
  if (!hasMedia)
@@ -149,8 +199,8 @@ var Vista = function (localProps) {
149
199
  var mediaSize = getMediaSize();
150
200
  var mediaWrapperStyle = {
151
201
  position: 'relative',
152
- transform: final.parallax ? "translateY(".concat(scrollY, "px)") : undefined,
153
- transition: final.parallax ? 'transform 0.1s linear' : undefined,
202
+ transform: final.parallax ? "translateY(".concat(getParallaxTranslation(final.parallaxSpeed, false), "px)") : undefined,
203
+ transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
154
204
  width: '100%',
155
205
  maxWidth: mediaSize || '100%',
156
206
  margin: '0 auto',
@@ -166,7 +216,7 @@ var Vista = function (localProps) {
166
216
  var overlayStyle = final.mediaOverlay ? {
167
217
  position: 'absolute',
168
218
  inset: 0,
169
- backgroundColor: final.mediaOverlayColor || 'rgba(0, 0, 0, 0.3)',
219
+ backgroundColor: getColorValue(final.mediaOverlayColor, 'rgba(0, 0, 0, 0.3)'),
170
220
  opacity: (_a = final.mediaOverlayOpacity) !== null && _a !== void 0 ? _a : 1,
171
221
  pointerEvents: 'none',
172
222
  borderRadius: 'inherit',
@@ -194,7 +244,7 @@ var Vista = function (localProps) {
194
244
  height: 'auto',
195
245
  aspectRatio: '16/9',
196
246
  border: 'none',
197
- display: 'block', // Crucial for 'height: auto' to work reliably
247
+ display: 'block',
198
248
  filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
199
249
  mixBlendMode: final.mediaBlendMode,
200
250
  }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista media content" }),
@@ -214,32 +264,76 @@ var Vista = function (localProps) {
214
264
  'bottom-right': { bottom: '-100px', right: '-100px' },
215
265
  center: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' },
216
266
  };
217
- var primaryColor = (0, getCssVariable_1.getCssVariableValue)('primary');
218
- var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
219
- var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity || 0.7, filter: "blur(".concat(final.blurry || 4, "rem)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition || 'center']);
220
- // Get fade color - accepts color variable name or color string
221
- var getFadeColor = function () {
267
+ var primaryColor = getColorValue('primary');
268
+ var secondaryColor = getColorValue('secondary');
269
+ var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors
270
+ ? "radial-gradient(circle, ".concat(getColorValue(final.gradientColors.split(',')[0]), ", ").concat(getColorValue(final.gradientColors.split(',')[1]), ")")
271
+ : "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity || 0.7, filter: "blur(".concat(final.blurry || 4, "rem)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition || 'center']);
272
+ // Get gradient overlay style - FIXED to have color take most of the space
273
+ var getGradientOverlayStyle = function () {
274
+ if (!final.gradientOverlay)
275
+ return {};
276
+ var gradientColor = getGradientColorValue();
277
+ var opacity = final.gradientOpacity || 0.7;
278
+ if (final.gradientDirection === 'radial') {
279
+ return {
280
+ // Radial gradient with color at center, transparent at edges
281
+ background: "radial-gradient(circle at center, ".concat(gradientColor, " 0%, transparent 100%)"),
282
+ opacity: opacity,
283
+ };
284
+ }
285
+ // Linear gradient - color takes most space, transparent only at the end
286
+ var direction = final.gradientLinearDirection || 'to right';
287
+ // For 'to right': color 0-80%, transparent 80-100%
288
+ // For 'to bottom': color 0-80%, transparent 80-100%
289
+ var gradientStops = '';
290
+ switch (direction) {
291
+ case 'to right':
292
+ gradientStops = "".concat(gradientColor, " 0%,transparent 100%");
293
+ break;
294
+ case 'to left':
295
+ gradientStops = "transparent 0%, ".concat(gradientColor, " 100%");
296
+ break;
297
+ case 'to bottom':
298
+ gradientStops = "".concat(gradientColor, " 0%,transparent 100%");
299
+ break;
300
+ case 'to top':
301
+ gradientStops = "transparent 0%, ".concat(gradientColor, " 100%");
302
+ break;
303
+ case 'to top right':
304
+ gradientStops = "transparent 0%, ".concat(gradientColor, " 100%");
305
+ break;
306
+ case 'to top left':
307
+ gradientStops = "transparent 0%, ".concat(gradientColor, " 100%");
308
+ break;
309
+ case 'to bottom right':
310
+ gradientStops = "".concat(gradientColor, " 0%, transparent 100%");
311
+ break;
312
+ case 'to bottom left':
313
+ gradientStops = "".concat(gradientColor, " 0%, transparent 100%");
314
+ break;
315
+ default:
316
+ gradientStops = "".concat(gradientColor, " 0%,transparent 100%");
317
+ }
318
+ return {
319
+ background: "linear-gradient(".concat(direction, ", ").concat(gradientStops, ")"),
320
+ opacity: opacity,
321
+ };
322
+ };
323
+ // Get fade color
324
+ var getFadeColorValue = function () {
222
325
  if (!final.fade)
223
326
  return '';
224
- if (final.fadeColor) {
225
- // Try to get CSS variable value
226
- var colorValue = (0, getCssVariable_1.getCssVariableValue)(final.fadeColor);
227
- if (colorValue)
228
- return colorValue;
229
- // If not a variable, assume it's a color string
230
- return final.fadeColor;
231
- }
232
- // Default to page background
233
- return (0, getCssVariable_1.getCssVariableValue)('page-bg') || '#ffffff';
327
+ return getColorValue(final.fadeColor, 'page-bg') || '#ffffff';
234
328
  };
235
329
  // Get fade style
236
330
  var getFadeStyle = function () {
237
- var fadeColor = getFadeColor();
331
+ var fadeColor = getFadeColorValue();
238
332
  if (!fadeColor)
239
333
  return {};
240
334
  if (final.fadeRadial) {
241
335
  return {
242
- background: "radial-gradient(circle, transparent 0%, ".concat(fadeColor, " 100%)"),
336
+ background: "radial-gradient(circle, transparent 30%, ".concat(fadeColor, " 100%)"),
243
337
  };
244
338
  }
245
339
  var direction = final.fadeDirection || 'bottom';
@@ -253,7 +347,7 @@ var Vista = function (localProps) {
253
347
  background: "linear-gradient(".concat(toDirectionMap[direction], ", transparent 0%, ").concat(fadeColor, " 100%)"),
254
348
  };
255
349
  };
256
- return (react_1.default.createElement("div", { ref: sectionRef, className: "vista \n ".concat(final.pattern === 'grid' ? 'grid-bg' :
350
+ return (react_1.default.createElement("div", { ref: sectionRef, className: "vista \n ".concat(final.backgroundMode === 'background' ? 'vista-background-mode' : '', "\n ").concat(final.pattern === 'grid' ? 'grid-bg' :
257
351
  final.pattern === 'dots' ? 'bg-pattern-dots' :
258
352
  final.pattern === 'diagonal' ? 'bg-pattern-diagonal' :
259
353
  final.pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
@@ -262,29 +356,90 @@ var Vista = function (localProps) {
262
356
  position: 'relative',
263
357
  overflow: 'hidden',
264
358
  minHeight: "90vh",
265
- backgroundImage: final.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px),\n linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
266
- final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
267
- final.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, "), rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 1px, transparent 1px, transparent 10px)") :
268
- final.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 75%)") :
269
- final.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
270
- final.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") : '',
271
- backgroundSize: final.pattern ? '40px 40px' : undefined,
359
+ backgroundImage: final.pattern && final.backgroundMode !== 'background' ?
360
+ (final.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px),\n linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
361
+ final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
362
+ final.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, "), rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 1px, transparent 1px, transparent 10px)") :
363
+ final.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 75%)") :
364
+ final.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
365
+ final.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") : '') : undefined,
366
+ backgroundSize: final.pattern && final.backgroundMode !== 'background' ? '40px 40px' : undefined,
272
367
  } },
368
+ final.backgroundMode === 'background' && (react_1.default.createElement(react_1.default.Fragment, null,
369
+ final.backgroundMedia === 'image' && final.backgroundImage && (react_1.default.createElement("div", { ref: bgRef, style: {
370
+ position: 'absolute',
371
+ top: 0,
372
+ left: 0,
373
+ width: '100%',
374
+ height: '110%', // Slight extra for parallax
375
+ zIndex: 0,
376
+ backgroundImage: "url(".concat(final.backgroundImage, ")"),
377
+ backgroundSize: final.backgroundImageSize || 'cover',
378
+ backgroundPosition: final.backgroundImagePosition || 'center',
379
+ backgroundRepeat: final.backgroundImageRepeat ? 'repeat' : 'no-repeat',
380
+ transform: final.backgroundParallax ? "translateY(".concat(getParallaxTranslation(final.backgroundParallaxSpeed, true), "px)") : undefined,
381
+ transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
382
+ } })),
383
+ final.backgroundMedia === 'video' && final.backgroundVideo && (react_1.default.createElement("div", { ref: bgRef, style: {
384
+ position: 'absolute',
385
+ top: 0,
386
+ left: 0,
387
+ width: '100%',
388
+ height: '110%', // Slight extra for parallax
389
+ zIndex: 0,
390
+ overflow: 'hidden',
391
+ } },
392
+ react_1.default.createElement("video", { ref: videoRef, autoPlay: final.videoAutoplay !== false, loop: final.videoLoop !== false, muted: final.videoMuted !== false, poster: final.videoPoster, style: {
393
+ position: 'absolute',
394
+ top: '50%',
395
+ left: '50%',
396
+ transform: final.backgroundParallax
397
+ ? "translate(-50%, calc(-50% + ".concat(getParallaxTranslation(final.backgroundParallaxSpeed, true), "px))")
398
+ : 'translate(-50%, -50%)',
399
+ minWidth: '100%',
400
+ minHeight: '100%',
401
+ width: 'auto',
402
+ height: 'auto',
403
+ objectFit: 'cover',
404
+ transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
405
+ } },
406
+ react_1.default.createElement("source", { src: final.backgroundVideo, type: "video/mp4" }),
407
+ "Your browser does not support the video tag."),
408
+ !final.videoControls && (react_1.default.createElement("div", { style: {
409
+ position: 'absolute',
410
+ top: 0,
411
+ left: 0,
412
+ width: '100%',
413
+ height: '100%',
414
+ backgroundColor: 'rgba(0, 0, 0, 0.3)',
415
+ } })))))),
273
416
  final.showGradient && (react_1.default.createElement("div", { className: "vista-gradient-blob", style: gradientStyle })),
274
- final.fade && (react_1.default.createElement("div", { className: "vista-fade-overlay", style: __assign(__assign({ position: 'absolute', inset: 0, width: '100%', height: '100%' }, getFadeStyle()), { zIndex: 0, pointerEvents: 'none' }) })),
417
+ final.backgroundMode === 'background' && final.gradientOverlay && (react_1.default.createElement("div", { style: __assign(__assign({ position: 'absolute', inset: 0, width: '100%', height: '100%' }, getGradientOverlayStyle()), { zIndex: 1, pointerEvents: 'none' }) })),
418
+ final.fade && (react_1.default.createElement("div", { className: "vista-fade-overlay", style: __assign(__assign({ position: 'absolute', inset: 0, width: '100%', height: '100%' }, getFadeStyle()), { zIndex: 2, pointerEvents: 'none' }) })),
275
419
  react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass || ''), style: {
276
420
  position: 'relative',
277
- zIndex: 1,
421
+ zIndex: 3,
278
422
  gap: final.gap || "2rem",
279
423
  display: 'flex',
280
424
  flexDirection: isCentered || isStacked ? 'column' : 'row',
281
- alignItems: 'center',
425
+ alignItems: final.layout === 'centered' ? 'center' : 'flex-start',
282
426
  justifyContent: 'center',
283
427
  width: '100%',
284
428
  maxWidth: '1200px',
285
429
  margin: '0 auto',
286
430
  padding: '2rem',
287
- } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
431
+ minHeight: '90vh',
432
+ } }, final.backgroundMode === 'background' ? (
433
+ // Background mode: Only show text content with flexible alignment
434
+ react_1.default.createElement("div", { style: {
435
+ width: '100%',
436
+ maxWidth: '800px',
437
+ textAlign: final.textAlign || 'left',
438
+ margin: '0 auto',
439
+ padding: '2rem',
440
+ } }, TextContent)) : (
441
+ // Regular mode: Show media and text content
442
+ react_1.default.createElement(react_1.default.Fragment, null, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
288
443
  (final.mediaPosition === 'top') && react_1.default.createElement(MediaContent, null),
289
444
  TextContent,
290
445
  (final.mediaPosition === 'bottom' || !final.mediaPosition) && react_1.default.createElement(MediaContent, null))) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
@@ -295,6 +450,6 @@ var Vista = function (localProps) {
295
450
  react_1.default.createElement(MediaContent, null))),
296
451
  react_1.default.createElement("div", { style: { flex: 1 } }, TextContent),
297
452
  isMediaRight && (react_1.default.createElement("div", { style: { flex: 1 } },
298
- react_1.default.createElement(MediaContent, null))))))));
453
+ react_1.default.createElement(MediaContent, null))))))))));
299
454
  };
300
455
  exports.default = Vista;
package/utils/componentUtils.d.ts CHANGED
@@ -57,7 +57,7 @@ export declare const getComponentConfig: (projectData: ProjectData | null | unde
57
57
  /**
58
58
  * Merge component config with local props
59
59
  */
60
- export declare const mergeComponentConfig: (config: ComponentConfig, localProps: ComponentProps | undefined, projectData: ProjectData | null | undefined) => MergedConfig;
60
+ export declare const mergeComponentConfig: (config: ComponentConfig, localProps: ComponentProps | undefined, projectData: ProjectData | null | undefined, componentName?: string) => MergedConfig;
61
61
  /**
62
62
  * Hook for easy component config usage
63
63
  */
@@ -148,7 +148,7 @@ export declare const getVariableByName: (variableName: string, projectData: Proj
148
148
  } | null;
149
149
  declare const _default: {
150
150
  getComponentConfig: (projectData: ProjectData | null | undefined, componentName: string, variantName?: string) => ComponentConfig;
151
- mergeComponentConfig: (config: ComponentConfig, localProps: ComponentProps | undefined, projectData: ProjectData | null | undefined) => MergedConfig;
151
+ mergeComponentConfig: (config: ComponentConfig, localProps: ComponentProps | undefined, projectData: ProjectData | null | undefined, componentName?: string) => MergedConfig;
152
152
  useComponentConfiguration: (componentName: string, variantName?: string) => UseComponentConfigReturn;
153
153
  useComponentProps: (componentName: string, variantName?: string, localProps?: ComponentProps) => ComponentProps;
154
154
  hasComponentVariant: (projectData: ProjectData | null | undefined, componentName: string, variantName: string) => boolean;