funuicss 2.7.12 → 2.7.14

package/ui/slider/Slider.tsx

@@ -0,0 +1,75 @@
+'use client';
+import React, { useState, useRef } from 'react';
+import { getCssVariableValue } from '../../utils/getCssVariable';
+
+
+type RangeSliderProps = {
+  min?: number;
+  max?: number;
+  step?: number;
+  value: number;
+  height?: number;
+  onChange: (value: number) => void;
+  label?: string;
+  showTooltip?: boolean;
+  funcss?: string;
+};
+
+const Slider: React.FC<RangeSliderProps> = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  onChange,
+  height = 6,
+  label,
+  showTooltip = true,
+  funcss = '',
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(Number(e.target.value));
+  };
+
+  const percent = ((value - min) / (max - min)) * 100;
+  let pColor = getCssVariableValue("primary")
+
+  return (
+    <div className={`range-slider-container ${funcss}`}>
+
+      <div className="range-wrapper">
+        {showTooltip && (
+          <div
+            className={`range-tooltip ${isDragging ? 'visible' : ''}`}
+            style={{ left: `calc(${percent}% - 20px)` }}
+          >
+            {value}%
+          </div>
+        )}
+
+<input
+  type="range"
+  min={min}
+  max={max}
+  step={step}
+  value={value}
+  onChange={handleChange}
+  onMouseDown={() => setIsDragging(true)}
+  onMouseUp={() => setIsDragging(false)}
+  onTouchStart={() => setIsDragging(true)}
+  onTouchEnd={() => setIsDragging(false)}
+  className="range-slider"
+  style={{
+    background: `linear-gradient(to right, ${pColor} 0%, ${pColor} ${percent}%, var(--lighter) ${percent}%, var(--lighter) 100%)`,
+    height: `${height}px`,
+  }}
+/>
+
+      </div>
+
+    </div>
+  );
+};
+
+export default Slider;

package/ui/theme/themes.js

@@ -103,6 +103,6 @@ exports.themes = {
         '--cardBg': 'rgba(255, 255, 255, 0.6)',
         '--card': "4px 4px 10px rgba(0, 0, 0, 0.05), -4px -4px 10px rgba(255, 255, 255, 0.5)",
     },
-    'midnight-purple': __assign({ '--page-bg': '#1a1333', '--text-color': '#e0e0ff', '--text-muted': '#b39ddb', '--raiseThemes': 'rgba(26, 19, 51, 0.5)', '--raiseOpaque': 'rgba(26, 19, 51, 0.85)', '--borderColor': '#2e215c', '--borderRgb': '46, 33, 92', '--lighter': '#2f2258', '--linkColor': '#d1c4e9', '--accent': '#9575cd', '--cardBg': '#1a1333', '--card': "4px 4px 8px #120c26, -4px -4px 8px #221a40" }, exports.darkerDefaults),
+    'midnight-purple': __assign({ '--page-bg': '#1a1333', '--text-color': '#e0e0ff', '--text-muted': '#b39ddb', '--raiseThemes': 'rgba(26, 19, 51, 0.5)', '--raiseOpaque': 'rgba(26, 19, 51, 0.85)', '--borderColor': '#443a66', '--borderRgb': '68, 58, 102', '--lighter': '#241b3f', '--linkColor': '#d1c4e9', '--accent': '#9575cd', '--cardBg': '#1a1333', '--card': "4px 4px 8px #120c26, -4px -4px 8px #221a40" }, exports.darkerDefaults),
     'cyber-metal': __assign({ '--page-bg': '#0f1115', '--text-color': '#d0d0d0', '--text-muted': '#888', '--raiseThemes': 'rgba(15, 17, 21, 0.4)', '--raiseOpaque': 'rgba(15, 17, 21, 0.85)', '--borderColor': '#2a2a2a', '--borderRgb': '42, 42, 42', '--lighter': '#1a1a1a', '--linkColor': '#00ffe0', '--accent': '#39ff14', '--cardBg': '#0f1115', '--card': "6px 6px 12px #050607, -6px -6px 12px #1c1f25" }, exports.darkerDefaults)
 };

package/ui/theme/themes.ts

@@ -127,9 +127,9 @@ export const themes = {
     '--text-muted': '#b39ddb',
     '--raiseThemes': 'rgba(26, 19, 51, 0.5)',
     '--raiseOpaque': 'rgba(26, 19, 51, 0.85)',
-    '--borderColor': '#2e215c',
-    '--borderRgb': '46, 33, 92',
-    '--lighter': '#2f2258',
+    '--borderColor': '#443a66',
+    '--borderRgb': '68, 58, 102',
+    '--lighter': '#241b3f',
     '--linkColor': '#d1c4e9',
     '--accent': '#9575cd',
     '--cardBg': '#1a1333',

package/ui/vista/Vista.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 type VistaProps = {
     layout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
+    pattern?: 'grid' | 'dots' | 'diagonal' | 'checkerboard' | 'horizontal' | 'vertical';
+    patternOpacity?: number;
     reverse?: boolean;
     background?: string;
     padding?: string;

package/ui/vista/Vista.js

@@ -19,11 +19,11 @@ 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, 
+    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, _j = _a.pattern, pattern = _j === void 0 ? '' : _j, _k = _a.patternOpacity, patternOpacity = _k === void 0 ? pattern === 'grid' ? 0.15 : pattern === 'dots' ? 0.4 : pattern === 'diagonal' ? 0.2 : pattern === 'checkerboard' ? 0.2 : pattern === 'horizontal' ? 0.2 : pattern === 'vertical' ? 0.2 : 0.1 : _k, heading = _a.heading, subheading = _a.subheading, content = _a.content, image = _a.image, cta = _a.cta, _l = _a.sectionClass, sectionClass = _l === void 0 ? '' : _l, _m = _a.containerClass, containerClass = _m === void 0 ? '' : _m, _o = _a.textWrapperClass, textWrapperClass = _o === void 0 ? '' : _o, _p = _a.imageWrapperClass, imageWrapperClass = _p === void 0 ? '' : _p, children = _a.children, 
     // Gradient Props
-    _o = _a.showGradient, 
+    _q = _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;
+    showGradient = _q === void 0 ? false : _q, _r = _a.gradientPosition, gradientPosition = _r === void 0 ? 'bottom-right' : _r, _s = _a.gradientSize, gradientSize = _s === void 0 ? '300px' : _s, _t = _a.blurry, blurry = _t === void 0 ? 100 : _t, _u = _a.opacity, opacity = _u === void 0 ? 0.4 : _u, gradientColors = _a.gradientColors;
     var layoutClass = [
         layout,
         reverse ? 'reverse' : '',
@@ -51,7 +51,20 @@ var Vista = function (_a) {
     var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
     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' } },
+        react_1.default.createElement("div", { className: "vista \n          ".concat(pattern === 'grid' ? 'grid-bg' :
+                pattern === 'dots' ? 'bg-pattern-dots' :
+                    pattern === 'diagonal' ? 'bg-pattern-diagonal' :
+                        pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
+                            pattern === 'horizontal' ? 'bg-pattern-horizontal' :
+                                pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n            ").concat(background, " ").concat(padding, " ").concat(layoutClass, " ").concat(sectionClass, " ").concat(funcss), style: { position: 'relative',
+                overflow: 'hidden',
+                backgroundImage: pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px),\n          linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(patternOpacity, ") 1px, transparent 1px)") :
+                    pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px)") :
+                        pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(patternOpacity, "), rgba(var(--borderRgb), ").concat(patternOpacity, ") 1px, transparent 1px, transparent 10px)") :
+                            pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(patternOpacity, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(patternOpacity, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(patternOpacity, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(patternOpacity, ") 75%)") :
+                                pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px)") :
+                                    pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px)") : ''
+            } },
             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,

package/ui/vista/Vista.tsx

@@ -5,6 +5,8 @@ import { getCssVariableValue } from '../../utils/getCssVariable';
 
 type VistaProps = {
   layout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
+  pattern?: 'grid' | 'dots' | 'diagonal' | 'checkerboard' | 'horizontal' | 'vertical';
+  patternOpacity?: number;
   reverse?: boolean;
   background?: string;
   padding?: string;
@@ -41,6 +43,8 @@ const Vista: React.FC<VistaProps> = ({
   textAlign = 'left',
   imgPosition = 'top',
   funcss = '',
+  pattern = '',
+  patternOpacity = pattern === 'grid' ? 0.15 : pattern === 'dots' ? 0.4 : pattern === 'diagonal' ? 0.2 : pattern === 'checkerboard' ? 0.2 : pattern === 'horizontal' ? 0.2 : pattern === 'vertical' ? 0.2 : 0.1,
 
   heading,
   subheading,
@@ -113,8 +117,24 @@ const Vista: React.FC<VistaProps> = ({
   return (
     <ScrollInView>
       <div
-        className={`vista ${background} ${padding} ${layoutClass} ${sectionClass} ${funcss}`}
-        style={{ position: 'relative', overflow: 'hidden' }}
+        className={`vista 
+          ${pattern === 'grid' ? 'grid-bg' : 
+            pattern === 'dots' ? 'bg-pattern-dots' : 
+            pattern === 'diagonal' ? 'bg-pattern-diagonal' : 
+            pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
+            pattern === 'horizontal' ? 'bg-pattern-horizontal' :
+            pattern === 'vertical' ? 'bg-pattern-vertical' : ''} 
+            ${background} ${padding} ${layoutClass} ${sectionClass} ${funcss}`}
+        style={{ position: 'relative', 
+          overflow: 'hidden'  ,
+          backgroundImage: pattern === 'grid' ? `linear-gradient(to right, rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px),
+          linear-gradient(to bottom, rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px)` :
+          pattern === 'dots' ? `radial-gradient(rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px)` :
+          pattern === 'diagonal' ? `repeating-linear-gradient(45deg, rgba(var(--borderRgb), ${patternOpacity}), rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px, transparent 10px)` :
+          pattern === 'checkerboard' ? `linear-gradient(45deg, rgba(var(--borderRgb), ${patternOpacity}) 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ${patternOpacity}) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ${patternOpacity}) 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ${patternOpacity}) 75%)` :
+          pattern === 'horizontal' ? `linear-gradient(to bottom, rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px)` :
+          pattern === 'vertical' ? `linear-gradient(to right, rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px)` : ''
+         }}
       >
         {showGradient && <div style={gradientStyle} />}
         <div className={`vista-container ${containerClass}`} style={{ position: 'relative', zIndex: 1 }}>

package/utils/getCssVariable.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCssVariableValue = getCssVariableValue;
 function getCssVariableValue(name) {
-    // Convert name like "primary" into "--primary"
+    if (typeof window === 'undefined' || typeof getComputedStyle === 'undefined') {
+        return ''; // or throw an error / return a fallback
+    }
     var variableName = name.startsWith('--') ? name : "--".concat(name);
-    // Get value from :root style
     var rootStyles = getComputedStyle(document.documentElement);
     return rootStyles.getPropertyValue(variableName).trim();
 }

package/utils/getCssVariable.tsx

@@ -1,8 +1,9 @@
 export function getCssVariableValue(name: string): string {
-  // Convert name like "primary" into "--primary"
-  const variableName = name.startsWith('--') ? name : `--${name}`;
+  if (typeof window === 'undefined' || typeof getComputedStyle === 'undefined') {
+    return ''; // or throw an error / return a fallback
+  }
 
-  // Get value from :root style
+  const variableName = name.startsWith('--') ? name : `--${name}`;
   const rootStyles = getComputedStyle(document.documentElement);
   return rootStyles.getPropertyValue(variableName).trim();
 }