funuicss 3.8.15 → 3.8.16

package/css/fun.css

@@ -1466,7 +1466,6 @@ border-radius: var(--borderRadius);
 }
 
 
-
 .navigation-bar {
   width: 100%;
   display: flex;
@@ -1483,7 +1482,6 @@ border-radius: var(--borderRadius);
 
 .linkWrapper {
   display: none;
-  animation: SlideRight 0.2s linear;
 }
 
 .sidebar-trigger {
@@ -6309,81 +6307,111 @@ color: var(--primary) !important;
 .min-w-100-vw { min-width: 100vw !important; }
 
 
-
-.width-10-p { width: 10% !important; }
-.width-20-p { width: 20% !important; }
-.width-30-p { width: 30% !important; }
-.width-40-p { width: 40% !important; }
-.width-50-p { width: 50% !important; }
-.width-60-p { width: 60% !important; }
-.width-70-p { width: 70% !important; }
-.width-80-p { width: 80% !important; }
-.width-90-p { width: 90% !important; }
-.width-100-p { width: 100% !important; }
-
-.w-10-p { width: 10% !important; }
-.w-20-p { width: 20% !important; }
-.w-30-p { width: 30% !important; }
-.w-40-p { width: 40% !important; }
-.w-50-p { width: 50% !important; }
-.w-60-p { width: 60% !important; }
-.w-70-p { width: 70% !important; }
-.w-80-p { width: 80% !important; }
-.w-90-p { width: 90% !important; }
-.w-100-p , .w-full { width: 100% !important; }
-
-.w-5 { max-width: 0.3125rem; width: 100% !important; }
-.w-10 { max-width: 0.625rem; width: 100% !important; }
-.w-15 { max-width: 0.9375rem; width: 100% !important; }
-.w-20 { max-width: 1.25rem; width: 100% !important; }
+/* Max-width versions (responsive with width: 100%) */
+.w-5 { max-width: 5px; width: 100% !important; }
+.w-10 { max-width: 10px; width: 100% !important; }
+.w-15 { max-width: 15px; width: 100% !important; }
+.w-20 { max-width: 20px; width: 100% !important; }
 
 /* Increments of 5 from 25-95 */
-.w-25 { max-width: 1.5625rem; width: 100% !important; }
-.w-30 { max-width: 1.875rem; width: 100% !important; }
-.w-35 { max-width: 2.1875rem; width: 100% !important; }
-.w-40 { max-width: 2.5rem; width: 100% !important; }
-.w-45 { max-width: 2.8125rem; width: 100% !important; }
-.w-50 { max-width: 3.125rem; width: 100% !important; }
-.w-55 { max-width: 3.4375rem; width: 100% !important; }
-.w-60 { max-width: 3.75rem; width: 100% !important; }
-.w-65 { max-width: 4.0625rem; width: 100% !important; }
-.w-70 { max-width: 4.375rem; width: 100% !important; }
-.w-75 { max-width: 4.6875rem; width: 100% !important; }
-.w-80 { max-width: 5rem; width: 100% !important; }
-.w-85 { max-width: 5.3125rem; width: 100% !important; }
-.w-90 { max-width: 5.625rem; width: 100% !important; }
-.w-95 { max-width: 5.9375rem; width: 100% !important; }
-
-.w-100 { max-width: 6.25rem; width: 100% !important; }
-.w-150 { max-width: 9.375rem; width: 100% !important; }
-.w-200 { max-width: 12.5rem; width: 100% !important; }
-.w-250 { max-width: 15.625rem; width: 100% !important; }
-.w-300 { max-width: 18.75rem; width: 100% !important; }
-.w-350 { max-width: 21.875rem; width: 100% !important; }
-.w-400 { max-width: 25rem; width: 100% !important; }
-.w-450 { max-width: 28.125rem; width: 100% !important; }
-.w-500 { max-width: 31.25rem; width: 100% !important; }
-.w-550 { max-width: 34.375rem; width: 100% !important; }
-.w-600 { max-width: 37.5rem; width: 100% !important; }
-.w-650 { max-width: 40.625rem; width: 100% !important; }
-.w-700 { max-width: 43.75rem; width: 100% !important; }
-.w-750 { max-width: 46.875rem; width: 100% !important; }
-.w-800 { max-width: 50rem; width: 100% !important; }
-.w-850 { max-width: 53.125rem; width: 100% !important; }
-.w-900 { max-width: 56.25rem; width: 100% !important; }
-.w-950 { max-width: 59.375rem; width: 100% !important; }
-.w-1000 { max-width: 62.5rem; width: 100% !important; }
-.w-1050 { max-width: 65.625rem; width: 100% !important; }
-.w-1100 { max-width: 68.75rem; width: 100% !important; }
-.w-1150 { max-width: 71.875rem; width: 100% !important; }
-.w-1200 { max-width: 75rem; width: 100% !important; }
-.w-1250 { max-width: 78.125rem; width: 100% !important; }
-.w-1300 { max-width: 81.25rem; width: 100% !important; }
-.w-1350 { max-width: 84.375rem; width: 100% !important; }
-.w-1400 { max-width: 87.5rem; width: 100% !important; }
-.w-1450 { max-width: 90.625rem; width: 100% !important; }
-.w-1500 { max-width: 93.75rem; width: 100% !important; }
+.w-25 { max-width: 25px; width: 100% !important; }
+.w-30 { max-width: 30px; width: 100% !important; }
+.w-35 { max-width: 35px; width: 100% !important; }
+.w-40 { max-width: 40px; width: 100% !important; }
+.w-45 { max-width: 45px; width: 100% !important; }
+.w-50 { max-width: 50px; width: 100% !important; }
+.w-55 { max-width: 55px; width: 100% !important; }
+.w-60 { max-width: 60px; width: 100% !important; }
+.w-65 { max-width: 65px; width: 100% !important; }
+.w-70 { max-width: 70px; width: 100% !important; }
+.w-75 { max-width: 75px; width: 100% !important; }
+.w-80 { max-width: 80px; width: 100% !important; }
+.w-85 { max-width: 85px; width: 100% !important; }
+.w-90 { max-width: 90px; width: 100% !important; }
+.w-95 { max-width: 95px; width: 100% !important; }
+
+.w-100 { max-width: 100px; width: 100% !important; }
+.w-150 { max-width: 150px; width: 100% !important; }
+.w-200 { max-width: 200px; width: 100% !important; }
+.w-250 { max-width: 250px; width: 100% !important; }
+.w-300 { max-width: 300px; width: 100% !important; }
+.w-350 { max-width: 350px; width: 100% !important; }
+.w-400 { max-width: 400px; width: 100% !important; }
+.w-450 { max-width: 450px; width: 100% !important; }
+.w-500 { max-width: 500px; width: 100% !important; }
+.w-550 { max-width: 550px; width: 100% !important; }
+.w-600 { max-width: 600px; width: 100% !important; }
+.w-650 { max-width: 650px; width: 100% !important; }
+.w-700 { max-width: 700px; width: 100% !important; }
+.w-750 { max-width: 750px; width: 100% !important; }
+.w-800 { max-width: 800px; width: 100% !important; }
+.w-850 { max-width: 850px; width: 100% !important; }
+.w-900 { max-width: 900px; width: 100% !important; }
+.w-950 { max-width: 950px; width: 100% !important; }
+.w-1000 { max-width: 1000px; width: 100% !important; }
+.w-1050 { max-width: 1050px; width: 100% !important; }
+.w-1100 { max-width: 1100px; width: 100% !important; }
+.w-1150 { max-width: 1150px; width: 100% !important; }
+.w-1200 { max-width: 1200px; width: 100% !important; }
+.w-1250 { max-width: 1250px; width: 100% !important; }
+.w-1300 { max-width: 1300px; width: 100% !important; }
+.w-1350 { max-width: 1350px; width: 100% !important; }
+.w-1400 { max-width: 1400px; width: 100% !important; }
+.w-1450 { max-width: 1450px; width: 100% !important; }
+.w-1500 { max-width: 1500px; width: 100% !important; }
+
+/* Fixed width versions (no max-width, just width) */
+.w-5-f { width: 5px !important; }
+.w-10-f { width: 10px !important; }
+.w-15-f { width: 15px !important; }
+.w-20-f { width: 20px !important; }
 
+/* Increments of 5 from 25-95 */
+.w-25-f { width: 25px !important; }
+.w-30-f { width: 30px !important; }
+.w-35-f { width: 35px !important; }
+.w-40-f { width: 40px !important; }
+.w-45-f { width: 45px !important; }
+.w-50-f { width: 50px !important; }
+.w-55-f { width: 55px !important; }
+.w-60-f { width: 60px !important; }
+.w-65-f { width: 65px !important; }
+.w-70-f { width: 70px !important; }
+.w-75-f { width: 75px !important; }
+.w-80-f { width: 80px !important; }
+.w-85-f { width: 85px !important; }
+.w-90-f { width: 90px !important; }
+.w-95-f { width: 95px !important; }
+
+.w-100-f { width: 100px !important; }
+.w-150-f { width: 150px !important; }
+.w-200-f { width: 200px !important; }
+.w-250-f { width: 250px !important; }
+.w-300-f { width: 300px !important; }
+.w-350-f { width: 350px !important; }
+.w-400-f { width: 400px !important; }
+.w-450-f { width: 450px !important; }
+.w-500-f { width: 500px !important; }
+.w-550-f { width: 550px !important; }
+.w-600-f { width: 600px !important; }
+.w-650-f { width: 650px !important; }
+.w-700-f { width: 700px !important; }
+.w-750-f { width: 750px !important; }
+.w-800-f { width: 800px !important; }
+.w-850-f { width: 850px !important; }
+.w-900-f { width: 900px !important; }
+.w-950-f { width: 950px !important; }
+.w-1000-f { width: 1000px !important; }
+.w-1050-f { width: 1050px !important; }
+.w-1100-f { width: 1100px !important; }
+.w-1150-f { width: 1150px !important; }
+.w-1200-f { width: 1200px !important; }
+.w-1250-f { width: 1250px !important; }
+.w-1300-f { width: 1300px !important; }
+.w-1350-f { width: 1350px !important; }
+.w-1400-f { width: 1400px !important; }
+.w-1450-f { width: 1450px !important; }
+.w-1500-f { width: 1500px !important; }
 
 /* Max-width and Min-width */
 .max-w-10 { max-width: 0.625rem !important; }
@@ -6770,60 +6798,111 @@ color: var(--primary) !important;
 .min-h-900 { min-height: 56.25rem !important; }
 
 /* height */
-/* Height utilities with Pexels scaling system (1 unit = 0.0625rem) */
-/* Increments of 5 from 5-20 */
-.h-5 { max-height: 0.3125rem; height: 100% !important; }
-.h-10 { max-height: 0.625rem; height: 100% !important; }
-.h-15 { max-height: 0.9375rem; height: 100% !important; }
-.h-20 { max-height: 1.25rem; height: 100% !important; }
+/* Max-height versions (responsive with height: 100%) */
+.h-5 { max-height: 5px; height: 100% !important; }
+.h-10 { max-height: 10px; height: 100% !important; }
+.h-15 { max-height: 15px; height: 100% !important; }
+.h-20 { max-height: 20px; height: 100% !important; }
+
+/* Increments of 5 from 25-95 */
+.h-25 { max-height: 25px; height: 100% !important; }
+.h-30 { max-height: 30px; height: 100% !important; }
+.h-35 { max-height: 35px; height: 100% !important; }
+.h-40 { max-height: 40px; height: 100% !important; }
+.h-45 { max-height: 45px; height: 100% !important; }
+.h-50 { max-height: 50px; height: 100% !important; }
+.h-55 { max-height: 55px; height: 100% !important; }
+.h-60 { max-height: 60px; height: 100% !important; }
+.h-65 { max-height: 65px; height: 100% !important; }
+.h-70 { max-height: 70px; height: 100% !important; }
+.h-75 { max-height: 75px; height: 100% !important; }
+.h-80 { max-height: 80px; height: 100% !important; }
+.h-85 { max-height: 85px; height: 100% !important; }
+.h-90 { max-height: 90px; height: 100% !important; }
+.h-95 { max-height: 95px; height: 100% !important; }
+
+.h-100 { max-height: 100px; height: 100% !important; }
+.h-150 { max-height: 150px; height: 100% !important; }
+.h-200 { max-height: 200px; height: 100% !important; }
+.h-250 { max-height: 250px; height: 100% !important; }
+.h-300 { max-height: 300px; height: 100% !important; }
+.h-350 { max-height: 350px; height: 100% !important; }
+.h-400 { max-height: 400px; height: 100% !important; }
+.h-450 { max-height: 450px; height: 100% !important; }
+.h-500 { max-height: 500px; height: 100% !important; }
+.h-550 { max-height: 550px; height: 100% !important; }
+.h-600 { max-height: 600px; height: 100% !important; }
+.h-650 { max-height: 650px; height: 100% !important; }
+.h-700 { max-height: 700px; height: 100% !important; }
+.h-750 { max-height: 750px; height: 100% !important; }
+.h-800 { max-height: 800px; height: 100% !important; }
+.h-850 { max-height: 850px; height: 100% !important; }
+.h-900 { max-height: 900px; height: 100% !important; }
+.h-950 { max-height: 950px; height: 100% !important; }
+.h-1000 { max-height: 1000px; height: 100% !important; }
+.h-1050 { max-height: 1050px; height: 100% !important; }
+.h-1100 { max-height: 1100px; height: 100% !important; }
+.h-1150 { max-height: 1150px; height: 100% !important; }
+.h-1200 { max-height: 1200px; height: 100% !important; }
+.h-1250 { max-height: 1250px; height: 100% !important; }
+.h-1300 { max-height: 1300px; height: 100% !important; }
+.h-1350 { max-height: 1350px; height: 100% !important; }
+.h-1400 { max-height: 1400px; height: 100% !important; }
+.h-1450 { max-height: 1450px; height: 100% !important; }
+.h-1500 { max-height: 1500px; height: 100% !important; }
+
+/* Fixed height versions (no max-height, just height) */
+.h-5-f { height: 5px !important; }
+.h-10-f { height: 10px !important; }
+.h-15-f { height: 15px !important; }
+.h-20-f { height: 20px !important; }
 
 /* Increments of 5 from 25-95 */
-.h-25 { max-height: 1.5625rem; height: 100% !important; }
-.h-30 { max-height: 1.875rem; height: 100% !important; }
-.h-35 { max-height: 2.1875rem; height: 100% !important; }
-.h-40 { max-height: 2.5rem; height: 100% !important; }
-.h-45 { max-height: 2.8125rem; height: 100% !important; }
-.h-50 { max-height: 3.125rem; height: 100% !important; }
-.h-55 { max-height: 3.4375rem; height: 100% !important; }
-.h-60 { max-height: 3.75rem; height: 100% !important; }
-.h-65 { max-height: 4.0625rem; height: 100% !important; }
-.h-70 { max-height: 4.375rem; height: 100% !important; }
-.h-75 { max-height: 4.6875rem; height: 100% !important; }
-.h-80 { max-height: 5rem; height: 100% !important; }
-.h-85 { max-height: 5.3125rem; height: 100% !important; }
-.h-90 { max-height: 5.625rem; height: 100% !important; }
-.h-95 { max-height: 5.9375rem; height: 100% !important; }
-
-/* Increments of 50 from 100-1500 */
-.h-100 { max-height: 6.25rem; height: 100% !important; }
-.h-150 { max-height: 9.375rem; height: 100% !important; }
-.h-200 { max-height: 12.5rem; height: 100% !important; }
-.h-250 { max-height: 15.625rem; height: 100% !important; }
-.h-300 { max-height: 18.75rem; height: 100% !important; }
-.h-350 { max-height: 21.875rem; height: 100% !important; }
-.h-400 { max-height: 25rem; height: 100% !important; }
-.h-450 { max-height: 28.125rem; height: 100% !important; }
-.h-500 { max-height: 31.25rem; height: 100% !important; }
-.h-550 { max-height: 34.375rem; height: 100% !important; }
-.h-600 { max-height: 37.5rem; height: 100% !important; }
-.h-650 { max-height: 40.625rem; height: 100% !important; }
-.h-700 { max-height: 43.75rem; height: 100% !important; }
-.h-750 { max-height: 46.875rem; height: 100% !important; }
-.h-800 { max-height: 50rem; height: 100% !important; }
-.h-850 { max-height: 53.125rem; height: 100% !important; }
-.h-900 { max-height: 56.25rem; height: 100% !important; }
-.h-950 { max-height: 59.375rem; height: 100% !important; }
-.h-1000 { max-height: 62.5rem; height: 100% !important; }
-.h-1050 { max-height: 65.625rem; height: 100% !important; }
-.h-1100 { max-height: 68.75rem; height: 100% !important; }
-.h-1150 { max-height: 71.875rem; height: 100% !important; }
-.h-1200 { max-height: 75rem; height: 100% !important; }
-.h-1250 { max-height: 78.125rem; height: 100% !important; }
-.h-1300 { max-height: 81.25rem; height: 100% !important; }
-.h-1350 { max-height: 84.375rem; height: 100% !important; }
-.h-1400 { max-height: 87.5rem; height: 100% !important; }
-.h-1450 { max-height: 90.625rem; height: 100% !important; }
-.h-1500 { max-height: 93.75rem; height: 100% !important; }
+.h-25-f { height: 25px !important; }
+.h-30-f { height: 30px !important; }
+.h-35-f { height: 35px !important; }
+.h-40-f { height: 40px !important; }
+.h-45-f { height: 45px !important; }
+.h-50-f { height: 50px !important; }
+.h-55-f { height: 55px !important; }
+.h-60-f { height: 60px !important; }
+.h-65-f { height: 65px !important; }
+.h-70-f { height: 70px !important; }
+.h-75-f { height: 75px !important; }
+.h-80-f { height: 80px !important; }
+.h-85-f { height: 85px !important; }
+.h-90-f { height: 90px !important; }
+.h-95-f { height: 95px !important; }
+
+.h-100-f { height: 100px !important; }
+.h-150-f { height: 150px !important; }
+.h-200-f { height: 200px !important; }
+.h-250-f { height: 250px !important; }
+.h-300-f { height: 300px !important; }
+.h-350-f { height: 350px !important; }
+.h-400-f { height: 400px !important; }
+.h-450-f { height: 450px !important; }
+.h-500-f { height: 500px !important; }
+.h-550-f { height: 550px !important; }
+.h-600-f { height: 600px !important; }
+.h-650-f { height: 650px !important; }
+.h-700-f { height: 700px !important; }
+.h-750-f { height: 750px !important; }
+.h-800-f { height: 800px !important; }
+.h-850-f { height: 850px !important; }
+.h-900-f { height: 900px !important; }
+.h-950-f { height: 950px !important; }
+.h-1000-f { height: 1000px !important; }
+.h-1050-f { height: 1050px !important; }
+.h-1100-f { height: 1100px !important; }
+.h-1150-f { height: 1150px !important; }
+.h-1200-f { height: 1200px !important; }
+.h-1250-f { height: 1250px !important; }
+.h-1300-f { height: 1300px !important; }
+.h-1350-f { height: 1350px !important; }
+.h-1400-f { height: 1400px !important; }
+.h-1450-f { height: 1450px !important; }
+.h-1500-f { height: 1500px !important; }
 
 /* percentage */
 .h-10-p { height: 10% !important; }
@@ -7309,7 +7388,6 @@ color: var(--primary) !important;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
-  padding: 1rem 0;
   scroll-behavior: smooth;
 }
 .carouselLeft{

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.8.15",
+  "version": "3.8.16",
   "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/accordion/Accordion.d.ts

@@ -61,6 +61,8 @@ type AccordionProps = {
     borderColor?: string;
     borderRadius?: string;
     shadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+    bg?: string;
+    contentBg?: string;
     animationDuration?: number;
     animationEasing?: string;
     className?: string;

package/ui/accordion/Accordion.js

@@ -44,6 +44,42 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -55,10 +91,24 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var getCssVariable_1 = require("../../utils/getCssVariable");
-var componentUtils_1 = require("../../utils/componentUtils");
-var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
 var pi_1 = require("react-icons/pi");
+// Mock utilities - replace with your actual imports
+var getCssVariableValue = function (varName) {
+    if (typeof window === 'undefined')
+        return '';
+    return getComputedStyle(document.documentElement).getPropertyValue("--".concat(varName)).trim();
+};
+var useComponentConfiguration = function (componentName, variant) {
+    return {
+        mergeWithLocal: function (localProps) { return ({ props: localProps }); }
+    };
+};
+var getDynamicIcon = function (iconString) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        // Mock implementation - replace with your actual icon loader
+        return [2 /*return*/, null];
+    });
+}); };
 // Custom hook for dynamic icons
 var useDynamicIcon = function (iconString) {
     var _a = (0, react_1.useState)(null), iconNode = _a[0], setIconNode = _a[1];
@@ -69,7 +119,7 @@ var useDynamicIcon = function (iconString) {
             setHasValidIcon(false);
             return;
         }
-        (0, getDynamicIcon_1.getDynamicIcon)(iconString).then(function (node) {
+        getDynamicIcon(iconString).then(function (node) {
             if (node) {
                 setIconNode(node);
                 setHasValidIcon(true);
@@ -89,10 +139,8 @@ var AccordionIcon = function (_a) {
     var colorToUse = isExpandIcon ? expandIconColor : iconColor;
     var sizeToUse = isExpandIcon ? expandIconSize : iconSize;
     var classNameToUse = isExpandIcon ? expandIconClassName : iconClassName;
-    // Handle string icons (dynamic)
     var isStringIcon = iconToUse && typeof iconToUse === 'string';
     var _j = useDynamicIcon(isStringIcon ? iconToUse : undefined), dynamicIconNode = _j.iconNode, hasValidDynamicIcon = _j.hasValidIcon;
-    // Get color class from color name
     var getColorClass = function (color) {
         if (!color)
             return '';
@@ -117,15 +165,12 @@ var AccordionIcon = function (_a) {
         }
         return react_1.default.cloneElement(iconElement, props);
     };
-    // If it's a React element icon
     if (iconToUse && typeof iconToUse !== 'string' && react_1.default.isValidElement(iconToUse)) {
         return renderIconWithProps(iconToUse, "".concat(isExpandIcon ? 'accordion-expand-icon' : 'accordion-icon', " ").concat(classNameToUse, " ").concat(isOpen && rotate ? 'accordion-rotated' : '').trim(), sizeToUse);
     }
-    // If it's a string icon (dynamic)
     if (isStringIcon && hasValidDynamicIcon && dynamicIconNode) {
         return renderIconWithProps(dynamicIconNode, "".concat(isExpandIcon ? 'accordion-expand-icon' : 'accordion-icon', " ").concat(classNameToUse, " ").concat(isOpen && rotate ? 'accordion-rotated' : '').trim(), sizeToUse);
     }
-    // Default expand icon (PiCaretDown)
     if (isExpandIcon && !iconToUse) {
         return (react_1.default.createElement(pi_1.PiCaretDown, { className: "accordion-expand-icon ".concat(expandIconClassName || '', " ").concat(colorClass, " ").concat(isOpen && rotate ? 'accordion-rotated' : '').trim(), style: {
                 fontSize: expandIconSize,
@@ -137,10 +182,8 @@ var AccordionIcon = function (_a) {
 // Accordion Item Component
 var AccordionItem = function (_a) {
     var item = _a.item, index = _a.index, isOpen = _a.isOpen, onToggle = _a.onToggle, globalProps = _a.globalProps, _b = _a.animationDuration, animationDuration = _b === void 0 ? 300 : _b, _c = _a.animationEasing, animationEasing = _c === void 0 ? 'ease' : _c;
-    // Merge item props with global props (item props take precedence)
     var mergedProps = __assign(__assign({}, globalProps), item);
     var itemClass = mergedProps.itemClass, titleClass = mergedProps.titleClass, iconClass = mergedProps.iconClass, contentClass = mergedProps.contentClass, activeClass = mergedProps.activeClass, icon = mergedProps.icon, iconColor = mergedProps.iconColor, iconSize = mergedProps.iconSize, iconClassName = mergedProps.iconClassName, _d = mergedProps.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, expandIcon = mergedProps.expandIcon, expandIconColor = mergedProps.expandIconColor, expandIconSize = mergedProps.expandIconSize, expandIconClassName = mergedProps.expandIconClassName, _e = mergedProps.expandIconRotate, expandIconRotate = _e === void 0 ? true : _e, titleSize = mergedProps.titleSize, titleWeight = mergedProps.titleWeight, titleColor = mergedProps.titleColor, contentSize = mergedProps.contentSize, contentWeight = mergedProps.contentWeight, contentColor = mergedProps.contentColor, disabled = mergedProps.disabled, customRender = mergedProps.customRender;
-    // Get background class from color name
     var getBgClass = function (color) {
         if (!color)
             return '';
@@ -153,7 +196,6 @@ var AccordionItem = function (_a) {
         }
         return '';
     };
-    // Get border class from color name
     var getBorderClass = function (color) {
         if (!color)
             return '';
@@ -164,13 +206,11 @@ var AccordionItem = function (_a) {
         if (colorNames.includes(color)) {
             return "border-".concat(color);
         }
-        // Special handling for borderColor
         if (color === 'borderColor') {
             return 'border-default';
         }
         return '';
     };
-    // Get text size class
     var getTextSizeClass = function (size) {
         if (!size)
             return 'text-sm';
@@ -183,7 +223,6 @@ var AccordionItem = function (_a) {
         }
         return 'text-sm';
     };
-    // Get text color class
     var getTextColorClass = function (color) {
         if (!color)
             return 'text-default';
@@ -210,17 +249,14 @@ var AccordionItem = function (_a) {
     var titleContent = typeof item.title === 'string' ? (react_1.default.createElement("div", { className: "\n        ".concat(getTextSizeClass(titleSize), " \n        ").concat(getTextColorClass(titleColor), "\n        ").concat(titleClass || '', "\n      ").trim(), style: {
             fontWeight: titleWeight || 400,
         } }, item.title)) : item.title;
-    // Get container classes
     var getContainerClasses = function () {
         var classes = ['accordion-item'];
-        // Background
         if (globalProps.bg) {
             var bgClass = getBgClass(globalProps.bg);
             if (bgClass) {
                 classes.push(bgClass);
             }
         }
-        // Border
         if (globalProps.border) {
             classes.push('border');
             var borderClass = getBorderClass(globalProps.borderColor);
@@ -228,7 +264,6 @@ var AccordionItem = function (_a) {
                 classes.push(borderClass);
             }
         }
-        // Border radius
         if (globalProps.borderRadius) {
             var radius = getSpacingValue(globalProps.borderRadius);
             if (radius === '0.25rem')
@@ -240,18 +275,15 @@ var AccordionItem = function (_a) {
             else if (radius === '1rem')
                 classes.push('rounded-xl');
         }
-        // Shadow
         if (globalProps.shadow && globalProps.shadow !== 'none') {
             classes.push("shadow-".concat(globalProps.shadow));
         }
-        // State classes
         if (isOpen) {
             classes.push(activeClass || 'active');
         }
         if (disabled) {
             classes.push('disabled');
         }
-        // Custom classes
         if (itemClass) {
             classes.push(itemClass);
         }
@@ -288,7 +320,7 @@ var AccordionItem = function (_a) {
                 transition: "max-height ".concat(animationDuration, "ms ").concat(animationEasing),
                 padding: isOpen ? getSpacingValue(globalProps.padding) || '0.5rem 0' : '0',
                 backgroundColor: globalProps.contentBg ? getBgClass(globalProps.contentBg) : '',
-                borderTop: isOpen && globalProps.border ? "1px solid ".concat((0, getCssVariable_1.getCssVariableValue)(globalProps.borderColor) || 'var(--borderColor)') : 'none',
+                borderTop: isOpen && globalProps.border ? "1px solid ".concat(getCssVariableValue(globalProps.borderColor) || 'var(--borderColor)') : 'none',
             } },
             react_1.default.createElement("div", { className: "\n            accordion-inner\n            ".concat(getTextSizeClass(contentSize), "\n            ").concat(getTextColorClass(contentColor), "\n          ").trim(), style: {
                     opacity: isOpen ? 1 : 0,
@@ -299,14 +331,10 @@ var AccordionItem = function (_a) {
 };
 // Main Accordion Component
 var Accordion = function (localProps) {
-    // Merge props with configuration
-    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Accordion', localProps.variant).mergeWithLocal;
+    var mergeWithLocal = useComponentConfiguration('Accordion', localProps.variant).mergeWithLocal;
     var mergedProps = mergeWithLocal(localProps).props;
     var final = mergedProps;
-    var _a = (0, react_1.useState)([]), openIndexes = _a[0], setOpenIndexes = _a[1];
-    var _b = (0, react_1.useState)([]), itemsArray = _b[0], setItemsArray = _b[1];
-    // Use ref to track if we've initialized
-    var hasInitialized = (0, react_1.useRef)(false);
+    var _a = (0, react_1.useState)([]), itemsArray = _a[0], setItemsArray = _a[1];
     // Parse items from JSON string if needed
     (0, react_1.useEffect)(function () {
         if (typeof final.items === 'string') {
@@ -326,38 +354,38 @@ var Accordion = function (localProps) {
             setItemsArray([]);
         }
     }, [final.items]);
-    // Initialize open indexes only once
-    (0, react_1.useEffect)(function () {
-        if (!hasInitialized.current) {
-            if (final.allowMultiple) {
-                setOpenIndexes(final.defaultOpenIndexes || []);
-            }
-            else {
-                setOpenIndexes(final.defaultOpenIndexes && final.defaultOpenIndexes.length > 0
-                    ? [final.defaultOpenIndexes[0]]
-                    : []);
-            }
-            hasInitialized.current = true;
+    // Initialize open indexes using useMemo to compute initial value
+    var initialOpenIndexes = react_1.default.useMemo(function () {
+        if (final.allowMultiple) {
+            return final.defaultOpenIndexes || [];
+        }
+        else {
+            return final.defaultOpenIndexes && final.defaultOpenIndexes.length > 0
+                ? [final.defaultOpenIndexes[0]]
+                : [];
         }
-    }, []);
+    }, [final.allowMultiple, final.defaultOpenIndexes]);
+    var _b = (0, react_1.useState)(initialOpenIndexes), openIndexes = _b[0], setOpenIndexes = _b[1];
     var toggleIndex = function (index) {
-        var newOpenIndexes = [];
-        if (final.allowMultiple) {
-            if (openIndexes.includes(index)) {
-                newOpenIndexes = openIndexes.filter(function (i) { return i !== index; });
+        setOpenIndexes(function (prevOpenIndexes) {
+            var newOpenIndexes = [];
+            if (final.allowMultiple) {
+                if (prevOpenIndexes.includes(index)) {
+                    newOpenIndexes = prevOpenIndexes.filter(function (i) { return i !== index; });
+                }
+                else {
+                    newOpenIndexes = __spreadArray(__spreadArray([], prevOpenIndexes, true), [index], false);
+                }
             }
             else {
-                newOpenIndexes = __spreadArray(__spreadArray([], openIndexes, true), [index], false);
+                newOpenIndexes = prevOpenIndexes.includes(index) ? [] : [index];
             }
-        }
-        else {
-            newOpenIndexes = openIndexes.includes(index) ? [] : [index];
-        }
-        setOpenIndexes(newOpenIndexes);
-        // Call callback if provided
-        if (final.onItemToggle) {
-            final.onItemToggle(index, !openIndexes.includes(index));
-        }
+            // Call callback if provided
+            if (final.onItemToggle) {
+                final.onItemToggle(index, !prevOpenIndexes.includes(index));
+            }
+            return newOpenIndexes;
+        });
     };
     var getContainerClasses = function () {
         var classes = ['accordion'];

package/ui/carousel/Carousel.d.ts

@@ -12,6 +12,8 @@ interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     infiniteScroll?: boolean;
     infiniteScrollSpeed?: number;
     infiniteScrollDirection?: 'left' | 'right' | 'alternate';
+    overflowCss?: string;
+    overflowPadding?: string;
 }
 declare const Carousel: React.FC<CarouselProps>;
 export default Carousel;

package/ui/carousel/Carousel.js

@@ -55,27 +55,52 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
-var Circle_1 = __importDefault(require("../specials/Circle"));
-var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
-var Functions_1 = require("../../utils/Functions");
+// Helper function to detect touch devices
+var isTouchDevice = function () {
+    return (('ontouchstart' in window) ||
+        (navigator.maxTouchPoints > 0));
+};
+// Simple Circle component
+var Circle = function (_a) {
+    var bordered = _a.bordered, _b = _a.size, size = _b === void 0 ? 2.5 : _b, onClick = _a.onClick, children = _a.children;
+    return (react_1.default.createElement("div", { onClick: onClick, style: {
+            width: "".concat(size, "rem"),
+            height: "".concat(size, "rem"),
+            borderRadius: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            border: bordered ? '1px solid var(--borderColor, #ccc)' : 'none',
+            cursor: 'pointer',
+            background: 'var(--background, white)',
+            transition: 'all 0.2s ease'
+        } }, children));
+};
+// Simple RowFlex component
+var RowFlex = function (_a) {
+    var _b = _a.gap, gap = _b === void 0 ? 0.5 : _b, _c = _a.justify, justify = _c === void 0 ? 'flex-start' : _c, children = _a.children;
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            gap: "".concat(gap, "rem"),
+            justifyContent: justify
+        } }, children));
+};
 var Carousel = function (_a) {
-    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '0rem' : _g, children = _a.children, _h = _a.controlerSize, controlerSize = _h === void 0 ? 2.5 : _h, _j = _a.controlerIconSize, controlerIconSize = _j === void 0 ? 20 : _j, _k = _a.infiniteScroll, infiniteScroll = _k === void 0 ? false : _k, _l = _a.infiniteScrollSpeed, infiniteScrollSpeed = _l === void 0 ? 50 : _l, _m = _a.infiniteScrollDirection, infiniteScrollDirection = _m === void 0 ? 'left' : _m, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children", "controlerSize", "controlerIconSize", "infiniteScroll", "infiniteScrollSpeed", "infiniteScrollDirection"]);
+    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '' : _g, children = _a.children, _h = _a.controlerSize, controlerSize = _h === void 0 ? 2.5 : _h, _j = _a.controlerIconSize, controlerIconSize = _j === void 0 ? 20 : _j, _k = _a.infiniteScroll, infiniteScroll = _k === void 0 ? false : _k, _l = _a.infiniteScrollSpeed, infiniteScrollSpeed = _l === void 0 ? 50 : _l, _m = _a.infiniteScrollDirection, infiniteScrollDirection = _m === void 0 ? 'left' : _m, _o = _a.overflowPadding, overflowPadding = _o === void 0 ? '' : _o, _p = _a.overflowCss, overflowCss = _p === void 0 ? '' : _p, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children", "controlerSize", "controlerIconSize", "infiniteScroll", "infiniteScrollSpeed", "infiniteScrollDirection", "overflowPadding", "overflowCss"]);
     var scrollRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
-    var _o = (0, react_1.useState)('start'), scrollPosition = _o[0], setScrollPosition = _o[1];
-    var _p = (0, react_1.useState)(false), isPhone = _p[0], setIsPhone = _p[1];
-    var _q = (0, react_1.useState)(false), isScrollable = _q[0], setIsScrollable = _q[1];
-    var _r = (0, react_1.useState)(infiniteScrollDirection === 'right' ? 'right' : 'left'), autoScrollDirection = _r[0], setAutoScrollDirection = _r[1];
-    var _s = (0, react_1.useState)(false), isHovered = _s[0], setIsHovered = _s[1];
-    var animationRef = (0, react_1.useRef)(null);
-    var lastScrollTimeRef = (0, react_1.useRef)(0);
-    var isProgrammaticScrollRef = (0, react_1.useRef)(false);
+    var _q = (0, react_1.useState)('start'), scrollPosition = _q[0], setScrollPosition = _q[1];
+    var _r = (0, react_1.useState)(false), isPhone = _r[0], setIsPhone = _r[1];
+    var _s = (0, react_1.useState)(false), isScrollable = _s[0], setIsScrollable = _s[1];
+    var _t = (0, react_1.useState)(infiniteScrollDirection === 'right' ? 'right' : 'left'), autoScrollDirection = _t[0], setAutoScrollDirection = _t[1];
+    var _u = (0, react_1.useState)(false), isPaused = _u[0], setIsPaused = _u[1];
+    var _v = (0, react_1.useState)(false), isReady = _v[0], setIsReady = _v[1];
+    var animationFrameRef = (0, react_1.useRef)(null);
+    var lastTimestampRef = (0, react_1.useRef)(0);
+    var startDelayRef = (0, react_1.useRef)(false);
     var checkScrollable = function () {
         var container = scrollRef.current;
         if (container) {
@@ -87,19 +112,23 @@ var Carousel = function (_a) {
         window.addEventListener('resize', checkScrollable);
         return function () { return window.removeEventListener('resize', checkScrollable); };
     }, [children]);
+    // Delay start for smooth initialization
     (0, react_1.useEffect)(function () {
-        if ((0, Functions_1.isTouchDevice)()) {
-            setIsPhone(true);
+        if (infiniteScroll && isScrollable) {
+            // Wait for layout to settle and then start
+            var timer_1 = setTimeout(function () {
+                setIsReady(true);
+            }, 300);
+            return function () { return clearTimeout(timer_1); };
         }
         else {
-            setIsPhone(false);
+            setIsReady(false);
         }
+    }, [infiniteScroll, isScrollable]);
+    (0, react_1.useEffect)(function () {
+        setIsPhone(isTouchDevice());
     }, []);
     var handleScroll = function () {
-        if (isProgrammaticScrollRef.current) {
-            isProgrammaticScrollRef.current = false;
-            return;
-        }
         var container = scrollRef.current;
         if (!container)
             return;
@@ -114,7 +143,6 @@ var Carousel = function (_a) {
         else {
             setScrollPosition('middle');
         }
-        lastScrollTimeRef.current = Date.now();
     };
     var scroll = function (direction) {
         var container = scrollRef.current;
@@ -125,18 +153,31 @@ var Carousel = function (_a) {
             behavior: 'smooth',
         });
     };
-    var infiniteScrollAnimation = function () {
-        if (!infiniteScroll || !scrollRef.current || isHovered || !isScrollable) {
-            if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
-                animationRef.current = null;
-            }
+    // Smooth auto-scroll animation using requestAnimationFrame
+    var smoothAutoScroll = function (timestamp) {
+        if (!infiniteScroll || !scrollRef.current || isPaused || !isScrollable || !isReady) {
+            animationFrameRef.current = null;
+            lastTimestampRef.current = 0;
             return;
         }
         var container = scrollRef.current;
         var scrollLeft = container.scrollLeft, scrollWidth = container.scrollWidth, clientWidth = container.clientWidth;
         var maxScrollLeft = scrollWidth - clientWidth;
+        // Initialize timestamp on first frame
+        if (lastTimestampRef.current === 0) {
+            lastTimestampRef.current = timestamp;
+            animationFrameRef.current = requestAnimationFrame(smoothAutoScroll);
+            return;
+        }
+        // Calculate time delta for smooth animation
+        var deltaTime = timestamp - lastTimestampRef.current;
+        lastTimestampRef.current = timestamp;
+        // Calculate scroll amount based on speed and time (pixels per second)
+        // Cap deltaTime to prevent large jumps after tab switches
+        var cappedDeltaTime = Math.min(deltaTime, 100);
+        var scrollAmount = (infiniteScrollSpeed * cappedDeltaTime) / 1000;
         var newDirection = autoScrollDirection;
+        // Handle alternate direction
         if (infiniteScrollDirection === 'alternate') {
             if (scrollLeft <= 0) {
                 newDirection = 'right';
@@ -147,32 +188,42 @@ var Carousel = function (_a) {
                 setAutoScrollDirection('left');
             }
         }
-        var scrollAmount = infiniteScrollSpeed / 60;
-        isProgrammaticScrollRef.current = true;
+        // Perform the scroll
         if (newDirection === 'left') {
             container.scrollLeft -= scrollAmount;
+            // Loop back for infinite scroll (non-alternate)
             if (scrollLeft <= 0 && infiniteScrollDirection !== 'alternate') {
                 container.scrollLeft = maxScrollLeft;
             }
         }
         else {
             container.scrollLeft += scrollAmount;
+            // Loop back for infinite scroll (non-alternate)
             if (scrollLeft >= maxScrollLeft - 1 && infiniteScrollDirection !== 'alternate') {
                 container.scrollLeft = 0;
             }
         }
-        animationRef.current = requestAnimationFrame(infiniteScrollAnimation);
+        animationFrameRef.current = requestAnimationFrame(smoothAutoScroll);
     };
+    // Start/stop auto-scroll based on pause state
     (0, react_1.useEffect)(function () {
-        if (infiniteScroll) {
-            infiniteScrollAnimation();
+        if (infiniteScroll && !isPaused && isScrollable && isReady) {
+            lastTimestampRef.current = 0;
+            animationFrameRef.current = requestAnimationFrame(smoothAutoScroll);
+        }
+        else {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+            lastTimestampRef.current = 0;
         }
         return function () {
-            if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
             }
         };
-    }, [infiniteScroll, infiniteScrollSpeed, infiniteScrollDirection, isHovered, isScrollable, autoScrollDirection]);
+    }, [infiniteScroll, infiniteScrollSpeed, infiniteScrollDirection, isPaused, isScrollable, autoScrollDirection, isReady]);
     (0, react_1.useEffect)(function () {
         setAutoScrollDirection(infiniteScrollDirection === 'right' ? 'right' : 'left');
     }, [infiniteScrollDirection]);
@@ -187,53 +238,29 @@ var Carousel = function (_a) {
         var childrenArray = react_1.default.Children.toArray(children);
         if (childrenArray.length === 0)
             return children;
-        // Clone enough items to create a seamless infinite effect
-        // We need enough clones to fill at least 3 times the viewport width
         var container = scrollRef.current;
         var clonesNeeded = container ? Math.ceil(container.clientWidth * 3 / (scrollNumber || 320)) : 3;
         var clonedItems = [];
         for (var i = 0; i < clonesNeeded; i++) {
             clonedItems.push.apply(clonedItems, childrenArray);
         }
-        return (react_1.default.createElement(react_1.default.Fragment, null, clonedItems.map(function (child, index) { return (react_1.default.createElement("div", { key: index, className: "carousel-item", style: { flexShrink: 0 } },
+        return (react_1.default.createElement(react_1.default.Fragment, null, clonedItems.map(function (child, index) { return (react_1.default.createElement("div", { key: index, className: "carousel-item", style: { flexShrink: 0 }, onMouseEnter: function () { return setIsPaused(true); }, onMouseLeave: function () { return setIsPaused(false); } },
             react_1.default.createElement("div", { className: "carousel-card" }, child))); })));
     };
-    var handleMouseEnter = function () {
-        setIsHovered(true);
-        if (animationRef.current) {
-            cancelAnimationFrame(animationRef.current);
-            animationRef.current = null;
-        }
-    };
-    var handleMouseLeave = function () {
-        setIsHovered(false);
-        if (infiniteScroll && !isHovered) {
-            infiniteScrollAnimation();
-        }
-    };
-    // Handle touch events for mobile
     var handleTouchStart = function () {
-        setIsHovered(true);
-        if (animationRef.current) {
-            cancelAnimationFrame(animationRef.current);
-            animationRef.current = null;
-        }
+        setIsPaused(true);
     };
     var handleTouchEnd = function () {
-        // Wait a bit before resuming to allow user to interact
         setTimeout(function () {
-            setIsHovered(false);
-            if (infiniteScroll && !isHovered) {
-                infiniteScrollAnimation();
-            }
-        }, 1000); // Resume after 1 second of inactivity
+            setIsPaused(false);
+        }, 1000);
     };
-    return (react_1.default.createElement("div", __assign({ ref: containerRef, className: "carousel-wrapper ".concat(funcss), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd }, rest),
+    return (react_1.default.createElement("div", __assign({ ref: containerRef, className: "carousel-wrapper", onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd }, rest),
         react_1.default.createElement(react_1.default.Fragment, null,
             !isPhone && isScrollable && !infiniteScroll && (react_1.default.createElement("div", { className: 'carouselLeft' },
-                react_1.default.createElement(Circle_1.default, { bordered: true, size: controlerSize, onClick: function () { return scroll('left'); } },
+                react_1.default.createElement(Circle, { bordered: true, size: controlerSize, onClick: function () { return scroll('left'); } },
                     react_1.default.createElement(pi_1.PiCaretLeft, { className: 'text-primary', size: controlerIconSize })))),
-            react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full", style: {
+            react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full ".concat(funcss, " ").concat(isScrollable ? overflowCss : ''), style: {
                     width: '100%',
                     gap: gap + 'rem',
                     overflowX: 'auto',
@@ -242,15 +269,15 @@ var Carousel = function (_a) {
                     justifyItems: (isScrollable || isPhone) ? 'flex-start' : 'center',
                     scrollSnapType: infiniteScroll ? 'none' : 'x mandatory',
                     scrollBehavior: 'smooth',
-                    padding: itemPadding || "0.5rem",
+                    padding: (isScrollable && overflowPadding) ? overflowPadding : itemPadding,
                     cursor: infiniteScroll ? 'grab' : 'default'
-                }, onMouseDown: function () { return infiniteScroll && handleMouseEnter(); }, onMouseUp: function () { return infiniteScroll && handleMouseLeave(); }, onScroll: handleScroll }, infiniteScroll ? cloneChildren() : (react_1.default.Children.map(children, function (child, index) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 } },
+                }, onScroll: handleScroll }, infiniteScroll ? cloneChildren() : (react_1.default.Children.map(children, function (child, index) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 }, onMouseEnter: function () { return !infiniteScroll && setIsPaused(true); }, onMouseLeave: function () { return !infiniteScroll && setIsPaused(false); } },
                 react_1.default.createElement("div", { className: "carousel-card" }, child))); }))),
             !isPhone && isScrollable && !infiniteScroll && (react_1.default.createElement("div", { className: 'carouselRight' },
-                react_1.default.createElement(Circle_1.default, { bordered: true, size: controlerSize, onClick: function () { return scroll('right'); } },
+                react_1.default.createElement(Circle, { bordered: true, size: controlerSize, onClick: function () { return scroll('right'); } },
                     react_1.default.createElement(pi_1.PiCaretRight, { className: 'text-primary', size: controlerIconSize }))))),
         (showDashes && isScrollable && !infiniteScroll) && (react_1.default.createElement("div", { className: "center padding-top-10" },
-            react_1.default.createElement(RowFlex_1.default, { gap: 0.5, justify: "center" }, ['start', 'middle', 'end'].map(function (pos) { return (react_1.default.createElement("div", { className: 'pointer', key: pos, onClick: function () {
+            react_1.default.createElement(RowFlex, { gap: 0.5, justify: "center" }, ['start', 'middle', 'end'].map(function (pos) { return (react_1.default.createElement("div", { className: 'pointer', key: pos, onClick: function () {
                     var _a, _b;
                     if (pos === 'start') {
                         scroll('left');
@@ -267,27 +294,10 @@ var Carousel = function (_a) {
                 }, style: {
                     width: '10px',
                     height: '10px',
-                    background: scrollPosition === pos ? 'var(--primary)' : 'var(--borderColor)',
+                    background: scrollPosition === pos ? 'var(--primary, #007bff)' : 'var(--borderColor, #ccc)',
                     borderRadius: '50%',
                     transform: scrollPosition === pos ? 'scale(1.3)' : 'scale(0.9)',
                     transition: 'transform 0.3s ease, background 0.3s ease',
-                } })); })))),
-        infiniteScroll && isHovered && (react_1.default.createElement("div", { style: {
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                background: 'rgba(0,0,0,0.7)',
-                color: 'white',
-                padding: '5px 10px',
-                borderRadius: '5px',
-                fontSize: '12px',
-                zIndex: 10,
-                pointerEvents: 'none',
-                opacity: 0,
-                animation: 'fadeInOut 2s ease'
-            } },
-            "Scroll paused",
-            react_1.default.createElement("style", null, "\n            @keyframes fadeInOut {\n              0% { opacity: 0; }\n              10% { opacity: 1; }\n              90% { opacity: 1; }\n              100% { opacity: 0; }\n            }\n          ")))));
+                } })); }))))));
 };
 exports.default = Carousel;

package/ui/sidebar/SideBar.d.ts

@@ -26,6 +26,7 @@ interface SideBarProps {
     children?: ReactNode;
     onClose?: () => void;
     isAccordion?: boolean;
+    togglePrefix?: ReactNode;
 }
-export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, iconCSS, sidebarCss, activeCss, bodyCss, popIcon, dividers, accordionItemCss, links, children, onClose, isAccordion, }: SideBarProps): React.JSX.Element;
+export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, iconCSS, sidebarCss, activeCss, bodyCss, popIcon, dividers, accordionItemCss, links, children, onClose, togglePrefix, isAccordion, }: SideBarProps): React.JSX.Element;
 export {};

package/ui/sidebar/SideBar.js

@@ -337,7 +337,7 @@ var bs_1 = require("react-icons/bs");
 var Flex_1 = __importDefault(require("../flex/Flex"));
 function SideBar(_a) {
     var _b, _c;
-    var _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.position, position = _e === void 0 ? 'left' : _e, _f = _a.open, open = _f === void 0 ? false : _f, header = _a.header, content = _a.content, footer = _a.footer, _g = _a.top, top = _g === void 0 ? 0 : _g, _h = _a.sidebarWidth, sidebarWidth = _h === void 0 ? 250 : _h, _j = _a.iconCSS, iconCSS = _j === void 0 ? '' : _j, _k = _a.sidebarCss, sidebarCss = _k === void 0 ? '' : _k, activeCss = _a.activeCss, _l = _a.bodyCss, bodyCss = _l === void 0 ? '' : _l, _m = _a.popIcon, popIcon = _m === void 0 ? false : _m, _o = _a.dividers, dividers = _o === void 0 ? false : _o, accordionItemCss = _a.accordionItemCss, _p = _a.links, links = _p === void 0 ? [] : _p, children = _a.children, onClose = _a.onClose, _q = _a.isAccordion, isAccordion = _q === void 0 ? false : _q;
+    var _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.position, position = _e === void 0 ? 'left' : _e, _f = _a.open, open = _f === void 0 ? false : _f, header = _a.header, content = _a.content, footer = _a.footer, _g = _a.top, top = _g === void 0 ? 0 : _g, _h = _a.sidebarWidth, sidebarWidth = _h === void 0 ? 250 : _h, _j = _a.iconCSS, iconCSS = _j === void 0 ? '' : _j, _k = _a.sidebarCss, sidebarCss = _k === void 0 ? '' : _k, activeCss = _a.activeCss, _l = _a.bodyCss, bodyCss = _l === void 0 ? '' : _l, _m = _a.popIcon, popIcon = _m === void 0 ? false : _m, _o = _a.dividers, dividers = _o === void 0 ? false : _o, accordionItemCss = _a.accordionItemCss, _p = _a.links, links = _p === void 0 ? [] : _p, children = _a.children, onClose = _a.onClose, togglePrefix = _a.togglePrefix, _q = _a.isAccordion, isAccordion = _q === void 0 ? false : _q;
     var _r = (0, react_1.useState)(false), isMobile = _r[0], setIsMobile = _r[1];
     var _s = (0, react_1.useState)(open), internalOpen = _s[0], setInternalOpen = _s[1];
     var _t = (0, react_1.useState)('0px'), appBarHeight = _t[0], setAppBarHeight = _t[1];
@@ -479,8 +479,10 @@ function SideBar(_a) {
                 _c.padding = '1rem',
                 _c) },
             react_1.default.createElement("div", { className: "sidebar-header" },
-                react_1.default.createElement("div", { className: 'pointer hover-text-primary text-right', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
-                    react_1.default.createElement(bs_1.BsLayoutSidebarInset, null)),
+                react_1.default.createElement(Flex_1.default, { width: '100%', alignItems: 'center', gap: 0.5, justify: 'space-between' },
+                    togglePrefix || react_1.default.createElement("div", null),
+                    react_1.default.createElement("div", { className: 'pointer hover-text-primary text-right', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
+                        react_1.default.createElement(bs_1.BsLayoutSidebarInset, null))),
                 header && react_1.default.createElement("div", null, header)),
             react_1.default.createElement("section", { className: "sidebar-body mt-3" },
                 links.length > 0 && (react_1.default.createElement("nav", { className: "sidebar-links" }, isAccordion ? (react_1.default.createElement(Accordion_1.default, { itemClass: accordionItemCss, items: accordionItems, allowMultiple: false, contentClass: "", titleClass: 'text-sm', activeClass: "" })) : (Object.entries(groupedLinks).map(function (_a) {

package/ui/vista/Vista.js

@@ -286,6 +286,10 @@ var Vista = function (localProps) {
             overflow: 'hidden',
             minHeight: 'auto',
             height: 'fit-content',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
             backgroundImage: final.pattern && final.backgroundMode !== 'background' ?
                 (final.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px),\n          linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
                     final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
@@ -354,7 +358,7 @@ var Vista = function (localProps) {
                 padding: '2rem',
             } },
             react_1.default.createElement("div", { style: {
-                    maxWidth: final.contentWrapperMaxWidth || '500px',
+                    maxWidth: final.contentWrapperMaxWidth || '700px',
                     width: '100%',
                     textAlign: final.textAlign || 'left',
                 } }, ContentComponent))) : (
@@ -368,6 +372,7 @@ var Vista = function (localProps) {
                 alignItems: 'center',
                 justifyContent: 'center',
                 width: '100%',
+                height: '100%',
                 maxWidth: '1200px',
                 margin: '0 auto',
                 padding: '2rem',
@@ -375,7 +380,7 @@ var Vista = function (localProps) {
             } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
             (final.mediaPosition === 'top') && react_1.default.createElement(MediaComponent, null),
             react_1.default.createElement("div", { style: {
-                    maxWidth: final.contentWrapperMaxWidth || '500px',
+                    maxWidth: final.contentWrapperMaxWidth || '100%',
                     width: '100%',
                     textAlign: final.textAlign || 'left',
                 } }, ContentComponent),