@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20261008080959 → 0.8.1-dev.20261010122158

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/{Slider-UNNVADVP.mjs → Slider-BH5S4XRN.mjs} +35 -49
  2. package/dist/{Slider-42T6THEQ.mjs → Slider-XDYPGJYI.mjs} +35 -49
  3. package/dist/index.js +35 -49
  4. package/dist/index.mjs +1 -1
  5. package/dist/server.js +35 -49
  6. package/dist/server.mjs +1 -1
  7. package/package.json +1 -1
package/dist/{Slider-UNNVADVP.mjs → Slider-BH5S4XRN.mjs} RENAMED
@@ -111,36 +111,42 @@ var Slider = ({
111
111
  const effectiveSlidesToShow = 100 / slideWidthPercentage;
112
112
  const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
113
113
  const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
114
+ const slidePositions = Array.from(
115
+ { length: Math.ceil(maxSlide / step) + 1 },
116
+ (_, index) => Math.min(index * step, maxSlide)
117
+ );
118
+ const currentStepIndex = slidePositions.reduce(
119
+ (closestIndex, position, index) => Math.abs(position - currentSlide) < Math.abs(slidePositions[closestIndex] - currentSlide) ? index : closestIndex,
120
+ 0
121
+ );
114
122
  const nextSlide = () => {
115
- if (currentSlide >= maxSlide) {
123
+ if (currentStepIndex >= slidePositions.length - 1) {
116
124
  if (infinite_scroll) {
117
125
  setTransition(true);
118
126
  setCurrentSlide(0);
119
127
  }
120
128
  } else {
121
129
  setTransition(true);
122
- const nextIndex = currentSlide + step;
123
- setCurrentSlide(nextIndex > maxSlide ? maxSlide : nextIndex);
130
+ setCurrentSlide(slidePositions[currentStepIndex + 1]);
124
131
  }
125
132
  };
126
133
  const prevSlide = () => {
127
- if (currentSlide <= 0) {
134
+ if (currentStepIndex <= 0) {
128
135
  if (infinite_scroll) {
129
136
  setTransition(true);
130
- setCurrentSlide(maxSlide);
137
+ setCurrentSlide(slidePositions[slidePositions.length - 1]);
131
138
  }
132
139
  } else {
133
140
  setTransition(true);
134
- const prevIndex = currentSlide - step;
135
- setCurrentSlide(prevIndex < 0 ? 0 : prevIndex);
141
+ setCurrentSlide(slidePositions[currentStepIndex - 1]);
136
142
  }
137
143
  };
138
- const goToSlide = (index) => {
144
+ const goToStep = (index) => {
139
145
  setTransition(true);
140
- setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
146
+ setCurrentSlide(slidePositions[index]);
141
147
  };
142
148
  const handlePillClick = (index) => {
143
- goToSlide(index);
149
+ goToStep(index);
144
150
  if (autoplay) {
145
151
  setIsPlaying(true);
146
152
  }
@@ -173,20 +179,19 @@ var Slider = ({
173
179
  );
174
180
  });
175
181
  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
176
- show_dots && progressPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mb-4", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx(
182
+ show_dots && progressPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mb-4", children: slidePositions.map((_, index) => /* @__PURE__ */ jsx(
177
183
  ProgressPill,
178
184
  {
179
- active: index === currentSlide,
185
+ active: index === currentStepIndex,
180
186
  duration: autoplay_speed,
181
187
  index,
182
188
  onClick: () => handlePillClick(index),
183
- isPlaying: isPlaying && index === currentSlide && autoplay,
189
+ isPlaying: isPlaying && index === currentStepIndex && autoplay,
184
190
  style: pillStyle,
185
191
  activeClassName: dotActiveClassName,
186
192
  inactiveClassName: dotInactiveClassName,
187
- currentSlide,
188
- totalSlides,
189
- customProgress: index === currentSlide ? videoProgress : null
193
+ currentStep: currentStepIndex,
194
+ customProgress: index === currentStepIndex ? videoProgress : null
190
195
  },
191
196
  index
192
197
  )) }),
@@ -234,20 +239,19 @@ var Slider = ({
234
239
  ]
235
240
  }
236
241
  ),
237
- show_dots && progressPosition !== "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mt-5", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx(
242
+ show_dots && progressPosition !== "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mt-5", children: slidePositions.map((_, index) => /* @__PURE__ */ jsx(
238
243
  ProgressPill,
239
244
  {
240
- active: index === currentSlide,
245
+ active: index === currentStepIndex,
241
246
  duration: autoplay_speed,
242
247
  index,
243
248
  onClick: () => handlePillClick(index),
244
- isPlaying: isPlaying && index === currentSlide && autoplay,
249
+ isPlaying: isPlaying && index === currentStepIndex && autoplay,
245
250
  style: pillStyle,
246
251
  activeClassName: dotActiveClassName,
247
252
  inactiveClassName: dotInactiveClassName,
248
- currentSlide,
249
- totalSlides,
250
- customProgress: index === currentSlide ? videoProgress : null
253
+ currentStep: currentStepIndex,
254
+ customProgress: index === currentStepIndex ? videoProgress : null
251
255
  },
252
256
  index
253
257
  )) })
@@ -282,8 +286,7 @@ var ProgressPill = ({
282
286
  style = "modern",
283
287
  activeClassName = "",
284
288
  inactiveClassName = "",
285
- currentSlide,
286
- totalSlides,
289
+ currentStep,
287
290
  customProgress = null
288
291
  }) => {
289
292
  const [progress, setProgress] = useState(0);
@@ -312,9 +315,7 @@ var ProgressPill = ({
312
315
  }, 50);
313
316
  return () => clearInterval(interval);
314
317
  }, [active, isPlaying, duration, index, customProgress]);
315
- const isFilled = index < currentSlide;
316
- const isActive = index === currentSlide;
317
- const shouldShowProgress = isActive || style === "cumulative" && isFilled;
318
+ const isActive = index === currentStep;
318
319
  const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
319
320
  const getStyleClasses = () => {
320
321
  switch (style) {
@@ -327,7 +328,7 @@ var ProgressPill = ({
327
328
  case "cumulative":
328
329
  return `
329
330
  w-4 h-1 rounded-full overflow-hidden relative
330
- ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
331
+ ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
331
332
  `;
332
333
  case "modern":
333
334
  return `
@@ -345,41 +346,26 @@ var ProgressPill = ({
345
346
  }
346
347
  };
347
348
  const renderProgressBar = () => {
348
- if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
349
- const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
349
+ if (style === "modern" && isActive) {
350
+ const displayProgress = customProgress ?? progress;
350
351
  return /* @__PURE__ */ jsx(
351
352
  "div",
352
353
  {
353
- className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
354
+ className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
354
355
  style: { width: `${displayProgress}%` }
355
356
  }
356
357
  );
357
358
  }
358
359
  return null;
359
360
  };
360
- const renderCumulativeFill = () => {
361
- if (style === "cumulative" && isFilled && !isActive) {
362
- return /* @__PURE__ */ jsx(
363
- "div",
364
- {
365
- className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
366
- style: { width: "100%" }
367
- }
368
- );
369
- }
370
- return null;
371
- };
372
- return /* @__PURE__ */ jsxs(
361
+ return /* @__PURE__ */ jsx(
373
362
  "button",
374
363
  {
375
364
  className: `${baseClasses} ${getStyleClasses()}`,
376
365
  onClick,
377
- "aria-label": `Go to slide ${index + 1}`,
366
+ "aria-label": `Go to step ${index + 1}`,
378
367
  "aria-current": isActive ? "true" : "false",
379
- children: [
380
- renderProgressBar(),
381
- renderCumulativeFill()
382
- ]
368
+ children: renderProgressBar()
383
369
  }
384
370
  );
385
371
  };
package/dist/{Slider-42T6THEQ.mjs → Slider-XDYPGJYI.mjs} RENAMED
@@ -113,36 +113,42 @@ var Slider = ({
113
113
  const effectiveSlidesToShow = 100 / slideWidthPercentage;
114
114
  const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
115
115
  const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
116
+ const slidePositions = Array.from(
117
+ { length: Math.ceil(maxSlide / step) + 1 },
118
+ (_, index) => Math.min(index * step, maxSlide)
119
+ );
120
+ const currentStepIndex = slidePositions.reduce(
121
+ (closestIndex, position, index) => Math.abs(position - currentSlide) < Math.abs(slidePositions[closestIndex] - currentSlide) ? index : closestIndex,
122
+ 0
123
+ );
116
124
  const nextSlide = () => {
117
- if (currentSlide >= maxSlide) {
125
+ if (currentStepIndex >= slidePositions.length - 1) {
118
126
  if (infinite_scroll) {
119
127
  setTransition(true);
120
128
  setCurrentSlide(0);
121
129
  }
122
130
  } else {
123
131
  setTransition(true);
124
- const nextIndex = currentSlide + step;
125
- setCurrentSlide(nextIndex > maxSlide ? maxSlide : nextIndex);
132
+ setCurrentSlide(slidePositions[currentStepIndex + 1]);
126
133
  }
127
134
  };
128
135
  const prevSlide = () => {
129
- if (currentSlide <= 0) {
136
+ if (currentStepIndex <= 0) {
130
137
  if (infinite_scroll) {
131
138
  setTransition(true);
132
- setCurrentSlide(maxSlide);
139
+ setCurrentSlide(slidePositions[slidePositions.length - 1]);
133
140
  }
134
141
  } else {
135
142
  setTransition(true);
136
- const prevIndex = currentSlide - step;
137
- setCurrentSlide(prevIndex < 0 ? 0 : prevIndex);
143
+ setCurrentSlide(slidePositions[currentStepIndex - 1]);
138
144
  }
139
145
  };
140
- const goToSlide = (index) => {
146
+ const goToStep = (index) => {
141
147
  setTransition(true);
142
- setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
148
+ setCurrentSlide(slidePositions[index]);
143
149
  };
144
150
  const handlePillClick = (index) => {
145
- goToSlide(index);
151
+ goToStep(index);
146
152
  if (autoplay) {
147
153
  setIsPlaying(true);
148
154
  }
@@ -175,20 +181,19 @@ var Slider = ({
175
181
  );
176
182
  });
177
183
  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
178
- show_dots && progressPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mb-4", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx(
184
+ show_dots && progressPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mb-4", children: slidePositions.map((_, index) => /* @__PURE__ */ jsx(
179
185
  ProgressPill,
180
186
  {
181
- active: index === currentSlide,
187
+ active: index === currentStepIndex,
182
188
  duration: autoplay_speed,
183
189
  index,
184
190
  onClick: () => handlePillClick(index),
185
- isPlaying: isPlaying && index === currentSlide && autoplay,
191
+ isPlaying: isPlaying && index === currentStepIndex && autoplay,
186
192
  style: pillStyle,
187
193
  activeClassName: dotActiveClassName,
188
194
  inactiveClassName: dotInactiveClassName,
189
- currentSlide,
190
- totalSlides,
191
- customProgress: index === currentSlide ? videoProgress : null
195
+ currentStep: currentStepIndex,
196
+ customProgress: index === currentStepIndex ? videoProgress : null
192
197
  },
193
198
  index
194
199
  )) }),
@@ -236,20 +241,19 @@ var Slider = ({
236
241
  ]
237
242
  }
238
243
  ),
239
- show_dots && progressPosition !== "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mt-5", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx(
244
+ show_dots && progressPosition !== "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mt-5", children: slidePositions.map((_, index) => /* @__PURE__ */ jsx(
240
245
  ProgressPill,
241
246
  {
242
- active: index === currentSlide,
247
+ active: index === currentStepIndex,
243
248
  duration: autoplay_speed,
244
249
  index,
245
250
  onClick: () => handlePillClick(index),
246
- isPlaying: isPlaying && index === currentSlide && autoplay,
251
+ isPlaying: isPlaying && index === currentStepIndex && autoplay,
247
252
  style: pillStyle,
248
253
  activeClassName: dotActiveClassName,
249
254
  inactiveClassName: dotInactiveClassName,
250
- currentSlide,
251
- totalSlides,
252
- customProgress: index === currentSlide ? videoProgress : null
255
+ currentStep: currentStepIndex,
256
+ customProgress: index === currentStepIndex ? videoProgress : null
253
257
  },
254
258
  index
255
259
  )) })
@@ -284,8 +288,7 @@ var ProgressPill = ({
284
288
  style = "modern",
285
289
  activeClassName = "",
286
290
  inactiveClassName = "",
287
- currentSlide,
288
- totalSlides,
291
+ currentStep,
289
292
  customProgress = null
290
293
  }) => {
291
294
  const [progress, setProgress] = useState(0);
@@ -314,9 +317,7 @@ var ProgressPill = ({
314
317
  }, 50);
315
318
  return () => clearInterval(interval);
316
319
  }, [active, isPlaying, duration, index, customProgress]);
317
- const isFilled = index < currentSlide;
318
- const isActive = index === currentSlide;
319
- const shouldShowProgress = isActive || style === "cumulative" && isFilled;
320
+ const isActive = index === currentStep;
320
321
  const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
321
322
  const getStyleClasses = () => {
322
323
  switch (style) {
@@ -329,7 +330,7 @@ var ProgressPill = ({
329
330
  case "cumulative":
330
331
  return `
331
332
  w-4 h-1 rounded-full overflow-hidden relative
332
- ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
333
+ ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
333
334
  `;
334
335
  case "modern":
335
336
  return `
@@ -347,41 +348,26 @@ var ProgressPill = ({
347
348
  }
348
349
  };
349
350
  const renderProgressBar = () => {
350
- if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
351
- const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
351
+ if (style === "modern" && isActive) {
352
+ const displayProgress = customProgress ?? progress;
352
353
  return /* @__PURE__ */ jsx(
353
354
  "div",
354
355
  {
355
- className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
356
+ className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
356
357
  style: { width: `${displayProgress}%` }
357
358
  }
358
359
  );
359
360
  }
360
361
  return null;
361
362
  };
362
- const renderCumulativeFill = () => {
363
- if (style === "cumulative" && isFilled && !isActive) {
364
- return /* @__PURE__ */ jsx(
365
- "div",
366
- {
367
- className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
368
- style: { width: "100%" }
369
- }
370
- );
371
- }
372
- return null;
373
- };
374
- return /* @__PURE__ */ jsxs(
363
+ return /* @__PURE__ */ jsx(
375
364
  "button",
376
365
  {
377
366
  className: `${baseClasses} ${getStyleClasses()}`,
378
367
  onClick,
379
- "aria-label": `Go to slide ${index + 1}`,
368
+ "aria-label": `Go to step ${index + 1}`,
380
369
  "aria-current": isActive ? "true" : "false",
381
- children: [
382
- renderProgressBar(),
383
- renderCumulativeFill()
384
- ]
370
+ children: renderProgressBar()
385
371
  }
386
372
  );
387
373
  };
package/dist/index.js CHANGED
@@ -7127,36 +7127,42 @@ var init_Slider = __esm({
7127
7127
  const effectiveSlidesToShow = 100 / slideWidthPercentage;
7128
7128
  const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
7129
7129
  const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
7130
+ const slidePositions = Array.from(
7131
+ { length: Math.ceil(maxSlide / step) + 1 },
7132
+ (_, index) => Math.min(index * step, maxSlide)
7133
+ );
7134
+ const currentStepIndex = slidePositions.reduce(
7135
+ (closestIndex, position, index) => Math.abs(position - currentSlide) < Math.abs(slidePositions[closestIndex] - currentSlide) ? index : closestIndex,
7136
+ 0
7137
+ );
7130
7138
  const nextSlide = () => {
7131
- if (currentSlide >= maxSlide) {
7139
+ if (currentStepIndex >= slidePositions.length - 1) {
7132
7140
  if (infinite_scroll) {
7133
7141
  setTransition(true);
7134
7142
  setCurrentSlide(0);
7135
7143
  }
7136
7144
  } else {
7137
7145
  setTransition(true);
7138
- const nextIndex = currentSlide + step;
7139
- setCurrentSlide(nextIndex > maxSlide ? maxSlide : nextIndex);
7146
+ setCurrentSlide(slidePositions[currentStepIndex + 1]);
7140
7147
  }
7141
7148
  };
7142
7149
  const prevSlide = () => {
7143
- if (currentSlide <= 0) {
7150
+ if (currentStepIndex <= 0) {
7144
7151
  if (infinite_scroll) {
7145
7152
  setTransition(true);
7146
- setCurrentSlide(maxSlide);
7153
+ setCurrentSlide(slidePositions[slidePositions.length - 1]);
7147
7154
  }
7148
7155
  } else {
7149
7156
  setTransition(true);
7150
- const prevIndex = currentSlide - step;
7151
- setCurrentSlide(prevIndex < 0 ? 0 : prevIndex);
7157
+ setCurrentSlide(slidePositions[currentStepIndex - 1]);
7152
7158
  }
7153
7159
  };
7154
- const goToSlide = (index) => {
7160
+ const goToStep = (index) => {
7155
7161
  setTransition(true);
7156
- setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
7162
+ setCurrentSlide(slidePositions[index]);
7157
7163
  };
7158
7164
  const handlePillClick = (index) => {
7159
- goToSlide(index);
7165
+ goToStep(index);
7160
7166
  if (autoplay) {
7161
7167
  setIsPlaying(true);
7162
7168
  }
@@ -7189,20 +7195,19 @@ var init_Slider = __esm({
7189
7195
  );
7190
7196
  });
7191
7197
  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "w-full", children: [
7192
- show_dots && progressPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex justify-center space-x-1.5 mb-4", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
7198
+ show_dots && progressPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex justify-center space-x-1.5 mb-4", children: slidePositions.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
7193
7199
  ProgressPill,
7194
7200
  {
7195
- active: index === currentSlide,
7201
+ active: index === currentStepIndex,
7196
7202
  duration: autoplay_speed,
7197
7203
  index,
7198
7204
  onClick: () => handlePillClick(index),
7199
- isPlaying: isPlaying && index === currentSlide && autoplay,
7205
+ isPlaying: isPlaying && index === currentStepIndex && autoplay,
7200
7206
  style: pillStyle,
7201
7207
  activeClassName: dotActiveClassName,
7202
7208
  inactiveClassName: dotInactiveClassName,
7203
- currentSlide,
7204
- totalSlides,
7205
- customProgress: index === currentSlide ? videoProgress : null
7209
+ currentStep: currentStepIndex,
7210
+ customProgress: index === currentStepIndex ? videoProgress : null
7206
7211
  },
7207
7212
  index
7208
7213
  )) }),
@@ -7250,20 +7255,19 @@ var init_Slider = __esm({
7250
7255
  ]
7251
7256
  }
7252
7257
  ),
7253
- show_dots && progressPosition !== "top" && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex justify-center space-x-1.5 mt-5", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
7258
+ show_dots && progressPosition !== "top" && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex justify-center space-x-1.5 mt-5", children: slidePositions.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
7254
7259
  ProgressPill,
7255
7260
  {
7256
- active: index === currentSlide,
7261
+ active: index === currentStepIndex,
7257
7262
  duration: autoplay_speed,
7258
7263
  index,
7259
7264
  onClick: () => handlePillClick(index),
7260
- isPlaying: isPlaying && index === currentSlide && autoplay,
7265
+ isPlaying: isPlaying && index === currentStepIndex && autoplay,
7261
7266
  style: pillStyle,
7262
7267
  activeClassName: dotActiveClassName,
7263
7268
  inactiveClassName: dotInactiveClassName,
7264
- currentSlide,
7265
- totalSlides,
7266
- customProgress: index === currentSlide ? videoProgress : null
7269
+ currentStep: currentStepIndex,
7270
+ customProgress: index === currentStepIndex ? videoProgress : null
7267
7271
  },
7268
7272
  index
7269
7273
  )) })
@@ -7298,8 +7302,7 @@ var init_Slider = __esm({
7298
7302
  style = "modern",
7299
7303
  activeClassName = "",
7300
7304
  inactiveClassName = "",
7301
- currentSlide,
7302
- totalSlides,
7305
+ currentStep,
7303
7306
  customProgress = null
7304
7307
  }) => {
7305
7308
  const [progress, setProgress] = (0, import_react61.useState)(0);
@@ -7328,9 +7331,7 @@ var init_Slider = __esm({
7328
7331
  }, 50);
7329
7332
  return () => clearInterval(interval);
7330
7333
  }, [active, isPlaying, duration, index, customProgress]);
7331
- const isFilled = index < currentSlide;
7332
- const isActive = index === currentSlide;
7333
- const shouldShowProgress = isActive || style === "cumulative" && isFilled;
7334
+ const isActive = index === currentStep;
7334
7335
  const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
7335
7336
  const getStyleClasses = () => {
7336
7337
  switch (style) {
@@ -7343,7 +7344,7 @@ var init_Slider = __esm({
7343
7344
  case "cumulative":
7344
7345
  return `
7345
7346
  w-4 h-1 rounded-full overflow-hidden relative
7346
- ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
7347
+ ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
7347
7348
  `;
7348
7349
  case "modern":
7349
7350
  return `
@@ -7361,41 +7362,26 @@ var init_Slider = __esm({
7361
7362
  }
7362
7363
  };
7363
7364
  const renderProgressBar = () => {
7364
- if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
7365
- const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
7365
+ if (style === "modern" && isActive) {
7366
+ const displayProgress = customProgress ?? progress;
7366
7367
  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
7367
7368
  "div",
7368
7369
  {
7369
- className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
7370
+ className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
7370
7371
  style: { width: `${displayProgress}%` }
7371
7372
  }
7372
7373
  );
7373
7374
  }
7374
7375
  return null;
7375
7376
  };
7376
- const renderCumulativeFill = () => {
7377
- if (style === "cumulative" && isFilled && !isActive) {
7378
- return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
7379
- "div",
7380
- {
7381
- className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
7382
- style: { width: "100%" }
7383
- }
7384
- );
7385
- }
7386
- return null;
7387
- };
7388
- return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
7377
+ return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
7389
7378
  "button",
7390
7379
  {
7391
7380
  className: `${baseClasses} ${getStyleClasses()}`,
7392
7381
  onClick,
7393
- "aria-label": `Go to slide ${index + 1}`,
7382
+ "aria-label": `Go to step ${index + 1}`,
7394
7383
  "aria-current": isActive ? "true" : "false",
7395
- children: [
7396
- renderProgressBar(),
7397
- renderCumulativeFill()
7398
- ]
7384
+ children: renderProgressBar()
7399
7385
  }
7400
7386
  );
7401
7387
  };
package/dist/index.mjs CHANGED
@@ -2453,7 +2453,7 @@ var Pagination = dynamic15(() => import("./Pagination-6R4XZLF6.mjs"), { ssr: tru
2453
2453
  var DataBindingControls = dynamic15(() => import("./DataBindingControls-VSLL4WV2.mjs"), {
2454
2454
  ssr: true
2455
2455
  });
2456
- var Slider = dynamic15(() => import("./Slider-42T6THEQ.mjs"), {
2456
+ var Slider = dynamic15(() => import("./Slider-XDYPGJYI.mjs"), {
2457
2457
  ssr: false
2458
2458
  });
2459
2459
  function toCamelCase(str) {
package/dist/server.js CHANGED
@@ -4762,36 +4762,42 @@ var init_Slider = __esm({
4762
4762
  const effectiveSlidesToShow = 100 / slideWidthPercentage;
4763
4763
  const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
4764
4764
  const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
4765
+ const slidePositions = Array.from(
4766
+ { length: Math.ceil(maxSlide / step) + 1 },
4767
+ (_, index) => Math.min(index * step, maxSlide)
4768
+ );
4769
+ const currentStepIndex = slidePositions.reduce(
4770
+ (closestIndex, position, index) => Math.abs(position - currentSlide) < Math.abs(slidePositions[closestIndex] - currentSlide) ? index : closestIndex,
4771
+ 0
4772
+ );
4765
4773
  const nextSlide = () => {
4766
- if (currentSlide >= maxSlide) {
4774
+ if (currentStepIndex >= slidePositions.length - 1) {
4767
4775
  if (infinite_scroll) {
4768
4776
  setTransition(true);
4769
4777
  setCurrentSlide(0);
4770
4778
  }
4771
4779
  } else {
4772
4780
  setTransition(true);
4773
- const nextIndex = currentSlide + step;
4774
- setCurrentSlide(nextIndex > maxSlide ? maxSlide : nextIndex);
4781
+ setCurrentSlide(slidePositions[currentStepIndex + 1]);
4775
4782
  }
4776
4783
  };
4777
4784
  const prevSlide = () => {
4778
- if (currentSlide <= 0) {
4785
+ if (currentStepIndex <= 0) {
4779
4786
  if (infinite_scroll) {
4780
4787
  setTransition(true);
4781
- setCurrentSlide(maxSlide);
4788
+ setCurrentSlide(slidePositions[slidePositions.length - 1]);
4782
4789
  }
4783
4790
  } else {
4784
4791
  setTransition(true);
4785
- const prevIndex = currentSlide - step;
4786
- setCurrentSlide(prevIndex < 0 ? 0 : prevIndex);
4792
+ setCurrentSlide(slidePositions[currentStepIndex - 1]);
4787
4793
  }
4788
4794
  };
4789
- const goToSlide = (index) => {
4795
+ const goToStep = (index) => {
4790
4796
  setTransition(true);
4791
- setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
4797
+ setCurrentSlide(slidePositions[index]);
4792
4798
  };
4793
4799
  const handlePillClick = (index) => {
4794
- goToSlide(index);
4800
+ goToStep(index);
4795
4801
  if (autoplay) {
4796
4802
  setIsPlaying(true);
4797
4803
  }
@@ -4824,20 +4830,19 @@ var init_Slider = __esm({
4824
4830
  );
4825
4831
  });
4826
4832
  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "w-full", children: [
4827
- show_dots && progressPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex justify-center space-x-1.5 mb-4", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
4833
+ show_dots && progressPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex justify-center space-x-1.5 mb-4", children: slidePositions.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
4828
4834
  ProgressPill,
4829
4835
  {
4830
- active: index === currentSlide,
4836
+ active: index === currentStepIndex,
4831
4837
  duration: autoplay_speed,
4832
4838
  index,
4833
4839
  onClick: () => handlePillClick(index),
4834
- isPlaying: isPlaying && index === currentSlide && autoplay,
4840
+ isPlaying: isPlaying && index === currentStepIndex && autoplay,
4835
4841
  style: pillStyle,
4836
4842
  activeClassName: dotActiveClassName,
4837
4843
  inactiveClassName: dotInactiveClassName,
4838
- currentSlide,
4839
- totalSlides,
4840
- customProgress: index === currentSlide ? videoProgress : null
4844
+ currentStep: currentStepIndex,
4845
+ customProgress: index === currentStepIndex ? videoProgress : null
4841
4846
  },
4842
4847
  index
4843
4848
  )) }),
@@ -4885,20 +4890,19 @@ var init_Slider = __esm({
4885
4890
  ]
4886
4891
  }
4887
4892
  ),
4888
- show_dots && progressPosition !== "top" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex justify-center space-x-1.5 mt-5", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
4893
+ show_dots && progressPosition !== "top" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex justify-center space-x-1.5 mt-5", children: slidePositions.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
4889
4894
  ProgressPill,
4890
4895
  {
4891
- active: index === currentSlide,
4896
+ active: index === currentStepIndex,
4892
4897
  duration: autoplay_speed,
4893
4898
  index,
4894
4899
  onClick: () => handlePillClick(index),
4895
- isPlaying: isPlaying && index === currentSlide && autoplay,
4900
+ isPlaying: isPlaying && index === currentStepIndex && autoplay,
4896
4901
  style: pillStyle,
4897
4902
  activeClassName: dotActiveClassName,
4898
4903
  inactiveClassName: dotInactiveClassName,
4899
- currentSlide,
4900
- totalSlides,
4901
- customProgress: index === currentSlide ? videoProgress : null
4904
+ currentStep: currentStepIndex,
4905
+ customProgress: index === currentStepIndex ? videoProgress : null
4902
4906
  },
4903
4907
  index
4904
4908
  )) })
@@ -4933,8 +4937,7 @@ var init_Slider = __esm({
4933
4937
  style = "modern",
4934
4938
  activeClassName = "",
4935
4939
  inactiveClassName = "",
4936
- currentSlide,
4937
- totalSlides,
4940
+ currentStep,
4938
4941
  customProgress = null
4939
4942
  }) => {
4940
4943
  const [progress, setProgress] = (0, import_react41.useState)(0);
@@ -4963,9 +4966,7 @@ var init_Slider = __esm({
4963
4966
  }, 50);
4964
4967
  return () => clearInterval(interval);
4965
4968
  }, [active, isPlaying, duration, index, customProgress]);
4966
- const isFilled = index < currentSlide;
4967
- const isActive = index === currentSlide;
4968
- const shouldShowProgress = isActive || style === "cumulative" && isFilled;
4969
+ const isActive = index === currentStep;
4969
4970
  const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
4970
4971
  const getStyleClasses = () => {
4971
4972
  switch (style) {
@@ -4978,7 +4979,7 @@ var init_Slider = __esm({
4978
4979
  case "cumulative":
4979
4980
  return `
4980
4981
  w-4 h-1 rounded-full overflow-hidden relative
4981
- ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
4982
+ ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
4982
4983
  `;
4983
4984
  case "modern":
4984
4985
  return `
@@ -4996,41 +4997,26 @@ var init_Slider = __esm({
4996
4997
  }
4997
4998
  };
4998
4999
  const renderProgressBar = () => {
4999
- if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
5000
- const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
5000
+ if (style === "modern" && isActive) {
5001
+ const displayProgress = customProgress ?? progress;
5001
5002
  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
5002
5003
  "div",
5003
5004
  {
5004
- className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
5005
+ className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
5005
5006
  style: { width: `${displayProgress}%` }
5006
5007
  }
5007
5008
  );
5008
5009
  }
5009
5010
  return null;
5010
5011
  };
5011
- const renderCumulativeFill = () => {
5012
- if (style === "cumulative" && isFilled && !isActive) {
5013
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
5014
- "div",
5015
- {
5016
- className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
5017
- style: { width: "100%" }
5018
- }
5019
- );
5020
- }
5021
- return null;
5022
- };
5023
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
5012
+ return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
5024
5013
  "button",
5025
5014
  {
5026
5015
  className: `${baseClasses} ${getStyleClasses()}`,
5027
5016
  onClick,
5028
- "aria-label": `Go to slide ${index + 1}`,
5017
+ "aria-label": `Go to step ${index + 1}`,
5029
5018
  "aria-current": isActive ? "true" : "false",
5030
- children: [
5031
- renderProgressBar(),
5032
- renderCumulativeFill()
5033
- ]
5019
+ children: renderProgressBar()
5034
5020
  }
5035
5021
  );
5036
5022
  };
package/dist/server.mjs CHANGED
@@ -2409,7 +2409,7 @@ var Pagination = dynamic14(() => import("./Pagination-RMAXCIL7.mjs"), { ssr: tru
2409
2409
  var DataBindingControls = dynamic14(() => import("./DataBindingControls-Z2AHWFYX.mjs"), {
2410
2410
  ssr: true
2411
2411
  });
2412
- var Slider = dynamic14(() => import("./Slider-UNNVADVP.mjs"), {
2412
+ var Slider = dynamic14(() => import("./Slider-BH5S4XRN.mjs"), {
2413
2413
  ssr: false
2414
2414
  });
2415
2415
  function toCamelCase(str) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clyrex-digital/clyrex-controls-dev",
3
- "version": "0.8.1-dev.20261008080959",
3
+ "version": "0.8.1-dev.20261010122158",
4
4
  "description": "Reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",