@yamada-ui/carousel 1.0.28 → 1.0.29

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 (47) hide show
  1. package/dist/carousel-control.d.mts +8 -0
  2. package/dist/carousel-control.d.ts +8 -0
  3. package/dist/carousel-control.js +158 -0
  4. package/dist/carousel-control.js.map +1 -0
  5. package/dist/carousel-control.mjs +11 -0
  6. package/dist/carousel-control.mjs.map +1 -0
  7. package/dist/carousel-indicators.d.mts +17 -0
  8. package/dist/carousel-indicators.d.ts +17 -0
  9. package/dist/carousel-indicators.js +141 -0
  10. package/dist/carousel-indicators.js.map +1 -0
  11. package/dist/carousel-indicators.mjs +9 -0
  12. package/dist/carousel-indicators.mjs.map +1 -0
  13. package/dist/carousel-slide.d.mts +17 -0
  14. package/dist/carousel-slide.d.ts +17 -0
  15. package/dist/carousel-slide.js +106 -0
  16. package/dist/carousel-slide.js.map +1 -0
  17. package/dist/carousel-slide.mjs +9 -0
  18. package/dist/carousel-slide.mjs.map +1 -0
  19. package/dist/carousel.d.mts +144 -0
  20. package/dist/carousel.d.ts +144 -0
  21. package/dist/carousel.js +599 -0
  22. package/dist/carousel.js.map +1 -0
  23. package/dist/carousel.mjs +12 -0
  24. package/dist/carousel.mjs.map +1 -0
  25. package/dist/chunk-ABN4VJ2X.mjs +171 -0
  26. package/dist/chunk-ABN4VJ2X.mjs.map +1 -0
  27. package/dist/chunk-DDY7Q2IV.mjs +87 -0
  28. package/dist/chunk-DDY7Q2IV.mjs.map +1 -0
  29. package/dist/chunk-QQ2HS4J4.mjs +260 -0
  30. package/dist/chunk-QQ2HS4J4.mjs.map +1 -0
  31. package/dist/chunk-SDWORTZY.mjs +72 -0
  32. package/dist/chunk-SDWORTZY.mjs.map +1 -0
  33. package/dist/chunk-VQX7S5CU.mjs +50 -0
  34. package/dist/chunk-VQX7S5CU.mjs.map +1 -0
  35. package/dist/index.d.mts +9 -0
  36. package/dist/index.d.ts +9 -0
  37. package/dist/index.js +609 -0
  38. package/dist/index.js.map +1 -0
  39. package/dist/index.mjs +23 -0
  40. package/dist/index.mjs.map +1 -0
  41. package/dist/use-carousel.d.mts +176 -0
  42. package/dist/use-carousel.d.ts +176 -0
  43. package/dist/use-carousel.js +292 -0
  44. package/dist/use-carousel.js.map +1 -0
  45. package/dist/use-carousel.mjs +18 -0
  46. package/dist/use-carousel.mjs.map +1 -0
  47. package/package.json +3 -3
package/dist/index.js ADDED
@@ -0,0 +1,609 @@
1
+ "use client"
2
+ "use strict";
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
+
31
+ // src/index.ts
32
+ var src_exports = {};
33
+ __export(src_exports, {
34
+ Carousel: () => Carousel,
35
+ CarouselControlNext: () => CarouselControlNext,
36
+ CarouselControlPrev: () => CarouselControlPrev,
37
+ CarouselIndicators: () => CarouselIndicators,
38
+ CarouselSlide: () => CarouselSlide
39
+ });
40
+ module.exports = __toCommonJS(src_exports);
41
+
42
+ // src/carousel.tsx
43
+ var import_core2 = require("@yamada-ui/core");
44
+ var import_use_token = require("@yamada-ui/use-token");
45
+ var import_use_value = require("@yamada-ui/use-value");
46
+ var import_utils2 = require("@yamada-ui/utils");
47
+ var import_react2 = require("react");
48
+
49
+ // src/use-carousel.ts
50
+ var import_core = require("@yamada-ui/core");
51
+ var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
52
+ var import_utils = require("@yamada-ui/utils");
53
+ var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
54
+ var import_react = require("react");
55
+ var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
56
+ name: "CarouselContext",
57
+ errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
58
+ });
59
+ var useCarousel = ({
60
+ index,
61
+ defaultIndex = 0,
62
+ onChange,
63
+ align = "center",
64
+ orientation = "horizontal",
65
+ autoplay = false,
66
+ stopMouseEnterAutoplay = true,
67
+ loop = true,
68
+ speed = 10,
69
+ delay = 4e3,
70
+ gap = "fallback(4, 1rem)",
71
+ slidesToScroll = 1,
72
+ draggable = true,
73
+ dragFree = false,
74
+ inViewThreshold = 0,
75
+ skipSnaps = false,
76
+ containScroll = "",
77
+ slideSize = "100%",
78
+ includeGapInSize = true,
79
+ onScrollProgress,
80
+ children,
81
+ ...rest
82
+ }) => {
83
+ const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
84
+ const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
85
+ value: index,
86
+ defaultValue: defaultIndex,
87
+ onChange
88
+ });
89
+ const isVertical = orientation === "vertical";
90
+ const [carouselRef, carousel] = (0, import_embla_carousel_react.default)({
91
+ axis: isVertical ? "y" : "x",
92
+ startIndex: defaultIndex,
93
+ loop,
94
+ align,
95
+ slidesToScroll,
96
+ draggable,
97
+ dragFree,
98
+ speed,
99
+ inViewThreshold,
100
+ skipSnaps,
101
+ containScroll
102
+ });
103
+ const [indexes, setIndexes] = (0, import_react.useState)([]);
104
+ const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
105
+ const timeoutId = (0, import_react.useRef)(void 0);
106
+ const onScroll = (0, import_react.useCallback)(() => {
107
+ if (!carousel)
108
+ return;
109
+ const progress = Math.round(
110
+ Math.max(0, Math.min(1, carousel.scrollProgress())) * 100
111
+ );
112
+ onScrollProgress == null ? void 0 : onScrollProgress(progress);
113
+ }, [carousel, onScrollProgress]);
114
+ const onSelect = (0, import_react.useCallback)(() => {
115
+ if (!carousel)
116
+ return;
117
+ const index2 = carousel.selectedScrollSnap();
118
+ setSelectedIndex(index2);
119
+ }, [carousel, setSelectedIndex]);
120
+ (0, import_react.useEffect)(() => {
121
+ const isStop = isMouseEnter && stopMouseEnterAutoplay;
122
+ const isLast = !(carousel == null ? void 0 : carousel.canScrollNext());
123
+ if (carousel && autoplay && !isStop && !isLast) {
124
+ timeoutId.current = setInterval(() => {
125
+ carousel.scrollNext();
126
+ }, delay);
127
+ } else {
128
+ if (timeoutId.current)
129
+ clearInterval(timeoutId.current);
130
+ timeoutId.current = void 0;
131
+ }
132
+ return () => {
133
+ if (timeoutId.current)
134
+ clearInterval(timeoutId.current);
135
+ };
136
+ }, [
137
+ autoplay,
138
+ delay,
139
+ stopMouseEnterAutoplay,
140
+ carousel,
141
+ isMouseEnter,
142
+ loop,
143
+ selectedIndex
144
+ ]);
145
+ (0, import_utils.useUpdateEffect)(() => {
146
+ if (!carousel)
147
+ return;
148
+ carousel.reInit();
149
+ const snapList = carousel.scrollSnapList();
150
+ const indexes2 = snapList.map((_, i) => i);
151
+ setIndexes(indexes2);
152
+ }, [
153
+ import_react.Children.toArray(children).length,
154
+ align,
155
+ orientation,
156
+ loop,
157
+ speed,
158
+ gap,
159
+ slidesToScroll,
160
+ draggable,
161
+ dragFree,
162
+ inViewThreshold,
163
+ skipSnaps,
164
+ containScroll,
165
+ slideSize,
166
+ includeGapInSize
167
+ ]);
168
+ (0, import_utils.useUpdateEffect)(() => {
169
+ if (!carousel)
170
+ return;
171
+ const snapList = carousel.scrollSnapList();
172
+ const indexes2 = snapList.map((_, i) => i);
173
+ setIndexes(indexes2);
174
+ }, [carousel]);
175
+ (0, import_utils.useUpdateEffect)(() => {
176
+ if (carousel) {
177
+ carousel.on("select", onSelect);
178
+ carousel.on("scroll", onScroll);
179
+ onScroll();
180
+ return () => {
181
+ carousel.off("select", onSelect);
182
+ carousel.off("scroll", onScroll);
183
+ };
184
+ }
185
+ }, [carousel, onScroll]);
186
+ const getContainerProps = (0, import_react.useCallback)(
187
+ (props = {}, ref = null) => ({
188
+ ...computedProps[0],
189
+ ...props,
190
+ ref,
191
+ onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
192
+ setIsMouseEnter(true);
193
+ }),
194
+ onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, () => {
195
+ setIsMouseEnter(false);
196
+ })
197
+ }),
198
+ [computedProps]
199
+ );
200
+ const getSlidesProps = (0, import_react.useCallback)(
201
+ (props = {}) => ({
202
+ ...computedProps[1],
203
+ ...props,
204
+ ref: carouselRef
205
+ }),
206
+ [computedProps, carouselRef]
207
+ );
208
+ return {
209
+ carousel,
210
+ children,
211
+ indexes,
212
+ selectedIndex,
213
+ orientation,
214
+ slideSize,
215
+ gap,
216
+ slidesToScroll,
217
+ includeGapInSize,
218
+ getContainerProps,
219
+ getSlidesProps
220
+ };
221
+ };
222
+ var useCarouselSlide = ({ index }) => {
223
+ const { selectedIndex, slidesToScroll } = useCarouselContext();
224
+ index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
225
+ const isSelected = index === selectedIndex;
226
+ const getSlideProps = (0, import_react.useCallback)(
227
+ (props = {}) => ({
228
+ ...props,
229
+ "data-index": index,
230
+ "data-selected": (0, import_utils.dataAttr)(isSelected)
231
+ }),
232
+ [isSelected, index]
233
+ );
234
+ return { getSlideProps };
235
+ };
236
+ var useCarouselControl = ({
237
+ operation,
238
+ ...rest
239
+ }) => {
240
+ var _a, _b;
241
+ const { carousel } = useCarouselContext();
242
+ const isPrev = operation === "prev";
243
+ 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());
244
+ const onClick = (0, import_react.useCallback)(() => {
245
+ if (!carousel)
246
+ return;
247
+ if (isPrev) {
248
+ carousel.scrollPrev();
249
+ } else {
250
+ carousel.scrollNext();
251
+ }
252
+ }, [carousel, isPrev]);
253
+ const getControlProps = (0, import_react.useCallback)(
254
+ (props = {}, ref = null) => ({
255
+ ...props,
256
+ ref,
257
+ disabled,
258
+ onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
259
+ }),
260
+ [disabled, onClick]
261
+ );
262
+ return { getControlProps };
263
+ };
264
+ var useCarouselIndicators = () => {
265
+ const { selectedIndex, carousel, indexes } = useCarouselContext();
266
+ const onClick = (0, import_react.useCallback)(
267
+ (ev, index) => {
268
+ if (!carousel)
269
+ return;
270
+ ev.stopPropagation();
271
+ carousel.scrollTo(index);
272
+ },
273
+ [carousel]
274
+ );
275
+ const getIndicatorProps = (0, import_react.useCallback)(
276
+ ({ index, ...props }) => {
277
+ const isSelected = index === selectedIndex;
278
+ return {
279
+ "aria-label": `Go to ${index + 1} slide`,
280
+ ...props,
281
+ key: index,
282
+ "data-index": index,
283
+ "data-selected": (0, import_utils.dataAttr)(isSelected),
284
+ onClick: (0, import_utils.handlerAll)(props.onClick, (ev) => onClick(ev, index))
285
+ };
286
+ },
287
+ [onClick, selectedIndex]
288
+ );
289
+ return { indexes, getIndicatorProps };
290
+ };
291
+
292
+ // src/carousel.tsx
293
+ var import_jsx_runtime = require("react/jsx-runtime");
294
+ var Carousel = (0, import_core2.forwardRef)(
295
+ ({ h, height, minH, minHeight, ...props }, ref) => {
296
+ var _a, _b;
297
+ const orientation = (0, import_use_value.useValue)(props.orientation);
298
+ const align = (0, import_use_value.useValue)(props.align);
299
+ const autoplay = (0, import_use_value.useValue)(props.autoplay);
300
+ const stopMouseEnterAutoplay = (0, import_use_value.useValue)(props.stopMouseEnterAutoplay);
301
+ const loop = (0, import_use_value.useValue)(props.loop);
302
+ const speed = (0, import_use_value.useValue)(props.speed);
303
+ const delay = (0, import_use_value.useValue)(props.delay);
304
+ const slidesToScroll = (0, import_use_value.useValue)(props.slidesToScroll);
305
+ const draggable = (0, import_use_value.useValue)(props.draggable);
306
+ const dragFree = (0, import_use_value.useValue)(props.dragFree);
307
+ const inViewThreshold = (0, import_use_value.useValue)(props.inViewThreshold);
308
+ const skipSnaps = (0, import_use_value.useValue)(props.skipSnaps);
309
+ const containScroll = (0, import_use_value.useValue)(props.containScroll);
310
+ const includeGapInSize = (0, import_use_value.useValue)(props.includeGapInSize);
311
+ const gap = (_a = (0, import_use_token.useToken)("spaces", (0, import_use_value.useValue)(props.gap))) != null ? _a : (0, import_use_value.useValue)(props.gap);
312
+ const slideSize = (_b = (0, import_use_token.useToken)("sizes", (0, import_use_value.useValue)(props.slideSize))) != null ? _b : (0, import_use_value.useValue)(props.slideSize);
313
+ const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Carousel", {
314
+ ...props,
315
+ orientation,
316
+ align,
317
+ autoplay,
318
+ stopMouseEnterAutoplay,
319
+ loop,
320
+ speed,
321
+ delay,
322
+ slidesToScroll,
323
+ draggable,
324
+ dragFree,
325
+ inViewThreshold,
326
+ skipSnaps,
327
+ containScroll,
328
+ includeGapInSize,
329
+ gap,
330
+ slideSize
331
+ });
332
+ const {
333
+ className,
334
+ innerProps,
335
+ withControls = true,
336
+ controlProps,
337
+ controlPrevProps,
338
+ controlNextProps,
339
+ withIndicators = true,
340
+ indicatorsProps,
341
+ ...computedProps
342
+ } = (0, import_core2.omitThemeProps)(mergedProps);
343
+ const computedWithControls = (0, import_use_value.useValue)(withControls);
344
+ const computedWithIndicators = (0, import_use_value.useValue)(withIndicators);
345
+ const { getContainerProps, getSlidesProps, children, ...rest } = useCarousel({
346
+ ...computedProps
347
+ });
348
+ const validChildren = (0, import_utils2.getValidChildren)(children);
349
+ const [customCarouselControlPrev] = (0, import_utils2.findChildren)(
350
+ validChildren,
351
+ CarouselControlPrev
352
+ );
353
+ const [customCarouselControlNext] = (0, import_utils2.findChildren)(
354
+ validChildren,
355
+ CarouselControlNext
356
+ );
357
+ const [customCarouselIndicators] = (0, import_utils2.findChildren)(
358
+ validChildren,
359
+ CarouselIndicators
360
+ );
361
+ const slideChildren = (0, import_utils2.pickChildren)(validChildren, CarouselSlide);
362
+ const otherChildren = (0, import_utils2.omitChildren)(
363
+ validChildren,
364
+ CarouselControlPrev,
365
+ CarouselControlNext,
366
+ CarouselIndicators,
367
+ CarouselSlide
368
+ );
369
+ const cloneSlideChildren = slideChildren.map(
370
+ (child, index) => (0, import_react2.cloneElement)(child, { index })
371
+ );
372
+ h != null ? h : h = height;
373
+ minH != null ? minH : minH = minHeight;
374
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
375
+ import_core2.ui.div,
376
+ {
377
+ className: (0, import_utils2.cx)("ui-carousel", className),
378
+ __css: {
379
+ position: "relative",
380
+ h: "fit-content",
381
+ ...styles.container
382
+ },
383
+ ...getContainerProps({}, ref),
384
+ children: [
385
+ customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
386
+ customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
387
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
388
+ CarouselSlides,
389
+ {
390
+ ...getSlidesProps({
391
+ ...(0, import_utils2.filterUndefined)({ h, minH }),
392
+ ...innerProps
393
+ }),
394
+ children: cloneSlideChildren
395
+ }
396
+ ),
397
+ customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselIndicators, { ...indicatorsProps }) : null,
398
+ otherChildren
399
+ ]
400
+ }
401
+ ) });
402
+ }
403
+ );
404
+ var CarouselSlides = (0, import_core2.forwardRef)(
405
+ ({ ...rest }, ref) => {
406
+ const css = { w: "100%", h: "fit-content", overflow: "hidden" };
407
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlidesInner, { ...rest }) });
408
+ }
409
+ );
410
+ var CarouselSlidesInner = ({ ...rest }) => {
411
+ const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
412
+ const css = {
413
+ display: "flex",
414
+ flexDirection: orientation === "vertical" ? "column" : "row",
415
+ ...styles.inner,
416
+ ...includeGapInSize ? {
417
+ var: [{ __prefix: "ui", name: "gap", token: "spaces", value: gap }],
418
+ [orientation === "vertical" ? "mb" : "mr"]: import_utils2.calc.negate("var(--ui-gap)")
419
+ } : {}
420
+ };
421
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { className: "ui-carousel__sliders__inner", __css: css, ...rest });
422
+ };
423
+
424
+ // src/carousel-slide.tsx
425
+ var import_core3 = require("@yamada-ui/core");
426
+ var import_utils3 = require("@yamada-ui/utils");
427
+ var import_jsx_runtime2 = require("react/jsx-runtime");
428
+ var CarouselSlide = (0, import_core3.forwardRef)(
429
+ ({ className, size, ...rest }, ref) => {
430
+ const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
431
+ const { getSlideProps } = useCarouselSlide(rest);
432
+ size != null ? size : size = slideSize;
433
+ const css = {
434
+ position: "relative",
435
+ flex: `0 0 ${size}`,
436
+ ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
437
+ };
438
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
439
+ import_core3.ui.div,
440
+ {
441
+ className: (0, import_utils3.cx)("ui-carousel__slide", className),
442
+ __css: css,
443
+ ...getSlideProps({}),
444
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CarouselSlideInner, { ref, ...rest })
445
+ }
446
+ );
447
+ }
448
+ );
449
+ var CarouselSlideInner = (0, import_core3.forwardRef)(
450
+ ({ ...rest }, ref) => {
451
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
452
+ import_core3.ui.div,
453
+ {
454
+ ref,
455
+ className: "ui-carousel__slide__inner",
456
+ w: "100%",
457
+ h: "100%",
458
+ ...rest
459
+ }
460
+ );
461
+ }
462
+ );
463
+
464
+ // src/carousel-control.tsx
465
+ var import_button = require("@yamada-ui/button");
466
+ var import_core4 = require("@yamada-ui/core");
467
+ var import_icon = require("@yamada-ui/icon");
468
+ var import_utils4 = require("@yamada-ui/utils");
469
+ var import_jsx_runtime3 = require("react/jsx-runtime");
470
+ var CarouselControlPrev = (0, import_core4.forwardRef)(
471
+ ({ className, ...rest }, ref) => {
472
+ const { orientation } = useCarouselContext();
473
+ const { getControlProps } = useCarouselControl({ operation: "prev" });
474
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
475
+ CarouselControl,
476
+ {
477
+ operation: "prev",
478
+ className: (0, import_utils4.cx)("ui-carousel__control--prev", className),
479
+ "aria-label": "Go to previous slide",
480
+ icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
481
+ import_icon.ChevronIcon,
482
+ {
483
+ __css: {
484
+ fontSize: "1.5em",
485
+ transform: orientation === "vertical" ? "rotate(180deg)" : "rotate(90deg)"
486
+ }
487
+ }
488
+ ),
489
+ ...getControlProps(rest, ref)
490
+ }
491
+ );
492
+ }
493
+ );
494
+ var CarouselControlNext = (0, import_core4.forwardRef)(
495
+ ({ className, ...rest }, ref) => {
496
+ const { orientation } = useCarouselContext();
497
+ const { getControlProps } = useCarouselControl({ operation: "next" });
498
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
499
+ CarouselControl,
500
+ {
501
+ operation: "next",
502
+ className: (0, import_utils4.cx)("ui-carousel__control--next", className),
503
+ "aria-label": "Go to next slide",
504
+ icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
505
+ import_icon.ChevronIcon,
506
+ {
507
+ __css: {
508
+ fontSize: "1.5em",
509
+ transform: orientation === "vertical" ? "rotate(0deg)" : "rotate(-90deg)"
510
+ }
511
+ }
512
+ ),
513
+ ...getControlProps(rest, ref)
514
+ }
515
+ );
516
+ }
517
+ );
518
+ var CarouselControl = (0, import_core4.forwardRef)(({ className, operation, ...rest }, ref) => {
519
+ const { styles } = useCarouselContext();
520
+ const colorScheme = (0, import_core4.useColorModeValue)("whiteAlpha", "blackAlpha");
521
+ const css = {
522
+ position: "absolute",
523
+ zIndex: "fallback(kurillin, 9)",
524
+ ...styles.control,
525
+ ...styles[operation]
526
+ };
527
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
528
+ import_button.IconButton,
529
+ {
530
+ ref,
531
+ className: (0, import_utils4.cx)("ui-carousel__control", className),
532
+ colorScheme,
533
+ isRounded: true,
534
+ __css: css,
535
+ ...rest
536
+ }
537
+ );
538
+ });
539
+
540
+ // src/carousel-indicators.tsx
541
+ var import_core5 = require("@yamada-ui/core");
542
+ var import_utils5 = require("@yamada-ui/utils");
543
+ var import_react3 = require("react");
544
+ var import_jsx_runtime4 = require("react/jsx-runtime");
545
+ var CarouselIndicators = (0, import_core5.forwardRef)(
546
+ ({ className, component, ...rest }, ref) => {
547
+ const { selectedIndex, orientation, styles } = useCarouselContext();
548
+ const { indexes, getIndicatorProps } = useCarouselIndicators();
549
+ const css = {
550
+ position: "absolute",
551
+ zIndex: "fallback(kurillin, 9)",
552
+ display: "flex",
553
+ justifyContent: "center",
554
+ ...styles.indicators,
555
+ ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
556
+ };
557
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
558
+ import_core5.ui.div,
559
+ {
560
+ ref,
561
+ className: (0, import_utils5.cx)("ui-carousel__indicators", className),
562
+ __css: css,
563
+ ...rest,
564
+ children: indexes.map((index) => {
565
+ const isSelected = index === selectedIndex;
566
+ if (typeof component === "function") {
567
+ const child = component({
568
+ index,
569
+ isSelected
570
+ });
571
+ if (!child)
572
+ return null;
573
+ const props = getIndicatorProps({ ...child.props, index });
574
+ return (0, import_react3.cloneElement)(child, props);
575
+ } else {
576
+ const { key, ...props } = getIndicatorProps({ index });
577
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselIndicator, { ...props }, key);
578
+ }
579
+ })
580
+ }
581
+ );
582
+ }
583
+ );
584
+ var CarouselIndicator = ({
585
+ className,
586
+ ...rest
587
+ }) => {
588
+ const { styles } = useCarouselContext();
589
+ const css = { ...styles.indicator };
590
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
591
+ import_core5.ui.button,
592
+ {
593
+ type: "button",
594
+ tabIndex: -1,
595
+ className: (0, import_utils5.cx)("ui-carousel__indicators__indicator", className),
596
+ __css: css,
597
+ ...rest
598
+ }
599
+ );
600
+ };
601
+ // Annotate the CommonJS export names for ESM import in node:
602
+ 0 && (module.exports = {
603
+ Carousel,
604
+ CarouselControlNext,
605
+ CarouselControlPrev,
606
+ CarouselIndicators,
607
+ CarouselSlide
608
+ });
609
+ //# sourceMappingURL=index.js.map