@c-rex/components 0.3.0-build.26 → 0.3.0-build.28

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.26",
+    "version":  "0.3.0-build.28",
     "files":  [
                   "src"
               ],

package/src/carousel/carousel.tsx

@@ -324,16 +324,25 @@ const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
     if (!setPage) {
         const totalOfIndicators = Math.max(slidesLength - slidesToShow + 1, 1);
         if (totalOfIndicators === 1) return null;
-        if (totalOfIndicators > 8) {
-            return (
-                <div className={cn("mt-3 flex items-center gap-2 text-sm text-muted-foreground", className)}>
-                    <span className="rounded-full border px-3 py-1">{current + 1} / {totalOfIndicators}</span>
-                </div>
-            );
+        const maxVisibleIndicators = 7;
+        const visibleIndicators = Math.min(totalOfIndicators, maxVisibleIndicators);
+        const halfWindow = Math.floor(visibleIndicators / 2);
+        let startIndicator = Math.max(0, current - halfWindow);
+        let endIndicator = startIndicator + visibleIndicators - 1;
+
+        if (endIndicator >= totalOfIndicators) {
+            endIndicator = totalOfIndicators - 1;
+            startIndicator = Math.max(0, endIndicator - visibleIndicators + 1);
         }
+
+        const indicatorsToRender = Array.from(
+            { length: endIndicator - startIndicator + 1 },
+            (_, index) => startIndicator + index
+        );
+
         return (
-            <ol className={cn("flex gap-2 z-20 list-none p-0 m-0", className)}>
-                {Array.from({ length: totalOfIndicators }).map((_, index) => (
+            <ol className={cn("mt-3 flex gap-2 z-20 list-none p-0 m-0", className)}>
+                {indicatorsToRender.map((index) => (
                     <li key={`indicator-${index}`}>
                         <Button
                             className={`w-3 h-3 rounded-full border-0 cursor-pointer transition-colors ${index === current ? "bg-gray-800" : "bg-gray-300"}`}