@yamada-ui/carousel 2.0.8 → 2.1.0-dev-20241026111932
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.
- package/dist/carousel-control.js +10 -10
- package/dist/carousel-control.js.map +1 -1
- package/dist/carousel-control.mjs +2 -2
- package/dist/carousel-indicators.js +109 -29
- package/dist/carousel-indicators.js.map +1 -1
- package/dist/carousel-indicators.mjs +2 -2
- package/dist/carousel-slide.js +9 -4
- package/dist/carousel-slide.js.map +1 -1
- package/dist/carousel-slide.mjs +2 -2
- package/dist/carousel.js +143 -51
- package/dist/carousel.js.map +1 -1
- package/dist/carousel.mjs +5 -5
- package/dist/{chunk-SYCPZC2C.mjs → chunk-2HSC64IV.mjs} +128 -23
- package/dist/chunk-2HSC64IV.mjs.map +1 -0
- package/dist/{chunk-WSTWB7CV.mjs → chunk-3TQFASU2.mjs} +8 -8
- package/dist/{chunk-WSTWB7CV.mjs.map → chunk-3TQFASU2.mjs.map} +1 -1
- package/dist/{chunk-CXXL47SC.mjs → chunk-GUUMIIYD.mjs} +2 -2
- package/dist/{chunk-UTOIPGGP.mjs → chunk-GXNJ5VYJ.mjs} +20 -21
- package/dist/chunk-GXNJ5VYJ.mjs.map +1 -0
- package/dist/{chunk-PEXGWNKB.mjs → chunk-HVGHVY6Y.mjs} +8 -10
- package/dist/chunk-HVGHVY6Y.mjs.map +1 -0
- package/dist/index.js +143 -51
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -5
- package/dist/use-carousel.d.mts +4 -1
- package/dist/use-carousel.d.ts +4 -1
- package/dist/use-carousel.js +116 -21
- package/dist/use-carousel.js.map +1 -1
- package/dist/use-carousel.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-PEXGWNKB.mjs.map +0 -1
- package/dist/chunk-SYCPZC2C.mjs.map +0 -1
- package/dist/chunk-UTOIPGGP.mjs.map +0 -1
- /package/dist/{chunk-CXXL47SC.mjs.map → chunk-GUUMIIYD.mjs.map} +0 -0
package/dist/carousel.js
CHANGED
@@ -56,6 +56,7 @@ var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
|
|
56
56
|
errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
|
57
57
|
});
|
58
58
|
var useCarousel = ({
|
59
|
+
id,
|
59
60
|
align = "center",
|
60
61
|
autoplay = false,
|
61
62
|
children,
|
@@ -91,6 +92,9 @@ var useCarousel = ({
|
|
91
92
|
value: index,
|
92
93
|
onChange
|
93
94
|
});
|
95
|
+
const [indexes, setIndexes] = (0, import_react.useState)([]);
|
96
|
+
const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
|
97
|
+
const timeoutId = (0, import_react.useRef)(void 0);
|
94
98
|
const isVertical = orientation === "vertical";
|
95
99
|
const [carouselRef, carousel] = (0, import_embla_carousel_react.default)(
|
96
100
|
{
|
@@ -110,10 +114,8 @@ var useCarousel = ({
|
|
110
114
|
},
|
111
115
|
[]
|
112
116
|
);
|
113
|
-
(0,
|
114
|
-
|
115
|
-
const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
|
116
|
-
const timeoutId = (0, import_react.useRef)(void 0);
|
117
|
+
const uuid = (0, import_react.useId)();
|
118
|
+
id != null ? id : id = uuid;
|
117
119
|
const onScroll = (0, import_react.useCallback)(() => {
|
118
120
|
if (!carousel) return;
|
119
121
|
const progress = Math.round(
|
@@ -193,8 +195,10 @@ var useCarousel = ({
|
|
193
195
|
if (index === void 0) return;
|
194
196
|
carousel.scrollTo(index);
|
195
197
|
}, [index]);
|
198
|
+
(0, import_utils.assignRef)(controlRef, carousel);
|
196
199
|
const getContainerProps = (0, import_react.useCallback)(
|
197
200
|
(props = {}, ref = null) => ({
|
201
|
+
"aria-roledescription": "carousel",
|
198
202
|
...containerProps,
|
199
203
|
...props,
|
200
204
|
ref,
|
@@ -213,13 +217,16 @@ var useCarousel = ({
|
|
213
217
|
);
|
214
218
|
const getSlidesProps = (0, import_react.useCallback)(
|
215
219
|
(props = {}) => ({
|
220
|
+
id,
|
221
|
+
"aria-live": autoplay ? "off" : "polite",
|
216
222
|
...slidesProps,
|
217
223
|
...props,
|
218
224
|
ref: carouselRef
|
219
225
|
}),
|
220
|
-
[slidesProps, carouselRef]
|
226
|
+
[slidesProps, id, carouselRef, autoplay]
|
221
227
|
);
|
222
228
|
return {
|
229
|
+
id,
|
223
230
|
carousel,
|
224
231
|
children,
|
225
232
|
includeGapInSize,
|
@@ -232,16 +239,21 @@ var useCarousel = ({
|
|
232
239
|
};
|
233
240
|
};
|
234
241
|
var useCarouselSlide = ({ index }) => {
|
235
|
-
const { selectedIndex, slidesToScroll } = useCarouselContext();
|
242
|
+
const { id, indexes, selectedIndex, slidesToScroll } = useCarouselContext();
|
236
243
|
index = Math.floor((index != null ? index : 0) / slidesToScroll);
|
244
|
+
const totalSlides = indexes.length;
|
237
245
|
const isSelected = index === selectedIndex;
|
238
246
|
const getSlideProps = (0, import_react.useCallback)(
|
239
247
|
(props = {}) => ({
|
240
|
-
|
248
|
+
id: `${id}-${index + 1}`,
|
249
|
+
"aria-label": `${index + 1} of ${totalSlides}`,
|
250
|
+
"aria-roledescription": "slide",
|
241
251
|
"data-index": index,
|
242
|
-
"data-selected": (0, import_utils.dataAttr)(isSelected)
|
252
|
+
"data-selected": (0, import_utils.dataAttr)(isSelected),
|
253
|
+
role: "tabpanel",
|
254
|
+
...props
|
243
255
|
}),
|
244
|
-
[isSelected,
|
256
|
+
[id, index, isSelected, totalSlides]
|
245
257
|
);
|
246
258
|
return { getSlideProps };
|
247
259
|
};
|
@@ -250,7 +262,7 @@ var useCarouselControl = ({
|
|
250
262
|
...rest
|
251
263
|
}) => {
|
252
264
|
var _a, _b;
|
253
|
-
const { carousel } = useCarouselContext();
|
265
|
+
const { id, carousel } = useCarouselContext();
|
254
266
|
const isPrev = operation === "prev";
|
255
267
|
const disabled = (_b = (_a = rest.disabled) != null ? _a : rest.isDisabled) != null ? _b : isPrev ? !(carousel == null ? void 0 : carousel.canScrollPrev()) : !(carousel == null ? void 0 : carousel.canScrollNext());
|
256
268
|
const onClick = (0, import_react.useCallback)(() => {
|
@@ -263,40 +275,123 @@ var useCarouselControl = ({
|
|
263
275
|
}, [carousel, isPrev]);
|
264
276
|
const getControlProps = (0, import_react.useCallback)(
|
265
277
|
(props = {}, ref = null) => ({
|
278
|
+
"aria-controls": id,
|
279
|
+
"aria-label": `Go to ${isPrev ? "previous" : "next"} slide`,
|
266
280
|
...props,
|
267
281
|
ref,
|
268
282
|
disabled,
|
269
283
|
onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
|
270
284
|
}),
|
271
|
-
[disabled, onClick]
|
285
|
+
[disabled, id, onClick, isPrev]
|
272
286
|
);
|
273
287
|
return { getControlProps };
|
274
288
|
};
|
275
289
|
var useCarouselIndicators = () => {
|
276
|
-
const { carousel, indexes, selectedIndex } = useCarouselContext();
|
290
|
+
const { id, carousel, indexes, orientation, selectedIndex } = useCarouselContext();
|
291
|
+
const refMap = (0, import_react.useRef)(/* @__PURE__ */ new Map());
|
292
|
+
const isVertical = orientation === "vertical";
|
293
|
+
const onSelect = (0, import_react.useCallback)(
|
294
|
+
(index) => {
|
295
|
+
var _a;
|
296
|
+
const ref = refMap.current.get(index);
|
297
|
+
(_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.focus();
|
298
|
+
carousel == null ? void 0 : carousel.scrollTo(index);
|
299
|
+
},
|
300
|
+
[carousel]
|
301
|
+
);
|
277
302
|
const onClick = (0, import_react.useCallback)(
|
278
|
-
(
|
279
|
-
if (!carousel) return;
|
303
|
+
(index) => (ev) => {
|
280
304
|
ev.stopPropagation();
|
281
|
-
carousel.scrollTo(index);
|
305
|
+
carousel == null ? void 0 : carousel.scrollTo(index);
|
282
306
|
},
|
283
307
|
[carousel]
|
284
308
|
);
|
309
|
+
const onKeyDown = (0, import_react.useCallback)(
|
310
|
+
(index) => (ev) => {
|
311
|
+
const lastIndex = indexes.length - 1;
|
312
|
+
const actions = {
|
313
|
+
ArrowDown: () => {
|
314
|
+
if (!isVertical) return;
|
315
|
+
if (index === lastIndex) {
|
316
|
+
index = 0;
|
317
|
+
} else {
|
318
|
+
index += 1;
|
319
|
+
}
|
320
|
+
onSelect(index);
|
321
|
+
},
|
322
|
+
ArrowLeft: () => {
|
323
|
+
if (isVertical) return;
|
324
|
+
if (index === 0) {
|
325
|
+
index = lastIndex;
|
326
|
+
} else {
|
327
|
+
index -= 1;
|
328
|
+
}
|
329
|
+
onSelect(index);
|
330
|
+
},
|
331
|
+
ArrowRight: () => {
|
332
|
+
if (isVertical) return;
|
333
|
+
if (index === lastIndex) {
|
334
|
+
index = 0;
|
335
|
+
} else {
|
336
|
+
index += 1;
|
337
|
+
}
|
338
|
+
onSelect(index);
|
339
|
+
},
|
340
|
+
ArrowUp: () => {
|
341
|
+
if (!isVertical) return;
|
342
|
+
if (index === 0) {
|
343
|
+
index = lastIndex;
|
344
|
+
} else {
|
345
|
+
index -= 1;
|
346
|
+
}
|
347
|
+
onSelect(index);
|
348
|
+
},
|
349
|
+
End: () => onSelect(lastIndex),
|
350
|
+
Home: () => onSelect(0)
|
351
|
+
};
|
352
|
+
const action = actions[ev.key];
|
353
|
+
if (!action) return;
|
354
|
+
ev.preventDefault();
|
355
|
+
action(ev);
|
356
|
+
},
|
357
|
+
[indexes, onSelect, isVertical]
|
358
|
+
);
|
359
|
+
(0, import_utils.useUnmountEffect)(() => {
|
360
|
+
refMap.current.clear();
|
361
|
+
});
|
362
|
+
const getIndicatorsProps = (0, import_react.useCallback)(
|
363
|
+
(props = {}, ref = null) => ({
|
364
|
+
"aria-label": "Sliders",
|
365
|
+
"aria-orientation": orientation,
|
366
|
+
role: "tablist",
|
367
|
+
...props,
|
368
|
+
ref
|
369
|
+
}),
|
370
|
+
[orientation]
|
371
|
+
);
|
285
372
|
const getIndicatorProps = (0, import_react.useCallback)(
|
286
|
-
({ index, ...props }) => {
|
373
|
+
({ index, ...props }, ref) => {
|
287
374
|
const isSelected = index === selectedIndex;
|
375
|
+
const internalRef = (0, import_react.createRef)();
|
376
|
+
refMap.current.set(index, internalRef);
|
288
377
|
return {
|
378
|
+
ref: (0, import_utils.mergeRefs)(ref, internalRef),
|
379
|
+
"aria-controls": `${id}-${index + 1}`,
|
289
380
|
"aria-label": `Go to ${index + 1} slide`,
|
290
|
-
|
291
|
-
key: index,
|
381
|
+
"aria-selected": isSelected,
|
292
382
|
"data-index": index,
|
293
383
|
"data-selected": (0, import_utils.dataAttr)(isSelected),
|
294
|
-
|
384
|
+
role: "tab",
|
385
|
+
tabIndex: isSelected ? 0 : -1,
|
386
|
+
...props,
|
387
|
+
key: index,
|
388
|
+
onClick: (0, import_utils.handlerAll)(props.onClick, onClick(index)),
|
389
|
+
onKeyDown: (0, import_utils.handlerAll)(props.onKeyDown, onKeyDown(index))
|
295
390
|
};
|
296
391
|
},
|
297
|
-
[onClick, selectedIndex]
|
392
|
+
[onClick, onKeyDown, selectedIndex, id]
|
298
393
|
);
|
299
|
-
return { indexes, getIndicatorProps };
|
394
|
+
return { indexes, getIndicatorProps, getIndicatorsProps };
|
300
395
|
};
|
301
396
|
|
302
397
|
// src/carousel-control.tsx
|
@@ -304,12 +399,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
304
399
|
var CarouselControlPrev = (0, import_core2.forwardRef)(
|
305
400
|
({ className, ...rest }, ref) => {
|
306
401
|
const { orientation } = useCarouselContext();
|
307
|
-
const { getControlProps } = useCarouselControl({ operation: "prev" });
|
308
402
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
309
403
|
CarouselControl,
|
310
404
|
{
|
405
|
+
ref,
|
311
406
|
className: (0, import_utils2.cx)("ui-carousel__control--prev", className),
|
312
|
-
"aria-label": "Go to previous slide",
|
313
407
|
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
314
408
|
import_icon.ChevronIcon,
|
315
409
|
{
|
@@ -320,7 +414,7 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
|
|
320
414
|
}
|
321
415
|
),
|
322
416
|
operation: "prev",
|
323
|
-
...
|
417
|
+
...rest
|
324
418
|
}
|
325
419
|
);
|
326
420
|
}
|
@@ -330,12 +424,11 @@ CarouselControlPrev.__ui__ = "CarouselControlPrev";
|
|
330
424
|
var CarouselControlNext = (0, import_core2.forwardRef)(
|
331
425
|
({ className, ...rest }, ref) => {
|
332
426
|
const { orientation } = useCarouselContext();
|
333
|
-
const { getControlProps } = useCarouselControl({ operation: "next" });
|
334
427
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
335
428
|
CarouselControl,
|
336
429
|
{
|
430
|
+
ref,
|
337
431
|
className: (0, import_utils2.cx)("ui-carousel__control--next", className),
|
338
|
-
"aria-label": "Go to next slide",
|
339
432
|
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
340
433
|
import_icon.ChevronIcon,
|
341
434
|
{
|
@@ -346,7 +439,7 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
|
|
346
439
|
}
|
347
440
|
),
|
348
441
|
operation: "next",
|
349
|
-
...
|
442
|
+
...rest
|
350
443
|
}
|
351
444
|
);
|
352
445
|
}
|
@@ -355,6 +448,7 @@ CarouselControlNext.displayName = "CarouselControlNext";
|
|
355
448
|
CarouselControlNext.__ui__ = "CarouselControlNext";
|
356
449
|
var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...rest }, ref) => {
|
357
450
|
const { styles } = useCarouselContext();
|
451
|
+
const { getControlProps } = useCarouselControl({ operation });
|
358
452
|
const css = {
|
359
453
|
position: "absolute",
|
360
454
|
zIndex: "fallback(kurillin, 9)",
|
@@ -364,12 +458,11 @@ var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...r
|
|
364
458
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
365
459
|
import_button.IconButton,
|
366
460
|
{
|
367
|
-
ref,
|
368
461
|
className: (0, import_utils2.cx)("ui-carousel__control", className),
|
369
462
|
colorScheme: ["whiteAlpha", "blackAlpha"],
|
370
463
|
isRounded: true,
|
371
464
|
__css: css,
|
372
|
-
...rest
|
465
|
+
...getControlProps(rest, ref)
|
373
466
|
}
|
374
467
|
);
|
375
468
|
});
|
@@ -384,7 +477,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
384
477
|
var CarouselIndicators = (0, import_core3.forwardRef)(
|
385
478
|
({ className, component, ...rest }, ref) => {
|
386
479
|
const { orientation, selectedIndex, styles } = useCarouselContext();
|
387
|
-
const { indexes, getIndicatorProps } = useCarouselIndicators();
|
480
|
+
const { indexes, getIndicatorProps, getIndicatorsProps } = useCarouselIndicators();
|
388
481
|
const css = {
|
389
482
|
display: "flex",
|
390
483
|
justifyContent: "center",
|
@@ -396,8 +489,8 @@ var CarouselIndicators = (0, import_core3.forwardRef)(
|
|
396
489
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
397
490
|
import_core3.ui.div,
|
398
491
|
{
|
399
|
-
ref,
|
400
492
|
className: (0, import_utils3.cx)("ui-carousel__indicators", className),
|
493
|
+
...getIndicatorsProps(rest, ref),
|
401
494
|
__css: css,
|
402
495
|
...rest,
|
403
496
|
children: indexes.map((index) => {
|
@@ -421,23 +514,22 @@ var CarouselIndicators = (0, import_core3.forwardRef)(
|
|
421
514
|
);
|
422
515
|
CarouselIndicators.displayName = "CarouselIndicators";
|
423
516
|
CarouselIndicators.__ui__ = "CarouselIndicators";
|
424
|
-
var CarouselIndicator = (
|
425
|
-
className,
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
};
|
517
|
+
var CarouselIndicator = (0, import_core3.forwardRef)(
|
518
|
+
({ className, ...rest }, ref) => {
|
519
|
+
const { styles } = useCarouselContext();
|
520
|
+
const css = { ...styles.indicator };
|
521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
522
|
+
import_core3.ui.button,
|
523
|
+
{
|
524
|
+
ref,
|
525
|
+
type: "button",
|
526
|
+
className: (0, import_utils3.cx)("ui-carousel__indicators__indicator", className),
|
527
|
+
__css: css,
|
528
|
+
...rest
|
529
|
+
}
|
530
|
+
);
|
531
|
+
}
|
532
|
+
);
|
441
533
|
CarouselIndicator.displayName = "CarouselIndicator";
|
442
534
|
CarouselIndicator.__ui__ = "CarouselIndicator";
|
443
535
|
|
@@ -532,7 +624,7 @@ var Carousel = (0, import_core5.forwardRef)(
|
|
532
624
|
} = (0, import_core5.omitThemeProps)(mergedProps);
|
533
625
|
const computedWithControls = (0, import_use_value.useValue)(withControls);
|
534
626
|
const computedWithIndicators = (0, import_use_value.useValue)(withIndicators);
|
535
|
-
const { children, getContainerProps, getSlidesProps, ...rest } = useCarousel({
|
627
|
+
const { id, children, getContainerProps, getSlidesProps, ...rest } = useCarousel({
|
536
628
|
...computedProps
|
537
629
|
});
|
538
630
|
const validChildren = (0, import_utils5.getValidChildren)(children);
|
@@ -566,8 +658,8 @@ var Carousel = (0, import_core5.forwardRef)(
|
|
566
658
|
};
|
567
659
|
h != null ? h : h = height;
|
568
660
|
minH != null ? minH : minH = minHeight;
|
569
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
570
|
-
import_core5.ui.
|
661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselProvider, { value: { id, styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
662
|
+
import_core5.ui.section,
|
571
663
|
{
|
572
664
|
className: (0, import_utils5.cx)("ui-carousel", className),
|
573
665
|
__css: css,
|
package/dist/carousel.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/carousel.tsx","../src/carousel-control.tsx","../src/use-carousel.ts","../src/carousel-indicators.tsx","../src/carousel-slide.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { CarouselControlProps } from \"./carousel-control\"\nimport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\nimport type {\n AlignmentOptionType,\n ScrollContainOptionType,\n SlidesInViewOptionsType,\n UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n filterUndefined,\n findChild,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { CarouselControlNext, CarouselControlPrev } from \"./carousel-control\"\nimport { CarouselIndicators } from \"./carousel-indicators\"\nimport { CarouselSlide } from \"./carousel-slide\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\n\ninterface CarouselOptions {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: Token<AlignmentOptionType>\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: Token<boolean>\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default ''\n */\n containScroll?: Token<ScrollContainOptionType>\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: Token<number>\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: Token<boolean>\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: Token<boolean>\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: Token<number>\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: Token<boolean>\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: Token<SlidesInViewOptionsType>\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: Token<boolean>\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Token<\"horizontal\" | \"vertical\">\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: Token<boolean>\n /**\n * The CSS `width` property.\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: Token<number>\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: Token<boolean>\n /**\n * If `true`, display the carousel control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the carousel indicator buttons.\n *\n * @default true\n */\n withIndicators?: Token<boolean>\n /**\n * Props for next of the carousel control element.\n */\n controlNextProps?: CarouselControlProps\n /**\n * Props for previous of the carousel control element.\n */\n controlPrevProps?: CarouselControlProps\n /**\n * Props for carousel control element.\n */\n controlProps?: CarouselControlProps\n /**\n * Props for carousel indicators element.\n */\n indicatorsProps?: CarouselIndicatorsProps\n /**\n * Props for carousel inner element.\n */\n innerProps?: HTMLUIProps\n}\n\nexport interface CarouselProps\n extends ThemeProps<\"Carousel\">,\n Omit<HTMLUIProps, \"draggable\" | \"onChange\">,\n Pick<\n UseCarouselProps,\n | \"controlRef\"\n | \"defaultIndex\"\n | \"index\"\n | \"onChange\"\n | \"onScrollProgress\"\n | \"watchDrag\"\n | \"watchResize\"\n | \"watchSlides\"\n >,\n CarouselOptions {}\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see Docs https://yamada-ui.com/components/data-display/carousel\n */\nexport const Carousel = forwardRef<CarouselProps, \"div\">(\n ({ h, height, minH, minHeight, ...props }, ref) => {\n const orientation = useValue(props.orientation)\n const align = useValue(props.align)\n const autoplay = useValue(props.autoplay)\n const stopMouseEnterAutoplay = useValue(props.stopMouseEnterAutoplay)\n const loop = useValue(props.loop)\n const duration = useValue(props.duration)\n const delay = useValue(props.delay)\n const slidesToScroll = useValue(props.slidesToScroll)\n const draggable = useValue(props.draggable)\n const dragFree = useValue(props.dragFree)\n const inViewThreshold = useValue(props.inViewThreshold)\n const skipSnaps = useValue(props.skipSnaps)\n const containScroll = useValue(props.containScroll)\n const includeGapInSize = useValue(props.includeGapInSize)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Carousel\", {\n ...props,\n align,\n autoplay,\n containScroll,\n delay,\n dragFree,\n draggable,\n duration,\n includeGapInSize,\n inViewThreshold,\n loop,\n orientation,\n skipSnaps,\n slidesToScroll,\n stopMouseEnterAutoplay,\n })\n const {\n className,\n withControls = true,\n withIndicators = true,\n controlNextProps,\n controlPrevProps,\n controlProps,\n indicatorsProps,\n innerProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const computedWithControls = useValue(withControls)\n const computedWithIndicators = useValue(withIndicators)\n\n const { children, getContainerProps, getSlidesProps, ...rest } =\n useCarousel({\n ...computedProps,\n })\n\n const validChildren = getValidChildren(children)\n\n const customCarouselControlPrev = findChild(\n validChildren,\n CarouselControlPrev,\n )\n const customCarouselControlNext = findChild(\n validChildren,\n CarouselControlNext,\n )\n const customCarouselIndicators = findChild(\n validChildren,\n CarouselIndicators,\n )\n const slideChildren = pickChildren(validChildren, CarouselSlide)\n const otherChildren = omitChildren(\n validChildren,\n CarouselControlPrev,\n CarouselControlNext,\n CarouselIndicators,\n CarouselSlide,\n )\n\n const cloneSlideChildren = slideChildren.map((child, index) =>\n cloneElement(child, { index }),\n )\n\n const css: CSSUIObject = {\n h: \"fit-content\",\n position: \"relative\",\n ...styles.container,\n }\n\n h ??= height\n minH ??= minHeight\n\n return (\n <CarouselProvider value={{ styles, ...rest }}>\n <ui.div\n className={cx(\"ui-carousel\", className)}\n __css={css}\n {...getContainerProps({}, ref)}\n >\n {customCarouselControlPrev ??\n (computedWithControls ? (\n <CarouselControlPrev {...controlProps} {...controlPrevProps} />\n ) : null)}\n {customCarouselControlNext ??\n (computedWithControls ? (\n <CarouselControlNext {...controlProps} {...controlNextProps} />\n ) : null)}\n\n <CarouselSlides\n {...getSlidesProps({\n ...filterUndefined({ h, minH }),\n ...innerProps,\n })}\n >\n {cloneSlideChildren}\n </CarouselSlides>\n\n {customCarouselIndicators ??\n (computedWithIndicators ? (\n <CarouselIndicators {...indicatorsProps} />\n ) : null)}\n\n {otherChildren}\n </ui.div>\n </CarouselProvider>\n )\n },\n)\n\nCarousel.displayName = \"Carousel\"\nCarousel.__ui__ = \"Carousel\"\n\ninterface CarouselSlidesProps extends HTMLUIProps {}\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n ({ ...rest }, ref) => {\n const css: CSSUIObject = { h: \"fit-content\", overflow: \"hidden\", w: \"100%\" }\n\n return (\n <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n <CarouselSlidesInner {...rest} />\n </ui.div>\n )\n },\n)\n\nCarouselSlides.displayName = \"CarouselSlides\"\nCarouselSlides.__ui__ = \"CarouselSlides\"\n\ninterface CarouselSlidesInnerProps extends HTMLUIProps {}\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n const { includeGapInSize, orientation, styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n ...styles.inner,\n ...(includeGapInSize\n ? {\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n }\n : {}),\n }\n\n return (\n <ui.div className=\"ui-carousel__sliders__inner\" __css={css} {...rest} />\n )\n}\n\nCarouselSlidesInner.displayName = \"CarouselSlidesInner\"\nCarouselSlidesInner.__ui__ = \"CarouselSlidesInner\"\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselControl } from \"./use-carousel\"\n\nexport interface CarouselControlProps extends IconButtonProps {}\n\nexport const CarouselControlPrev = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n const { getControlProps } = useCarouselControl({ operation: \"prev\" })\n\n return (\n <CarouselControl\n className={cx(\"ui-carousel__control--prev\", className)}\n aria-label=\"Go to previous slide\"\n icon={\n <ChevronIcon\n __css={{\n fontSize: \"1.5em\",\n transform:\n orientation === \"vertical\" ? \"rotate(180deg)\" : \"rotate(90deg)\",\n }}\n />\n }\n operation=\"prev\"\n {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nCarouselControlPrev.displayName = \"CarouselControlPrev\"\nCarouselControlPrev.__ui__ = \"CarouselControlPrev\"\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n const { getControlProps } = useCarouselControl({ operation: \"next\" })\n\n return (\n <CarouselControl\n className={cx(\"ui-carousel__control--next\", className)}\n aria-label=\"Go to next slide\"\n icon={\n <ChevronIcon\n __css={{\n fontSize: \"1.5em\",\n transform:\n orientation === \"vertical\" ? \"rotate(0deg)\" : \"rotate(-90deg)\",\n }}\n />\n }\n operation=\"next\"\n {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nCarouselControlNext.displayName = \"CarouselControlNext\"\nCarouselControlNext.__ui__ = \"CarouselControlNext\"\n\nconst CarouselControl = forwardRef<\n { operation: \"next\" | \"prev\" } & CarouselControlProps,\n \"button\"\n>(({ className, operation, ...rest }, ref) => {\n const { styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"fallback(kurillin, 9)\",\n ...styles.control,\n ...styles[operation],\n }\n\n return (\n <IconButton\n ref={ref}\n className={cx(\"ui-carousel__control\", className)}\n colorScheme={[\"whiteAlpha\", \"blackAlpha\"]}\n isRounded\n __css={css}\n {...rest}\n />\n )\n})\n\nCarouselControl.displayName = \"CarouselControl\"\nCarouselControl.__ui__ = \"CarouselControl\"\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n CSSUIObject,\n CSSUIProps,\n HTMLProps,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport type { MouseEvent, RefObject } from \"react\"\nimport { layoutStyleProperties, mergeVars } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n splitObject,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type AlignmentOptionType = EmblaOptionsType[\"align\"]\nexport type ScrollContainOptionType = EmblaOptionsType[\"containScroll\"]\nexport type SlidesInViewOptionsType = EmblaOptionsType[\"inViewThreshold\"]\nexport type DragHandlerOptionType = EmblaOptionsType[\"watchDrag\"]\nexport type ResizeHandlerOptionType = EmblaOptionsType[\"watchResize\"]\nexport type SlidesHandlerOptionType = EmblaOptionsType[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\n\ninterface CarouselContext {\n carousel: CarouselControl | undefined\n includeGapInSize: boolean\n indexes: number[]\n orientation: \"horizontal\" | \"vertical\"\n selectedIndex: number\n slidesToScroll: number\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n createContext<CarouselContext>({\n name: \"CarouselContext\",\n errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n })\n\nexport interface UseCarouselProps\n extends Omit<HTMLUIProps, \"draggable\" | \"gap\" | \"onChange\"> {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: AlignmentOptionType\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default false\n */\n containScroll?: ScrollContainOptionType\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | undefined>\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: number\n /**\n * The CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: boolean\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: SlidesInViewOptionsType\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"horizontal\" | \"vertical\"\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * Enables for scrolling the carousel with mouse and touch interactions.\n * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n *\n * @default true\n */\n watchDrag?: DragHandlerOptionType\n /**\n * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n *\n * @default true\n */\n watchResize?: ResizeHandlerOptionType\n /**\n * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n *\n * @default true\n */\n watchSlides?: SlidesHandlerOptionType\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n align = \"center\",\n autoplay = false,\n children,\n containScroll = false,\n controlRef,\n defaultIndex = 0,\n delay = 4000,\n dragFree = false,\n draggable = true,\n duration = 25,\n includeGapInSize = true,\n index,\n inViewThreshold = 0,\n loop = true,\n orientation = \"horizontal\",\n skipSnaps = false,\n slideSize = \"100%\",\n slidesToScroll = 1,\n stopMouseEnterAutoplay = true,\n watchDrag = draggable,\n watchResize = true,\n watchSlides = true,\n onChange,\n onScrollProgress,\n ...rest\n}: UseCarouselProps) => {\n const [\n { gap = \"fallback(4, 1rem)\", ...containerProps },\n { vars, ...slidesProps },\n ] = splitObject(rest, layoutStyleProperties)\n\n const [selectedIndex, setSelectedIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: index,\n onChange,\n })\n\n const isVertical = orientation === \"vertical\"\n\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n align,\n axis: isVertical ? \"y\" : \"x\",\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n startIndex: defaultIndex,\n watchDrag,\n watchResize,\n watchSlides,\n },\n [],\n )\n\n assignRef(controlRef, carousel)\n\n const [indexes, setIndexes] = useState<number[]>([])\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n const timeoutId = useRef<any>(undefined)\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setSelectedIndex(index)\n }, [carousel, setSelectedIndex])\n\n useEffect(() => {\n const isStop = isMouseEnter && stopMouseEnterAutoplay\n const isLast = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !isStop && !isLast) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = undefined\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [\n autoplay,\n delay,\n stopMouseEnterAutoplay,\n carousel,\n isMouseEnter,\n loop,\n selectedIndex,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [\n Children.toArray(children).length,\n align,\n orientation,\n loop,\n duration,\n gap,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n slideSize,\n includeGapInSize,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [carousel])\n\n useUpdateEffect(() => {\n if (carousel) {\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onScroll])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n if (index === undefined) return\n\n carousel.scrollTo(index)\n }, [index])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...containerProps,\n ...props,\n ref,\n vars: mergeVars(vars, [\n { name: \"gap\", token: \"spaces\", value: gap },\n { name: \"slideSize\", token: \"sizes\", value: slideSize },\n ]),\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [containerProps, gap, slideSize, vars],\n )\n\n const getSlidesProps: PropGetter = useCallback(\n (props = {}) => ({\n ...slidesProps,\n ...props,\n ref: carouselRef,\n }),\n [slidesProps, carouselRef],\n )\n\n return {\n carousel,\n children,\n includeGapInSize,\n indexes,\n orientation,\n selectedIndex,\n slidesToScroll,\n getContainerProps,\n getSlidesProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport interface UseCarouselSlideProps {\n index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n index = Math.floor((index ?? 0) / slidesToScroll)\n\n const isSelected = index === selectedIndex\n\n const getSlideProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n }),\n [isSelected, index],\n )\n\n return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport interface UseCarouselControlProps extends IconButtonProps {\n operation: \"next\" | \"prev\"\n}\n\nexport const useCarouselControl = ({\n operation,\n ...rest\n}: UseCarouselControlProps) => {\n const { carousel } = useCarouselContext()\n\n const isPrev = operation === \"prev\"\n\n const disabled =\n rest.disabled ??\n rest.isDisabled ??\n (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n const onClick = useCallback(() => {\n if (!carousel) return\n\n if (isPrev) {\n carousel.scrollPrev()\n } else {\n carousel.scrollNext()\n }\n }, [carousel, isPrev])\n\n const getControlProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n disabled,\n onClick: handlerAll(props.onClick, onClick),\n }),\n [disabled, onClick],\n )\n\n return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n const { carousel, indexes, selectedIndex } = useCarouselContext()\n\n const onClick = useCallback(\n (ev: MouseEvent, index: number) => {\n if (!carousel) return\n\n ev.stopPropagation()\n\n carousel.scrollTo(index)\n },\n [carousel],\n )\n\n const getIndicatorProps: RequiredPropGetter<\n { index: number } & HTMLProps<\"button\">,\n HTMLProps<\"button\">\n > = useCallback(\n ({ index, ...props }) => {\n const isSelected = index === selectedIndex\n\n return {\n \"aria-label\": `Go to ${index + 1} slide`,\n ...props,\n key: index,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n }\n },\n [onClick, selectedIndex],\n )\n\n return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n typeof useCarouselIndicators\n>\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactElement } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { useCarouselContext, useCarouselIndicators } from \"./use-carousel\"\n\ninterface CarouselIndicatorsOptions {\n /**\n * The custom carousel indicator to use.\n */\n component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport interface CarouselIndicatorsProps\n extends HTMLUIProps,\n CarouselIndicatorsOptions {}\n\nexport const CarouselIndicators = forwardRef<CarouselIndicatorsProps, \"div\">(\n ({ className, component, ...rest }, ref) => {\n const { orientation, selectedIndex, styles } = useCarouselContext()\n const { indexes, getIndicatorProps } = useCarouselIndicators()\n\n const css: CSSUIObject = {\n display: \"flex\",\n justifyContent: \"center\",\n position: \"absolute\",\n zIndex: \"fallback(kurillin, 9)\",\n ...styles.indicators,\n ...(orientation === \"vertical\"\n ? { flexDirection: \"column\" }\n : { flexDirection: \"row\" }),\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-carousel__indicators\", className)}\n __css={css}\n {...rest}\n >\n {indexes.map((index) => {\n const isSelected = index === selectedIndex\n\n if (typeof component === \"function\") {\n const child = component({\n index,\n isSelected,\n }) as null | ReactElement\n\n if (!child) return null\n\n const props = getIndicatorProps({ ...child.props, index })\n\n return cloneElement(child as ReactElement, props)\n } else {\n const { key, ...props } = getIndicatorProps({ index })\n\n return <CarouselIndicator key={key} {...props} />\n }\n })}\n </ui.div>\n )\n },\n)\n\nCarouselIndicators.displayName = \"CarouselIndicators\"\nCarouselIndicators.__ui__ = \"CarouselIndicators\"\n\ninterface CarouselIndicatorProps extends HTMLUIProps<\"button\"> {}\n\nconst CarouselIndicator: FC<CarouselIndicatorProps> = ({\n className,\n ...rest\n}) => {\n const { styles } = useCarouselContext()\n\n const css: CSSUIObject = { ...styles.indicator }\n\n return (\n <ui.button\n type=\"button\"\n className={cx(\"ui-carousel__indicators__indicator\", className)}\n tabIndex={-1}\n __css={css}\n {...rest}\n />\n )\n}\n\nCarouselIndicator.displayName = \"CarouselIndicator\"\nCarouselIndicator.__ui__ = \"CarouselIndicator\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselSlide } from \"./use-carousel\"\n\ninterface CarouselSlideOptions {\n /**\n * The CSS `width` property.\n */\n size?: CSSUIObject[\"width\"]\n}\n\nexport interface CarouselSlideProps\n extends HTMLUIProps,\n UseCarouselSlideProps,\n CarouselSlideOptions {}\n\nexport const CarouselSlide = forwardRef<CarouselSlideProps, \"div\">(\n ({ className, size, ...rest }, ref) => {\n const { includeGapInSize, orientation } = useCarouselContext()\n const { getSlideProps } = useCarouselSlide(rest)\n\n size ??= \"$slideSize\"\n\n const css: CSSUIObject = {\n flex: `0 0 ${size}`,\n position: \"relative\",\n ...(includeGapInSize\n ? { [orientation === \"vertical\" ? \"pb\" : \"pr\"]: \"$gap\" }\n : { [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"$gap\" }),\n }\n\n return (\n <ui.div\n className={cx(\"ui-carousel__slide\", className)}\n __css={css}\n {...getSlideProps({})}\n >\n <CarouselSlideInner ref={ref} {...rest} />\n </ui.div>\n )\n },\n)\n\nCarouselSlide.displayName = \"CarouselSlide\"\nCarouselSlide.__ui__ = \"CarouselSlide\"\n\ninterface CarouselSlideInnerProps extends HTMLUIProps {}\n\nconst CarouselSlideInner = forwardRef<CarouselSlideInnerProps, \"div\">(\n ({ ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className=\"ui-carousel__slide__inner\"\n boxSize=\"100%\"\n {...rest}\n />\n )\n },\n)\n\nCarouselSlideInner.displayName = \"CarouselSlideInner\"\nCarouselSlideInner.__ui__ = \"CarouselSlideInner\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA,IAAAA,eAKO;AACP,uBAAyB;AACzB,IAAAC,gBAOO;AACP,IAAAC,gBAA6B;;;AC7B7B,oBAA2B;AAC3B,IAAAC,eAA2B;AAC3B,kBAA4B;AAC5B,IAAAC,gBAAmB;;;ACMnB,kBAAiD;AACjD,oCAAqC;AACrC,mBAOO;AACP,kCAA6B;AAC7B,mBAAmE;AAoB5D,IAAM,CAAC,kBAAkB,kBAAkB,QAChD,4BAA+B;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAsJI,IAAM,cAAc,CAAC;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB;AAAA,EACA,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM;AAAA,IACJ,EAAE,MAAM,qBAAqB,GAAG,eAAe;AAAA,IAC/C,EAAE,MAAM,GAAG,YAAY;AAAA,EACzB,QAAI,0BAAY,MAAM,iCAAqB;AAE3C,QAAM,CAAC,eAAe,gBAAgB,QAAI,oDAAqB;AAAA,IAC7D,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AAED,QAAM,aAAa,gBAAgB;AAEnC,QAAM,CAAC,aAAa,QAAQ,QAAI,4BAAAC;AAAA,IAC9B;AAAA,MACE;AAAA,MACA,MAAM,aAAa,MAAM;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,8BAAU,YAAY,QAAQ;AAE9B,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAmB,CAAC,CAAC;AACnD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB,KAAK;AAE/D,QAAM,gBAAY,qBAAY,MAAS;AAEvC,QAAM,eAAW,0BAAY,MAAM;AACjC,QAAI,CAAC,SAAU;AAEf,UAAM,WAAW,KAAK;AAAA,MACpB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,eAAe,CAAC,CAAC,IAAI;AAAA,IACxD;AAEA,yDAAmB;AAAA,EACrB,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,QAAM,eAAW,0BAAY,MAAM;AACjC,QAAI,CAAC,SAAU;AAEf,UAAMC,SAAQ,SAAS,mBAAmB;AAE1C,qBAAiBA,MAAK;AAAA,EACxB,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,8BAAU,MAAM;AACd,UAAM,SAAS,gBAAgB;AAC/B,UAAM,SAAS,EAAC,qCAAU;AAE1B,QAAI,YAAY,YAAY,CAAC,UAAU,CAAC,QAAQ;AAC9C,gBAAU,UAAU,YAAY,MAAM;AACpC,iBAAS,WAAW;AAAA,MACtB,GAAG,KAAK;AAAA,IACV,OAAO;AACL,UAAI,UAAU,QAAS,eAAc,UAAU,OAAO;AAEtD,gBAAU,UAAU;AAAA,IACtB;AAEA,WAAO,MAAM;AACX,UAAI,UAAU,QAAS,eAAc,UAAU,OAAO;AAAA,IACxD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,QAAI,CAAC,SAAU;AAEf,aAAS,OAAO;AAEhB,UAAM,WAAW,SAAS,eAAe;AACzC,UAAMC,WAAU,SAAS,IAAI,CAAC,GAAG,MAAM,CAAC;AAExC,eAAWA,QAAO;AAAA,EACpB,GAAG;AAAA,IACD,sBAAS,QAAQ,QAAQ,EAAE;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,QAAI,CAAC,SAAU;AAEf,UAAM,WAAW,SAAS,eAAe;AACzC,UAAMA,WAAU,SAAS,IAAI,CAAC,GAAG,MAAM,CAAC;AAExC,eAAWA,QAAO;AAAA,EACpB,GAAG,CAAC,QAAQ,CAAC;AAEb,oCAAgB,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,GAAG,UAAU,QAAQ;AAC9B,eAAS,GAAG,UAAU,QAAQ;AAE9B,eAAS;AAET,aAAO,MAAM;AACX,iBAAS,IAAI,UAAU,QAAQ;AAC/B,iBAAS,IAAI,UAAU,QAAQ;AAAA,MACjC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,oCAAgB,MAAM;AACpB,QAAI,CAAC,SAAU;AAEf,QAAI,UAAU,OAAW;AAEzB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,wBAAgC;AAAA,IACpC,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,UAAM,uBAAU,MAAM;AAAA,QACpB,EAAE,MAAM,OAAO,OAAO,UAAU,OAAO,IAAI;AAAA,QAC3C,EAAE,MAAM,aAAa,OAAO,SAAS,OAAO,UAAU;AAAA,MACxD,CAAC;AAAA,MACD,kBAAc,yBAAW,MAAM,cAAc,MAAM;AACjD,wBAAgB,IAAI;AAAA,MACtB,CAAC;AAAA,MACD,kBAAc,yBAAW,MAAM,cAAc,MAAM;AACjD,wBAAgB,KAAK;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,gBAAgB,KAAK,WAAW,IAAI;AAAA,EACvC;AAEA,QAAM,qBAA6B;AAAA,IACjC,CAAC,QAAQ,CAAC,OAAO;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,IACP;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,EAC3B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAQO,IAAM,mBAAmB,CAAC,EAAE,MAAM,MAA6B;AACpE,QAAM,EAAE,eAAe,eAAe,IAAI,mBAAmB;AAE7D,UAAQ,KAAK,OAAO,wBAAS,KAAK,cAAc;AAEhD,QAAM,aAAa,UAAU;AAE7B,QAAM,oBAA4B;AAAA,IAChC,CAAC,QAAQ,CAAC,OAAO;AAAA,MACf,GAAG;AAAA,MACH,cAAc;AAAA,MACd,qBAAiB,uBAAS,UAAU;AAAA,IACtC;AAAA,IACA,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,SAAO,EAAE,cAAc;AACzB;AAQO,IAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,GAAG;AACL,MAA+B;AAvb/B;AAwbE,QAAM,EAAE,SAAS,IAAI,mBAAmB;AAExC,QAAM,SAAS,cAAc;AAE7B,QAAM,YACJ,gBAAK,aAAL,YACA,KAAK,eADL,YAEC,SAAS,EAAC,qCAAU,mBAAkB,EAAC,qCAAU;AAEpD,QAAM,cAAU,0BAAY,MAAM;AAChC,QAAI,CAAC,SAAU;AAEf,QAAI,QAAQ;AACV,eAAS,WAAW;AAAA,IACtB,OAAO;AACL,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,CAAC;AAErB,QAAM,sBAAwC;AAAA,IAC5C,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,aAAS,yBAAW,MAAM,SAAS,OAAO;AAAA,IAC5C;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,SAAO,EAAE,gBAAgB;AAC3B;AAIO,IAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,UAAU,SAAS,cAAc,IAAI,mBAAmB;AAEhE,QAAM,cAAU;AAAA,IACd,CAAC,IAAgB,UAAkB;AACjC,UAAI,CAAC,SAAU;AAEf,SAAG,gBAAgB;AAEnB,eAAS,SAAS,KAAK;AAAA,IACzB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,wBAGF;AAAA,IACF,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACvB,YAAM,aAAa,UAAU;AAE7B,aAAO;AAAA,QACL,cAAc,SAAS,QAAQ,CAAC;AAAA,QAChC,GAAG;AAAA,QACH,KAAK;AAAA,QACL,cAAc;AAAA,QACd,qBAAiB,uBAAS,UAAU;AAAA,QACpC,aAAS,yBAAW,MAAM,SAAS,CAAC,OAAO,QAAQ,IAAI,KAAK,CAAC;AAAA,MAC/D;AAAA,IACF;AAAA,IACA,CAAC,SAAS,aAAa;AAAA,EACzB;AAEA,SAAO,EAAE,SAAS,kBAAkB;AACtC;;;ADxeU;AAVH,IAAM,0BAAsB;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,YAAY,IAAI,mBAAmB;AAC3C,UAAM,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,WAAW,OAAO,CAAC;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,kBAAG,8BAA8B,SAAS;AAAA,QACrD,cAAW;AAAA,QACX,MACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,WACE,gBAAgB,aAAa,mBAAmB;AAAA,YACpD;AAAA;AAAA,QACF;AAAA,QAEF,WAAU;AAAA,QACT,GAAG,gBAAgB,MAAM,GAAG;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,SAAS;AAEtB,IAAM,0BAAsB;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,YAAY,IAAI,mBAAmB;AAC3C,UAAM,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,WAAW,OAAO,CAAC;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,kBAAG,8BAA8B,SAAS;AAAA,QACrD,cAAW;AAAA,QACX,MACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,WACE,gBAAgB,aAAa,iBAAiB;AAAA,YAClD;AAAA;AAAA,QACF;AAAA,QAEF,WAAU;AAAA,QACT,GAAG,gBAAgB,MAAM,GAAG;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,SAAS;AAE7B,IAAM,sBAAkB,yBAGtB,CAAC,EAAE,WAAW,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC5C,QAAM,EAAE,OAAO,IAAI,mBAAmB;AAEtC,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,SAAS;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,kBAAG,wBAAwB,SAAS;AAAA,MAC/C,aAAa,CAAC,cAAc,YAAY;AAAA,MACxC,WAAS;AAAA,MACT,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,gBAAgB,cAAc;AAC9B,gBAAgB,SAAS;;;AE1FzB,IAAAC,eAA+B;AAC/B,IAAAC,gBAAmB;AACnB,IAAAC,gBAA6B;AAsDV,IAAAC,sBAAA;AAxCZ,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,WAAW,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1C,UAAM,EAAE,aAAa,eAAe,OAAO,IAAI,mBAAmB;AAClE,UAAM,EAAE,SAAS,kBAAkB,IAAI,sBAAsB;AAE7D,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,GAAG,OAAO;AAAA,MACV,GAAI,gBAAgB,aAChB,EAAE,eAAe,SAAS,IAC1B,EAAE,eAAe,MAAM;AAAA,IAC7B;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,2BAA2B,SAAS;AAAA,QAClD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,UAAU;AACtB,gBAAM,aAAa,UAAU;AAE7B,cAAI,OAAO,cAAc,YAAY;AACnC,kBAAM,QAAQ,UAAU;AAAA,cACtB;AAAA,cACA;AAAA,YACF,CAAC;AAED,gBAAI,CAAC,MAAO,QAAO;AAEnB,kBAAM,QAAQ,kBAAkB,EAAE,GAAG,MAAM,OAAO,MAAM,CAAC;AAEzD,uBAAO,4BAAa,OAAuB,KAAK;AAAA,UAClD,OAAO;AACL,kBAAM,EAAE,KAAK,GAAG,MAAM,IAAI,kBAAkB,EAAE,MAAM,CAAC;AAErD,mBAAO,6CAAC,qBAA6B,GAAG,SAAT,GAAgB;AAAA,UACjD;AAAA,QACF,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;AAI5B,IAAM,oBAAgD,CAAC;AAAA,EACrD;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,IAAI,mBAAmB;AAEtC,QAAM,MAAmB,EAAE,GAAG,OAAO,UAAU;AAE/C,SACE;AAAA,IAAC,gBAAG;AAAA,IAAH;AAAA,MACC,MAAK;AAAA,MACL,eAAW,kBAAG,sCAAsC,SAAS;AAAA,MAC7D,UAAU;AAAA,MACV,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,kBAAkB,cAAc;AAChC,kBAAkB,SAAS;;;ACzF3B,IAAAC,eAA+B;AAC/B,IAAAC,gBAAmB;AAoCX,IAAAC,sBAAA;AArBD,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,GAAG,KAAK,GAAG,QAAQ;AACrC,UAAM,EAAE,kBAAkB,YAAY,IAAI,mBAAmB;AAC7D,UAAM,EAAE,cAAc,IAAI,iBAAiB,IAAI;AAE/C,iCAAS;AAET,UAAM,MAAmB;AAAA,MACvB,MAAM,OAAO,IAAI;AAAA,MACjB,UAAU;AAAA,MACV,GAAI,mBACA,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,OAAO,IACrD,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,OAAO;AAAA,IAC3D;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC,eAAW,kBAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG,cAAc,CAAC,CAAC;AAAA,QAEpB,uDAAC,sBAAmB,KAAW,GAAG,MAAM;AAAA;AAAA,IAC1C;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;AAIvB,IAAM,yBAAqB;AAAA,EACzB,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ;AACpB,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,SAAQ;AAAA,QACP,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;;;AJ0NpB,IAAAC,sBAAA;AA5FD,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,GAAG,QAAQ,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AACjD,UAAM,kBAAc,2BAAS,MAAM,WAAW;AAC9C,UAAM,YAAQ,2BAAS,MAAM,KAAK;AAClC,UAAM,eAAW,2BAAS,MAAM,QAAQ;AACxC,UAAM,6BAAyB,2BAAS,MAAM,sBAAsB;AACpE,UAAM,WAAO,2BAAS,MAAM,IAAI;AAChC,UAAM,eAAW,2BAAS,MAAM,QAAQ;AACxC,UAAM,YAAQ,2BAAS,MAAM,KAAK;AAClC,UAAM,qBAAiB,2BAAS,MAAM,cAAc;AACpD,UAAM,gBAAY,2BAAS,MAAM,SAAS;AAC1C,UAAM,eAAW,2BAAS,MAAM,QAAQ;AACxC,UAAM,sBAAkB,2BAAS,MAAM,eAAe;AACtD,UAAM,gBAAY,2BAAS,MAAM,SAAS;AAC1C,UAAM,oBAAgB,2BAAS,MAAM,aAAa;AAClD,UAAM,uBAAmB,2BAAS,MAAM,gBAAgB;AAExD,UAAM,CAAC,QAAQ,WAAW,QAAI,qCAAuB,YAAY;AAAA,MAC/D,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,QAAI,6BAAe,WAAW;AAE9B,UAAM,2BAAuB,2BAAS,YAAY;AAClD,UAAM,6BAAyB,2BAAS,cAAc;AAEtD,UAAM,EAAE,UAAU,mBAAmB,gBAAgB,GAAG,KAAK,IAC3D,YAAY;AAAA,MACV,GAAG;AAAA,IACL,CAAC;AAEH,UAAM,oBAAgB,gCAAiB,QAAQ;AAE/C,UAAM,gCAA4B;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,gCAA4B;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,+BAA2B;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,UAAM,oBAAgB,4BAAa,eAAe,aAAa;AAC/D,UAAM,oBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,qBAAqB,cAAc;AAAA,MAAI,CAAC,OAAO,cACnD,4BAAa,OAAO,EAAE,MAAM,CAAC;AAAA,IAC/B;AAEA,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,MACH,UAAU;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAEA,wBAAM;AACN,iCAAS;AAET,WACE,6CAAC,oBAAiB,OAAO,EAAE,QAAQ,GAAG,KAAK,GACzC;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC,eAAW,kBAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG,kBAAkB,CAAC,GAAG,GAAG;AAAA,QAE5B;AAAA,0EACE,uBACC,6CAAC,uBAAqB,GAAG,cAAe,GAAG,kBAAkB,IAC3D;AAAA,UACL,gEACE,uBACC,6CAAC,uBAAqB,GAAG,cAAe,GAAG,kBAAkB,IAC3D;AAAA,UAEN;AAAA,YAAC;AAAA;AAAA,cACE,GAAG,eAAe;AAAA,gBACjB,OAAG,+BAAgB,EAAE,GAAG,KAAK,CAAC;AAAA,gBAC9B,GAAG;AAAA,cACL,CAAC;AAAA,cAEA;AAAA;AAAA,UACH;AAAA,UAEC,8DACE,yBACC,6CAAC,sBAAoB,GAAG,iBAAiB,IACvC;AAAA,UAEL;AAAA;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AACvB,SAAS,SAAS;AAIlB,IAAM,qBAAiB;AAAA,EACrB,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ;AACpB,UAAM,MAAmB,EAAE,GAAG,eAAe,UAAU,UAAU,GAAG,OAAO;AAE3E,WACE,6CAAC,gBAAG,KAAH,EAAO,KAAU,WAAU,wBAAuB,OAAO,KACxD,uDAAC,uBAAqB,GAAG,MAAM,GACjC;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAIxB,IAAM,sBAAoD,CAAC,EAAE,GAAG,KAAK,MAAM;AACzE,QAAM,EAAE,kBAAkB,aAAa,OAAO,IAAI,mBAAmB;AAErE,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT,eAAe,gBAAgB,aAAa,WAAW;AAAA,IACvD,GAAG,OAAO;AAAA,IACV,GAAI,mBACA;AAAA,MACE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG;AAAA,IAC9C,IACA,CAAC;AAAA,EACP;AAEA,SACE,6CAAC,gBAAG,KAAH,EAAO,WAAU,+BAA8B,OAAO,KAAM,GAAG,MAAM;AAE1E;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,SAAS;","names":["import_core","import_utils","import_react","import_core","import_utils","useEmblaCarousel","index","indexes","import_core","import_utils","import_react","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/carousel.tsx","../src/carousel-control.tsx","../src/use-carousel.ts","../src/carousel-indicators.tsx","../src/carousel-slide.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { CarouselControlProps } from \"./carousel-control\"\nimport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\nimport type {\n AlignmentOptionType,\n ScrollContainOptionType,\n SlidesInViewOptionsType,\n UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n filterUndefined,\n findChild,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { CarouselControlNext, CarouselControlPrev } from \"./carousel-control\"\nimport { CarouselIndicators } from \"./carousel-indicators\"\nimport { CarouselSlide } from \"./carousel-slide\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\n\ninterface CarouselOptions {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: Token<AlignmentOptionType>\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: Token<boolean>\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default ''\n */\n containScroll?: Token<ScrollContainOptionType>\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: Token<number>\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: Token<boolean>\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: Token<boolean>\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: Token<number>\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: Token<boolean>\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: Token<SlidesInViewOptionsType>\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: Token<boolean>\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Token<\"horizontal\" | \"vertical\">\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: Token<boolean>\n /**\n * The CSS `width` property.\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: Token<number>\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: Token<boolean>\n /**\n * If `true`, display the carousel control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the carousel indicator buttons.\n *\n * @default true\n */\n withIndicators?: Token<boolean>\n /**\n * Props for next of the carousel control element.\n */\n controlNextProps?: CarouselControlProps\n /**\n * Props for previous of the carousel control element.\n */\n controlPrevProps?: CarouselControlProps\n /**\n * Props for carousel control element.\n */\n controlProps?: CarouselControlProps\n /**\n * Props for carousel indicators element.\n */\n indicatorsProps?: CarouselIndicatorsProps\n /**\n * Props for carousel inner element.\n */\n innerProps?: HTMLUIProps\n}\n\nexport interface CarouselProps\n extends ThemeProps<\"Carousel\">,\n Omit<HTMLUIProps, \"draggable\" | \"onChange\">,\n Pick<\n UseCarouselProps,\n | \"controlRef\"\n | \"defaultIndex\"\n | \"index\"\n | \"onChange\"\n | \"onScrollProgress\"\n | \"watchDrag\"\n | \"watchResize\"\n | \"watchSlides\"\n >,\n CarouselOptions {}\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see Docs https://yamada-ui.com/components/data-display/carousel\n */\nexport const Carousel = forwardRef<CarouselProps, \"div\">(\n ({ h, height, minH, minHeight, ...props }, ref) => {\n const orientation = useValue(props.orientation)\n const align = useValue(props.align)\n const autoplay = useValue(props.autoplay)\n const stopMouseEnterAutoplay = useValue(props.stopMouseEnterAutoplay)\n const loop = useValue(props.loop)\n const duration = useValue(props.duration)\n const delay = useValue(props.delay)\n const slidesToScroll = useValue(props.slidesToScroll)\n const draggable = useValue(props.draggable)\n const dragFree = useValue(props.dragFree)\n const inViewThreshold = useValue(props.inViewThreshold)\n const skipSnaps = useValue(props.skipSnaps)\n const containScroll = useValue(props.containScroll)\n const includeGapInSize = useValue(props.includeGapInSize)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Carousel\", {\n ...props,\n align,\n autoplay,\n containScroll,\n delay,\n dragFree,\n draggable,\n duration,\n includeGapInSize,\n inViewThreshold,\n loop,\n orientation,\n skipSnaps,\n slidesToScroll,\n stopMouseEnterAutoplay,\n })\n const {\n className,\n withControls = true,\n withIndicators = true,\n controlNextProps,\n controlPrevProps,\n controlProps,\n indicatorsProps,\n innerProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const computedWithControls = useValue(withControls)\n const computedWithIndicators = useValue(withIndicators)\n const { id, children, getContainerProps, getSlidesProps, ...rest } =\n useCarousel({\n ...computedProps,\n })\n\n const validChildren = getValidChildren(children)\n const customCarouselControlPrev = findChild(\n validChildren,\n CarouselControlPrev,\n )\n const customCarouselControlNext = findChild(\n validChildren,\n CarouselControlNext,\n )\n const customCarouselIndicators = findChild(\n validChildren,\n CarouselIndicators,\n )\n const slideChildren = pickChildren(validChildren, CarouselSlide)\n const otherChildren = omitChildren(\n validChildren,\n CarouselControlPrev,\n CarouselControlNext,\n CarouselIndicators,\n CarouselSlide,\n )\n const cloneSlideChildren = slideChildren.map((child, index) =>\n cloneElement(child, { index }),\n )\n\n const css: CSSUIObject = {\n h: \"fit-content\",\n position: \"relative\",\n ...styles.container,\n }\n\n h ??= height\n minH ??= minHeight\n\n return (\n <CarouselProvider value={{ id, styles, ...rest }}>\n <ui.section\n className={cx(\"ui-carousel\", className)}\n __css={css}\n {...getContainerProps({}, ref)}\n >\n {customCarouselControlPrev ??\n (computedWithControls ? (\n <CarouselControlPrev {...controlProps} {...controlPrevProps} />\n ) : null)}\n {customCarouselControlNext ??\n (computedWithControls ? (\n <CarouselControlNext {...controlProps} {...controlNextProps} />\n ) : null)}\n\n <CarouselSlides\n {...getSlidesProps({\n ...filterUndefined({ h, minH }),\n ...innerProps,\n })}\n >\n {cloneSlideChildren}\n </CarouselSlides>\n\n {customCarouselIndicators ??\n (computedWithIndicators ? (\n <CarouselIndicators {...indicatorsProps} />\n ) : null)}\n\n {otherChildren}\n </ui.section>\n </CarouselProvider>\n )\n },\n)\n\nCarousel.displayName = \"Carousel\"\nCarousel.__ui__ = \"Carousel\"\n\ninterface CarouselSlidesProps extends HTMLUIProps {}\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n ({ ...rest }, ref) => {\n const css: CSSUIObject = { h: \"fit-content\", overflow: \"hidden\", w: \"100%\" }\n\n return (\n <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n <CarouselSlidesInner {...rest} />\n </ui.div>\n )\n },\n)\n\nCarouselSlides.displayName = \"CarouselSlides\"\nCarouselSlides.__ui__ = \"CarouselSlides\"\n\ninterface CarouselSlidesInnerProps extends HTMLUIProps {}\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n const { includeGapInSize, orientation, styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n ...styles.inner,\n ...(includeGapInSize\n ? {\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n }\n : {}),\n }\n\n return (\n <ui.div className=\"ui-carousel__sliders__inner\" __css={css} {...rest} />\n )\n}\n\nCarouselSlidesInner.displayName = \"CarouselSlidesInner\"\nCarouselSlidesInner.__ui__ = \"CarouselSlidesInner\"\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselControl } from \"./use-carousel\"\n\nexport interface CarouselControlProps extends IconButtonProps {}\n\nexport const CarouselControlPrev = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n return (\n <CarouselControl\n ref={ref}\n className={cx(\"ui-carousel__control--prev\", className)}\n icon={\n <ChevronIcon\n __css={{\n fontSize: \"1.5em\",\n transform:\n orientation === \"vertical\" ? \"rotate(180deg)\" : \"rotate(90deg)\",\n }}\n />\n }\n operation=\"prev\"\n {...rest}\n />\n )\n },\n)\n\nCarouselControlPrev.displayName = \"CarouselControlPrev\"\nCarouselControlPrev.__ui__ = \"CarouselControlPrev\"\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n return (\n <CarouselControl\n ref={ref}\n className={cx(\"ui-carousel__control--next\", className)}\n icon={\n <ChevronIcon\n __css={{\n fontSize: \"1.5em\",\n transform:\n orientation === \"vertical\" ? \"rotate(0deg)\" : \"rotate(-90deg)\",\n }}\n />\n }\n operation=\"next\"\n {...rest}\n />\n )\n },\n)\n\nCarouselControlNext.displayName = \"CarouselControlNext\"\nCarouselControlNext.__ui__ = \"CarouselControlNext\"\n\nconst CarouselControl = forwardRef<\n { operation: \"next\" | \"prev\" } & CarouselControlProps,\n \"button\"\n>(({ className, operation, ...rest }, ref) => {\n const { styles } = useCarouselContext()\n const { getControlProps } = useCarouselControl({ operation })\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"fallback(kurillin, 9)\",\n ...styles.control,\n ...styles[operation],\n }\n\n return (\n <IconButton\n className={cx(\"ui-carousel__control\", className)}\n colorScheme={[\"whiteAlpha\", \"blackAlpha\"]}\n isRounded\n __css={css}\n {...getControlProps(rest, ref)}\n />\n )\n})\n\nCarouselControl.displayName = \"CarouselControl\"\nCarouselControl.__ui__ = \"CarouselControl\"\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n CSSUIObject,\n CSSUIProps,\n HTMLProps,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport type {\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n RefObject,\n} from \"react\"\nimport { layoutStyleProperties, mergeVars } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n mergeRefs,\n splitObject,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport {\n Children,\n createRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\"\n\nexport type AlignmentOptionType = EmblaOptionsType[\"align\"]\nexport type ScrollContainOptionType = EmblaOptionsType[\"containScroll\"]\nexport type SlidesInViewOptionsType = EmblaOptionsType[\"inViewThreshold\"]\nexport type DragHandlerOptionType = EmblaOptionsType[\"watchDrag\"]\nexport type ResizeHandlerOptionType = EmblaOptionsType[\"watchResize\"]\nexport type SlidesHandlerOptionType = EmblaOptionsType[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\n\ninterface CarouselContext {\n id: string\n carousel: CarouselControl | undefined\n includeGapInSize: boolean\n indexes: number[]\n orientation: \"horizontal\" | \"vertical\"\n selectedIndex: number\n slidesToScroll: number\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n createContext<CarouselContext>({\n name: \"CarouselContext\",\n errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n })\n\nexport interface UseCarouselProps\n extends Omit<HTMLUIProps, \"draggable\" | \"gap\" | \"onChange\"> {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: AlignmentOptionType\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default false\n */\n containScroll?: ScrollContainOptionType\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | undefined>\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: number\n /**\n * The CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: boolean\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: SlidesInViewOptionsType\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"horizontal\" | \"vertical\"\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * Enables for scrolling the carousel with mouse and touch interactions.\n * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n *\n * @default true\n */\n watchDrag?: DragHandlerOptionType\n /**\n * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n *\n * @default true\n */\n watchResize?: ResizeHandlerOptionType\n /**\n * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n *\n * @default true\n */\n watchSlides?: SlidesHandlerOptionType\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n id,\n align = \"center\",\n autoplay = false,\n children,\n containScroll = false,\n controlRef,\n defaultIndex = 0,\n delay = 4000,\n dragFree = false,\n draggable = true,\n duration = 25,\n includeGapInSize = true,\n index,\n inViewThreshold = 0,\n loop = true,\n orientation = \"horizontal\",\n skipSnaps = false,\n slideSize = \"100%\",\n slidesToScroll = 1,\n stopMouseEnterAutoplay = true,\n watchDrag = draggable,\n watchResize = true,\n watchSlides = true,\n onChange,\n onScrollProgress,\n ...rest\n}: UseCarouselProps) => {\n const [\n { gap = \"fallback(4, 1rem)\", ...containerProps },\n { vars, ...slidesProps },\n ] = splitObject(rest, layoutStyleProperties)\n const [selectedIndex, setSelectedIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: index,\n onChange,\n })\n const [indexes, setIndexes] = useState<number[]>([])\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n const timeoutId = useRef<any>(undefined)\n const isVertical = orientation === \"vertical\"\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n align,\n axis: isVertical ? \"y\" : \"x\",\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n startIndex: defaultIndex,\n watchDrag,\n watchResize,\n watchSlides,\n },\n [],\n )\n const uuid = useId()\n\n id ??= uuid\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setSelectedIndex(index)\n }, [carousel, setSelectedIndex])\n\n useEffect(() => {\n const isStop = isMouseEnter && stopMouseEnterAutoplay\n const isLast = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !isStop && !isLast) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = undefined\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [\n autoplay,\n delay,\n stopMouseEnterAutoplay,\n carousel,\n isMouseEnter,\n loop,\n selectedIndex,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [\n Children.toArray(children).length,\n align,\n orientation,\n loop,\n duration,\n gap,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n slideSize,\n includeGapInSize,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [carousel])\n\n useUpdateEffect(() => {\n if (carousel) {\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onScroll])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n if (index === undefined) return\n\n carousel.scrollTo(index)\n }, [index])\n\n assignRef(controlRef, carousel)\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n \"aria-roledescription\": \"carousel\",\n ...containerProps,\n ...props,\n ref,\n vars: mergeVars(vars, [\n { name: \"gap\", token: \"spaces\", value: gap },\n { name: \"slideSize\", token: \"sizes\", value: slideSize },\n ]),\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [containerProps, gap, slideSize, vars],\n )\n\n const getSlidesProps: PropGetter = useCallback(\n (props = {}) => ({\n id,\n \"aria-live\": autoplay ? \"off\" : \"polite\",\n ...slidesProps,\n ...props,\n ref: carouselRef,\n }),\n [slidesProps, id, carouselRef, autoplay],\n )\n\n return {\n id,\n carousel,\n children,\n includeGapInSize,\n indexes,\n orientation,\n selectedIndex,\n slidesToScroll,\n getContainerProps,\n getSlidesProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport interface UseCarouselSlideProps {\n index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n const { id, indexes, selectedIndex, slidesToScroll } = useCarouselContext()\n\n index = Math.floor((index ?? 0) / slidesToScroll)\n\n const totalSlides = indexes.length\n const isSelected = index === selectedIndex\n\n const getSlideProps: PropGetter = useCallback(\n (props = {}) => ({\n id: `${id}-${index + 1}`,\n \"aria-label\": `${index + 1} of ${totalSlides}`,\n \"aria-roledescription\": \"slide\",\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n role: \"tabpanel\",\n ...props,\n }),\n [id, index, isSelected, totalSlides],\n )\n\n return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport interface UseCarouselControlProps extends IconButtonProps {\n operation: \"next\" | \"prev\"\n}\n\nexport const useCarouselControl = ({\n operation,\n ...rest\n}: UseCarouselControlProps) => {\n const { id, carousel } = useCarouselContext()\n\n const isPrev = operation === \"prev\"\n\n const disabled =\n rest.disabled ??\n rest.isDisabled ??\n (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n const onClick = useCallback(() => {\n if (!carousel) return\n\n if (isPrev) {\n carousel.scrollPrev()\n } else {\n carousel.scrollNext()\n }\n }, [carousel, isPrev])\n\n const getControlProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n \"aria-controls\": id,\n \"aria-label\": `Go to ${isPrev ? \"previous\" : \"next\"} slide`,\n ...props,\n ref,\n disabled,\n onClick: handlerAll(props.onClick, onClick),\n }),\n [disabled, id, onClick, isPrev],\n )\n\n return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n const { id, carousel, indexes, orientation, selectedIndex } =\n useCarouselContext()\n const refMap = useRef<Map<number, RefObject<HTMLButtonElement>>>(new Map())\n const isVertical = orientation === \"vertical\"\n\n const onSelect = useCallback(\n (index: number) => {\n const ref = refMap.current.get(index)\n\n ref?.current?.focus()\n carousel?.scrollTo(index)\n },\n [carousel],\n )\n\n const onClick = useCallback(\n (index: number) => (ev: MouseEvent) => {\n ev.stopPropagation()\n\n carousel?.scrollTo(index)\n },\n [carousel],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent) => {\n const lastIndex = indexes.length - 1\n\n const actions: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: () => {\n if (!isVertical) return\n\n if (index === lastIndex) {\n index = 0\n } else {\n index += 1\n }\n\n onSelect(index)\n },\n ArrowLeft: () => {\n if (isVertical) return\n\n if (index === 0) {\n index = lastIndex\n } else {\n index -= 1\n }\n\n onSelect(index)\n },\n ArrowRight: () => {\n if (isVertical) return\n\n if (index === lastIndex) {\n index = 0\n } else {\n index += 1\n }\n\n onSelect(index)\n },\n ArrowUp: () => {\n if (!isVertical) return\n\n if (index === 0) {\n index = lastIndex\n } else {\n index -= 1\n }\n\n onSelect(index)\n },\n End: () => onSelect(lastIndex),\n Home: () => onSelect(0),\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [indexes, onSelect, isVertical],\n )\n\n useUnmountEffect(() => {\n refMap.current.clear()\n })\n\n const getIndicatorsProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n \"aria-label\": \"Sliders\",\n \"aria-orientation\": orientation,\n role: \"tablist\",\n ...props,\n ref,\n }),\n [orientation],\n )\n\n const getIndicatorProps: RequiredPropGetter<\n { index: number } & HTMLProps<\"button\">,\n HTMLProps<\"button\">\n > = useCallback(\n ({ index, ...props }, ref) => {\n const isSelected = index === selectedIndex\n const internalRef = createRef<HTMLButtonElement>()\n\n refMap.current.set(index, internalRef)\n\n return {\n ref: mergeRefs(ref, internalRef),\n \"aria-controls\": `${id}-${index + 1}`,\n \"aria-label\": `Go to ${index + 1} slide`,\n \"aria-selected\": isSelected,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n role: \"tab\",\n tabIndex: isSelected ? 0 : -1,\n ...props,\n key: index,\n onClick: handlerAll(props.onClick, onClick(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }\n },\n [onClick, onKeyDown, selectedIndex, id],\n )\n\n return { indexes, getIndicatorProps, getIndicatorsProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n typeof useCarouselIndicators\n>\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactElement } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { useCarouselContext, useCarouselIndicators } from \"./use-carousel\"\n\ninterface CarouselIndicatorsOptions {\n /**\n * The custom carousel indicator to use.\n */\n component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport interface CarouselIndicatorsProps\n extends HTMLUIProps,\n CarouselIndicatorsOptions {}\n\nexport const CarouselIndicators = forwardRef<CarouselIndicatorsProps, \"div\">(\n ({ className, component, ...rest }, ref) => {\n const { orientation, selectedIndex, styles } = useCarouselContext()\n const { indexes, getIndicatorProps, getIndicatorsProps } =\n useCarouselIndicators()\n\n const css: CSSUIObject = {\n display: \"flex\",\n justifyContent: \"center\",\n position: \"absolute\",\n zIndex: \"fallback(kurillin, 9)\",\n ...styles.indicators,\n ...(orientation === \"vertical\"\n ? { flexDirection: \"column\" }\n : { flexDirection: \"row\" }),\n }\n\n return (\n <ui.div\n className={cx(\"ui-carousel__indicators\", className)}\n {...getIndicatorsProps(rest, ref)}\n __css={css}\n {...rest}\n >\n {indexes.map((index) => {\n const isSelected = index === selectedIndex\n\n if (typeof component === \"function\") {\n const child = component({\n index,\n isSelected,\n }) as null | ReactElement\n\n if (!child) return null\n\n const props = getIndicatorProps({ ...child.props, index })\n\n return cloneElement(child as ReactElement, props)\n } else {\n const { key, ...props } = getIndicatorProps({ index })\n\n return <CarouselIndicator key={key} {...props} />\n }\n })}\n </ui.div>\n )\n },\n)\n\nCarouselIndicators.displayName = \"CarouselIndicators\"\nCarouselIndicators.__ui__ = \"CarouselIndicators\"\n\ninterface CarouselIndicatorProps extends HTMLUIProps<\"button\"> {}\n\nconst CarouselIndicator = forwardRef<CarouselIndicatorProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useCarouselContext()\n\n const css: CSSUIObject = { ...styles.indicator }\n\n return (\n <ui.button\n ref={ref}\n type=\"button\"\n className={cx(\"ui-carousel__indicators__indicator\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCarouselIndicator.displayName = \"CarouselIndicator\"\nCarouselIndicator.__ui__ = \"CarouselIndicator\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselSlide } from \"./use-carousel\"\n\ninterface CarouselSlideOptions {\n /**\n * The CSS `width` property.\n */\n size?: CSSUIObject[\"width\"]\n}\n\nexport interface CarouselSlideProps\n extends HTMLUIProps,\n UseCarouselSlideProps,\n CarouselSlideOptions {}\n\nexport const CarouselSlide = forwardRef<CarouselSlideProps, \"div\">(\n ({ className, size, ...rest }, ref) => {\n const { includeGapInSize, orientation } = useCarouselContext()\n const { getSlideProps } = useCarouselSlide(rest)\n\n size ??= \"$slideSize\"\n\n const css: CSSUIObject = {\n flex: `0 0 ${size}`,\n position: \"relative\",\n ...(includeGapInSize\n ? { [orientation === \"vertical\" ? \"pb\" : \"pr\"]: \"$gap\" }\n : { [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"$gap\" }),\n }\n\n return (\n <ui.div\n className={cx(\"ui-carousel__slide\", className)}\n __css={css}\n {...getSlideProps({})}\n >\n <CarouselSlideInner ref={ref} {...rest} />\n </ui.div>\n )\n },\n)\n\nCarouselSlide.displayName = \"CarouselSlide\"\nCarouselSlide.__ui__ = \"CarouselSlide\"\n\ninterface CarouselSlideInnerProps extends HTMLUIProps {}\n\nconst CarouselSlideInner = forwardRef<CarouselSlideInnerProps, \"div\">(\n ({ ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className=\"ui-carousel__slide__inner\"\n boxSize=\"100%\"\n {...rest}\n />\n )\n },\n)\n\nCarouselSlideInner.displayName = \"CarouselSlideInner\"\nCarouselSlideInner.__ui__ = \"CarouselSlideInner\"\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_core","import_utils","useEmblaCarousel","index","indexes","import_core","import_utils","import_react","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/carousel.mjs
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
Carousel
|
4
|
-
} from "./chunk-
|
5
|
-
import "./chunk-
|
6
|
-
import "./chunk-
|
7
|
-
import "./chunk-
|
8
|
-
import "./chunk-
|
4
|
+
} from "./chunk-3TQFASU2.mjs";
|
5
|
+
import "./chunk-HVGHVY6Y.mjs";
|
6
|
+
import "./chunk-GXNJ5VYJ.mjs";
|
7
|
+
import "./chunk-GUUMIIYD.mjs";
|
8
|
+
import "./chunk-2HSC64IV.mjs";
|
9
9
|
export {
|
10
10
|
Carousel
|
11
11
|
};
|