funuicss 3.7.10 → 3.7.12

package/css/fun.css

@@ -821,31 +821,6 @@ h6, .h6 {
 }
 
 
-/* For WebKit browsers (Chrome, Edge, Brave, Safari) */
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--borderColor, #999); /* Darker thumb */
-  border-radius: 10px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--dark500, #666); /* Hover effect */
-}
-
-/* Optional: Hide scrollbar buttons (arrows) */
-::-webkit-scrollbar-button {
-  display: none;
-}
 
 
   
@@ -986,12 +961,6 @@ link:hover {
   line-height: 1 !important;
   height: var(--inputButtonHeight);
 }
-.button.primary{outline:1px solid var(--primary);}
-.button.primary:active{outline:1px solid var(--primary300);}
-.button.secondary{outline:1px solid var(--secondary);}
-.button.secondary:active{outline:1px solid var(--secondary300);}
-.button.accent{outline:1px solid var(--accent);}
-.button.accent:active{outline:1px solid var(--accent300);}
 
 
 /* Ripple effect */
@@ -1093,6 +1062,8 @@ link:hover {
 
 
 
+
+
 .roundBtn {
   border-radius: 100rem;
 }
@@ -1103,9 +1074,10 @@ link:hover {
   filter: var(--hoverable);
 }
 .button.smallBtn {
-  padding: 0.3rem 0.6rem !important;
+  padding: 0.5rem 0.6rem !important;
   font-size: var(--smallerFont) ;
   height: fit-content !important;
+  border-radius: calc(var(--radius) / 1.5);
 }
 .smallBtn.roundBtn{
   padding: 0.3rem 0.8rem !important;
@@ -1473,12 +1445,12 @@ border-radius: var(--borderRadius);
 /* Beautiful Progress Bar */
 .progress-container {
   width: 100%;
-  padding: 0 0.5rem;
 }
 
 .progress-wrapper {
   position: relative;
   width: 100%;
+
 }
 
 .video-progress {
@@ -1486,7 +1458,7 @@ border-radius: var(--borderRadius);
   appearance: none;
   width: 100%;
   padding: 0 !important;
-  height: 5px !important;
+  height: 8px !important;
   border-radius: 10px;
   background: linear-gradient(
     to right,
@@ -1499,12 +1471,11 @@ border-radius: var(--borderRadius);
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
-}
 
-.video-progress:hover {
-  height: 8px;
 }
 
+
+
 .video-progress::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
@@ -1615,22 +1586,28 @@ border-radius: var(--borderRadius);
   transform: scale(1.1);
 }
 
-/* Time display */
-.video_time {
-  background-color: var(--raiseThemes);
-  backdrop-filter: var(--raiseBackdrop);
-  border-radius: 1rem;
-  padding: 0.5rem 1rem;
-  line-height: 1;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
+
 
 /* Control buttons hover effects */
 .video_container .circle {
   transition: all 0.2s ease;
 }
 
+.videoProgressContainer,
+.videoRightContainer,
+.videoLeftContainer{
+  background-color: var(--dark);
+  height: 30px !important;
+  display: flex;
+  align-items: center !important;
+  align-content: center !important;
+  justify-content: center !important;
+  line-height: 0rem;
+  color: var(--white) !important;
+  border-radius: 0.5rem;
+  padding: 0 0.5rem;
+}
+
 .video_container .circle:hover {
   background-color: var(--primary) !important;
   color: var(--white) !important;
@@ -1657,6 +1634,7 @@ border-radius: var(--borderRadius);
   }
 }
 
+
 /* Fullscreen adjustments */
 .video_container:fullscreen {
   width: 100vw;
@@ -4348,7 +4326,6 @@ opacity: 1;
   color: white;
 }
 
-
 .vista{
   display: flex;
   align-items: center;
@@ -10732,3 +10709,45 @@ z-index: 10;
 @keyframes ping {
   75%, 100% { transform: scale(2); opacity: 0; }
 }
+
+
+
+/* Make all scrollbars thin */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--borderColor,#aaa) transparent;
+}
+
+/* Chrome / Safari / Edge */
+::-webkit-scrollbar {
+  width: 6px !important;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--borderColor,#aaa) !important;
+  border-radius: 20px !important;
+  border: 2px solid transparent !important;
+  background-clip: content-box !important;
+
+  /* <<— Force thumb to always appear shorter visually */
+  min-height: 40px !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--dark500,#666) !important;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+
+::-webkit-scrollbar-button {
+  display: none !important;
+}
+
+/* Make content scroll more so thumb shrinks */
+*::-webkit-scrollbar-thumb {
+  min-height: 40px !important;
+}
+
+

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.10",
+  "version": "3.7.12",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/card/Card.d.ts

@@ -32,7 +32,6 @@ interface CardProps {
     gradient?: string;
     opacity?: number;
     border?: string;
-    hoverEffect?: 'none' | 'lift' | 'glow';
     heading?: ReactNode;
     headingSize?: string;
     headingWeight?: number;
@@ -67,6 +66,27 @@ interface CardProps {
     ctaPrimaryText?: string;
     ctaSecondaryText?: string;
     ctaAccentText?: string;
+    ctaPrimaryRounded?: boolean;
+    ctaPrimaryFlat?: boolean;
+    ctaPrimaryPrefix?: string;
+    ctaPrimarySuffix?: string;
+    primaryIconSize?: number;
+    primaryButtonFuncss?: string;
+    primaryButtonSmall?: boolean;
+    ctaSecondaryRounded?: boolean;
+    ctaSecondaryFlat?: boolean;
+    ctaSecondaryPrefix?: string;
+    ctaSecondarySuffix?: string;
+    secondaryIconSize?: number;
+    secondaryButtonFuncss?: string;
+    secondaryButtonSmall?: boolean;
+    ctaAccentRounded?: boolean;
+    ctaAccentFlat?: boolean;
+    ctaAccentPrefix?: string;
+    ctaAccentSuffix?: string;
+    accentIconSize?: number;
+    accentButtonFuncss?: string;
+    accentButtonSmall?: boolean;
     ctaGap?: number;
     ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
     ctaClass?: string;
@@ -78,5 +98,5 @@ interface CardProps {
     footerClass?: string;
     variant?: string;
 }
-export default function Card({ color, bg, width, height, minHeight, minWidth, margin, padding, funcss, children, roundEdge, maxHeight, maxWidth, horizontal, id, header, body, footer, noGap, fab, image, shadowless, flat, responsiveMedium, xl, responsiveSmall, style, pattern, patternOpacity, gradient, opacity, border, hoverEffect, heading, headingSize, headingWeight, headingColor, headingClass, headingLineHeight, subheading, subheadingSize, subheadingWeight, subheadingColor, subheadingClass, subheadingLineHeight, content, contentSize, contentWeight, contentColor, contentClass, contentLineHeight, imageUrl, imageAlt, imageClass, imageSize, showPrimaryCTA, showSecondaryCTA, showAccentCTA, primaryButtonOutlined, secondaryButtonOutlined, accentButtonOutlined, ctaPrimaryUrl, ctaSecondaryUrl, ctaAccentUrl, ctaPrimaryText, ctaSecondaryText, ctaAccentText, ctaGap, ctaFlexJustify, ctaClass, headerStyle, headerClass, bodyStyle, bodyClass, footerStyle, footerClass, variant, ...rest }: CardProps): React.JSX.Element;
+export default function Card(localProps: CardProps): React.JSX.Element;
 export {};

package/ui/card/Card.js

@@ -11,17 +11,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -37,113 +26,13 @@ var Button_1 = __importDefault(require("../button/Button"));
 var Flex_1 = __importDefault(require("../flex/Flex"));
 var Text_1 = __importDefault(require("../text/Text"));
 var View_1 = __importDefault(require("../view/View"));
-function Card(_a) {
-    var 
-    // Original Props
-    color = _a.color, bg = _a.bg, width = _a.width, height = _a.height, minHeight = _a.minHeight, minWidth = _a.minWidth, margin = _a.margin, padding = _a.padding, funcss = _a.funcss, children = _a.children, roundEdge = _a.roundEdge, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, horizontal = _a.horizontal, id = _a.id, header = _a.header, body = _a.body, footer = _a.footer, noGap = _a.noGap, fab = _a.fab, image = _a.image, shadowless = _a.shadowless, flat = _a.flat, responsiveMedium = _a.responsiveMedium, xl = _a.xl, responsiveSmall = _a.responsiveSmall, style = _a.style, 
-    // Pattern Props
-    _b = _a.pattern, 
-    // Pattern Props
-    pattern = _b === void 0 ? 'none' : _b, _c = _a.patternOpacity, patternOpacity = _c === void 0 ? 0.1 : _c, gradient = _a.gradient, _d = _a.opacity, opacity = _d === void 0 ? 1 : _d, border = _a.border, _e = _a.hoverEffect, hoverEffect = _e === void 0 ? 'none' : _e, 
-    // Enhanced Content Props
-    heading = _a.heading, _f = _a.headingSize, headingSize = _f === void 0 ? 'xl' : _f, _g = _a.headingWeight, headingWeight = _g === void 0 ? 700 : _g, headingColor = _a.headingColor, headingClass = _a.headingClass, headingLineHeight = _a.headingLineHeight, subheading = _a.subheading, _h = _a.subheadingSize, subheadingSize = _h === void 0 ? 'base' : _h, _j = _a.subheadingWeight, subheadingWeight = _j === void 0 ? 400 : _j, _k = _a.subheadingColor, subheadingColor = _k === void 0 ? 'light' : _k, subheadingClass = _a.subheadingClass, subheadingLineHeight = _a.subheadingLineHeight, content = _a.content, _l = _a.contentSize, contentSize = _l === void 0 ? 'base' : _l, _m = _a.contentWeight, contentWeight = _m === void 0 ? 400 : _m, contentColor = _a.contentColor, contentClass = _a.contentClass, contentLineHeight = _a.contentLineHeight, 
-    // Image Props
-    imageUrl = _a.imageUrl, _o = _a.imageAlt, imageAlt = _o === void 0 ? '' : _o, _p = _a.imageClass, imageClass = _p === void 0 ? '' : _p, _q = _a.imageSize, imageSize = _q === void 0 ? '100%' : _q, 
-    // Enhanced Footer/CTA Props
-    _r = _a.showPrimaryCTA, 
-    // Enhanced Footer/CTA Props
-    showPrimaryCTA = _r === void 0 ? false : _r, _s = _a.showSecondaryCTA, showSecondaryCTA = _s === void 0 ? false : _s, _t = _a.showAccentCTA, showAccentCTA = _t === void 0 ? false : _t, _u = _a.primaryButtonOutlined, primaryButtonOutlined = _u === void 0 ? false : _u, _v = _a.secondaryButtonOutlined, secondaryButtonOutlined = _v === void 0 ? false : _v, _w = _a.accentButtonOutlined, accentButtonOutlined = _w === void 0 ? false : _w, _x = _a.ctaPrimaryUrl, ctaPrimaryUrl = _x === void 0 ? '' : _x, _y = _a.ctaSecondaryUrl, ctaSecondaryUrl = _y === void 0 ? '' : _y, _z = _a.ctaAccentUrl, ctaAccentUrl = _z === void 0 ? '' : _z, _0 = _a.ctaPrimaryText, ctaPrimaryText = _0 === void 0 ? 'Primary Action' : _0, _1 = _a.ctaSecondaryText, ctaSecondaryText = _1 === void 0 ? 'Secondary Action' : _1, _2 = _a.ctaAccentText, ctaAccentText = _2 === void 0 ? 'Accent Action' : _2, _3 = _a.ctaGap, ctaGap = _3 === void 0 ? 1 : _3, _4 = _a.ctaFlexJustify, ctaFlexJustify = _4 === void 0 ? 'center' : _4, _5 = _a.ctaClass, ctaClass = _5 === void 0 ? '' : _5, 
-    // Section Styling Props
-    headerStyle = _a.headerStyle, headerClass = _a.headerClass, bodyStyle = _a.bodyStyle, bodyClass = _a.bodyClass, footerStyle = _a.footerStyle, footerClass = _a.footerClass, 
-    // Configuration
-    variant = _a.variant, rest = __rest(_a, ["color", "bg", "width", "height", "minHeight", "minWidth", "margin", "padding", "funcss", "children", "roundEdge", "maxHeight", "maxWidth", "horizontal", "id", "header", "body", "footer", "noGap", "fab", "image", "shadowless", "flat", "responsiveMedium", "xl", "responsiveSmall", "style", "pattern", "patternOpacity", "gradient", "opacity", "border", "hoverEffect", "heading", "headingSize", "headingWeight", "headingColor", "headingClass", "headingLineHeight", "subheading", "subheadingSize", "subheadingWeight", "subheadingColor", "subheadingClass", "subheadingLineHeight", "content", "contentSize", "contentWeight", "contentColor", "contentClass", "contentLineHeight", "imageUrl", "imageAlt", "imageClass", "imageSize", "showPrimaryCTA", "showSecondaryCTA", "showAccentCTA", "primaryButtonOutlined", "secondaryButtonOutlined", "accentButtonOutlined", "ctaPrimaryUrl", "ctaSecondaryUrl", "ctaAccentUrl", "ctaPrimaryText", "ctaSecondaryText", "ctaAccentText", "ctaGap", "ctaFlexJustify", "ctaClass", "headerStyle", "headerClass", "bodyStyle", "bodyClass", "footerStyle", "footerClass", "variant"]);
-    // Use the component config hook
-    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Card', variant).mergeWithLocal;
-    // Merge config with local props
-    var mergedProps = mergeWithLocal({
-        // Original props
-        color: color,
-        bg: bg,
-        width: width,
-        height: height,
-        minHeight: minHeight,
-        minWidth: minWidth,
-        margin: margin,
-        padding: padding,
-        funcss: funcss,
-        children: children,
-        roundEdge: roundEdge,
-        maxHeight: maxHeight,
-        maxWidth: maxWidth,
-        horizontal: horizontal,
-        id: id,
-        header: header,
-        body: body,
-        footer: footer,
-        noGap: noGap,
-        fab: fab,
-        image: image,
-        shadowless: shadowless,
-        flat: flat,
-        responsiveMedium: responsiveMedium,
-        xl: xl,
-        responsiveSmall: responsiveSmall,
-        style: style,
-        // Pattern props
-        pattern: pattern,
-        patternOpacity: patternOpacity,
-        gradient: gradient,
-        opacity: opacity,
-        border: border,
-        hoverEffect: hoverEffect,
-        // Enhanced content props
-        heading: heading,
-        headingSize: headingSize,
-        headingWeight: headingWeight,
-        headingColor: headingColor,
-        headingClass: headingClass,
-        headingLineHeight: headingLineHeight,
-        subheading: subheading,
-        subheadingSize: subheadingSize,
-        subheadingWeight: subheadingWeight,
-        subheadingColor: subheadingColor,
-        subheadingClass: subheadingClass,
-        subheadingLineHeight: subheadingLineHeight,
-        content: content,
-        contentSize: contentSize,
-        contentWeight: contentWeight,
-        contentColor: contentColor,
-        contentClass: contentClass,
-        contentLineHeight: contentLineHeight,
-        // Image props
-        imageUrl: imageUrl,
-        imageAlt: imageAlt,
-        imageClass: imageClass,
-        imageSize: imageSize,
-        // CTA props
-        showPrimaryCTA: showPrimaryCTA,
-        showSecondaryCTA: showSecondaryCTA,
-        showAccentCTA: showAccentCTA,
-        primaryButtonOutlined: primaryButtonOutlined,
-        secondaryButtonOutlined: secondaryButtonOutlined,
-        accentButtonOutlined: accentButtonOutlined,
-        ctaPrimaryUrl: ctaPrimaryUrl,
-        ctaSecondaryUrl: ctaSecondaryUrl,
-        ctaAccentUrl: ctaAccentUrl,
-        ctaPrimaryText: ctaPrimaryText,
-        ctaSecondaryText: ctaSecondaryText,
-        ctaAccentText: ctaAccentText,
-        ctaGap: ctaGap,
-        ctaFlexJustify: ctaFlexJustify,
-        ctaClass: ctaClass,
-        // Section styling props
-        headerStyle: headerStyle,
-        headerClass: headerClass,
-        bodyStyle: bodyStyle,
-        bodyClass: bodyClass,
-        footerStyle: footerStyle,
-        footerClass: footerClass,
-    }).props;
+function Card(localProps) {
+    // Use the component config hook with the variant from localProps
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Card', localProps.variant).mergeWithLocal;
+    // Merge config with local props - local props override config
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Use mergedProps directly - they already have the correct merge logic applied
+    var final = mergedProps;
     var themeVariant = (0, theme_1.useVariant)().variant;
     // Handle content - if string, use dangerouslySetInnerHTML, otherwise render as is
     var renderContent = function (content) {
@@ -152,74 +41,74 @@ function Card(_a) {
         }
         return content;
     };
+    // CTA Buttons Component
+    var CTAButtons = function () {
+        var hasCTAs = final.showPrimaryCTA || final.showSecondaryCTA || final.showAccentCTA;
+        if (!hasCTAs)
+            return null;
+        return (react_1.default.createElement(Flex_1.default, { gap: final.ctaGap, justify: final.ctaFlexJustify, className: "mt-4 ".concat(final.ctaClass), wrap: "wrap", width: '100%' },
+            final.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: final.primaryButtonOutlined, onClick: function () { return final.ctaPrimaryUrl && (window.location.href = final.ctaPrimaryUrl); }, rounded: final.ctaPrimaryRounded, flat: final.ctaPrimaryFlat, stringPrefix: final.ctaPrimaryPrefix, stringSuffix: final.ctaPrimarySuffix, iconSize: final.primaryIconSize, funcss: final.primaryButtonFuncss, small: final.primaryButtonSmall }, final.ctaPrimaryText)),
+            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)),
+            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))));
+    };
     // Enhanced Text Content with flexible styling
     var EnhancedTextContent = (react_1.default.createElement("div", { className: "card-enhanced-content" },
-        mergedProps.heading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.headingSize, weight: mergedProps.headingWeight, color: mergedProps.headingColor, funcss: mergedProps.headingClass, lineHeight: mergedProps.headingLineHeight }, renderContent(mergedProps.heading))),
-        mergedProps.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.subheadingSize, weight: mergedProps.subheadingWeight, color: mergedProps.subheadingColor, funcss: "mt-1 ".concat(mergedProps.subheadingClass), lineHeight: mergedProps.subheadingLineHeight }, renderContent(mergedProps.subheading))),
-        mergedProps.content && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.contentSize, weight: mergedProps.contentWeight, color: mergedProps.contentColor, funcss: "mt-3 ".concat(mergedProps.contentClass), lineHeight: mergedProps.contentLineHeight, article: true }, renderContent(mergedProps.content)))));
+        final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize, weight: final.headingWeight, color: final.headingColor, funcss: final.headingClass, lineHeight: final.headingLineHeight }, renderContent(final.heading))),
+        final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, funcss: "mt-1 ".concat(final.subheadingClass), lineHeight: final.subheadingLineHeight }, renderContent(final.subheading))),
+        final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor, funcss: "mt-3 ".concat(final.contentClass), lineHeight: final.contentLineHeight, article: true }, renderContent(final.content)))));
     // Image Content - uses imageUrl if no image component provided
-    var ImageContent = (mergedProps.image || mergedProps.imageUrl) && (react_1.default.createElement("div", { className: "card-image-content" }, mergedProps.image ? (mergedProps.image) : (mergedProps.imageUrl && (react_1.default.createElement("img", { src: mergedProps.imageUrl, alt: mergedProps.imageAlt, className: mergedProps.imageClass, style: {
-            width: mergedProps.imageSize,
+    var ImageContent = (final.image || final.imageUrl) && (react_1.default.createElement("div", { className: "card-image-content" }, final.image ? (final.image) : (final.imageUrl && (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt, className: final.imageClass, style: {
+            width: final.imageSize,
             height: 'auto',
             objectFit: 'cover',
             borderRadius: 'inherit'
         } })))));
-    // CTA Buttons Component
-    var CTAButtons = function () {
-        var hasCTAs = mergedProps.showPrimaryCTA || mergedProps.showSecondaryCTA || mergedProps.showAccentCTA;
-        if (!hasCTAs)
-            return null;
-        return (react_1.default.createElement(Flex_1.default, { gap: mergedProps.ctaGap, justify: mergedProps.ctaFlexJustify, className: "mt-4 ".concat(mergedProps.ctaClass), wrap: "wrap", width: '100%' },
-            mergedProps.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: mergedProps.primaryButtonOutlined, onClick: function () { return mergedProps.ctaPrimaryUrl && (window.location.href = mergedProps.ctaPrimaryUrl); } }, mergedProps.ctaPrimaryText)),
-            mergedProps.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: mergedProps.secondaryButtonOutlined, onClick: function () { return mergedProps.ctaSecondaryUrl && (window.location.href = mergedProps.ctaSecondaryUrl); } }, mergedProps.ctaSecondaryText)),
-            mergedProps.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: mergedProps.accentButtonOutlined, onClick: function () { return mergedProps.ctaAccentUrl && (window.location.href = mergedProps.ctaAccentUrl); } }, mergedProps.ctaAccentText))));
-    };
     // Determine if we should use enhanced content
-    var hasEnhancedContent = mergedProps.heading || mergedProps.subheading || mergedProps.content;
-    var hasEnhancedFooter = mergedProps.showPrimaryCTA || mergedProps.showSecondaryCTA || mergedProps.showAccentCTA;
-    var hasImageContent = mergedProps.image || mergedProps.imageUrl;
-    return (react_1.default.createElement("div", __assign({ id: mergedProps.id || '', className: "\n        card \n        card_flex\n        ".concat(!image && !imageUrl ? "p" : "", "\n        ").concat(mergedProps.noGap ? 'no-gap' : '', " \n        ").concat(mergedProps.xl ? 'xl' : '', " \n        text-").concat(mergedProps.color || '', " \n        ").concat(mergedProps.bg || '', " \n        ").concat(mergedProps.funcss || '', " \n        ").concat(mergedProps.roundEdge ? 'round-edge' : '', " \n        ").concat(mergedProps.shadowless ? 'shadowless' : '', " \n        ").concat(mergedProps.flat ? 'flat' : '', " \n        ").concat(mergedProps.horizontal ? 'horizontalCard' : '', "\n        ").concat(mergedProps.responsiveMedium ? 'responsiveMedium' : '', "\n        ").concat(mergedProps.responsiveSmall ? 'responsiveSmall' : '', "\n        ").concat(mergedProps.pattern !== 'none' ? "pattern-".concat(mergedProps.pattern) : '', "\n        ").concat(mergedProps.hoverEffect !== 'none' ? "hover-".concat(mergedProps.hoverEffect) : '', "\n        ").concat(themeVariant === "standard" ? "border" : "", "\n      "), style: __assign({ width: "".concat(mergedProps.width || ''), height: "".concat(mergedProps.height || ''), minHeight: "".concat(mergedProps.minHeight || ''), minWidth: "".concat(mergedProps.minWidth || ''), maxHeight: mergedProps.maxHeight || '', maxWidth: mergedProps.maxWidth || '', margin: "".concat(mergedProps.margin || ''), padding: "".concat(mergedProps.padding || ''), background: mergedProps.gradient, opacity: mergedProps.opacity, border: mergedProps.border, position: 'relative', overflow: 'hidden' }, mergedProps.style) }, rest),
-        mergedProps.pattern !== 'none' && (react_1.default.createElement("div", { className: "card-pattern-overlay", style: {
+    var hasEnhancedContent = final.heading || final.subheading || final.content;
+    var hasEnhancedFooter = final.showPrimaryCTA || final.showSecondaryCTA || final.showAccentCTA;
+    var hasImageContent = final.image || final.imageUrl;
+    return (react_1.default.createElement("div", { id: final.id || '', className: "\n        card \n        card_flex\n        ".concat(!final.image && !final.imageUrl ? "p" : "", "\n        ").concat(final.noGap ? 'no-gap' : '', " \n        ").concat(final.xl ? 'xl' : '', " \n        text-").concat(final.color || '', " \n        ").concat(final.bg || '', " \n        ").concat(final.funcss || '', " \n        ").concat(final.roundEdge ? 'round-edge' : '', " \n        ").concat(final.shadowless ? 'shadowless' : '', " \n        ").concat(final.flat ? 'flat' : '', " \n        ").concat(final.horizontal ? 'horizontalCard' : '', "\n        ").concat(final.responsiveMedium ? 'responsiveMedium' : '', "\n        ").concat(final.responsiveSmall ? 'responsiveSmall' : '', "\n        ").concat(final.pattern !== 'none' ? "pattern-".concat(final.pattern) : '', "\n      "), style: __assign({ width: "".concat(final.width || ''), height: "".concat(final.height || ''), minHeight: "".concat(final.minHeight || ''), minWidth: "".concat(final.minWidth || ''), maxHeight: final.maxHeight || '', maxWidth: final.maxWidth || '', margin: "".concat(final.margin || ''), padding: "".concat(final.padding || ''), background: final.gradient, opacity: final.opacity, position: 'relative', overflow: 'hidden' }, final.style) },
+        final.pattern !== 'none' && (react_1.default.createElement("div", { className: "card-pattern-overlay", style: {
                 position: 'absolute',
                 top: 0,
                 left: 0,
                 right: 0,
                 bottom: 0,
                 pointerEvents: 'none',
-                opacity: mergedProps.patternOpacity,
+                opacity: final.patternOpacity,
                 mixBlendMode: 'multiply',
-                backgroundImage: mergedProps.pattern === 'grid' ?
+                backgroundImage: final.pattern === 'grid' ?
                     "linear-gradient(to right, rgba(var(--borderRgb), 1) 1px, transparent 1px),\n                 linear-gradient(to bottom, rgba(var(--borderRgb), 1) 1px, transparent 1px)" :
-                    mergedProps.pattern === 'dots' ?
+                    final.pattern === 'dots' ?
                         "radial-gradient(rgba(var(--borderRgb), 1) 1px, transparent 1px)" :
-                        mergedProps.pattern === 'diagonal' ?
+                        final.pattern === 'diagonal' ?
                             "repeating-linear-gradient(45deg, rgba(var(--borderRgb), 1), rgba(var(--borderRgb), 1) 1px, transparent 1px, transparent 10px)" :
-                            mergedProps.pattern === 'checkerboard' ?
+                            final.pattern === 'checkerboard' ?
                                 "linear-gradient(45deg, rgba(var(--borderRgb), 1) 25%, transparent 25%), \n                 linear-gradient(-45deg, rgba(var(--borderRgb), 1) 25%, transparent 25%), \n                 linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), 1) 75%), \n                 linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), 1) 75%)" :
-                                mergedProps.pattern === 'horizontal' ?
+                                final.pattern === 'horizontal' ?
                                     "linear-gradient(to bottom, rgba(var(--borderRgb), 1) 1px, transparent 1px)" :
-                                    mergedProps.pattern === 'vertical' ?
+                                    final.pattern === 'vertical' ?
                                         "linear-gradient(to right, rgba(var(--borderRgb), 1) 1px, transparent 1px)" : 'none',
-                backgroundSize: mergedProps.pattern === 'grid' ? '20px 20px' :
-                    mergedProps.pattern === 'dots' ? '10px 10px' :
-                        mergedProps.pattern === 'diagonal' ? '20px 20px' :
-                            mergedProps.pattern === 'checkerboard' ? '20px 20px' :
-                                mergedProps.pattern === 'horizontal' ? '100% 10px' :
-                                    mergedProps.pattern === 'vertical' ? '10px 100%' : 'auto'
+                backgroundSize: final.pattern === 'grid' ? '20px 20px' :
+                    final.pattern === 'dots' ? '10px 10px' :
+                        final.pattern === 'diagonal' ? '20px 20px' :
+                            final.pattern === 'checkerboard' ? '20px 20px' :
+                                final.pattern === 'horizontal' ? '100% 10px' :
+                                    final.pattern === 'vertical' ? '10px 100%' : 'auto'
             } })),
-        hasImageContent ? (ImageContent) : (mergedProps.image ? react_1.default.createElement("div", { className: "".concat(mergedProps.fab ? 'relative' : '') },
-            mergedProps.image,
+        hasImageContent ? (ImageContent) : (final.image ? react_1.default.createElement("div", { className: "".concat(final.fab ? 'relative' : '') },
+            final.image,
             " ",
-            mergedProps.fab ? mergedProps.fab : '') : ''),
+            final.fab ? final.fab : '') : ''),
         react_1.default.createElement(View_1.default, { funcss: hasImageContent ? 'p' : '' },
-            hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, EnhancedTextContent)) : (mergedProps.header && !mergedProps.horizontal ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, renderContent(mergedProps.header))) : ''),
-            mergedProps.body ?
+            hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: final.headerStyle, className: final.headerClass }, EnhancedTextContent)) : (final.header && !final.horizontal ? (react_1.default.createElement(CardHeader_1.default, { style: final.headerStyle, className: final.headerClass }, renderContent(final.header))) : ''),
+            final.body ?
                 react_1.default.createElement("div", null,
-                    mergedProps.horizontal && !hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, renderContent(mergedProps.header))) : '',
-                    react_1.default.createElement(CardBody_1.default, { style: mergedProps.bodyStyle, className: mergedProps.bodyClass }, hasEnhancedContent ? EnhancedTextContent : renderContent(mergedProps.body)),
-                    mergedProps.horizontal && !hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass }, renderContent(mergedProps.footer))) : '')
+                    final.horizontal && !hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: final.headerStyle, className: final.headerClass }, renderContent(final.header))) : '',
+                    react_1.default.createElement(CardBody_1.default, { style: final.bodyStyle, className: final.bodyClass }, hasEnhancedContent ? EnhancedTextContent : renderContent(final.body)),
+                    final.horizontal && !hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: final.footerStyle, className: final.footerClass }, renderContent(final.footer))) : '')
                 : '',
-            mergedProps.children && (react_1.default.createElement(CardBody_1.default, { style: mergedProps.bodyStyle, className: mergedProps.bodyClass }, renderContent(mergedProps.children))),
-            hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass },
-                react_1.default.createElement(CTAButtons, null))) : (mergedProps.footer && !mergedProps.horizontal ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass }, renderContent(mergedProps.footer))) : ''))));
+            final.children && (react_1.default.createElement(CardBody_1.default, { style: final.bodyStyle, className: final.bodyClass }, renderContent(final.children))),
+            hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: final.footerStyle, className: final.footerClass },
+                react_1.default.createElement(CTAButtons, null))) : (final.footer && !final.horizontal ? (react_1.default.createElement(CardFooter_1.default, { style: final.footerStyle, className: final.footerClass }, renderContent(final.footer))) : ''))));
 }

package/ui/select/Select.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 interface SelectOption {
     value: string;
-    text: string;
+    text?: string;
+    label?: string;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
 }

package/ui/select/Select.js

@@ -57,7 +57,7 @@ var Select = function (_a) {
     (0, react_1.useEffect)(function () {
         if (searchQuery) {
             var filtered = options.filter(function (option) {
-                return option.text.toLowerCase().includes(searchQuery.toLowerCase());
+                return (option.text || option.label || "").toLowerCase().includes(searchQuery.toLowerCase());
             });
             setFilteredOptions(filtered);
             setFocusedIndex(filtered.length > 0 ? 0 : -1);
@@ -208,7 +208,7 @@ var Select = function (_a) {
                 pointerEvents: 'none'
             }, tabIndex: -1 },
             !label && react_1.default.createElement("option", { value: "" }, "Select an option"),
-            options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })),
+            options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text || option.label || option.value)); })),
         react_1.default.createElement("div", { ref: triggerRef, className: "".concat(funcss, " ").concat(rounded && 'round-edge', "  ").concat(getTriggerClasses()), onClick: openDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "button", "aria-expanded": isOpen, "aria-haspopup": "listbox" },
             react_1.default.createElement("span", { className: "select-value ".concat(!selectedOption ? 'select-placeholder' : '') }, selectedOption ? selectedOption.text : label),
             react_1.default.createElement("div", { className: "select-arrow ".concat(isOpen ? 'open' : '') },

package/ui/theme/theme.js

@@ -146,7 +146,6 @@ var validateOriginAccess = function (projectId) { return __awaiter(void 0, void
                     console.log('📋 Trusted domains:', trustedDomains.map(function (d) { return d.domain; }));
                     return [2 /*return*/, false];
                 }
-                console.log('✅ Origin validation passed');
                 return [2 /*return*/, true];
             case 3:
                 error_1 = _a.sent();
@@ -174,7 +173,6 @@ var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, func
                 return [4 /*yield*/, response.json()];
             case 2:
                 data = _a.sent();
-                console.log('✅ Loaded theme from local file');
                 return [2 /*return*/, data];
             case 3: return [3 /*break*/, 5];
             case 4:
@@ -210,7 +208,6 @@ var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, v
                 return [4 /*yield*/, response.json()];
             case 3:
                 data = _a.sent();
-                console.log('✅ Loaded theme from Firebase Storage CDN');
                 return [2 /*return*/, data];
             case 4:
                 console.error('❌ Firebase Storage fetch failed:', response.status, response.statusText);
@@ -327,7 +324,6 @@ var ThemeProvider = function (_a) {
                 switch (_a.label) {
                     case 0:
                         _a.trys.push([0, 8, 9, 10]);
-                        console.log('🔄 Starting theme loading process...');
                         finalTheme = null;
                         finalVersion = null;
                         return [4 /*yield*/, loadLocalTheme()];
@@ -335,7 +331,6 @@ var ThemeProvider = function (_a) {
                         localTheme = _a.sent();
                         localVersion = (localTheme === null || localTheme === void 0 ? void 0 : localTheme.version) || 0;
                         if (!projectId) return [3 /*break*/, 6];
-                        console.log('🔑 Project ID provided, attempting CDN load with origin validation...');
                         return [4 /*yield*/, validateOriginAccess(projectId)];
                     case 2:
                         hasAccess = _a.sent();
@@ -352,7 +347,6 @@ var ThemeProvider = function (_a) {
                                 console.log("\uD83D\uDD04 Version mismatch: Local(".concat(localVersion, ") vs CDN(").concat(cdnVersion, ")"));
                                 console.log('ℹ️ Using CDN version. Please update your local funui.json file manually.');
                             }
-                            console.log('✅ Theme loaded from CDN');
                         }
                         else if (localTheme) {
                             // CDN not available but we have local theme

package/ui/video/Video.d.ts

@@ -43,7 +43,9 @@ interface VideoProps {
     rewindCss?: string;
     forwardCss?: string;
     buttonCss?: string;
+    style?: React.CSSProperties;
+    volumeStyle?: 'slider' | 'compact' | 'hover';
     variant?: string;
 }
-export default function Video({ src, poster, onDuration, onEnded, isPause, spacebarPlay, className, autoPlay, showControls, showPlayPause, showProgress, showVolume, showTime, showFullscreen, showDownload, showSeekButtons, playIcon, pauseIcon, fullscreenIcon, downloadIcon, volumeIcon, muteIcon, rewindIcon, forwardIcon, hideControlsDelay, loop, muted, seekAmount, funcss, containerCss, videoCss, controlsCss, progressCss, progressBarCss, timeCss, playCss, pauseCss, volumeCss, fullscreenCss, downloadCss, rewindCss, forwardCss, buttonCss, variant, ...rest }: VideoProps): React.JSX.Element;
+export default function Video({ src, poster, onDuration, onEnded, isPause, spacebarPlay, className, autoPlay, showControls, showPlayPause, showProgress, showVolume, showTime, showFullscreen, showDownload, showSeekButtons, playIcon, pauseIcon, fullscreenIcon, downloadIcon, volumeIcon, muteIcon, rewindIcon, forwardIcon, hideControlsDelay, loop, muted, seekAmount, funcss, containerCss, videoCss, controlsCss, progressCss, progressBarCss, timeCss, playCss, pauseCss, volumeCss, fullscreenCss, downloadCss, rewindCss, forwardCss, buttonCss, volumeStyle, style, variant, ...rest }: VideoProps): React.JSX.Element;
 export {};