funuicss 3.6.17 → 3.6.18

package/cors.json

@@ -0,0 +1,8 @@
+[
+  {
+    "origin": ["*"],
+    "method": ["GET", "HEAD", "DELETE", "POST", "PUT"],
+    "maxAgeSeconds": 3600,
+    "responseHeader": ["Content-Type"]
+  }
+]

package/css/fun.css

@@ -220,126 +220,167 @@
 
 
 
+/* fonts scalling */
 :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 */
+  /* ===== Font Scale - Perfect Fourth (1.333 ratio) ===== */
+  --font-size-smaller: 0.75rem;    /* 12px */
+  --font-size-small: 0.875rem;     /* 14px */
+  --font-size-base: 1rem;          /* 16px - Base */
+  --font-size-big: 1.25rem;        /* 20px */
+  --font-size-bigger: 1.5rem;      /* 24px */
+  --font-size-h6: 1rem;            /* 16px */
+  --font-size-h5: 1.25rem;         /* 20px */
+  --font-size-h4: 1.5rem;          /* 24px */
+  --font-size-h3: 1.75rem;         /* 28px */
+  --font-size-h2: 2rem;            /* 32px */
+  --font-size-h1: 2.5rem;          /* 40px */
+  --font-size-jumbo: 3rem;         /* 48px */
+
+  /* ===== Line Height Scale ===== */
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  --line-height-loose: 2;
+
+  /* Element-specific line heights */
+  --line-height-smaller: var(--line-height-normal);
+  --line-height-small: var(--line-height-normal);
+  --line-height-body: var(--line-height-normal);
+  --line-height-big: var(--line-height-normal);
+  --line-height-bigger: var(--line-height-normal);
+  --line-height-h6: var(--line-height-normal);
+  --line-height-h5: var(--line-height-normal);
+  --line-height-h4: var(--line-height-normal);
+  --line-height-h3: var(--line-height-normal);
+  --line-height-h2: var(--line-height-tight);
+  --line-height-h1: var(--line-height-tight);
+  --line-height-jumbo: var(--line-height-tight);
+
+  /* ===== Font Weights ===== */
+  --font-weight-thin: 100;
+  --font-weight-extra-light: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extra-bold: 800;
+  --font-weight-black: 900;
+
+  /* Element-specific font weights */
+  --font-weight-smaller: var(--font-weight-normal);
+  --font-weight-small: var(--font-weight-normal);
+  --font-weight-body: var(--font-weight-normal);
+  --font-weight-big: var(--font-weight-normal);
+  --font-weight-bigger: var(--font-weight-normal);
+  --font-weight-h6: var(--font-weight-medium);
+  --font-weight-h5: var(--font-weight-medium);
+  --font-weight-h4: var(--font-weight-medium);
+  --font-weight-h3: var(--font-weight-semibold);
+  --font-weight-h2: var(--font-weight-semibold);
+  --font-weight-h1: var(--font-weight-bold);
+  --font-weight-jumbo: var(--font-weight-bold);
+
+  /* ===== Text Decoration ===== */
+  --text-decoration-none: none;
+  --text-decoration-underline: underline;
+  --text-decoration-overline: overline;
+  --text-decoration-line-through: line-through;
+
+  /* Element-specific text decoration */
+  --text-decoration-smaller: var(--text-decoration-none);
+  --text-decoration-small: var(--text-decoration-none);
+  --text-decoration-body: var(--text-decoration-none);
+  --text-decoration-big: var(--text-decoration-none);
+  --text-decoration-bigger: var(--text-decoration-none);
+  --text-decoration-h6: var(--text-decoration-none);
+  --text-decoration-h5: var(--text-decoration-none);
+  --text-decoration-h4: var(--text-decoration-none);
+  --text-decoration-h3: var(--text-decoration-none);
+  --text-decoration-h2: var(--text-decoration-none);
+  --text-decoration-h1: var(--text-decoration-none);
+  --text-decoration-jumbo: var(--text-decoration-none);
+
+  /* ===== Font Style ===== */
+  --font-style-normal: normal;
+  --font-style-italic: italic;
+  --font-style-oblique: oblique;
+
+  /* Element-specific font styles */
+  --font-style-smaller: var(--font-style-normal);
+  --font-style-small: var(--font-style-normal);
+  --font-style-body: var(--font-style-normal);
+  --font-style-big: var(--font-style-normal);
+  --font-style-bigger: var(--font-style-normal);
+  --font-style-h6: var(--font-style-normal);
+  --font-style-h5: var(--font-style-normal);
+  --font-style-h4: var(--font-style-normal);
+  --font-style-h3: var(--font-style-normal);
+  --font-style-h2: var(--font-style-normal);
+  --font-style-h1: var(--font-style-normal);
+  --font-style-jumbo: var(--font-style-normal);
+
+  /* ===== Text Transform ===== */
+  --text-transform-none: none;
+  --text-transform-uppercase: uppercase;
+  --text-transform-lowercase: lowercase;
+  --text-transform-capitalize: capitalize;
+
+  /* Element-specific text transforms */
+  --text-transform-smaller: var(--text-transform-none);
+  --text-transform-small: var(--text-transform-none);
+  --text-transform-body: var(--text-transform-none);
+  --text-transform-big: var(--text-transform-none);
+  --text-transform-bigger: var(--text-transform-none);
+  --text-transform-h6: var(--text-transform-none);
+  --text-transform-h5: var(--text-transform-none);
+  --text-transform-h4: var(--text-transform-none);
+  --text-transform-h3: var(--text-transform-none);
+  --text-transform-h2: var(--text-transform-none);
+  --text-transform-h1: var(--text-transform-none);
+  --text-transform-jumbo: var(--text-transform-none);
+
+  /* ===== Letter Spacing ===== */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  /* Element-specific letter spacing */
+  --letter-spacing-smaller: var(--letter-spacing-normal);
+  --letter-spacing-small: var(--letter-spacing-normal);
+  --letter-spacing-body: var(--letter-spacing-normal);
+  --letter-spacing-big: var(--letter-spacing-normal);
+  --letter-spacing-bigger: var(--letter-spacing-normal);
+  --letter-spacing-h6: var(--letter-spacing-normal);
+  --letter-spacing-h5: var(--letter-spacing-normal);
+  --letter-spacing-h4: var(--letter-spacing-normal);
+  --letter-spacing-h3: var(--letter-spacing-normal);
+  --letter-spacing-h2: var(--letter-spacing-tight);
+  --letter-spacing-h1: var(--letter-spacing-tight);
+  --letter-spacing-jumbo: var(--letter-spacing-tight);
+
+  /* ===== Word Spacing ===== */
+  --word-spacing-tight: -0.05em;
+  --word-spacing-normal: 0em;
+  --word-spacing-wide: 0.05em;
+  --word-spacing-wider: 0.1em;
+
+  /* ===== Responsive Typography Scales ===== */
+  /* Mobile-first scale (base) */
+  --scale-mobile: 1.2;
   
-  /* Button States */
-  --btn-hover-scale: 1.02;
-  --btn-active-scale: 0.98;
-  --btn-disabled-opacity: 0.5;
+  /* Tablet scale */
+  --scale-tablet: 1.25;
   
-  /* 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;
+  /* Desktop scale */
+  --scale-desktop: 1.333;
 }
 
 
+
 /* For WebKit browsers (Chrome, Edge, Brave, Safari) */
 ::-webkit-scrollbar {
   width: 10px;
@@ -580,23 +621,34 @@ body {
     font-weight: 900;
 }
 
-/* Additional responsive/animated sizes */
 .text-big {
-  font-size: calc(1.375rem + 2vw);     /* Responsive scaling */
-  line-height: 80%;
-    font-weight: 900;
+  font-size: var(--font-size-big);
+  line-height: var(--line-height-big);
+  font-weight: var(--font-weight-big);
+  font-style: var(--font-style-big);
+  text-decoration: var(--text-decoration-big);
+  text-transform: var(--text-transform-big);
+  letter-spacing: var(--letter-spacing-big);
 }
 
 .text-bigger {
-  font-size: calc(1.375rem + 2.5vw);
-  line-height: 80% ;
-    font-weight: 900;
+  font-size: var(--font-size-bigger);
+  line-height: var(--line-height-bigger);
+  font-weight: var(--font-weight-bigger);
+  font-style: var(--font-style-bigger);
+  text-decoration: var(--text-decoration-bigger);
+  text-transform: var(--text-transform-bigger);
+  letter-spacing: var(--letter-spacing-bigger);
 }
 
 .text-jumbo {
-  font-size: calc(1.375rem + 5vw);
-  line-height: 70%;
-  font-weight: 900;
+  font-size: var(--font-size-jumbo);
+  line-height: var(--line-height-jumbo);
+  font-weight: var(--font-weight-jumbo);
+  font-style: var(--font-style-jumbo);
+  text-decoration: var(--text-decoration-jumbo);
+  text-transform: var(--text-transform-jumbo);
+  letter-spacing: var(--letter-spacing-jumbo);
 }
 .important{
   font-weight: 700;
@@ -604,13 +656,23 @@ body {
 }
 /* Mini sizes */
 .text-small {
-  font-size: var(--smallFont);
-  line-height: 1.25rem;
+   font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  font-weight: var(--font-weight-small);
+  font-style: var(--font-style-small);
+  text-decoration: var(--text-decoration-small);
+  text-transform: var(--text-transform-small);
+  letter-spacing: var(--letter-spacing-small);
 }
 
 .text-smaller {
-  font-size: var(--smallerFont);
-  line-height: 1.125rem;
+  font-size: var(--font-size-smaller);
+  line-height: var(--line-height-smaller);
+  font-weight: var(--font-weight-smaller);
+  font-style: var(--font-style-smaller);
+  text-decoration: var(--text-decoration-smaller);
+  text-transform: var(--text-transform-smaller);
+  letter-spacing: var(--letter-spacing-smaller);
 }
 
 .text-minified  , .text-md{
@@ -646,39 +708,82 @@ h1,
 }
 
 h1, .h1 {
-  font-size: var(--text-5xl);
-  line-height: var(--leading-none);
-    font-weight: 900;
+  font-size: var(--font-size-h1);
+  line-height: var(--line-height-h1);
+  font-weight: var(--font-weight-h1);
+  font-style: var(--font-style-h1);
+  text-decoration: var(--text-decoration-h1);
+  text-transform: var(--text-transform-h1);
+  letter-spacing: var(--letter-spacing-h1);
 }
 
 h2, .h2 {
-  font-size: var(--text-4xl);
-  line-height: var(--leading-4xl);
-  font-weight: 900;
+  font-size: var(--font-size-h2);
+  line-height: var(--line-height-h2);
+  font-weight: var(--font-weight-h2);
+  font-style: var(--font-style-h2);
+  text-decoration: var(--text-decoration-h2);
+  text-transform: var(--text-transform-h2);
+  letter-spacing: var(--letter-spacing-h2);
 }
 
 h3, .h3 {
-  font-size: var(--text-3xl);
-  line-height: var(--leading-3xl);
-   font-weight: 700;
+  font-size: var(--font-size-h3);
+  line-height: var(--line-height-h3);
+  font-weight: var(--font-weight-h3);
+  font-style: var(--font-style-h3);
+  text-decoration: var(--text-decoration-h3);
+  text-transform: var(--text-transform-h3);
+  letter-spacing: var(--letter-spacing-h3);
 }
 
 h4, .h4 {
-  font-size: var(--text-2xl);
-  line-height: var(--leading-2xl);
-    font-weight: 600;
+  font-size: var(--font-size-h4);
+  line-height: var(--line-height-h4);
+  font-weight: var(--font-weight-h4);
+  font-style: var(--font-style-h4);
+  text-decoration: var(--text-decoration-h4);
+  text-transform: var(--text-transform-h4);
+  letter-spacing: var(--letter-spacing-h4);
 }
 
 h5, .h5 {
-  font-size: var(--text-xl);
-  line-height: var(--leading-xl);
-      font-weight: 500;
+  font-size: var(--font-size-h5);
+  line-height: var(--line-height-h5);
+  font-weight: var(--font-weight-h5);
+  font-style: var(--font-style-h5);
+  text-decoration: var(--text-decoration-h5);
+  text-transform: var(--text-transform-h5);
+  letter-spacing: var(--letter-spacing-h5);
 }
 
 h6, .h6 {
-  font-size: var(--text-base);
-  line-height: var(--leading-normal);
-     font-weight: 500;
+  font-size: var(--font-size-h6);
+  line-height: var(--line-height-h6);
+  font-weight: var(--font-weight-h6);
+  font-style: var(--font-style-h6);
+  text-decoration: var(--text-decoration-h6);
+  text-transform: var(--text-transform-h6);
+  letter-spacing: var(--letter-spacing-h6);
+}
+
+/* ===== Responsive Typography ===== */
+@media (min-width: 768px) {
+  :root {
+    --font-size-h1: calc(2.5rem * var(--scale-tablet));
+    --font-size-h2: calc(2rem * var(--scale-tablet));
+    --font-size-h3: calc(1.75rem * var(--scale-tablet));
+    --font-size-jumbo: calc(3rem * var(--scale-tablet));
+  }
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --font-size-h1: calc(2.5rem * var(--scale-desktop));
+    --font-size-h2: calc(2rem * var(--scale-desktop));
+    --font-size-h3: calc(1.75rem * var(--scale-desktop));
+    --font-size-jumbo: calc(3rem * var(--scale-desktop));
+  }
 }
 
 
@@ -1969,8 +2074,6 @@ border-radius: var(--borderRadius);
 
 
 
-
-
 .dropup:hover .drop-menu {
   display: block;
   z-index: 1;
@@ -2050,7 +2153,6 @@ border-radius: var(--borderRadius);
   pointer-events: none;
   transition: all 0.2s ease;
   background-color: transparent;
-  padding: 0 0.25rem;
   z-index: 1;
   font-weight: 500;
 }
@@ -2066,7 +2168,7 @@ border-radius: var(--borderRadius);
   transform: translateY(0);
   line-height: 1;
 }
-.floating-label.label-left{left: 2.5rem ;}
+.floating-label.label-left{left: 2rem ;}
 /* Label status colors */
 .floating-label.label-success.active {
   color: var(--success);
@@ -2097,14 +2199,6 @@ border-radius: var(--borderRadius);
   background-color: transparent;
 }
 
-/* For textarea */
-textarea ~ .floating-label {
-  top: 1.2rem;
-}
-
-textarea ~ .floating-label.active {
-  top: 0.35rem;
-}
 
 /* Status Input Styles */
 .input.success-input,
@@ -2157,8 +2251,7 @@ textarea {
   border-radius: var(--radius) !important;
   height: fit-content !important;
   min-height: 4rem;
-  padding-top: 1.4rem;
-  padding-bottom: 0.6rem;
+  padding-top: 0.8rem !important;
 }
 
 /* Reset padding when there's no label for textarea */

package/package.json

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

@@ -114,7 +114,7 @@ var InputContainer = function (_a) {
 };
 // 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, _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, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, helperText = _a.helperText, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "label", "helperText", "variant"]);
+    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, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, helperText = _a.helperText, _d = _a.variant, variant = _d === void 0 ? '' : _d, placeholder = _a.placeholder, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "label", "helperText", "variant", "placeholder"]);
     var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
     var _f = (0, react_1.useState)(value || defaultValue || ''), inputValue = _f[0], setInputValue = _f[1];
     var _g = (0, react_1.useState)(null), prefixNode = _g[0], setPrefixNode = _g[1];
@@ -192,7 +192,9 @@ var TextInput = function (_a) {
     // Determine effective icons: stringPrefix/stringSuffix take priority
     var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
     var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
-    var inputElement = (react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, type: type, placeholder: !label ? rest.placeholder : '', style: style, value: value }, rest)));
+    // Show placeholder only when label is active (focused or has value)
+    var showPlaceholder = placeholder && label && (isFocused || !!inputValue);
+    var inputElement = (react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, type: type, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: value }, rest)));
     var wrappedInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
     return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedInput));
 };
@@ -283,7 +285,7 @@ var SelectInput = function (_a) {
 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, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, label = _a.label, helperText = _a.helperText, _b = _a.rows, rows = _b === void 0 ? 2 : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "rows", "variant"]);
+    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, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, label = _a.label, helperText = _a.helperText, _b = _a.rows, rows = _b === void 0 ? 2 : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, placeholder = _a.placeholder, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "rows", "variant", "placeholder"]);
     var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
     var _e = (0, react_1.useState)(value || defaultValue || ''), textValue = _e[0], setTextValue = _e[1];
     var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
@@ -359,7 +361,9 @@ var TextareaInput = function (_a) {
     };
     var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
     var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
-    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, placeholder: !label ? rest.placeholder : '', style: style, value: value, rows: rows }, rest)));
+    // Show placeholder only when label is active (focused or has value)
+    var showPlaceholder = placeholder && label && (isFocused || !!textValue);
+    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: value, rows: rows }, rest)));
     var wrappedTextarea = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
     return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedTextarea));
 };

package/ui/theme/theme.js

@@ -74,11 +74,6 @@ exports.useGlobalConfig = exports.useColors = exports.useComponentConfig = expor
 var react_1 = __importStar(require("react"));
 var themes_1 = require("./themes");
 var darkenUtils_1 = require("./darkenUtils");
-var firestore_1 = require("firebase/firestore");
-var db;
-if (typeof window !== 'undefined') {
-    db = require('../../utils/Firebase').default;
-}
 var ThemeContext = (0, react_1.createContext)({
     variant: 'standard',
     setVariant: function () { },
@@ -96,7 +91,6 @@ var useTheme = function () {
     return context;
 };
 exports.useTheme = useTheme;
-// Backward compatibility
 var useVariant = function () {
     var _a = (0, exports.useTheme)(), variant = _a.variant, setVariant = _a.setVariant;
     return { variant: variant, setVariant: setVariant };
@@ -107,6 +101,7 @@ exports.useVariant = useVariant;
 /* -------------------------------------------------------------------------- */
 var CACHE_KEY = 'funui_theme_cache';
 var CACHE_EXPIRY = 1000 * 60 * 60; // 1 hour
+var POLL_INTERVAL = 5 * 60 * 1000; // Check for updates every 5 minutes
 var getThemeFromCache = function (projectId) {
     if (typeof window === 'undefined')
         return null;
@@ -135,6 +130,7 @@ var saveThemeToCache = function (projectId, data) {
             projectId: projectId,
             data: data,
             timestamp: Date.now(),
+            version: data.version || Date.now(),
         };
         localStorage.setItem("".concat(CACHE_KEY, "_").concat(projectId), JSON.stringify(cache));
     }
@@ -143,49 +139,56 @@ var saveThemeToCache = function (projectId, data) {
     }
 };
 /* -------------------------------------------------------------------------- */
-/*                          SINGLETON LISTENER                                */
+/*                          CDN THEME LOADER (NO TOKEN!)                      */
 /* -------------------------------------------------------------------------- */
-var activeListener = null;
-var currentProjectId = null;
-var listenerSubscribers = new Set();
-var subscribeToTheme = function (projectId, callback) {
-    listenerSubscribers.add(callback);
-    // If listener already exists for this project, just subscribe
-    if (currentProjectId === projectId && activeListener) {
-        return function () {
-            listenerSubscribers.delete(callback);
-        };
-    }
-    // Clean up old listener if project changed
-    if (activeListener && currentProjectId !== projectId) {
-        activeListener();
-        activeListener = null;
-        currentProjectId = null;
-    }
-    // Create new listener
-    var docRef = (0, firestore_1.doc)(db, 'Projects', projectId);
-    currentProjectId = projectId;
-    var unsubscribe = (0, firestore_1.onSnapshot)(docRef, function (snapshot) {
-        var data = snapshot.data();
-        if (!data)
-            return;
-        // Save to cache
-        saveThemeToCache(projectId, data);
-        // Notify all subscribers
-        listenerSubscribers.forEach(function (cb) { return cb(data); });
-    }, function (error) {
-        console.error('Theme listener error:', error);
-    });
-    activeListener = unsubscribe;
-    return function () {
-        listenerSubscribers.delete(callback);
-        if (listenerSubscribers.size === 0 && activeListener) {
-            activeListener();
-            activeListener = null;
-            currentProjectId = null;
+var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
+    var publicResponse, data, error_1, publicUrl, response, data, error_2;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 4, , 5]);
+                return [4 /*yield*/, fetch("/funui.json", {
+                        cache: 'no-cache',
+                    })];
+            case 1:
+                publicResponse = _a.sent();
+                if (!publicResponse.ok) return [3 /*break*/, 3];
+                return [4 /*yield*/, publicResponse.json()];
+            case 2:
+                data = _a.sent();
+                console.log('✅ Loaded theme from public folder');
+                return [2 /*return*/, data];
+            case 3: return [3 /*break*/, 5];
+            case 4:
+                error_1 = _a.sent();
+                console.log('No theme in public folder, checking Firebase Storage...');
+                return [3 /*break*/, 5];
+            case 5:
+                _a.trys.push([5, 10, , 11]);
+                publicUrl = "https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/themes%2F".concat(projectId, ".json?alt=media");
+                return [4 /*yield*/, fetch(publicUrl, {
+                        cache: 'no-cache',
+                    })];
+            case 6:
+                response = _a.sent();
+                if (!response.ok) return [3 /*break*/, 8];
+                return [4 /*yield*/, response.json()];
+            case 7:
+                data = _a.sent();
+                console.log('✅ Loaded theme from Firebase Storage (public CDN)');
+                return [2 /*return*/, data];
+            case 8:
+                console.error('Firebase Storage fetch failed:', response.status, response.statusText);
+                _a.label = 9;
+            case 9: return [3 /*break*/, 11];
+            case 10:
+                error_2 = _a.sent();
+                console.error('Error loading from Firebase Storage:', error_2);
+                return [3 /*break*/, 11];
+            case 11: return [2 /*return*/, null];
         }
-    };
-};
+    });
+}); };
 /* -------------------------------------------------------------------------- */
 /*                                COMPONENT                                   */
 /* -------------------------------------------------------------------------- */
@@ -197,6 +200,7 @@ var ThemeProvider = function (_a) {
     var _g = (0, react_1.useState)(true), isLoading = _g[0], setIsLoading = _g[1];
     var _h = (0, react_1.useState)(true), isInitialLoad = _h[0], setIsInitialLoad = _h[1];
     var _j = (0, react_1.useState)(null), error = _j[0], setError = _j[1];
+    var _k = (0, react_1.useState)(null), currentVersion = _k[0], setCurrentVersion = _k[1];
     /* -------------------------- Apply base theme --------------------------- */
     (0, react_1.useEffect)(function () {
         var root = document.documentElement;
@@ -218,7 +222,7 @@ var ThemeProvider = function (_a) {
             });
         }
     }, [theme]);
-    /* ---------------------- Firebase Theme Sync ----------------------- */
+    /* ---------------------- CDN Theme Sync (No Token!) ----------------------- */
     (0, react_1.useEffect)(function () {
         if (typeof window === 'undefined' || !projectId) {
             setIsLoading(false);
@@ -226,34 +230,51 @@ var ThemeProvider = function (_a) {
             return;
         }
         var root = document.documentElement;
-        // Step 1: Try to load from cache immediately
+        var pollTimer;
+        // Step 1: Load from cache immediately
         var cachedTheme = getThemeFromCache(projectId);
         if (cachedTheme) {
             applyThemeData(cachedTheme, root);
+            setCurrentVersion(cachedTheme.version || null);
             setIsLoading(false);
-            // Still initialLoad true, but we have cached data to show
+            console.log('✅ Using cached theme');
         }
-        // Step 2: Fetch fresh data (doesn't block render if we have cache)
-        var fetchInitialData = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var docRef, snapshot, data, err_1;
+        // Step 2: Fetch from CDN
+        var fetchFromCDN = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var cdnTheme, newVersion, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         _a.trys.push([0, 2, 3, 4]);
-                        docRef = (0, firestore_1.doc)(db, 'Projects', projectId);
-                        return [4 /*yield*/, (0, firestore_1.getDoc)(docRef)];
+                        return [4 /*yield*/, loadThemeFromCDN(projectId)];
                     case 1:
-                        snapshot = _a.sent();
-                        if (snapshot.exists()) {
-                            data = snapshot.data();
-                            applyThemeData(data, root);
-                            saveThemeToCache(projectId, data);
+                        cdnTheme = _a.sent();
+                        if (cdnTheme) {
+                            newVersion = cdnTheme.version || Date.now();
+                            if (!currentVersion || newVersion !== currentVersion) {
+                                applyThemeData(cdnTheme, root);
+                                saveThemeToCache(projectId, cdnTheme);
+                                setCurrentVersion(newVersion);
+                                console.log('✅ Theme updated from CDN');
+                            }
+                            else {
+                                console.log('✓ Theme unchanged');
+                            }
+                            setError(null);
+                        }
+                        else {
+                            console.warn('⚠️ No theme found in CDN');
+                            if (!cachedTheme) {
+                                setError('Theme not found');
+                            }
                         }
                         return [3 /*break*/, 4];
                     case 2:
                         err_1 = _a.sent();
-                        console.error('Error fetching initial theme:', err_1);
-                        setError('Failed to load theme');
+                        console.error('Error loading theme from CDN:', err_1);
+                        if (!cachedTheme) {
+                            setError('Failed to load theme');
+                        }
                         return [3 /*break*/, 4];
                     case 3:
                         setIsLoading(false);
@@ -263,21 +284,21 @@ var ThemeProvider = function (_a) {
                 }
             });
         }); };
-        // Only fetch if no cache
         if (!cachedTheme) {
-            fetchInitialData();
+            fetchFromCDN();
         }
         else {
-            // We have cache, mark as loaded after short delay
             setTimeout(function () { return setIsInitialLoad(false); }, 100);
+            fetchFromCDN();
         }
-        // Step 3: Subscribe to real-time updates
-        var unsubscribe = subscribeToTheme(projectId, function (data) {
-            applyThemeData(data, root);
-        });
-        return unsubscribe;
-    }, [projectId]);
-    /* Helper function to apply theme data */
+        // Step 3: Poll for updates every 5 minutes
+        pollTimer = setInterval(function () {
+            fetchFromCDN();
+        }, POLL_INTERVAL);
+        return function () {
+            clearInterval(pollTimer);
+        };
+    }, [projectId, currentVersion]);
     var applyThemeData = function (data, root) {
         var _a;
         var config = (_a = data.theme_config) !== null && _a !== void 0 ? _a : {};
@@ -285,13 +306,11 @@ var ThemeProvider = function (_a) {
         setVariant(newVariant);
         setThemeConfig(config);
         setProjectData(data);
-        // Apply CSS variables
         Object.entries(config).forEach(function (_a) {
             var key = _a[0], value = _a[1];
             root.style.setProperty(key.startsWith('--') ? key : "--".concat(key), String(value));
         });
     };
-    /* Memoize context value to prevent unnecessary re-renders */
     var contextValue = (0, react_1.useMemo)(function () { return ({
         variant: variant,
         setVariant: setVariant,
@@ -301,40 +320,32 @@ var ThemeProvider = function (_a) {
         isInitialLoad: isInitialLoad,
         error: error,
     }); }, [variant, themeConfig, projectData, isLoading, isInitialLoad, error]);
-    /* ------------------------------- Render ------------------------------- */
     return (react_1.default.createElement(ThemeContext.Provider, { value: contextValue },
         react_1.default.createElement("div", { className: "theme-".concat(theme, " ").concat(funcss), style: {
                 backgroundColor: 'var(--page-bg)',
                 color: 'var(--text-color)',
                 minHeight: minHeight,
-                // Smooth transition when theme changes
                 transition: isInitialLoad ? 'none' : 'background-color 0.3s ease, color 0.3s ease',
             } }, children)));
 };
 exports.default = ThemeProvider;
-/* -------------------------------------------------------------------------- */
-/*                          HELPER HOOKS                                      */
-/* -------------------------------------------------------------------------- */
-// Hook to get specific theme values
+// Helper hooks
 var useThemeValue = function (key) {
     var themeConfig = (0, exports.useTheme)().themeConfig;
     return themeConfig[key];
 };
 exports.useThemeValue = useThemeValue;
-// Hook to get component-specific config
 var useComponentConfig = function (componentName) {
     var _a;
     var projectData = (0, exports.useTheme)().projectData;
     return ((_a = projectData === null || projectData === void 0 ? void 0 : projectData.components) === null || _a === void 0 ? void 0 : _a[componentName]) || {};
 };
 exports.useComponentConfig = useComponentConfig;
-// Hook to get colors
 var useColors = function () {
     var projectData = (0, exports.useTheme)().projectData;
     return (projectData === null || projectData === void 0 ? void 0 : projectData.colors) || {};
 };
 exports.useColors = useColors;
-// Hook to get global config
 var useGlobalConfig = function () {
     var projectData = (0, exports.useTheme)().projectData;
     return (projectData === null || projectData === void 0 ? void 0 : projectData.global) || {};