funuicss 3.6.4 → 3.6.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.6.4",
+  "version": "3.6.6",
   "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/input/Input.d.ts

@@ -15,6 +15,9 @@ interface BaseInputProps {
     rounded?: boolean;
     leftRounded?: boolean;
     rightRounded?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    iconicBg?: string;
 }
 interface SelectOption {
     value: string;

package/ui/input/Input.js

@@ -75,9 +75,23 @@ var generateInputClasses = function (_a) {
     var borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : '';
     return "\n    ".concat(statusClass, "\n    ").concat(roundedClass, "\n    ").concat(bgClass, "\n    ").concat(funcss || '', "\n    ").concat(flatClass, "\n    ").concat(cornerClass, "\n    ").concat(borderClass, "\n    ").concat(additionalClasses, "\n    input\n  ").trim().replace(/\s+/g, ' ');
 };
+// Iconic Input Wrapper Component
+var IconicInputWrapper = function (_a) {
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, funcss = _a.funcss, children = _a.children;
+    if (!startIcon && !endIcon) {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+    return (react_1.default.createElement("div", { className: "icon-container ".concat(funcss || '') },
+        startIcon && (react_1.default.createElement("div", { className: "leftIcon", style: {
+                backgroundColor: iconicBg || '',
+                border: iconicBg ? "0.1rem ".concat(iconicBg, " solid") : '',
+            } }, startIcon)),
+        react_1.default.createElement("div", { className: "icon_input_wrapper ".concat(startIcon ? 'lefticon' : '', " ").concat(endIcon ? 'righticon' : '') }, children),
+        endIcon && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, endIcon))));
+};
 // Text Input Component
 var TextInput = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, _b = _a.type, type = _b === void 0 ? 'text' : _b, label = _a.label, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "type", "label"]);
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "type", "label"]);
     var className = generateInputClasses({
         status: status,
         rounded: rounded,
@@ -90,13 +104,13 @@ var TextInput = function (_a) {
         borderless: borderless
     });
     var style = fullWidth ? { width: '100%' } : undefined;
-    "";
-    return (react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, style: style, value: value }, rest)));
+    var inputElement = (react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, style: style, value: value }, rest)));
+    return (react_1.default.createElement(IconicInputWrapper, { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, funcss: funcss }, inputElement));
 };
 exports.TextInput = TextInput;
 // Select Component
 var SelectInput = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, _b = _a.options, options = _b === void 0 ? [] : _b, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "options"]);
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "options"]);
     var className = generateInputClasses({
         status: status,
         rounded: rounded,
@@ -109,12 +123,13 @@ var SelectInput = function (_a) {
         borderless: borderless
     });
     var style = fullWidth ? { width: '100%' } : undefined;
-    return (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, value: value, style: style }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
+    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, value: value, style: style }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
+    return (react_1.default.createElement(IconicInputWrapper, { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, funcss: funcss }, selectElement));
 };
 exports.SelectInput = SelectInput;
 // Textarea Component
 var TextareaInput = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, label = _a.label, _b = _a.rows, rows = _b === void 0 ? 2 : _b, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "label", "rows"]);
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, label = _a.label, _b = _a.rows, rows = _b === void 0 ? 2 : _b, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "rows"]);
     var className = generateInputClasses({
         status: status,
         rounded: rounded,
@@ -127,12 +142,13 @@ var TextareaInput = function (_a) {
         borderless: borderless
     });
     var style = fullWidth ? { width: '100%' } : undefined;
-    return (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, placeholder: label, style: style, value: value, rows: rows }, rest)));
+    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, placeholder: label, style: style, value: value, rows: rows }, rest)));
+    return (react_1.default.createElement(IconicInputWrapper, { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, funcss: funcss }, textareaElement));
 };
 exports.TextareaInput = TextareaInput;
 // File Input Component
 var FileInput = function (_a) {
-    var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "label", "icon", "extra", "button", "btn", "value"]);
+    var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "icon", "extra", "button", "btn", "value"]);
     var _d = (0, react_1.useState)(''), fileName = _d[0], setFileName = _d[1];
     var handleChange = function (e) {
         var _a;
@@ -157,11 +173,12 @@ var FileInput = function (_a) {
             additionalClasses: 'filedInput'
         });
         var style = fullWidth ? { width: '100%' } : undefined;
-        return (react_1.default.createElement("div", { className: "fileInput" },
+        var fileInputElement = (react_1.default.createElement("div", { className: "fileInput" },
             button || (react_1.default.createElement(Button_1.default, { funcss: funcss, startIcon: icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: "primary", fullWidth: true, raised: true }, fileName || label)),
             react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: handleChange, type: "file", style: style, value: value }, rest))));
+        return (react_1.default.createElement(IconicInputWrapper, { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, funcss: funcss }, fileInputElement));
     }
-    return (react_1.default.createElement("div", { className: "_upload_container" },
+    var uploadElement = (react_1.default.createElement("div", { className: "_upload_container" },
         react_1.default.createElement("label", { htmlFor: id, className: "_upload_label" },
             react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null)),
             react_1.default.createElement("div", { className: "_upload_text", style: {
@@ -173,13 +190,14 @@ var FileInput = function (_a) {
                 } }, fileName || label),
             extra && react_1.default.createElement("div", { className: "text-small opacity-3" }, extra)),
         react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest))));
+    return (react_1.default.createElement(IconicInputWrapper, { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, funcss: funcss }, uploadElement));
 };
 exports.FileInput = FileInput;
 var Input = function (_a) {
-    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, props = __rest(_a, ["select", "multiline", "file", "noBorder"]);
+    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "iconicBg"]);
     // Handle legacy noBorder prop
     var variant = (0, theme_1.useVariant)().variant;
-    var inputProps = __assign(__assign({}, props), { bordered: variant === 'standard' ? true : props.bordered, borderless: variant === 'minimal' ? true : noBorder || props.borderless });
+    var inputProps = __assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, bordered: variant === 'standard' ? true : props.bordered, borderless: variant === 'minimal' ? true : noBorder || props.borderless });
     if (select) {
         return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }

package/ui/theme/theme.js

@@ -33,16 +33,16 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVariant = void 0;
 var react_1 = __importStar(require("react"));
 var themes_1 = require("./themes");
 var darkenUtils_1 = require("./darkenUtils");
 var firestore_1 = require("firebase/firestore");
-var Firebase_1 = __importDefault(require("../../utils/Firebase"));
+var db;
+if (typeof window !== 'undefined') {
+    db = require('../../utils/Firebase').default;
+}
 var VariantContext = (0, react_1.createContext)({
     variant: 'standard',
     setVariant: function () {
@@ -57,6 +57,7 @@ exports.useVariant = useVariant;
 var ThemeProvider = function (_a) {
     var theme = _a.theme, children = _a.children, projectId = _a.projectId;
     var _b = (0, react_1.useState)('standard'), variant = _b[0], setVariant = _b[1];
+    var _c = (0, react_1.useState)(false), projectLoaded = _c[0], setprojectLoaded = _c[1];
     /* -------------------------- Apply base theme --------------------------- */
     (0, react_1.useEffect)(function () {
         var root = document.documentElement;
@@ -80,12 +81,12 @@ var ThemeProvider = function (_a) {
     }, [theme]);
     /* ---------------------- Real-time Firestore sync ----------------------- */
     (0, react_1.useEffect)(function () {
-        if (typeof window === 'undefined')
-            return;
-        if (!projectId)
+        if (typeof window === 'undefined' || !projectId) {
+            setprojectLoaded(true);
             return;
+        }
         var root = document.documentElement;
-        var docRef = (0, firestore_1.doc)(Firebase_1.default, 'Projects', projectId);
+        var docRef = (0, firestore_1.doc)(db, 'Projects', projectId);
         var unsubscribe = (0, firestore_1.onSnapshot)(docRef, function (snapshot) {
             var _a;
             var data = snapshot.data();
@@ -98,8 +99,10 @@ var ThemeProvider = function (_a) {
                 var key = _a[0], value = _a[1];
                 root.style.setProperty(key.startsWith('--') ? key : "--".concat(key), String(value));
             });
+            setprojectLoaded(true);
         }, function (error) {
             console.error('Realtime theme listener error:', error);
+            setprojectLoaded(true);
         });
         return function () { return unsubscribe(); };
     }, [projectId]);
@@ -109,6 +112,6 @@ var ThemeProvider = function (_a) {
                 backgroundColor: 'var(--page-bg)',
                 color: 'var(--text-color)',
                 minHeight: '100vh',
-            } }, children)));
+            } }, projectLoaded ? children : "")));
 };
 exports.default = ThemeProvider;