@qwickapps/react-framework 1.5.0 → 1.5.2

package/dist/palettes/palette-winter.1.5.2.min.css

@@ -0,0 +1 @@
+html[data-palette="winter"]:not([data-theme="dark"]),html[data-palette="winter"][data-theme="light"]{--palette-primary-main:#0077be;--palette-primary-light:#5ba3d0;--palette-primary-dark:#005082;--palette-on-primary:#ffffff;--palette-secondary-main:#4682b4;--palette-secondary-light:#7ba7cc;--palette-secondary-dark:#2e5984;--palette-on-secondary:#ffffff;--palette-surface-main:#fafbfc;--palette-surface-variant:#e2e8f0;--palette-surface-elevated:#ffffff;--palette-on-surface:#0f172a;--palette-background-main:#f8fafc;--palette-background-dark:#f1f5f9;--palette-background-overlay:rgba(248,250,252,0.95);--palette-on-background:#475569;--palette-header-bg-start:rgba(248,250,252,0.98);--palette-header-bg-end:rgba(248,250,252,0.95);--palette-header-collapsed-bg-start:rgba(248,250,252,0.99);--palette-header-collapsed-bg-end:rgba(248,250,252,0.96);--palette-text-primary:#0f172a;--palette-text-secondary:#475569;--palette-text-disabled:rgba(15,23,42,0.38);--palette-text-inverted:#ffffff;--palette-border-main:#cbd5e1;--palette-border-light:rgba(15,23,42,0.12);--palette-border-lighter:rgba(15,23,42,0.05);--palette-border-medium:#94a3b8;--palette-success-main:#059669;--palette-success-light:#d1fae5;--palette-success-dark:#064e3b;--palette-success-border:#a7f3d0;--palette-error-main:#dc2626;--palette-error-light:#fee2e2;--palette-error-dark:#7f1d1d;--palette-error-border:#fecaca;--palette-warning-main:#d97706;--palette-warning-light:#fef3c7;--palette-warning-dark:#92400e;--palette-warning-border:#fde68a;--palette-info-main:#0284c7;--palette-info-light:#e0f2fe;--palette-info-dark:#0c4a6e;--palette-on-info:#ffffff;--palette-info-border:#7dd3fc;--palette-accent-main:#ec4899;--palette-accent-light:#fce7f3;--palette-accent-dark:#be185d;--palette-on-accent:#ffffff;--palette-control-main:#1e293b;--palette-control-light:#334155;--palette-control-text:#e2e8f0;--palette-control-border:#475569}html[data-palette="winter"][data-theme="dark"]{--palette-primary-main:#7dd3fc;--palette-primary-light:#bae6fd;--palette-primary-dark:#0369a1;--palette-on-primary:#020617;--palette-secondary-main:#94a3b8;--palette-secondary-light:#cbd5e1;--palette-secondary-dark:#64748b;--palette-on-secondary:#020617;--palette-surface-main:#0f172a;--palette-surface-variant:#1e293b;--palette-surface-elevated:#334155;--palette-on-surface:#f8fafc;--palette-background-main:#020617;--palette-background-dark:#0f172a;--palette-background-overlay:rgba(15,23,42,0.95);--palette-on-background:#cbd5e1;--palette-header-bg-start:rgba(2,6,23,0.98);--palette-header-bg-end:rgba(2,6,23,0.95);--palette-header-collapsed-bg-start:rgba(2,6,23,0.99);--palette-header-collapsed-bg-end:rgba(2,6,23,0.96);--palette-text-primary:#f8fafc;--palette-text-secondary:#cbd5e1;--palette-text-disabled:rgba(248,250,252,0.38);--palette-text-inverted:#020617;--palette-border-main:#475569;--palette-border-light:rgba(248,250,252,0.12);--palette-border-lighter:rgba(248,250,252,0.05);--palette-border-medium:#334155;--palette-success-main:#34d399;--palette-success-light:#064e3b;--palette-success-dark:#10b981;--palette-success-border:#065f46;--palette-error-main:#f87171;--palette-error-light:#7f1d1d;--palette-error-dark:#ef4444;--palette-error-border:#991b1b;--palette-warning-main:#fb923c;--palette-warning-light:#9a3412;--palette-warning-dark:#f97316;--palette-warning-border:#c2410c;--palette-info-main:#38bdf8;--palette-info-light:#0c4a6e;--palette-info-dark:#0ea5e9;--palette-on-info:#020617;--palette-info-border:#0284c7;--palette-accent-main:#f472b6;--palette-accent-light:#fce7f3;--palette-accent-dark:#db2777;--palette-on-accent:#f8fafc;--palette-control-main:#1e293b;--palette-control-light:#334155;--palette-control-text:#e2e8f0;--palette-control-border:#475569}

package/dist/utils/iconMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iconMap.d.ts","sourceRoot":"","sources":["../../src/utils/iconMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AA2D1B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAwF/C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,GAAE,MAAa,GAAG,MAAM,CAI1F;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAWxF;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAErE;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C"}
+{"version":3,"file":"iconMap.d.ts","sourceRoot":"","sources":["../../src/utils/iconMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAsE1B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAoG/C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,GAAE,MAAa,GAAG,MAAM,CAI1F;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAWxF;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAErE;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "type": "module",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",

package/src/components/Scaffold.css

@@ -23,7 +23,7 @@
   --menu-border: var(--theme-outline-variant);
   --menu-shadow: rgba(0, 0, 0, 0.1);
   
-  --scaffold-background: var(--theme-background);
+  --scaffold-background: var(--theme-surface);
   --scaffold-surface: var(--theme-surface);
   --scaffold-on-surface: var(--theme-on-surface);
   --scaffold-primary: var(--theme-primary);
@@ -454,6 +454,16 @@
   transition: padding 0.3s ease;
   padding-top: var(--appbar-height, 64px);
   padding-bottom: var(--bottom-nav-height, 80px);
+  box-sizing: border-box;
+}
+
+/* Content inner wrapper for proper padding */
+.app-scaffold-content > * {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 24px;
+  padding-right: 24px;
 }
 
 /* =================== ANIMATIONS =================== */

package/src/components/buttons/Button.tsx

@@ -295,16 +295,14 @@ export const Button: SerializableComponent<ButtonProps> = createSerializableView
 
     if (typeof (props as Record<string, unknown>).icon === 'string') {
       const iconComponent = getIconComponent((props as Record<string, unknown>).icon as string);
-      if (iconComponent) {
-        transformedProps.icon = iconComponent;
-      }
+      // Always transform: use the component if found, otherwise clear the string to prevent text rendering
+      transformedProps.icon = iconComponent || undefined;
     }
 
     if (typeof (props as Record<string, unknown>).endIcon === 'string') {
       const endIconComponent = getIconComponent((props as Record<string, unknown>).endIcon as string);
-      if (endIconComponent) {
-        transformedProps.endIcon = endIconComponent;
-      }
+      // Always transform: use the component if found, otherwise clear the string to prevent text rendering
+      transformedProps.endIcon = endIconComponent || undefined;
     }
 
     return transformedProps;

package/src/utils/iconMap.tsx

@@ -64,6 +64,17 @@ import {
   Architecture,
   Security,
   VerifiedUser,
+  // Additional icons for control panels and admin UIs
+  VpnKey,
+  Key,
+  PersonSearch,
+  ManageAccounts,
+  Storage,
+  Refresh,
+  Block,
+  CheckCircle,
+  RotateRight,
+  Memory,
 } from '@mui/icons-material';
 
 /**
@@ -166,6 +177,18 @@ export const iconMap: Record<string, IconMapping> = {
   sync: { emoji: '🔄', component: Sync },
   architecture: { emoji: '🏛️', component: Architecture },
   security: { emoji: '🔐', component: Security },
+
+  // Control Panel & Admin UI Icons
+  key: { emoji: '🔑', component: Key },
+  vpn_key: { emoji: '🔐', component: VpnKey },
+  person_search: { emoji: '🔍', component: PersonSearch },
+  manage_accounts: { emoji: '👥', component: ManageAccounts },
+  storage: { emoji: '💾', component: Storage },
+  refresh: { emoji: '🔄', component: Refresh },
+  block: { emoji: '🚫', component: Block },
+  check_circle: { emoji: '✅', component: CheckCircle },
+  rotate_right: { emoji: '🔄', component: RotateRight },
+  memory: { emoji: '🧠', component: Memory },
 };
 
 /**