funuicss 3.6.16 → 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.16",
+  "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/button/Button.js

@@ -62,8 +62,7 @@ var pi_1 = require("react-icons/pi");
 var componentUtils_1 = require("../../utils/componentUtils");
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
 function Button(_a) {
-    var _b;
-    var _c = _a.variant, variant = _c === void 0 ? '' : _c, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, prefix = _a.prefix, suffix = _a.suffix, iconSize = _a.iconSize, _d = _a.iconLineHeight, iconLineHeight = _d === void 0 ? 0 : _d, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, bold = _a.bold, children = _a.children, style = _a.style, url = _a.url, onClick = _a.onClick, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "stringPrefix", "stringSuffix", "prefix", "suffix", "iconSize", "iconLineHeight", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "outlineSize", "isLoading", "status", "bold", "children", "style", "url", "onClick"]);
+    var _b = _a.variant, variant = _b === void 0 ? '' : _b, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, prefix = _a.prefix, suffix = _a.suffix, iconSize = _a.iconSize, _c = _a.iconLineHeight, iconLineHeight = _c === void 0 ? 0 : _c, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, bold = _a.bold, children = _a.children, style = _a.style, url = _a.url, onClick = _a.onClick, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "stringPrefix", "stringSuffix", "prefix", "suffix", "iconSize", "iconLineHeight", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "outlineSize", "isLoading", "status", "bold", "children", "style", "url", "onClick"]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Button', variant).mergeWithLocal;
     var mergedProps = mergeWithLocal(__assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, outlineSize: outlineSize, isLoading: isLoading, status: status, bold: bold }, rest)).props;
     var final = {
@@ -91,17 +90,28 @@ function Button(_a) {
         fillTextColor: mergedProps.fillTextColor,
         funcss: mergedProps.funcss,
     };
-    var _e = (0, react_1.useState)(null), prefixNode = _e[0], setPrefixNode = _e[1];
-    var _f = (0, react_1.useState)(null), suffixNode = _f[0], setSuffixNode = _f[1];
+    var _d = (0, react_1.useState)(null), prefixNode = _d[0], setPrefixNode = _d[1];
+    var _e = (0, react_1.useState)(null), suffixNode = _e[0], setSuffixNode = _e[1];
     function isReactElement(node) {
         return react_1.default.isValidElement(node);
     }
+    // FIX: Clear icons when stringPrefix/stringSuffix are empty or undefined
     (0, react_1.useEffect)(function () {
-        if (stringPrefix)
+        if (stringPrefix) {
             (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
-        if (stringSuffix)
+        }
+        else {
+            setPrefixNode(null); // Clear when empty
+        }
+    }, [stringPrefix]);
+    (0, react_1.useEffect)(function () {
+        if (stringSuffix) {
             (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
-    }, [stringPrefix, stringSuffix]);
+        }
+        else {
+            setSuffixNode(null); // Clear when empty
+        }
+    }, [stringSuffix]);
     var textColorClass = final.bg
         ? final.color
             ? final.color
@@ -111,6 +121,8 @@ function Button(_a) {
                     ? 'white'
                     : final.bg.replace(/[0-9]/g, '')
         : final.color;
+    // Determine background: status takes priority over bg prop
+    var effectiveBg = final.status ? final.status : final.bg;
     var classNames = [
         'button',
         "text-".concat(textColorClass),
@@ -128,8 +140,8 @@ function Button(_a) {
         final.bigger ? 'biggerBtn' : '',
         final.jumbo ? 'jumboBtn' : '',
         final.outlined
-            ? "outlined outline-".concat(final.bg || '', " text-").concat(final.color ? final.color : (_b = final.bg) === null || _b === void 0 ? void 0 : _b.replace(/[0-9]/g, ''))
-            : final.bg || '',
+            ? "outlined outline-".concat(effectiveBg || '', " text-").concat(final.color ? final.color : effectiveBg === null || effectiveBg === void 0 ? void 0 : effectiveBg.replace(/[0-9]/g, ''))
+            : effectiveBg || '',
         "".concat(final.fillAnimation ? "".concat(final.fillTextColor ? "hover-text-".concat(final.fillTextColor) : '', " button-fill fill-").concat(final.fillDirection || 'left') : ''),
     ].join(' ');
     var iconWrapperStyle = {
@@ -140,19 +152,18 @@ function Button(_a) {
     };
     return (react_1.default.createElement("span", null,
         react_1.default.createElement("button", __assign({ className: "".concat(classNames, " ").concat((startIcon || endIcon || prefix || suffix || prefixNode || suffixNode || final.status || final.isLoading) ? 'iconic' : ''), style: __assign({ height: mergedProps.height || '', width: mergedProps.fullWidth ? '100%' : mergedProps.width || '', borderRadius: final.flat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return (window.location.href = url); } : undefined) }, mergedProps),
-            final.isLoading && (react_1.default.createElement("span", { className: "btn_left_icon rotate", style: iconWrapperStyle },
-                react_1.default.createElement(pi_1.PiSpinner, { size: iconSize }))),
-            final.status && (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle },
+            final.isLoading ? (react_1.default.createElement("span", { className: "btn_left_icon rotate", style: iconWrapperStyle },
+                react_1.default.createElement(pi_1.PiSpinner, { size: iconSize }))) : (react_1.default.createElement(react_1.default.Fragment, null, final.status ? (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle },
                 final.status === 'success' && react_1.default.createElement(pi_1.PiCheck, { size: iconSize }),
                 final.status === 'info' && react_1.default.createElement(pi_1.PiInfo, { size: iconSize }),
                 final.status === 'warning' && react_1.default.createElement(pi_1.PiWarning, { size: iconSize }),
-                final.status === 'danger' && react_1.default.createElement(pi_1.PiX, { size: iconSize }))),
-            final.fillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(final.bg) }),
+                final.status === 'danger' && react_1.default.createElement(pi_1.PiX, { size: iconSize }))) : (
+            /* Otherwise show regular start icons */
             (prefix || startIcon || prefixNode) && (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle }, isReactElement(startIcon) ? react_1.default.cloneElement(startIcon, { size: iconSize })
                 : isReactElement(prefix) ? react_1.default.cloneElement(prefix, { size: iconSize })
                     : isReactElement(prefixNode) ? react_1.default.cloneElement(prefixNode, { size: iconSize })
-                        : prefix || startIcon || prefixNode // fallback for string/number, rendered as-is
-            )),
+                        : prefix || startIcon || prefixNode))))),
+            final.fillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(effectiveBg) }),
             final.text ? final.text : children,
             (suffix || endIcon || suffixNode) && (react_1.default.createElement("span", { className: "btn_right_icon", style: iconWrapperStyle }, isReactElement(endIcon) ? react_1.default.cloneElement(endIcon, { size: iconSize })
                 : isReactElement(suffix) ? react_1.default.cloneElement(suffix, { size: iconSize })

package/ui/input/Input.d.ts

@@ -19,6 +19,8 @@ interface BaseInputProps {
     endIcon?: React.ReactNode;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
+    stringPrefix?: string;
+    stringSuffix?: string;
     iconicBg?: string;
     variant?: string;
     label?: string;

package/ui/input/Input.js

@@ -65,6 +65,7 @@ var pi_1 = require("react-icons/pi");
 var Button_1 = __importDefault(require("../button/Button"));
 var theme_1 = require("../theme/theme");
 var componentUtils_1 = require("../../utils/componentUtils");
+var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
 // Status icons mapping
 var statusIcons = {
     success: react_1.default.createElement(pi_1.PiCheckCircle, null),
@@ -83,10 +84,9 @@ var generateInputClasses = function (_a) {
     var borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : (!bordered && !borderless ? 'borderedInput' : '');
     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 - Updated to support both prefix/suffix and startIcon/endIcon
+// Iconic Input Wrapper Component
 var IconicInputWrapper = function (_a) {
     var startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, funcss = _a.funcss, children = _a.children;
-    // Use prefix/suffix if provided, otherwise fall back to startIcon/endIcon
     var effectiveStartIcon = prefix !== undefined ? prefix : startIcon;
     var effectiveEndIcon = suffix !== undefined ? suffix : endIcon;
     if (!effectiveStartIcon && !effectiveEndIcon) {
@@ -114,15 +114,35 @@ 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, 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", "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];
+    var _h = (0, react_1.useState)(null), suffixNode = _h[0], setSuffixNode = _h[1];
     var inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         if (value !== undefined) {
             setInputValue(value);
         }
     }, [value]);
+    // Handle stringPrefix
+    (0, react_1.useEffect)(function () {
+        if (stringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [stringPrefix]);
+    // Handle stringSuffix
+    (0, react_1.useEffect)(function () {
+        if (stringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [stringSuffix]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
     var mergedProps = mergeWithLocal({
         status: status,
@@ -169,23 +189,47 @@ var TextInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
-    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)));
-    var wrappedInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
-    return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedInput));
+    // Determine effective icons: stringPrefix/stringSuffix take priority
+    var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
+    var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
+    // 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));
 };
 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, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, label = _a.label, helperText = _a.helperText, _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", "iconicBg", "options", "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, 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, _b = _a.options, options = _b === void 0 ? [] : _b, label = _a.label, helperText = _a.helperText, _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", "options", "label", "helperText", "variant"]);
     var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
     var _e = (0, react_1.useState)(value || defaultValue || ''), selectValue = _e[0], setSelectValue = _e[1];
+    var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
+    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
     (0, react_1.useEffect)(function () {
         if (value !== undefined) {
             setSelectValue(value);
         }
     }, [value]);
-    // For select inputs, label should always be active when there's a label
-    var selectHasValue = true; // Always true for select to keep label at top
+    // Handle stringPrefix
+    (0, react_1.useEffect)(function () {
+        if (stringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [stringPrefix]);
+    // Handle stringSuffix
+    (0, react_1.useEffect)(function () {
+        if (stringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [stringSuffix]);
+    var selectHasValue = true;
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
     var mergedProps = mergeWithLocal({
         status: status,
@@ -232,21 +276,43 @@ var SelectInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
+    var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
+    var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
     var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, 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 wrappedSelect = (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, selectElement));
-    return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedSelect));
+    var wrappedSelect = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, selectElement));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedSelect));
 };
 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, 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", "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];
+    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
     (0, react_1.useEffect)(function () {
         if (value !== undefined) {
             setTextValue(value);
         }
     }, [value]);
+    // Handle stringPrefix
+    (0, react_1.useEffect)(function () {
+        if (stringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [stringPrefix]);
+    // Handle stringSuffix
+    (0, react_1.useEffect)(function () {
+        if (stringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [stringSuffix]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
     var mergedProps = mergeWithLocal({
         status: status,
@@ -293,15 +359,39 @@ var TextareaInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
-    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)));
-    var wrappedTextarea = (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
-    return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedTextarea));
+    var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
+    var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
+    // 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));
 };
 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, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, helperText = _a.helperText, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "iconicBg", "label", "helperText", "icon", "extra", "button", "btn", "value", "variant"]);
+    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, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, helperText = _a.helperText, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "icon", "extra", "button", "btn", "value", "variant"]);
     var _e = (0, react_1.useState)(''), fileName = _e[0], setFileName = _e[1];
+    var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
+    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
+    // Handle stringPrefix
+    (0, react_1.useEffect)(function () {
+        if (stringPrefix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringPrefix).then(function (node) { return setPrefixNode(node); });
+        }
+        else {
+            setPrefixNode(null);
+        }
+    }, [stringPrefix]);
+    // Handle stringSuffix
+    (0, react_1.useEffect)(function () {
+        if (stringSuffix) {
+            (0, getDynamicIcon_1.getDynamicIcon)(stringSuffix).then(function (node) { return setSuffixNode(node); });
+        }
+        else {
+            setSuffixNode(null);
+        }
+    }, [stringSuffix]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
     var mergedProps = mergeWithLocal({
         status: status,
@@ -330,6 +420,8 @@ var FileInput = function (_a) {
         if (onChange)
             onChange(e);
     };
+    var effectivePrefix = prefixNode || mergedProps.prefix || mergedProps.startIcon;
+    var effectiveSuffix = suffixNode || mergedProps.suffix || mergedProps.endIcon;
     if (btn) {
         var className = generateInputClasses({
             status: mergedProps.status,
@@ -347,8 +439,8 @@ var FileInput = function (_a) {
         var fileInputElement = (react_1.default.createElement("div", { className: "fileInput" },
             button || (react_1.default.createElement(Button_1.default, { funcss: mergedProps.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))));
-        var wrappedFileInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, fileInputElement));
-        return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: undefined, status: mergedProps.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: mergedProps.fullWidth, id: id }, wrappedFileInput));
+        var wrappedFileInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, fileInputElement));
+        return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: undefined, status: mergedProps.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: mergedProps.fullWidth, id: id }, wrappedFileInput));
     }
     var uploadElement = (react_1.default.createElement("div", { className: "_upload_container" },
         react_1.default.createElement("label", { htmlFor: id, className: "_upload_label" },
@@ -362,14 +454,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(InputContainer, { startIcon: startIcon, prefix: prefix, label: undefined, status: mergedProps.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: mergedProps.fullWidth, id: id }, uploadElement));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: undefined, status: mergedProps.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: mergedProps.fullWidth, id: id }, uploadElement));
 };
 exports.FileInput = FileInput;
 var Input = function (_a) {
-    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "iconicBg", "variant"]);
+    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "variant"]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
     var mergedProps = mergeWithLocal(__assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, prefix: prefix, suffix: suffix, iconicBg: iconicBg })).props;
-    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless) });
+    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, stringPrefix: stringPrefix, stringSuffix: stringSuffix, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless) });
     if (select) {
         return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }

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) || {};