funuicss 2.7.9 → 2.7.11

package/ui/vista/Vista.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+type VistaProps = {
+    layout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
+    reverse?: boolean;
+    background?: string;
+    padding?: string;
+    textAlign?: 'left' | 'center' | 'right';
+    imgPosition?: 'top' | 'bottom';
+    funcss?: string;
+    blurry?: number;
+    opacity?: number;
+    heading?: React.ReactNode;
+    subheading?: React.ReactNode;
+    content?: React.ReactNode;
+    image?: React.ReactNode;
+    cta?: React.ReactNode;
+    sectionClass?: string;
+    containerClass?: string;
+    textWrapperClass?: string;
+    imageWrapperClass?: string;
+    children?: React.ReactNode;
+    showGradient?: boolean;
+    gradientPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+    gradientSize?: string;
+    gradientColors?: string;
+};
+declare const Vista: React.FC<VistaProps>;
+export default Vista;

package/ui/vista/Vista.js

@@ -0,0 +1,66 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ScrollInView_1 = __importDefault(require("../ScrollInView/ScrollInView"));
+var getCssVariable_1 = require("../../utils/getCssVariable");
+var Vista = function (_a) {
+    var _b = _a.layout, layout = _b === void 0 ? 'imageRight' : _b, _c = _a.reverse, reverse = _c === void 0 ? false : _c, _d = _a.background, background = _d === void 0 ? '' : _d, _e = _a.padding, padding = _e === void 0 ? 'padding-lg' : _e, _f = _a.textAlign, textAlign = _f === void 0 ? 'left' : _f, _g = _a.imgPosition, imgPosition = _g === void 0 ? 'top' : _g, _h = _a.funcss, funcss = _h === void 0 ? '' : _h, heading = _a.heading, subheading = _a.subheading, content = _a.content, image = _a.image, cta = _a.cta, _j = _a.sectionClass, sectionClass = _j === void 0 ? '' : _j, _k = _a.containerClass, containerClass = _k === void 0 ? '' : _k, _l = _a.textWrapperClass, textWrapperClass = _l === void 0 ? '' : _l, _m = _a.imageWrapperClass, imageWrapperClass = _m === void 0 ? '' : _m, children = _a.children, 
+    // Gradient Props
+    _o = _a.showGradient, 
+    // Gradient Props
+    showGradient = _o === void 0 ? false : _o, _p = _a.gradientPosition, gradientPosition = _p === void 0 ? 'bottom-right' : _p, _q = _a.gradientSize, gradientSize = _q === void 0 ? '300px' : _q, _r = _a.blurry, blurry = _r === void 0 ? 100 : _r, _s = _a.opacity, opacity = _s === void 0 ? 0.4 : _s, gradientColors = _a.gradientColors;
+    var layoutClass = [
+        layout,
+        reverse ? 'reverse' : '',
+        "text-".concat(textAlign),
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(textWrapperClass) },
+        heading,
+        subheading,
+        content,
+        cta,
+        children));
+    var ImageContent = image && (react_1.default.createElement("div", { className: "vista-image ".concat(imageWrapperClass) }, image));
+    var isCentered = layout === 'centered';
+    var isStacked = layout === 'stacked';
+    var positionStyles = {
+        'top-left': { top: '-100px', left: '-100px' },
+        'top-right': { top: '-100px', right: '-100px' },
+        'bottom-left': { bottom: '-100px', left: '-100px' },
+        'bottom-right': { bottom: '-100px', right: '-100px' },
+        center: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' },
+    };
+    var primaryColor = (0, getCssVariable_1.getCssVariableValue)('--primary');
+    var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('--accent');
+    var gradientStyle = __assign({ position: 'absolute', width: gradientSize, height: gradientSize, background: gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: opacity, filter: "blur(".concat(blurry, "px)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[gradientPosition]);
+    return (react_1.default.createElement(ScrollInView_1.default, null,
+        react_1.default.createElement("div", { className: "vista ".concat(background, " ").concat(padding, " ").concat(layoutClass, " ").concat(sectionClass, " ").concat(funcss), style: { position: 'relative', overflow: 'hidden' } },
+            showGradient && react_1.default.createElement("div", { style: gradientStyle }),
+            react_1.default.createElement("div", { className: "vista-container ".concat(containerClass), style: { position: 'relative', zIndex: 1 } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
+                (imgPosition === 'top') && ImageContent,
+                TextContent,
+                (imgPosition === 'bottom') && ImageContent)) : reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
+                ImageContent,
+                TextContent)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                (layout === 'imageLeft') && ImageContent,
+                TextContent,
+                (layout === 'imageRight') && ImageContent))))));
+};
+exports.default = Vista;

package/ui/vista/Vista.tsx

@@ -0,0 +1,145 @@
+'use client';
+import React from 'react';
+import ScrollInView from '../ScrollInView/ScrollInView';
+import { getCssVariableValue } from '../../utils/getCssVariable';
+
+type VistaProps = {
+  layout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
+  reverse?: boolean;
+  background?: string;
+  padding?: string;
+  textAlign?: 'left' | 'center' | 'right';
+  imgPosition?: 'top' | 'bottom';
+  funcss?: string;
+  blurry?: number;
+  opacity?: number;
+
+  heading?: React.ReactNode;
+  subheading?: React.ReactNode;
+  content?: React.ReactNode;
+  image?: React.ReactNode;
+  cta?: React.ReactNode;
+
+  sectionClass?: string;
+  containerClass?: string;
+  textWrapperClass?: string;
+  imageWrapperClass?: string;
+  children?: React.ReactNode;
+
+  // New Props for Gradient Blob
+  showGradient?: boolean;
+  gradientPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+  gradientSize?: string; // e.g. '300px'
+  gradientColors?: string; // e.g. 'radial-gradient(circle, #ff6ec4, #7873f5)'
+};
+
+const Vista: React.FC<VistaProps> = ({
+  layout = 'imageRight',
+  reverse = false,
+  background = '',
+  padding = 'padding-lg',
+  textAlign = 'left',
+  imgPosition = 'top',
+  funcss = '',
+
+  heading,
+  subheading,
+  content,
+  image,
+  cta,
+
+  sectionClass = '',
+  containerClass = '',
+  textWrapperClass = '',
+  imageWrapperClass = '',
+  children,
+
+  // Gradient Props
+  showGradient = false,
+  gradientPosition = 'bottom-right',
+  gradientSize = '300px',
+  blurry = 100,
+  opacity = 0.4 ,
+  gradientColors,
+}) => {
+  const layoutClass = [
+    layout,
+    reverse ? 'reverse' : '',
+    `text-${textAlign}`,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const TextContent = (
+    <div className={`vista-text ${textWrapperClass}`}>
+      {heading}
+      {subheading}
+      {content}
+      {cta}
+      {children}
+    </div>
+  );
+
+  const ImageContent = image && (
+    <div className={`vista-image ${imageWrapperClass}`}>{image}</div>
+  );
+
+  const isCentered = layout === 'centered';
+  const isStacked = layout === 'stacked';
+
+  const positionStyles: Record<string, React.CSSProperties> = {
+    'top-left': { top: '-100px', left: '-100px' },
+    'top-right': { top: '-100px', right: '-100px' },
+    'bottom-left': { bottom: '-100px', left: '-100px' },
+    'bottom-right': { bottom: '-100px', right: '-100px' },
+    center: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' },
+  };
+
+  let primaryColor = getCssVariableValue('--primary')
+  let secondaryColor = getCssVariableValue('--accent')
+
+  const gradientStyle: React.CSSProperties = {
+    position: 'absolute',
+    width: gradientSize,
+    height: gradientSize,
+    background: gradientColors || `radial-gradient(circle, ${primaryColor}, ${secondaryColor})`,
+    opacity: opacity,
+    filter: `blur(${blurry}px)`,
+    pointerEvents: 'none',
+    zIndex: 0,
+    ...positionStyles[gradientPosition],
+  };
+
+  return (
+    <ScrollInView>
+      <div
+        className={`vista ${background} ${padding} ${layoutClass} ${sectionClass} ${funcss}`}
+        style={{ position: 'relative', overflow: 'hidden' }}
+      >
+        {showGradient && <div style={gradientStyle} />}
+        <div className={`vista-container ${containerClass}`} style={{ position: 'relative', zIndex: 1 }}>
+          {isCentered || isStacked ? (
+            <>
+              {(imgPosition === 'top') && ImageContent}
+              {TextContent}
+              {(imgPosition === 'bottom') && ImageContent}
+            </>
+          ) : reverse ? (
+            <>
+              {ImageContent}
+              {TextContent}
+            </>
+          ) : (
+            <>
+              {(layout === 'imageLeft') && ImageContent}
+              {TextContent}
+              {(layout === 'imageRight') && ImageContent}
+            </>
+          )}
+        </div>
+      </div>
+    </ScrollInView>
+  );
+};
+
+export default Vista;