funuicss 3.5.8 → 3.6.0

package/css/fun.css

@@ -31,13 +31,9 @@
   --text-10xl: 9rem;     
 
   /* Border radius */
-  --radius-sm: 0.125rem;
-  --radius: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-full: 9999px;
+  --radius-sm: 0.25rem;
+  --radius: 0.5rem;
+
 
 
 
@@ -50,8 +46,8 @@
   --z-50: 50;
 
 
-   /* Line heights matching Tailwind defaults */
-  --leading-normal: 1.5rem;      /* For base */
+
+  --leading-normal: 1.5rem;    
   --leading-xl: 1.75rem;
   --leading-2xl: 2rem;
   --leading-3xl: 2.25rem;
@@ -62,8 +58,7 @@
   --leading-8xl: 1;
   --leading-9xl: 1;
   --leading-10xl: 1;
-
-  --leading-none: 1;      
+  --leading-none: 0;      
 
 
   /* default colors */
@@ -74,15 +69,16 @@
   --raiseBackdrop:blur(20px); /* Raised element color */
   --borderRgb: 204, 204, 204; /* i want to chnage the opacity for someplaces*/
   --borderColor:rgb(var(--borderRgb)); /* Border color */
-  --lighter: #fafafa ;
+  --lighter: #F1F1F1 ;
   --hoverable: #fcfcfc ;
   --muted: #78716c;
   --dark: #121212;
-  --cardBg: var(--raiseOpaque);
+  --cardBg: var(--page-bg);
   --card: 8px 8px 10rem -2rem rgba(0, 0 , 0 , 0.1),  /* soft shadow */
            -8px -8px 4rem 0rem #F2F2F2; /* soft highlight */
   --linkColor:rgb(58, 58, 58);
 
+  
     /* Primary Colors */
     --primary: #6366f1;
     --primary50: #eef2ff;
@@ -195,14 +191,14 @@
   --smallFont: .79rem ;
   --smallerFont: .7rem;
   --navHeight: fit-content ;
-  --border: 0.1rem solid var(--borderColor);
+  --borderWidth:0.1rem;
+  --border: var(--borderWidth) solid var(--borderColor);
   --inputBorder:0.12rem;
   --input_outline_size:0.127rem;
   --borderRadius:1rem;
   --borderRadiusSmall:0.5rem;
   --borderRadiusMax:2rem;
-  --InputButtonBorderRadius:0.5rem;
-  --DefaultBorderRadius:0.5rem;
+  --radius:0.5rem;
   --hoverable: brightness(90%);
   --linkHover:(139, 185, 254;);
   --sideBarZindex:13;
@@ -211,11 +207,12 @@
   --loaderZindex:100;
   --snackBarZindex:20;
   --notificationZindex:29;
-  --inputHeight:2.4rem;
+  --inputButtonHeight:2.4rem;
   --inputPadding:0.5rem 0;
   --inputRoundedPadding:0.5rem 1rem;
   --shadowMedium:0 0.8rem 2rem 0 rgba(3, 3, 3, 0.1);
   --raised:0 0.1rem 0.2rem 0rem rgba(0, 0, 0, 0.3);
+  --spacingScale:1rem;
   /* medium Screen body */
 
 
@@ -223,6 +220,127 @@
 
 
 
+
+:root {
+  /* BUTTON VARIABLES */
+  --btn-font-size: var(--text-base);
+  --btn-font-weight: 500;
+  --btn-padding-x: var(--space-4);
+  --btn-padding-y: var(--space-2);
+  --btn-border-radius: var(--radius-lg);
+  --btn-border-width: 1px;
+  --btn-min-height: 2.5rem;
+  --btn-gap: var(--space-2); /* for icon spacing */
+  
+  /* Button States */
+  --btn-hover-scale: 1.02;
+  --btn-active-scale: 0.98;
+  --btn-disabled-opacity: 0.5;
+  
+  /* Button Variants */
+  --btn-primary-bg: var(--primary);
+  --btn-primary-text: var(--white);
+  --btn-primary-hover: var(--primary600);
+  
+  --btn-secondary-bg: var(--secondary);
+  --btn-secondary-text: var(--white);
+  --btn-secondary-hover: var(--secondary600);
+  
+  --btn-outlined-border: var(--primary);
+  --btn-outlined-text: var(--primary);
+  --btn-outlined-hover-bg: var(--primary50);
+
+  /* INPUT VARIABLES */
+  --input-font-size: var(--text-base);
+  --input-padding-x: var(--space-4);
+  --input-padding-y: var(--space-3);
+  --input-border-radius: var(--radius-lg);
+  --input-border-width: var(--inputBorder);
+  --input-border-color: var(--borderColor);
+  --input-bg: var(--white);
+  --input-text-color: var(--text-color);
+  --input-placeholder-color: var(--muted);
+  --input-min-height: var(--inputButtonHeight);
+  
+  /* Input States */
+  --input-focus-border: var(--primary);
+  --input-focus-ring: 0 0 0 3px var(--primary200);
+  --input-error-border: var(--error);
+  --input-error-ring: 0 0 0 3px var(--error200);
+  --input-disabled-bg: var(--lighter);
+  --input-disabled-opacity: 0.6;
+
+  /* CARD VARIABLES */
+  --card-bg: var(--cardBg);
+  --card-border: var(--border);
+  --card-border-radius: var(--borderRadius);
+  --card-padding: var(--space-6);
+  --card-shadow: var(--card);
+  --card-hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+
+  /* LINK VARIABLES */
+  --link-color: var(--linkColor);
+  --link-hover-color: var(--primary);
+  --link-underline: none;
+  --link-hover-underline: underline;
+  --link-font-weight: 400;
+
+  /* BADGE/TAG VARIABLES */
+  --badge-font-size: var(--text-xs);
+  --badge-padding-x: var(--space-2);
+  --badge-padding-y: var(--space-1);
+  --badge-border-radius: var(--radius-full);
+  --badge-font-weight: 500;
+
+  /* MODAL/DIALOG VARIABLES */
+  --modal-backdrop: rgba(0, 0, 0, 0.5);
+  --modal-bg: var(--white);
+  --modal-border-radius: var(--radius-2xl);
+  --modal-padding: var(--space-8);
+  --modal-max-width: 32rem;
+  --modal-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+
+  /* DROPDOWN/SELECT VARIABLES */
+  --dropdown-bg: var(--white);
+  --dropdown-border: var(--border);
+  --dropdown-border-radius: var(--radius-lg);
+  --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  --dropdown-item-padding: var(--space-3) var(--space-4);
+  --dropdown-item-hover-bg: var(--lighter);
+
+  /* SWITCH/TOGGLE VARIABLES */
+  --switch-width: 2.75rem;
+  --switch-height: 1.5rem;
+  --switch-bg: var(--borderColor);
+  --switch-active-bg: var(--primary);
+  --switch-thumb-size: 1.25rem;
+
+  /* CHECKBOX/RADIO VARIABLES */
+  --checkbox-size: 1.25rem;
+  --checkbox-border: var(--borderColor);
+  --checkbox-checked-bg: var(--primary);
+  --checkbox-checked-border: var(--primary);
+  --checkbox-border-radius: var(--radius);
+
+  /* TOOLTIP VARIABLES */
+  --tooltip-bg: var(--dark);
+  --tooltip-text: var(--white);
+  --tooltip-padding: var(--space-2) var(--space-3);
+  --tooltip-border-radius: var(--radius);
+  --tooltip-font-size: var(--text-sm);
+
+  /* AVATAR VARIABLES */
+  --avatar-size: 2.5rem;
+  --avatar-border-radius: var(--radius-full);
+  --avatar-border: 2px solid var(--white);
+
+  /* DIVIDER VARIABLES */
+  --divider-color: var(--borderColor);
+  --divider-width: 1px;
+  --divider-margin: var(--space-4) 0;
+}
+
+
 /* For WebKit browsers (Chrome, Edge, Brave, Safari) */
 ::-webkit-scrollbar {
   width: 10px;
@@ -257,6 +375,7 @@
   transition: 0.3s ease-in-out all !important;
 }
 
+
 .card, 
 .input,
 .navigation-bar , 
@@ -1844,6 +1963,7 @@ link:hover {
 
 
 
+
 input:disabled,
 select:disabled,
 button:disabled {
@@ -1861,7 +1981,8 @@ button:disabled {
 
 body {
   font-size: var(--text-base);
-  line-height: 1.5rem;
+  font-weight: var(--bd-font-weight) !important;
+  line-height: var(--leading-normal) !important;
   letter-spacing: normal;
   background-color: var(--page-bg) !important;
   color: var(--text-color) !important;
@@ -2462,7 +2583,7 @@ h6, .h6 {
   border: none;
   padding:0.7rem 1rem;
   background-color: inherit;
-  border-radius: var(--InputButtonBorderRadius);
+  border-radius: var(--radius);
   transition: all 0.5s linear; 
   cursor: pointer;
   font-size: var(--minifiedFontSize);
@@ -2471,6 +2592,7 @@ h6, .h6 {
   font-weight: 500;
   z-index: 1;
   line-height: 1 !important;
+  height: var(--inputButtonHeight);
 }
 
 
@@ -2582,7 +2704,8 @@ h6, .h6 {
 }
 .button.smallBtn {
   padding: 0.3rem 0.6rem !important;
-  font-size: var(--smallFont) ;
+  font-size: var(--smallerFont) ;
+  height: fit-content !important;
 }
 .smallBtn.roundBtn{
   padding: 0.3rem 0.8rem !important;
@@ -2623,6 +2746,7 @@ box-shadow: var(--card);
 transition: 0.3s;
 backdrop-filter: var(--raiseBackdrop) ;
 color: var(--text-color);
+border-radius: var(--borderRadius);
 }
 .card.xl{
   box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px !important;
@@ -3132,7 +3256,7 @@ color: var(--text-color);
   flex-direction: row;
   align-items: center !important;
   padding: 0.4rem 1rem;
-  border-radius: var(--DefaultBorderRadius);
+  border-radius: var(--radius);
   gap: 0.3rem;
   font-size: var(--minifiedFontSize) ;
   width: fit-content;
@@ -3378,7 +3502,7 @@ color: var(--text-color);
   border-bottom: var(--inputBorder) solid  var(--borderColor);
   color: var(--text-color); 
   font-size: var(--minifiedFontSize);
-  background-color: transparent;
+  background-color: var(--page-bg);
   font-weight: 500;
 }
 .smallInput {
@@ -3452,7 +3576,8 @@ color: var(--text-color);
 {
 outline: none !important;
 }
-input , select{height: var(--inputHeight);}
+input , select {height: var(--inputButtonHeight);   border-radius: var(--radius);}
+textarea{border-radius: var(--radius) !important; height: fit-content !important;}
 .input.flat{border-radius: 0;}
 
 .input:focus {
@@ -3470,7 +3595,6 @@ select:focus {
 }
 .input.borderedInput {
   border: var(--border);
-  border-radius: var(--InputButtonBorderRadius);
   transition: 0.1s linear;
   padding: 0.6rem 0.5rem;
 }
@@ -3522,10 +3646,8 @@ background-color: rgba(var(--borderRgb), 0.3);
 .custom-select {
   position: relative; 
   width: 100%; 
-  border-radius: var(--InputButtonBorderRadius);
-  /* FIX: Create a new stacking context and ensure proper layering */
-  z-index: 999;
-  isolation: isolate;
+  border-radius: var(--radius);
+
 }
 
 .custom-select.fullWidth {max-width: none;}
@@ -3535,9 +3657,9 @@ display: flex;
 align-items: center;
 justify-content: space-between;
  padding: var(--inputRoundedPadding);
-background: inherit;
+background: var(--page-bg);
 border: var(--border);
-border-radius: var(--InputButtonBorderRadius);
+border-radius: var(--radius);
 cursor: pointer;
 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 font-size: 14px;
@@ -3558,7 +3680,7 @@ border-bottom-right-radius: 0;
 
 .select-trigger.borderless {
 border: none !important;
-background: transparent;
+background: var(--lighter);
 }
 
 
@@ -3827,7 +3949,7 @@ padding-right: 2.5rem;
 /* Base input styles */
 .searchable-input {
   width: 100%;
-  height: var(--inputHeight);
+  height: var(--inputButtonHeight);
   padding: 0.6rem 0.8rem;
   font-size: inherit;
   line-height: 1.5;
@@ -3875,7 +3997,7 @@ padding-right: 2.5rem;
 /* Bordered input styles */
 .searchable-input.borderedInput {
   border: var(--border);
-  border-radius: var(--InputButtonBorderRadius);
+  border-radius: var(--radius);
   transition: 0.1s linear;
   padding: 0.6rem 0.5rem;
 }
@@ -4053,7 +4175,7 @@ padding-right: 2.5rem;
   background-color: var(--raiseThemes);
   backdrop-filter: var(--raiseBackdrop);
   border: var(--border);
-  border-radius: var(--InputButtonBorderRadius);
+  border-radius: var(--radius);
   box-shadow: var(--shadow);
   overflow: hidden;
   animation: dropdown-appear 0.15s ease-out;
@@ -4183,7 +4305,7 @@ padding-right: 2.5rem;
   }
   
   .searchable-input {
-    min-height: var(--inputHeight);
+    min-height: var(--inputButtonHeight);
     font-size: 1rem; /* Prevents zoom on iOS */
   }
   
@@ -5121,7 +5243,7 @@ filter: brightness(90%);
   backdrop-filter: var(--raiseBackdrop);
   color: var(--white);
   text-align: center;
-  border-radius: var(--DefaultBorderRadius);
+  border-radius: var(--radius);
   padding: 0.2rem 0.5rem !important;
   font-weight: 500 !important;
   position: absolute;
@@ -5211,7 +5333,7 @@ filter: brightness(90%);
   position: fixed !important;
   background-color: var(--dark) !important;
   color: var(--white) !important;
-  border-radius: var(--DefaultBorderRadius);
+  border-radius: var(--radius);
   max-width: 90vw;
   width: fit-content;
   max-height: 2.5rem;
@@ -6621,6 +6743,7 @@ background-color: rgba(0, 0, 0, 0.2);
 }
 
 /* --------- MARGIN --------- */
+.margin , .m{margin: var(--spacingScale) !important;}
 .m-0  { margin: var(--space-0) !important; }
 .m-1  { margin: var(--space-1) !important; }
 .m-2  { margin: var(--space-2) !important; }
@@ -6741,7 +6864,7 @@ background-color: rgba(0, 0, 0, 0.2);
 /*padding*/
 
 /* --------- PADDING --------- */
-.padding{padding:var(--padding)}
+.padding , .p{padding:var(--spacingScale)}
 .p-0  { padding: var(--space-0) !important; }
 .p-1  { padding: var(--space-1) !important; }
 .p-2  { padding: var(--space-2) !important; }
@@ -7333,12 +7456,6 @@ background-color: rgba(0, 0, 0, 0.2);
 
 
 
-
-
-
-
-
-
 /* Text Area */
 
 .ql-container {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.8",
+  "version": "3.6.0",
   "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.js

@@ -31,9 +31,11 @@ var react_1 = __importDefault(require("react"));
 var CardHeader_1 = __importDefault(require("./CardHeader"));
 var CardBody_1 = __importDefault(require("./CardBody"));
 var CardFooter_1 = __importDefault(require("./CardFooter"));
+var theme_1 = require("../theme/theme");
 function Card(_a) {
     var 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, 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"]);
-    return (react_1.default.createElement("div", __assign({ id: id || '', className: "\n      card \n      card_flex\n      ".concat(noGap ? 'no-gap' : '', " \n      ").concat(xl ? 'xl' : '', " \n      text-").concat(color || '', " \n      ").concat(bg || '', " \n      ").concat(funcss || '', " \n      ").concat(roundEdge ? 'round-edge' : '', " \n      ").concat(shadowless ? 'shadowless' : '', " \n      ").concat(flat ? 'flat' : '', " \n      ").concat(horizontal ? 'horizontalCard' : '', "\n      ").concat(responsiveMedium ? 'responsiveMedium' : '', "\n      ").concat(responsiveSmall ? 'responsiveSmall' : '', "\n      \n      "), style: __assign({ width: "".concat(width || ''), height: "".concat(height || ''), minHeight: "".concat(minHeight || ''), minWidth: "".concat(minWidth || ''), maxHeight: maxHeight || '', maxWidth: maxWidth || '', margin: "".concat(margin || ''), padding: "".concat(padding || '') }, style) }, rest),
+    var variant = (0, theme_1.useVariant)().variant;
+    return (react_1.default.createElement("div", __assign({ id: id || '', className: "\n      card \n      card_flex\n      ".concat(noGap ? 'no-gap' : '', " \n      ").concat(xl ? 'xl' : '', " \n      text-").concat(color || '', " \n      ").concat(bg || '', " \n      ").concat(funcss || '', " \n      ").concat(roundEdge ? 'round-edge' : '', " \n      ").concat(shadowless ? 'shadowless' : '', " \n      ").concat(flat ? 'flat' : '', " \n      ").concat(horizontal ? 'horizontalCard' : '', "\n      ").concat(responsiveMedium ? 'responsiveMedium' : '', "\n      ").concat(responsiveSmall ? 'responsiveSmall' : '', "\n      ").concat(variant === "standard" ? "border" : "", "\n      \n      "), style: __assign({ width: "".concat(width || ''), height: "".concat(height || ''), minHeight: "".concat(minHeight || ''), minWidth: "".concat(minWidth || ''), maxHeight: maxHeight || '', maxWidth: maxWidth || '', margin: "".concat(margin || ''), padding: "".concat(padding || '') }, style) }, rest),
         image ? react_1.default.createElement("div", { className: "".concat(fab ? 'relative' : '') },
             image,
             " ",

package/ui/input/Input.js

@@ -63,6 +63,7 @@ exports.FileInput = exports.TextareaInput = exports.SelectInput = exports.TextIn
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
 var Button_1 = __importDefault(require("../button/Button"));
+var theme_1 = require("../theme/theme");
 // Utility function to generate CSS classes
 var generateInputClasses = function (_a) {
     var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b;
@@ -89,6 +90,7 @@ 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)));
 };
 exports.TextInput = TextInput;
@@ -176,7 +178,8 @@ 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"]);
     // Handle legacy noBorder prop
-    var inputProps = __assign(__assign({}, props), { borderless: noBorder || props.borderless });
+    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 });
     if (select) {
         return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }

package/ui/select/Select.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var theme_1 = require("../theme/theme");
 var Select = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.label, label = _b === void 0 ? 'Select an option' : _b, _c = _a.options, options = _c === void 0 ? [] : _c, onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.searchable, searchable = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.borderless, borderless = _g === void 0 ? false : _g, _h = _a.rounded, rounded = _h === void 0 ? false : _h, _j = _a.flat, flat = _j === void 0 ? false : _j, _k = _a.fullWidth, fullWidth = _k === void 0 ? false : _k, _l = _a.status, status = _l === void 0 ? '' : _l, _m = _a.className, className = _m === void 0 ? '' : _m, _o = _a.funcss, funcss = _o === void 0 ? '' : _o, _p = _a.style, style = _p === void 0 ? {} : _p, _q = _a.searchAutoFocus, searchAutoFocus = _q === void 0 ? false : _q;
     var _r = (0, react_1.useState)(false), isOpen = _r[0], setIsOpen = _r[1];
@@ -44,6 +45,7 @@ var Select = function (_a) {
     var containerRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
     var searchInputRef = (0, react_1.useRef)(null);
+    var variant = (0, theme_1.useVariant)().variant;
     // Initialize selected option
     (0, react_1.useEffect)(function () {
         var initialValue = value || defaultValue;
@@ -161,8 +163,8 @@ var Select = function (_a) {
         var classes = [
             'select-trigger',
             isOpen && 'open',
-            bordered && 'bordered',
-            borderless && 'borderless',
+            variant === 'standard' ? 'bordered' : bordered && 'bordered',
+            variant === 'minimal' ? 'borderless' : borderless && 'borderless',
             flat && 'flat',
             status && status,
             disabled && 'disabled'

package/ui/sidebar/SideBar.d.ts

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 interface SideBarLink {
     uri: string;
-    icon: React.ReactNode;
+    icon?: React.ReactNode;
     text: string;
     section: string;
+    onClick?: () => void;
 }
 interface SideBarProps {
     funcss?: string;

package/ui/sidebar/SideBar.js

@@ -42,7 +42,7 @@ var react_1 = __importStar(require("react"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var Text_1 = __importDefault(require("../text/Text"));
 var navigation_1 = require("next/navigation");
-var link_1 = __importDefault(require("next/link"));
+var theme_1 = require("../theme/theme");
 function SideBar(_a) {
     var _b;
     var _c = _a.funcss, funcss = _c === void 0 ? '' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.open, open = _e === void 0 ? false : _e, header = _a.header, content = _a.content, footer = _a.footer, _f = _a.top, top = _f === void 0 ? 0 : _f, _g = _a.sidebarWidth, sidebarWidth = _g === void 0 ? 250 : _g, _h = _a.iconCSS, iconCSS = _h === void 0 ? '' : _h, _j = _a.sidebarCss, sidebarCss = _j === void 0 ? '' : _j, activeCss = _a.activeCss, _k = _a.bodyCss, bodyCss = _k === void 0 ? '' : _k, _l = _a.popIcon, popIcon = _l === void 0 ? false : _l, _m = _a.dividers, dividers = _m === void 0 ? false : _m, _o = _a.links, links = _o === void 0 ? [] : _o, children = _a.children, onClose = _a.onClose;
@@ -51,6 +51,8 @@ function SideBar(_a) {
     var _r = (0, react_1.useState)('0px'), appBarHeight = _r[0], setAppBarHeight = _r[1];
     var pathname = (0, navigation_1.usePathname)();
     var sidebarRef = (0, react_1.useRef)(null);
+    var variant = (0, theme_1.useVariant)().variant;
+    var _s = (0, react_1.useState)(""), selectedOption = _s[0], setselectedOption = _s[1];
     var updateIsMobile = (0, react_1.useCallback)(function () {
         setIsMobile(window.innerWidth <= 992);
     }, []);
@@ -110,15 +112,22 @@ function SideBar(_a) {
                     var section = _a[0], sectionLinks = _a[1];
                     return (react_1.default.createElement("div", { key: section, className: "sidebar-section ".concat(dividers ? "bt" : "", " pt-2 pb-2") },
                         react_1.default.createElement(Text_1.default, { size: "sm", funcss: "opacity-6 p-1 pl-2 pr-2" }, section),
-                        sectionLinks.map(function (link) {
-                            var isActive = pathname === link.uri;
-                            return (react_1.default.createElement(link_1.default, { onClick: function () {
+                        sectionLinks.map(function (link, index) {
+                            var isActive = link.onClick ? index.toString() === selectedOption : pathname === link.uri;
+                            return (react_1.default.createElement("div", { onClick: function () {
                                     if (isMobile) {
                                         handleClose();
                                     }
-                                }, key: link.uri, href: link.uri },
-                                react_1.default.createElement("div", { className: "p-1 pl-2 pr-2 sidebar-link  ".concat(isActive ? "primary50 outline-primary200 ".concat(activeCss || '') : 'hoverable') },
-                                    react_1.default.createElement("span", { className: "".concat(iconCSS || '', " ").concat(popIcon ? "p-1 border lighter central" : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon),
+                                    if (link === null || link === void 0 ? void 0 : link.onClick) {
+                                        link.onClick();
+                                        setselectedOption(index.toString());
+                                    }
+                                    else {
+                                        window.location.href = link.uri;
+                                    }
+                                }, key: link.uri },
+                                react_1.default.createElement("div", { className: "p-1 pl-2 pr-2 button sidebar-link  ".concat(isActive ? "primary  ".concat(activeCss || '') : 'hoverable') },
+                                    react_1.default.createElement("span", { className: "".concat(iconCSS || '', " \n                            ").concat((variant === 'standard' || popIcon) ? "p-1  ".concat(isActive ? "primary" : "lighter border", " central") : (variant === "minimal" && !isActive) ? "p1 central lighter " : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon),
                                     react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
                         })));
                 }))),

package/ui/text/Text.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var pi_1 = require("react-icons/pi");
+var getCssVariable_1 = require("../../utils/getCssVariable");
 var Text = function (_a) {
     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, _b = _a.size, size = _b === void 0 ? 'base' : _b, // default
     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", "size"]);
@@ -38,7 +39,8 @@ var Text = function (_a) {
                     size === 'h5' ? "h5" :
                         size === 'h6' ? "h6" :
                             "text-".concat(size));
-    var mergedStyles = __assign(__assign({ display: block ? 'block' : undefined, fontWeight: bold ? 'bold' : weight ? weight : undefined, lineHeight: lineHeight, letterSpacing: letterSpacing, textTransform: textTransform, textDecoration: textDecoration, fontFamily: fontFamily, textShadow: textShadow, textAlign: textAlign, whiteSpace: whiteSpace, wordBreak: wordBreak, transform: customStyles === null || customStyles === void 0 ? void 0 : customStyles.transform }, customStyles), (truncate
+    var bdFontWeight = (0, getCssVariable_1.getCssVariableValue)('bd-font-weight');
+    var mergedStyles = __assign(__assign({ display: block ? 'block' : undefined, fontWeight: bold ? 'bold' : weight ? weight : Number(bdFontWeight), lineHeight: lineHeight, letterSpacing: letterSpacing, textTransform: textTransform, textDecoration: textDecoration, fontFamily: fontFamily, textShadow: textShadow, textAlign: textAlign, whiteSpace: whiteSpace, wordBreak: wordBreak, transform: customStyles === null || customStyles === void 0 ? void 0 : customStyles.transform }, customStyles), (truncate
         ? {
             display: '-webkit-box',
             WebkitBoxOrient: 'vertical',

package/ui/theme/theme.d.ts

@@ -1,7 +1,15 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+export type ThemeVariant = 'standard' | 'minimal';
+export type ThemeName = 'light' | 'dark' | 'dark-blue' | 'light-gray' | 'pastel-green' | 'warm-orange' | 'frosted-glass' | 'midnight-purple' | 'cyber-metal';
 interface ThemeProviderProps {
-    theme: 'light' | 'dark' | 'dark-blue' | 'light-gray' | 'pastel-green' | 'warm-orange' | 'frosted-glass' | 'midnight-purple' | 'cyber-metal';
-    children: React.ReactNode;
+    theme: ThemeName;
+    projectId: string;
+    children: ReactNode;
 }
+interface VariantContextType {
+    variant: ThemeVariant;
+    setVariant: React.Dispatch<React.SetStateAction<ThemeVariant>>;
+}
+export declare const useVariant: () => VariantContextType;
 declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export default ThemeProvider;

package/ui/theme/theme.js

@@ -33,24 +33,43 @@ 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 VariantContext = (0, react_1.createContext)({
+    variant: 'standard',
+    setVariant: function () {
+        /** noop */
+    },
+});
+var useVariant = function () { return (0, react_1.useContext)(VariantContext); };
+exports.useVariant = useVariant;
+/* -------------------------------------------------------------------------- */
+/*                                COMPONENT                                   */
+/* -------------------------------------------------------------------------- */
 var ThemeProvider = function (_a) {
-    var theme = _a.theme, children = _a.children;
+    var theme = _a.theme, children = _a.children, projectId = _a.projectId;
+    var _b = (0, react_1.useState)('standard'), variant = _b[0], setVariant = _b[1];
+    /* -------------------------- Apply base theme --------------------------- */
     (0, react_1.useEffect)(function () {
         var root = document.documentElement;
         var selectedTheme = themes_1.themes[theme] || themes_1.themes.light;
-        // Apply selected theme variables
         Object.entries(selectedTheme).forEach(function (_a) {
             var key = _a[0], value = _a[1];
             root.style.setProperty(key, value);
         });
-        // Apply darkened RGBA versions (for dark themes only)
-        if (theme === 'dark' || theme === 'dark-blue' || theme === 'midnight-purple' || theme === 'cyber-metal') {
+        if (['dark', 'dark-blue', 'midnight-purple', 'cyber-metal'].includes(theme)) {
             themes_1.colorVarsToDarken.forEach(function (varName) {
-                var original = getComputedStyle(root).getPropertyValue(varName).trim();
+                var original = getComputedStyle(root)
+                    .getPropertyValue(varName)
+                    .trim();
                 if (original) {
                     var darkAmount = (0, darkenUtils_1.getDarkenAmount)(varName);
                     var rgba = (0, darkenUtils_1.darkenToRgba)(original, darkAmount, 0.9);
@@ -59,10 +78,35 @@ var ThemeProvider = function (_a) {
             });
         }
     }, [theme]);
-    return (react_1.default.createElement("div", { className: "theme-".concat(theme), style: {
-            backgroundColor: 'var(--page-bg)',
-            color: 'var(--text-color)',
-            minHeight: '100vh',
-        } }, children));
+    /* ---------------------- Real-time Firestore sync ----------------------- */
+    (0, react_1.useEffect)(function () {
+        if (!projectId)
+            return;
+        var root = document.documentElement;
+        var docRef = (0, firestore_1.doc)(Firebase_1.default, 'Projects', projectId);
+        var unsubscribe = (0, firestore_1.onSnapshot)(docRef, function (snapshot) {
+            var _a;
+            var data = snapshot.data();
+            if (!data)
+                return;
+            var config = (_a = data.theme_config) !== null && _a !== void 0 ? _a : {};
+            var newVariant = data.default_variation || 'standard';
+            setVariant(newVariant);
+            Object.entries(config).forEach(function (_a) {
+                var key = _a[0], value = _a[1];
+                root.style.setProperty(key.startsWith('--') ? key : "--".concat(key), String(value));
+            });
+        }, function (error) {
+            console.error('Realtime theme listener error:', error);
+        });
+        return function () { return unsubscribe(); };
+    }, [projectId]);
+    /* ------------------------------- Render ------------------------------- */
+    return (react_1.default.createElement(VariantContext.Provider, { value: { variant: variant, setVariant: setVariant } },
+        react_1.default.createElement("div", { className: "theme-".concat(theme), style: {
+                backgroundColor: 'var(--page-bg)',
+                color: 'var(--text-color)',
+                minHeight: '100vh',
+            } }, children)));
 };
 exports.default = ThemeProvider;

package/utils/FireStore.d.ts

@@ -0,0 +1,10 @@
+export namespace Requests {
+    export function getDocs(collectionName: any, docs_limit: any, extraQueries?: any[]): Promise<any>;
+    export function getDoc(collectionName: any, id: any): Promise<any>;
+    export function query(collectionName: any, queriesArr: any[] | undefined, docs_limit: any): Promise<any>;
+    export function add_document(cName: any, data: any, dbCollection?: string): Promise<any>;
+    export function set_doc(cName: any, doc_id: any, data: any): Promise<any>;
+    export function update(cName: any, doc_id: any, data: any): Promise<any>;
+    export function _delete(cName: any, doc_id: any): Promise<any>;
+    export { _delete as delete };
+}

package/utils/FireStore.js

@@ -0,0 +1,273 @@
+"use strict";
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Requests = void 0;
+var Firebase_1 = __importDefault(require("./Firebase"));
+var firestore_1 = require("firebase/firestore");
+// ⏳ Convert timestamp to "x time ago"
+function timeAgo(timestamp) {
+    if (!timestamp)
+        return "";
+    var now = new Date();
+    var date = timestamp.toDate ? timestamp.toDate() : new Date(timestamp);
+    var seconds = Math.floor((now - date) / 1000);
+    var intervals = {
+        year: 31536000,
+        month: 2592000,
+        week: 604800,
+        day: 86400,
+        hour: 3600,
+        minute: 60,
+        second: 1,
+    };
+    for (var key in intervals) {
+        var value = intervals[key];
+        if (seconds >= value) {
+            var count = Math.floor(seconds / value);
+            return "".concat(count, " ").concat(key).concat(count > 1 ? "s" : "", " ago");
+        }
+    }
+    return "just now";
+}
+// ⏳ Apply timeAgo to createdAt & updatedAt fields
+function formatTimestamps(docData) {
+    return __assign(__assign({}, docData), { createdAt: docData.createdAt ? timeAgo(docData.createdAt) : null, updatedAt: docData.updatedAt ? timeAgo(docData.updatedAt) : null });
+}
+exports.Requests = {
+    // 📥 Get all docs
+    getDocs: function (collectionName, docs_limit, extraQueries) {
+        if (extraQueries === void 0) { extraQueries = []; }
+        return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
+            var Resourceq, snapshot, data, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        Resourceq = firestore_1.query.apply(void 0, __spreadArray(__spreadArray([(0, firestore_1.collection)(Firebase_1.default, collectionName)], extraQueries, false), (docs_limit ? [(0, firestore_1.limit)(docs_limit)] : []), false));
+                        return [4 /*yield*/, (0, firestore_1.getDocs)(Resourceq)];
+                    case 1:
+                        snapshot = _a.sent();
+                        if (snapshot.docs.length > 0) {
+                            data = snapshot.docs.map(function (d) { return (__assign({ id: d.id }, formatTimestamps(d.data()))); });
+                            resolve(data);
+                        }
+                        else {
+                            resolve([]);
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        err_1 = _a.sent();
+                        reject("Error fetching documents: ".concat(err_1.message));
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); });
+    },
+    // 📥 Get single doc
+    getDoc: function (collectionName, id) {
+        return new Promise(function (resolve, reject) {
+            (0, firestore_1.onSnapshot)((0, firestore_1.doc)(Firebase_1.default, collectionName, id), function (gdoc) {
+                var data = gdoc.data();
+                if (data) {
+                    resolve({ data: formatTimestamps(data), id: gdoc.id });
+                }
+                else {
+                    resolve({ message: "No data found", data: "" });
+                }
+            }, function (err) { return reject("Error fetching document: ".concat(err.message)); });
+        });
+    },
+    // 🔎 Flexible query (add more queries)
+    query: function (collectionName, queriesArr, docs_limit) {
+        if (queriesArr === void 0) { queriesArr = []; }
+        return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
+            var Resourceq, snapshot, data, err_2;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        Resourceq = firestore_1.query.apply(void 0, __spreadArray(__spreadArray([(0, firestore_1.collection)(Firebase_1.default, collectionName)], queriesArr, false), (docs_limit ? [(0, firestore_1.limit)(docs_limit)] : []), false));
+                        return [4 /*yield*/, (0, firestore_1.getDocs)(Resourceq)];
+                    case 1:
+                        snapshot = _a.sent();
+                        if (snapshot.docs.length > 0) {
+                            data = snapshot.docs.map(function (d) { return (__assign({ id: d.id }, formatTimestamps(d.data()))); });
+                            resolve({ data: data });
+                        }
+                        else {
+                            resolve({ message: "No data", data: [] });
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        err_2 = _a.sent();
+                        reject("Error querying documents: ".concat(err_2.message));
+                        console.log(err_2);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); });
+    },
+    // ➕ Add new doc with createdAt + updatedAt
+    add_document: function (cName, data, dbCollection) {
+        if (dbCollection === void 0) { dbCollection = ''; }
+        return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
+            var docRef, err_3;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4 /*yield*/, (0, firestore_1.addDoc)((0, firestore_1.collection)(Firebase_1.default, cName), __assign(__assign({}, data), { createdAt: (0, firestore_1.serverTimestamp)(), updatedAt: (0, firestore_1.serverTimestamp)() }))];
+                    case 1:
+                        docRef = _a.sent();
+                        // Then update the same doc with its ID
+                        return [4 /*yield*/, (0, firestore_1.updateDoc)(docRef, dbCollection === 'users' ? { uid: docRef.id } : { id: docRef.id })];
+                    case 2:
+                        // Then update the same doc with its ID
+                        _a.sent();
+                        resolve(docRef);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        err_3 = _a.sent();
+                        reject("Error adding document: ".concat(err_3.message));
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); });
+    },
+    // ✍️ Set/merge doc with updatedAt
+    set_doc: function (cName, doc_id, data) {
+        return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
+            var res, err_4;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, (0, firestore_1.setDoc)((0, firestore_1.doc)(Firebase_1.default, cName, doc_id), __assign(__assign({}, data), { updatedAt: (0, firestore_1.serverTimestamp)(), createdAt: (0, firestore_1.serverTimestamp)() }), { merge: true })];
+                    case 1:
+                        res = _a.sent();
+                        resolve(res);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        err_4 = _a.sent();
+                        reject("Error setting document: ".concat(err_4.message));
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); });
+    },
+    // 🔄 Update doc with updatedAt
+    update: function (cName, doc_id, data) {
+        return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
+            var res, err_5;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, (0, firestore_1.updateDoc)((0, firestore_1.doc)(Firebase_1.default, cName, doc_id), __assign(__assign({}, data), { updatedAt: (0, firestore_1.serverTimestamp)() }))];
+                    case 1:
+                        res = _a.sent();
+                        resolve(res);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        err_5 = _a.sent();
+                        reject("Error updating document: ".concat(err_5.message));
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); });
+    },
+    // ❌ Delete doc
+    delete: function (cName, doc_id) {
+        return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
+            var err_6;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, (0, firestore_1.deleteDoc)((0, firestore_1.doc)(Firebase_1.default, cName, doc_id))];
+                    case 1:
+                        _a.sent();
+                        resolve("Document ".concat(doc_id, " successfully deleted"));
+                        return [3 /*break*/, 3];
+                    case 2:
+                        err_6 = _a.sent();
+                        reject("Error deleting document: ".concat(err_6.message));
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); });
+    },
+};
+// // Add document
+// Requests.add_document("users", { name: "John Doe", email: "john@example.com" });
+// // Update document
+// Requests.update("users", "docID123", { name: "Jane Doe" });
+// // Query with multiple conditions
+// Requests.query("users", [
+//   where("status", "==", "active"),
+//   where("level", "==", "admin"),
+// ], 10).then(res => console.log(res.data));

package/utils/Firebase.d.ts

@@ -0,0 +1,2 @@
+export default db;
+declare const db: import("@firebase/firestore").Firestore;

package/utils/Firebase.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var app_1 = require("firebase/app");
+var firestore_1 = require("firebase/firestore");
+var firebaseConfig = {
+    apiKey: "AIzaSyBi6mv2y56aKgJOv-MTHhwL1OaKnXlRNxE",
+    authDomain: "funui-4bcd1.firebaseapp.com",
+    projectId: "funui-4bcd1",
+    storageBucket: "funui-4bcd1.firebasestorage.app",
+    messagingSenderId: "321671406212",
+    appId: "1:321671406212:web:344738ff231449368f18d1",
+    measurementId: "G-PDMZ8J0R37",
+};
+// ✅ Use a unique name to avoid conflicts (important for your UI framework)
+var app = (0, app_1.getApps)().find(function (a) { return a.name === "FRAMEWORK_APP"; })
+    ? (0, app_1.getApp)("FRAMEWORK_APP")
+    : (0, app_1.initializeApp)(firebaseConfig, "FRAMEWORK_APP");
+// Export Firestore instance from this specific app
+var db = (0, firestore_1.getFirestore)(app);
+exports.default = db;

package/utils/applyThemeConfig.d.ts

@@ -0,0 +1,8 @@
+export interface ThemeConfig {
+    colors?: Record<string, string>;
+}
+/**
+ * Applies color variables from a theme config to the :root element.
+ * Example: { primary: "#8B5CF6" } → --color-primary: #8B5CF6
+ */
+export declare const applyThemeConfig: (themeConfig: ThemeConfig) => void;

package/utils/applyThemeConfig.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyThemeConfig = void 0;
+/**
+ * Applies color variables from a theme config to the :root element.
+ * Example: { primary: "#8B5CF6" } → --color-primary: #8B5CF6
+ */
+var applyThemeConfig = function (themeConfig) {
+    if (typeof window === "undefined")
+        return; // For SSR safety
+    var root = document.documentElement;
+    var colors = themeConfig.colors || {};
+    Object.entries(colors).forEach(function (_a) {
+        var key = _a[0], value = _a[1];
+        var varName = "--".concat(key);
+        root.style.setProperty(varName, String(value));
+    });
+};
+exports.applyThemeConfig = applyThemeConfig;