@yamada-ui/carousel 3.0.0-next-20240825145710 → 3.0.0-next-20240921202825
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.d.mts +4 -3
- package/dist/carousel-control.d.ts +4 -3
- package/dist/carousel-control.js.map +1 -1
- package/dist/carousel-control.mjs +2 -2
- package/dist/carousel-indicators.d.mts +4 -3
- package/dist/carousel-indicators.d.ts +4 -3
- package/dist/carousel-indicators.js.map +1 -1
- package/dist/carousel-indicators.mjs +2 -2
- package/dist/carousel-slide.d.mts +4 -3
- package/dist/carousel-slide.d.ts +4 -3
- package/dist/carousel-slide.js.map +1 -1
- package/dist/carousel-slide.mjs +2 -2
- package/dist/carousel.d.mts +7 -6
- package/dist/carousel.d.ts +7 -6
- package/dist/carousel.js +81 -78
- package/dist/carousel.js.map +1 -1
- package/dist/carousel.mjs +5 -5
- package/dist/{chunk-KKGGV2LP.mjs → chunk-KDTZL7V5.mjs} +12 -10
- package/dist/chunk-KDTZL7V5.mjs.map +1 -0
- package/dist/{chunk-7JZQTAOC.mjs → chunk-OW2M7LIB.mjs} +2 -2
- package/dist/chunk-OW2M7LIB.mjs.map +1 -0
- package/dist/{chunk-N7FKTABA.mjs → chunk-PDUQUV53.mjs} +2 -2
- package/dist/chunk-PDUQUV53.mjs.map +1 -0
- package/dist/{chunk-QCRQ6FXC.mjs → chunk-X4MS32G3.mjs} +2 -2
- package/dist/chunk-X4MS32G3.mjs.map +1 -0
- package/dist/{chunk-27FJSIPV.mjs → chunk-YSHRYDOY.mjs} +6 -7
- package/dist/chunk-YSHRYDOY.mjs.map +1 -0
- package/dist/index.js +207 -204
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -5
- package/dist/use-carousel.d.mts +44 -19
- package/dist/use-carousel.d.ts +44 -19
- package/dist/use-carousel.js +5 -6
- package/dist/use-carousel.js.map +1 -1
- package/dist/use-carousel.mjs +1 -1
- package/package.json +10 -10
- package/dist/chunk-27FJSIPV.mjs.map +0 -1
- package/dist/chunk-7JZQTAOC.mjs.map +0 -1
- package/dist/chunk-KKGGV2LP.mjs.map +0 -1
- package/dist/chunk-N7FKTABA.mjs.map +0 -1
- package/dist/chunk-QCRQ6FXC.mjs.map +0 -1
package/dist/carousel.js
CHANGED
@@ -40,6 +40,12 @@ var import_use_value = require("@yamada-ui/use-value");
|
|
40
40
|
var import_utils5 = require("@yamada-ui/utils");
|
41
41
|
var import_react3 = require("react");
|
42
42
|
|
43
|
+
// src/carousel-control.tsx
|
44
|
+
var import_button = require("@yamada-ui/button");
|
45
|
+
var import_core2 = require("@yamada-ui/core");
|
46
|
+
var import_icon = require("@yamada-ui/icon");
|
47
|
+
var import_utils2 = require("@yamada-ui/utils");
|
48
|
+
|
43
49
|
// src/use-carousel.ts
|
44
50
|
var import_core = require("@yamada-ui/core");
|
45
51
|
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
@@ -61,7 +67,6 @@ var useCarousel = ({
|
|
61
67
|
loop = true,
|
62
68
|
duration = 25,
|
63
69
|
delay = 4e3,
|
64
|
-
gap = "fallback(4, 1rem)",
|
65
70
|
slidesToScroll = 1,
|
66
71
|
draggable = true,
|
67
72
|
dragFree = false,
|
@@ -78,7 +83,7 @@ var useCarousel = ({
|
|
78
83
|
children,
|
79
84
|
...rest
|
80
85
|
}) => {
|
81
|
-
const
|
86
|
+
const [{ gap = "fallback(4, 1rem)", ...containerProps }, slidesProps] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
|
82
87
|
const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
|
83
88
|
value: index,
|
84
89
|
defaultValue: defaultIndex,
|
@@ -183,7 +188,7 @@ var useCarousel = ({
|
|
183
188
|
}, [carousel, onScroll]);
|
184
189
|
const getContainerProps = (0, import_react.useCallback)(
|
185
190
|
(props = {}, ref = null) => ({
|
186
|
-
...
|
191
|
+
...containerProps,
|
187
192
|
...props,
|
188
193
|
ref,
|
189
194
|
onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
|
@@ -193,15 +198,15 @@ var useCarousel = ({
|
|
193
198
|
setIsMouseEnter(false);
|
194
199
|
})
|
195
200
|
}),
|
196
|
-
[
|
201
|
+
[containerProps]
|
197
202
|
);
|
198
203
|
const getSlidesProps = (0, import_react.useCallback)(
|
199
204
|
(props = {}) => ({
|
200
|
-
...
|
205
|
+
...slidesProps,
|
201
206
|
...props,
|
202
207
|
ref: carouselRef
|
203
208
|
}),
|
204
|
-
[
|
209
|
+
[slidesProps, carouselRef]
|
205
210
|
);
|
206
211
|
return {
|
207
212
|
carousel,
|
@@ -285,63 +290,19 @@ var useCarouselIndicators = () => {
|
|
285
290
|
return { indexes, getIndicatorProps };
|
286
291
|
};
|
287
292
|
|
288
|
-
// src/carousel-slide.tsx
|
289
|
-
var import_core2 = require("@yamada-ui/core");
|
290
|
-
var import_utils2 = require("@yamada-ui/utils");
|
291
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
292
|
-
var CarouselSlide = (0, import_core2.forwardRef)(
|
293
|
-
({ className, size, ...rest }, ref) => {
|
294
|
-
const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
|
295
|
-
const { getSlideProps } = useCarouselSlide(rest);
|
296
|
-
size != null ? size : size = slideSize;
|
297
|
-
const css = {
|
298
|
-
position: "relative",
|
299
|
-
flex: `0 0 ${size}`,
|
300
|
-
...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
|
301
|
-
};
|
302
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
303
|
-
import_core2.ui.div,
|
304
|
-
{
|
305
|
-
className: (0, import_utils2.cx)("ui-carousel__slide", className),
|
306
|
-
__css: css,
|
307
|
-
...getSlideProps({}),
|
308
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlideInner, { ref, ...rest })
|
309
|
-
}
|
310
|
-
);
|
311
|
-
}
|
312
|
-
);
|
313
|
-
var CarouselSlideInner = (0, import_core2.forwardRef)(
|
314
|
-
({ ...rest }, ref) => {
|
315
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
316
|
-
import_core2.ui.div,
|
317
|
-
{
|
318
|
-
ref,
|
319
|
-
className: "ui-carousel__slide-inner",
|
320
|
-
w: "100%",
|
321
|
-
h: "100%",
|
322
|
-
...rest
|
323
|
-
}
|
324
|
-
);
|
325
|
-
}
|
326
|
-
);
|
327
|
-
|
328
293
|
// src/carousel-control.tsx
|
329
|
-
var
|
330
|
-
var
|
331
|
-
var import_icon = require("@yamada-ui/icon");
|
332
|
-
var import_utils3 = require("@yamada-ui/utils");
|
333
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
334
|
-
var CarouselControlPrev = (0, import_core3.forwardRef)(
|
294
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
295
|
+
var CarouselControlPrev = (0, import_core2.forwardRef)(
|
335
296
|
({ className, ...rest }, ref) => {
|
336
297
|
const { orientation } = useCarouselContext();
|
337
298
|
const { getControlProps } = useCarouselControl({ operation: "prev" });
|
338
|
-
return /* @__PURE__ */ (0,
|
299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
339
300
|
CarouselControl,
|
340
301
|
{
|
341
302
|
operation: "prev",
|
342
|
-
className: (0,
|
303
|
+
className: (0, import_utils2.cx)("ui-carousel__control--prev", className),
|
343
304
|
"aria-label": "Go to previous slide",
|
344
|
-
icon: /* @__PURE__ */ (0,
|
305
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
345
306
|
import_icon.ChevronIcon,
|
346
307
|
{
|
347
308
|
__css: {
|
@@ -355,17 +316,17 @@ var CarouselControlPrev = (0, import_core3.forwardRef)(
|
|
355
316
|
);
|
356
317
|
}
|
357
318
|
);
|
358
|
-
var CarouselControlNext = (0,
|
319
|
+
var CarouselControlNext = (0, import_core2.forwardRef)(
|
359
320
|
({ className, ...rest }, ref) => {
|
360
321
|
const { orientation } = useCarouselContext();
|
361
322
|
const { getControlProps } = useCarouselControl({ operation: "next" });
|
362
|
-
return /* @__PURE__ */ (0,
|
323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
363
324
|
CarouselControl,
|
364
325
|
{
|
365
326
|
operation: "next",
|
366
|
-
className: (0,
|
327
|
+
className: (0, import_utils2.cx)("ui-carousel__control--next", className),
|
367
328
|
"aria-label": "Go to next slide",
|
368
|
-
icon: /* @__PURE__ */ (0,
|
329
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
369
330
|
import_icon.ChevronIcon,
|
370
331
|
{
|
371
332
|
__css: {
|
@@ -379,18 +340,18 @@ var CarouselControlNext = (0, import_core3.forwardRef)(
|
|
379
340
|
);
|
380
341
|
}
|
381
342
|
);
|
382
|
-
var CarouselControl = (0,
|
343
|
+
var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...rest }, ref) => {
|
383
344
|
const { styles } = useCarouselContext();
|
384
|
-
const colorScheme = (0,
|
345
|
+
const colorScheme = (0, import_core2.useColorModeValue)("whiteAlpha", "blackAlpha");
|
385
346
|
const css = {
|
386
347
|
...styles.control,
|
387
348
|
...styles[operation]
|
388
349
|
};
|
389
|
-
return /* @__PURE__ */ (0,
|
350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
390
351
|
import_button.IconButton,
|
391
352
|
{
|
392
353
|
ref,
|
393
|
-
className: (0,
|
354
|
+
className: (0, import_utils2.cx)("ui-carousel__control", className),
|
394
355
|
colorScheme,
|
395
356
|
isRounded: true,
|
396
357
|
__css: css,
|
@@ -400,11 +361,11 @@ var CarouselControl = (0, import_core3.forwardRef)(({ className, operation, ...r
|
|
400
361
|
});
|
401
362
|
|
402
363
|
// src/carousel-indicators.tsx
|
403
|
-
var
|
404
|
-
var
|
364
|
+
var import_core3 = require("@yamada-ui/core");
|
365
|
+
var import_utils3 = require("@yamada-ui/utils");
|
405
366
|
var import_react2 = require("react");
|
406
|
-
var
|
407
|
-
var CarouselIndicators = (0,
|
367
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
368
|
+
var CarouselIndicators = (0, import_core3.forwardRef)(
|
408
369
|
({ className, component, ...rest }, ref) => {
|
409
370
|
const { selectedIndex, orientation, styles } = useCarouselContext();
|
410
371
|
const { indexes, getIndicatorProps } = useCarouselIndicators();
|
@@ -412,11 +373,11 @@ var CarouselIndicators = (0, import_core4.forwardRef)(
|
|
412
373
|
...styles.indicators,
|
413
374
|
...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
|
414
375
|
};
|
415
|
-
return /* @__PURE__ */ (0,
|
416
|
-
|
376
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
377
|
+
import_core3.ui.div,
|
417
378
|
{
|
418
379
|
ref,
|
419
|
-
className: (0,
|
380
|
+
className: (0, import_utils3.cx)("ui-carousel__indicators", className),
|
420
381
|
__css: css,
|
421
382
|
...rest,
|
422
383
|
children: indexes.map((index) => {
|
@@ -431,7 +392,7 @@ var CarouselIndicators = (0, import_core4.forwardRef)(
|
|
431
392
|
return (0, import_react2.cloneElement)(child, props);
|
432
393
|
} else {
|
433
394
|
const { key, ...props } = getIndicatorProps({ index });
|
434
|
-
return /* @__PURE__ */ (0,
|
395
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CarouselIndicator, { ...props }, key);
|
435
396
|
}
|
436
397
|
})
|
437
398
|
}
|
@@ -444,18 +405,58 @@ var CarouselIndicator = ({
|
|
444
405
|
}) => {
|
445
406
|
const { styles } = useCarouselContext();
|
446
407
|
const css = { ...styles.indicator };
|
447
|
-
return /* @__PURE__ */ (0,
|
448
|
-
|
408
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
409
|
+
import_core3.ui.button,
|
449
410
|
{
|
450
411
|
type: "button",
|
451
412
|
tabIndex: -1,
|
452
|
-
className: (0,
|
413
|
+
className: (0, import_utils3.cx)("ui-carousel__indicator", className),
|
453
414
|
__css: css,
|
454
415
|
...rest
|
455
416
|
}
|
456
417
|
);
|
457
418
|
};
|
458
419
|
|
420
|
+
// src/carousel-slide.tsx
|
421
|
+
var import_core4 = require("@yamada-ui/core");
|
422
|
+
var import_utils4 = require("@yamada-ui/utils");
|
423
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
424
|
+
var CarouselSlide = (0, import_core4.forwardRef)(
|
425
|
+
({ className, size, ...rest }, ref) => {
|
426
|
+
const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
|
427
|
+
const { getSlideProps } = useCarouselSlide(rest);
|
428
|
+
size != null ? size : size = slideSize;
|
429
|
+
const css = {
|
430
|
+
position: "relative",
|
431
|
+
flex: `0 0 ${size}`,
|
432
|
+
...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
|
433
|
+
};
|
434
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
435
|
+
import_core4.ui.div,
|
436
|
+
{
|
437
|
+
className: (0, import_utils4.cx)("ui-carousel__slide", className),
|
438
|
+
__css: css,
|
439
|
+
...getSlideProps({}),
|
440
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CarouselSlideInner, { ref, ...rest })
|
441
|
+
}
|
442
|
+
);
|
443
|
+
}
|
444
|
+
);
|
445
|
+
var CarouselSlideInner = (0, import_core4.forwardRef)(
|
446
|
+
({ ...rest }, ref) => {
|
447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
448
|
+
import_core4.ui.div,
|
449
|
+
{
|
450
|
+
ref,
|
451
|
+
className: "ui-carousel__slide-inner",
|
452
|
+
w: "100%",
|
453
|
+
h: "100%",
|
454
|
+
...rest
|
455
|
+
}
|
456
|
+
);
|
457
|
+
}
|
458
|
+
);
|
459
|
+
|
459
460
|
// src/carousel.tsx
|
460
461
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
461
462
|
var Carousel = (0, import_core5.forwardRef)(
|
@@ -475,9 +476,11 @@ var Carousel = (0, import_core5.forwardRef)(
|
|
475
476
|
const skipSnaps = (0, import_use_value.useValue)(props.skipSnaps);
|
476
477
|
const containScroll = (0, import_use_value.useValue)(props.containScroll);
|
477
478
|
const includeGapInSize = (0, import_use_value.useValue)(props.includeGapInSize);
|
478
|
-
const
|
479
|
-
const
|
480
|
-
const
|
479
|
+
const _gap = (0, import_use_value.useValue)(props.gap);
|
480
|
+
const gap = (_a = (0, import_use_token.useToken)("spaces", _gap)) != null ? _a : _gap;
|
481
|
+
const _slideSize = (0, import_use_value.useValue)(props.slideSize);
|
482
|
+
const slideSize = (_b = (0, import_use_token.useToken)("sizes", _slideSize)) != null ? _b : _slideSize;
|
483
|
+
const [styles, mergedProps] = (0, import_core5.useComponentMultiStyle)("Carousel", {
|
481
484
|
...props,
|
482
485
|
orientation,
|
483
486
|
align,
|
@@ -578,7 +581,7 @@ var CarouselSlidesInner = ({ ...rest }) => {
|
|
578
581
|
flexDirection: orientation === "vertical" ? "column" : "row",
|
579
582
|
...styles.inner,
|
580
583
|
...includeGapInSize ? {
|
581
|
-
|
584
|
+
vars: [{ name: "gap", token: "spaces", value: gap }],
|
582
585
|
[orientation === "vertical" ? "mb" : "mr"]: "calc($gap * -1)"
|
583
586
|
} : {}
|
584
587
|
};
|
package/dist/carousel.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/carousel.tsx","../src/use-carousel.ts","../src/carousel-slide.tsx","../src/carousel-control.tsx","../src/carousel-indicators.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n Token,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useToken } from \"@yamada-ui/use-token\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n filterUndefined,\n findChildren,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { cloneElement } from \"react\"\nimport type {\n AlignmentOptionType,\n ScrollContainOptionType,\n SlidesInViewOptionsType,\n UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\nimport type { CarouselControlProps, CarouselIndicatorsProps } from \"./\"\nimport {\n CarouselControlNext,\n CarouselControlPrev,\n CarouselIndicators,\n CarouselSlide,\n} from \"./\"\n\ntype CarouselOptions = {\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Token<\"vertical\" | \"horizontal\">\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: Token<AlignmentOptionType>\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 of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: 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 * 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 * 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 * 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 * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: Token<number>\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: Token<boolean>\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`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: Token<boolean>\n /**\n * The CSS `width` property.\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * Props for carousel inner element.\n */\n innerProps?: HTMLUIProps<\"div\">\n /**\n * If `true`, display the carousel control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * Props for carousel control element.\n */\n controlProps?: CarouselControlProps\n /**\n * Props for previous of the carousel control element.\n */\n controlPrevProps?: CarouselControlProps\n /**\n * Props for next of the carousel control element.\n */\n controlNextProps?: CarouselControlProps\n /**\n * If `true`, display the carousel indicator buttons.\n *\n * @default true\n */\n withIndicators?: Token<boolean>\n /**\n * Props for carousel indicators element.\n */\n indicatorsProps?: CarouselIndicatorsProps\n}\n\nexport type CarouselProps = ThemeProps<\"Carousel\"> &\n Omit<HTMLUIProps<\"div\">, \"onChange\" | \"draggable\"> &\n Pick<\n UseCarouselProps,\n | \"index\"\n | \"defaultIndex\"\n | \"onChange\"\n | \"onScrollProgress\"\n | \"watchDrag\"\n | \"watchResize\"\n | \"watchSlides\"\n | \"controlRef\"\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 const gap = useToken(\"spaces\", useValue(props.gap)) ?? useValue(props.gap)\n const slideSize =\n useToken(\"sizes\", useValue(props.slideSize)) ?? useValue(props.slideSize)\n\n const [styles, mergedProps] = useMultiComponentStyle(\"Carousel\", {\n ...props,\n orientation,\n align,\n autoplay,\n stopMouseEnterAutoplay,\n loop,\n duration,\n delay,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n includeGapInSize,\n gap,\n slideSize,\n })\n const {\n className,\n innerProps,\n withControls = true,\n controlProps,\n controlPrevProps,\n controlNextProps,\n withIndicators = true,\n indicatorsProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const computedWithControls = useValue(withControls)\n const computedWithIndicators = useValue(withIndicators)\n\n const { getContainerProps, getSlidesProps, children, ...rest } =\n useCarousel({\n ...computedProps,\n })\n\n const validChildren = getValidChildren(children)\n\n const [customCarouselControlPrev] = findChildren(\n validChildren,\n CarouselControlPrev,\n )\n const [customCarouselControlNext] = findChildren(\n validChildren,\n CarouselControlNext,\n )\n const [customCarouselIndicators] = findChildren(\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 h ??= height\n minH ??= minHeight\n\n return (\n <CarouselProvider value={{ styles, ...rest }}>\n <ui.div\n className={cx(\"ui-carousel\", className)}\n __css={{\n ...styles.container,\n }}\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\ntype CarouselSlidesProps = HTMLUIProps<\"div\">\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n ({ ...rest }, ref) => {\n const css: CSSUIObject = { w: \"100%\", h: \"fit-content\", overflow: \"hidden\" }\n\n return (\n <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n <CarouselSlidesInner {...rest} />\n </ui.div>\n )\n },\n)\n\ntype CarouselSlidesInnerProps = HTMLUIProps<\"div\">\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n const { orientation, includeGapInSize, gap, styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n ...styles.inner,\n ...(includeGapInSize\n ? {\n var: [{ name: \"gap\", token: \"spaces\", value: gap }],\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n }\n : {}),\n }\n\n return <ui.div className=\"ui-carousel__sliders-inner\" __css={css} {...rest} />\n}\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n CSSUIObject,\n HTMLUIProps,\n CSSUIProps,\n UIPropGetter,\n RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } 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 type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent, RefObject } from \"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\ntype CarouselContext = {\n carousel: CarouselControl | undefined\n indexes: number[]\n selectedIndex: number\n orientation: \"vertical\" | \"horizontal\"\n includeGapInSize: boolean\n slidesToScroll: number\n slideSize: string | number\n gap: CSSUIProps[\"gap\"]\n styles: Record<string, CSSUIObject>\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 type UseCarouselProps = Omit<\n HTMLUIProps<\"div\">,\n \"onChange\" | \"draggable\" | \"gap\"\n> & {\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: AlignmentOptionType\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 * 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`, 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 * 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 * 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 * 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 number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\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 CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: string | number\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\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 * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | undefined>\n}\n\nexport const useCarousel = ({\n index,\n defaultIndex = 0,\n onChange,\n align = \"center\",\n orientation = \"horizontal\",\n autoplay = false,\n stopMouseEnterAutoplay = true,\n loop = true,\n duration = 25,\n delay = 4000,\n gap = \"fallback(4, 1rem)\",\n slidesToScroll = 1,\n draggable = true,\n dragFree = false,\n inViewThreshold = 0,\n skipSnaps = false,\n containScroll = false,\n slideSize = \"100%\",\n includeGapInSize = true,\n onScrollProgress,\n watchDrag = draggable,\n watchResize,\n watchSlides,\n controlRef,\n children,\n ...rest\n}: UseCarouselProps) => {\n const computedProps = splitObject(rest, layoutStyleProperties)\n\n const [selectedIndex, setSelectedIndex] = useControllableState({\n value: index,\n defaultValue: defaultIndex,\n onChange,\n })\n\n const isVertical = orientation === \"vertical\"\n\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n axis: isVertical ? \"y\" : \"x\",\n startIndex: defaultIndex,\n loop,\n align,\n slidesToScroll,\n duration,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\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 const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...computedProps[0],\n ...props,\n ref,\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [computedProps],\n )\n\n const getSlidesProps: UIPropGetter = useCallback(\n (props = {}) => ({\n ...computedProps[1],\n ...props,\n ref: carouselRef,\n }),\n [computedProps, carouselRef],\n )\n\n return {\n carousel,\n children,\n indexes,\n selectedIndex,\n orientation,\n slideSize,\n gap,\n slidesToScroll,\n includeGapInSize,\n getContainerProps,\n getSlidesProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport type UseCarouselSlideProps = {\n index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n const isSelected = index === selectedIndex\n\n const getSlideProps: UIPropGetter = 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 type UseCarouselControlProps = IconButtonProps & {\n operation: \"prev\" | \"next\"\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: UIPropGetter<\"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 { selectedIndex, carousel, indexes } = 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: RequiredUIPropGetter<\"button\", { index: number }> =\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 { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\nimport { useCarouselContext, useCarouselSlide } from \"./use-carousel\"\n\ntype CarouselSlideOptions = {\n /**\n * The CSS `width` property.\n */\n size?: CSSUIObject[\"width\"]\n}\n\nexport type CarouselSlideProps = HTMLUIProps<\"div\"> &\n UseCarouselSlideProps &\n CarouselSlideOptions\n\nexport const CarouselSlide = forwardRef<CarouselSlideProps, \"div\">(\n ({ className, size, ...rest }, ref) => {\n const { slideSize, includeGapInSize, orientation, gap } =\n useCarouselContext()\n\n const { getSlideProps } = useCarouselSlide(rest)\n\n size ??= slideSize\n\n const css: CSSUIObject = {\n position: \"relative\",\n flex: `0 0 ${size}`,\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\ntype CarouselSlideInnerProps = HTMLUIProps<\"div\">\n\nconst CarouselSlideInner = forwardRef<CarouselSlideInnerProps, \"div\">(\n ({ ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className=\"ui-carousel__slide-inner\"\n w=\"100%\"\n h=\"100%\"\n {...rest}\n />\n )\n },\n)\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef, useColorModeValue } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselControl } from \"./use-carousel\"\n\nexport type CarouselControlProps = IconButtonProps\n\nexport const CarouselControlPrev = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n const { getControlProps } = useCarouselControl({ operation: \"prev\" })\n\n return (\n <CarouselControl\n operation=\"prev\"\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 {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n const { getControlProps } = useCarouselControl({ operation: \"next\" })\n\n return (\n <CarouselControl\n operation=\"next\"\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 {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nconst CarouselControl = forwardRef<\n CarouselControlProps & { operation: \"prev\" | \"next\" },\n \"button\"\n>(({ className, operation, ...rest }, ref) => {\n const { styles } = useCarouselContext()\n const colorScheme = useColorModeValue(\"whiteAlpha\", \"blackAlpha\")\n\n const css: CSSUIObject = {\n ...styles.control,\n ...styles[operation],\n }\n\n return (\n <IconButton\n ref={ref}\n className={cx(\"ui-carousel__control\", className)}\n colorScheme={colorScheme}\n isRounded\n __css={css}\n {...rest}\n />\n )\n})\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\nimport { cloneElement } from \"react\"\nimport { useCarouselContext, useCarouselIndicators } from \"./use-carousel\"\n\ntype CarouselIndicatorsOptions = {\n /**\n * The custom carousel indicator to use.\n */\n component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport type CarouselIndicatorsProps = Omit<HTMLUIProps<\"div\">, \"children\"> &\n CarouselIndicatorsOptions\n\nexport const CarouselIndicators = forwardRef<CarouselIndicatorsProps, \"div\">(\n ({ className, component, ...rest }, ref) => {\n const { selectedIndex, orientation, styles } = useCarouselContext()\n\n const { indexes, getIndicatorProps } = useCarouselIndicators()\n\n const css: CSSUIObject = {\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 ReactElement | null\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\ntype CarouselIndicatorProps = 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 tabIndex={-1}\n className={cx(\"ui-carousel__indicator\", className)}\n __css={css}\n {...rest}\n />\n )\n}\n"],"mappings":"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","names":["import_core","import_utils","import_react","useEmblaCarousel","index","indexes","import_core","import_utils","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_react","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 HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n Token,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useToken } from \"@yamada-ui/use-token\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n filterUndefined,\n findChildren,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { cloneElement } from \"react\"\nimport type { CarouselControlProps } from \"./carousel-control\"\nimport { CarouselControlNext, CarouselControlPrev } from \"./carousel-control\"\nimport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\nimport { CarouselIndicators } from \"./carousel-indicators\"\nimport { CarouselSlide } from \"./carousel-slide\"\nimport type {\n AlignmentOptionType,\n ScrollContainOptionType,\n SlidesInViewOptionsType,\n UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\n\ninterface CarouselOptions {\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Token<\"vertical\" | \"horizontal\">\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: Token<AlignmentOptionType>\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 of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: 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 * 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 * 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 * 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 * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: Token<number>\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: Token<boolean>\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`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: Token<boolean>\n /**\n * The CSS `width` property.\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * Props for carousel inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * If `true`, display the carousel control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * Props for carousel control element.\n */\n controlProps?: CarouselControlProps\n /**\n * Props for previous of the carousel control element.\n */\n controlPrevProps?: CarouselControlProps\n /**\n * Props for next of the carousel control element.\n */\n controlNextProps?: CarouselControlProps\n /**\n * If `true`, display the carousel indicator buttons.\n *\n * @default true\n */\n withIndicators?: Token<boolean>\n /**\n * Props for carousel indicators element.\n */\n indicatorsProps?: CarouselIndicatorsProps\n}\n\nexport interface CarouselProps\n extends ThemeProps<\"Carousel\">,\n Omit<HTMLUIProps, \"onChange\" | \"draggable\">,\n Pick<\n UseCarouselProps,\n | \"index\"\n | \"defaultIndex\"\n | \"onChange\"\n | \"onScrollProgress\"\n | \"watchDrag\"\n | \"watchResize\"\n | \"watchSlides\"\n | \"controlRef\"\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 const _gap = useValue(props.gap)\n const gap = useToken(\"spaces\", _gap) ?? _gap\n const _slideSize = useValue(props.slideSize)\n const slideSize = useToken(\"sizes\", _slideSize) ?? _slideSize\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Carousel\", {\n ...props,\n orientation,\n align,\n autoplay,\n stopMouseEnterAutoplay,\n loop,\n duration,\n delay,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n includeGapInSize,\n gap,\n slideSize,\n })\n const {\n className,\n innerProps,\n withControls = true,\n controlProps,\n controlPrevProps,\n controlNextProps,\n withIndicators = true,\n indicatorsProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const computedWithControls = useValue(withControls)\n const computedWithIndicators = useValue(withIndicators)\n\n const { getContainerProps, getSlidesProps, children, ...rest } =\n useCarousel({\n ...computedProps,\n })\n\n const validChildren = getValidChildren(children)\n\n const [customCarouselControlPrev] = findChildren(\n validChildren,\n CarouselControlPrev,\n )\n const [customCarouselControlNext] = findChildren(\n validChildren,\n CarouselControlNext,\n )\n const [customCarouselIndicators] = findChildren(\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 h ??= height\n minH ??= minHeight\n\n return (\n <CarouselProvider value={{ styles, ...rest }}>\n <ui.div\n className={cx(\"ui-carousel\", className)}\n __css={{\n ...styles.container,\n }}\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\ntype CarouselSlidesProps = HTMLUIProps\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n ({ ...rest }, ref) => {\n const css: CSSUIObject = { w: \"100%\", h: \"fit-content\", overflow: \"hidden\" }\n\n return (\n <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n <CarouselSlidesInner {...rest} />\n </ui.div>\n )\n },\n)\n\ntype CarouselSlidesInnerProps = HTMLUIProps\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n const { orientation, includeGapInSize, gap, styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n ...styles.inner,\n ...(includeGapInSize\n ? {\n vars: [{ name: \"gap\", token: \"spaces\", value: gap }],\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n }\n : {}),\n }\n\n return <ui.div className=\"ui-carousel__sliders-inner\" __css={css} {...rest} />\n}\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef, useColorModeValue } 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 const { getControlProps } = useCarouselControl({ operation: \"prev\" })\n\n return (\n <CarouselControl\n operation=\"prev\"\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 {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n const { getControlProps } = useCarouselControl({ operation: \"next\" })\n\n return (\n <CarouselControl\n operation=\"next\"\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 {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nconst CarouselControl = forwardRef<\n CarouselControlProps & { operation: \"prev\" | \"next\" },\n \"button\"\n>(({ className, operation, ...rest }, ref) => {\n const { styles } = useCarouselContext()\n const colorScheme = useColorModeValue(\"whiteAlpha\", \"blackAlpha\")\n\n const css: CSSUIObject = {\n ...styles.control,\n ...styles[operation],\n }\n\n return (\n <IconButton\n ref={ref}\n className={cx(\"ui-carousel__control\", className)}\n colorScheme={colorScheme}\n isRounded\n __css={css}\n {...rest}\n />\n )\n})\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n CSSUIObject,\n HTMLUIProps,\n CSSUIProps,\n PropGetter,\n RequiredPropGetter,\n HTMLProps,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } 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 type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent, RefObject } from \"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 indexes: number[]\n selectedIndex: number\n orientation: \"vertical\" | \"horizontal\"\n includeGapInSize: boolean\n slidesToScroll: number\n slideSize: string | number\n gap: CSSUIProps[\"gap\"]\n styles: { [key: string]: CSSUIObject }\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, \"onChange\" | \"draggable\" | \"gap\"> {\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: AlignmentOptionType\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 * 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`, 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 * 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 * 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 * 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 number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\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 CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: string | number\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\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 * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | undefined>\n}\n\nexport const useCarousel = ({\n index,\n defaultIndex = 0,\n onChange,\n align = \"center\",\n orientation = \"horizontal\",\n autoplay = false,\n stopMouseEnterAutoplay = true,\n loop = true,\n duration = 25,\n delay = 4000,\n slidesToScroll = 1,\n draggable = true,\n dragFree = false,\n inViewThreshold = 0,\n skipSnaps = false,\n containScroll = false,\n slideSize = \"100%\",\n includeGapInSize = true,\n onScrollProgress,\n watchDrag = draggable,\n watchResize,\n watchSlides,\n controlRef,\n children,\n ...rest\n}: UseCarouselProps) => {\n const [{ gap = \"fallback(4, 1rem)\", ...containerProps }, slidesProps] =\n splitObject(rest, layoutStyleProperties)\n\n const [selectedIndex, setSelectedIndex] = useControllableState({\n value: index,\n defaultValue: defaultIndex,\n onChange,\n })\n\n const isVertical = orientation === \"vertical\"\n\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n axis: isVertical ? \"y\" : \"x\",\n startIndex: defaultIndex,\n loop,\n align,\n slidesToScroll,\n duration,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\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 const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...containerProps,\n ...props,\n ref,\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [containerProps],\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 indexes,\n selectedIndex,\n orientation,\n slideSize,\n gap,\n slidesToScroll,\n includeGapInSize,\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 ?? 1))\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: \"prev\" | \"next\"\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 { selectedIndex, carousel, indexes } = 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 HTMLProps<\"button\"> & { index: number },\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 { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\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 { selectedIndex, orientation, styles } = useCarouselContext()\n\n const { indexes, getIndicatorProps } = useCarouselIndicators()\n\n const css: CSSUIObject = {\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 ReactElement | null\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\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 tabIndex={-1}\n className={cx(\"ui-carousel__indicator\", className)}\n __css={css}\n {...rest}\n />\n )\n}\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\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 { slideSize, includeGapInSize, orientation, gap } =\n useCarouselContext()\n\n const { getSlideProps } = useCarouselSlide(rest)\n\n size ??= slideSize\n\n const css: CSSUIObject = {\n position: \"relative\",\n flex: `0 0 ${size}`,\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\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 w=\"100%\"\n h=\"100%\"\n {...rest}\n />\n )\n },\n)\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-KDTZL7V5.mjs";
|
5
|
+
import "./chunk-X4MS32G3.mjs";
|
6
|
+
import "./chunk-OW2M7LIB.mjs";
|
7
|
+
import "./chunk-PDUQUV53.mjs";
|
8
|
+
import "./chunk-YSHRYDOY.mjs";
|
9
9
|
export {
|
10
10
|
Carousel
|
11
11
|
};
|
@@ -2,24 +2,24 @@
|
|
2
2
|
import {
|
3
3
|
CarouselControlNext,
|
4
4
|
CarouselControlPrev
|
5
|
-
} from "./chunk-
|
5
|
+
} from "./chunk-X4MS32G3.mjs";
|
6
6
|
import {
|
7
7
|
CarouselIndicators
|
8
|
-
} from "./chunk-
|
8
|
+
} from "./chunk-OW2M7LIB.mjs";
|
9
9
|
import {
|
10
10
|
CarouselSlide
|
11
|
-
} from "./chunk-
|
11
|
+
} from "./chunk-PDUQUV53.mjs";
|
12
12
|
import {
|
13
13
|
CarouselProvider,
|
14
14
|
useCarousel,
|
15
15
|
useCarouselContext
|
16
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-YSHRYDOY.mjs";
|
17
17
|
|
18
18
|
// src/carousel.tsx
|
19
19
|
import {
|
20
20
|
ui,
|
21
21
|
forwardRef,
|
22
|
-
|
22
|
+
useComponentMultiStyle,
|
23
23
|
omitThemeProps
|
24
24
|
} from "@yamada-ui/core";
|
25
25
|
import { useToken } from "@yamada-ui/use-token";
|
@@ -51,9 +51,11 @@ var Carousel = forwardRef(
|
|
51
51
|
const skipSnaps = useValue(props.skipSnaps);
|
52
52
|
const containScroll = useValue(props.containScroll);
|
53
53
|
const includeGapInSize = useValue(props.includeGapInSize);
|
54
|
-
const
|
55
|
-
const
|
56
|
-
const
|
54
|
+
const _gap = useValue(props.gap);
|
55
|
+
const gap = (_a = useToken("spaces", _gap)) != null ? _a : _gap;
|
56
|
+
const _slideSize = useValue(props.slideSize);
|
57
|
+
const slideSize = (_b = useToken("sizes", _slideSize)) != null ? _b : _slideSize;
|
58
|
+
const [styles, mergedProps] = useComponentMultiStyle("Carousel", {
|
57
59
|
...props,
|
58
60
|
orientation,
|
59
61
|
align,
|
@@ -154,7 +156,7 @@ var CarouselSlidesInner = ({ ...rest }) => {
|
|
154
156
|
flexDirection: orientation === "vertical" ? "column" : "row",
|
155
157
|
...styles.inner,
|
156
158
|
...includeGapInSize ? {
|
157
|
-
|
159
|
+
vars: [{ name: "gap", token: "spaces", value: gap }],
|
158
160
|
[orientation === "vertical" ? "mb" : "mr"]: "calc($gap * -1)"
|
159
161
|
} : {}
|
160
162
|
};
|
@@ -164,4 +166,4 @@ var CarouselSlidesInner = ({ ...rest }) => {
|
|
164
166
|
export {
|
165
167
|
Carousel
|
166
168
|
};
|
167
|
-
//# sourceMappingURL=chunk-
|
169
|
+
//# sourceMappingURL=chunk-KDTZL7V5.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/carousel.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n Token,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useToken } from \"@yamada-ui/use-token\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n filterUndefined,\n findChildren,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { cloneElement } from \"react\"\nimport type { CarouselControlProps } from \"./carousel-control\"\nimport { CarouselControlNext, CarouselControlPrev } from \"./carousel-control\"\nimport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\nimport { CarouselIndicators } from \"./carousel-indicators\"\nimport { CarouselSlide } from \"./carousel-slide\"\nimport type {\n AlignmentOptionType,\n ScrollContainOptionType,\n SlidesInViewOptionsType,\n UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\n\ninterface CarouselOptions {\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Token<\"vertical\" | \"horizontal\">\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: Token<AlignmentOptionType>\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 of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: 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 * 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 * 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 * 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 * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: Token<number>\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: Token<boolean>\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`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: Token<boolean>\n /**\n * The CSS `width` property.\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * Props for carousel inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * If `true`, display the carousel control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * Props for carousel control element.\n */\n controlProps?: CarouselControlProps\n /**\n * Props for previous of the carousel control element.\n */\n controlPrevProps?: CarouselControlProps\n /**\n * Props for next of the carousel control element.\n */\n controlNextProps?: CarouselControlProps\n /**\n * If `true`, display the carousel indicator buttons.\n *\n * @default true\n */\n withIndicators?: Token<boolean>\n /**\n * Props for carousel indicators element.\n */\n indicatorsProps?: CarouselIndicatorsProps\n}\n\nexport interface CarouselProps\n extends ThemeProps<\"Carousel\">,\n Omit<HTMLUIProps, \"onChange\" | \"draggable\">,\n Pick<\n UseCarouselProps,\n | \"index\"\n | \"defaultIndex\"\n | \"onChange\"\n | \"onScrollProgress\"\n | \"watchDrag\"\n | \"watchResize\"\n | \"watchSlides\"\n | \"controlRef\"\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 const _gap = useValue(props.gap)\n const gap = useToken(\"spaces\", _gap) ?? _gap\n const _slideSize = useValue(props.slideSize)\n const slideSize = useToken(\"sizes\", _slideSize) ?? _slideSize\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Carousel\", {\n ...props,\n orientation,\n align,\n autoplay,\n stopMouseEnterAutoplay,\n loop,\n duration,\n delay,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n includeGapInSize,\n gap,\n slideSize,\n })\n const {\n className,\n innerProps,\n withControls = true,\n controlProps,\n controlPrevProps,\n controlNextProps,\n withIndicators = true,\n indicatorsProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const computedWithControls = useValue(withControls)\n const computedWithIndicators = useValue(withIndicators)\n\n const { getContainerProps, getSlidesProps, children, ...rest } =\n useCarousel({\n ...computedProps,\n })\n\n const validChildren = getValidChildren(children)\n\n const [customCarouselControlPrev] = findChildren(\n validChildren,\n CarouselControlPrev,\n )\n const [customCarouselControlNext] = findChildren(\n validChildren,\n CarouselControlNext,\n )\n const [customCarouselIndicators] = findChildren(\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 h ??= height\n minH ??= minHeight\n\n return (\n <CarouselProvider value={{ styles, ...rest }}>\n <ui.div\n className={cx(\"ui-carousel\", className)}\n __css={{\n ...styles.container,\n }}\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\ntype CarouselSlidesProps = HTMLUIProps\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n ({ ...rest }, ref) => {\n const css: CSSUIObject = { w: \"100%\", h: \"fit-content\", overflow: \"hidden\" }\n\n return (\n <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n <CarouselSlidesInner {...rest} />\n </ui.div>\n )\n },\n)\n\ntype CarouselSlidesInnerProps = HTMLUIProps\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n const { orientation, includeGapInSize, gap, styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n ...styles.inner,\n ...(includeGapInSize\n ? {\n vars: [{ name: \"gap\", token: \"spaces\", value: gap }],\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n }\n : {}),\n }\n\n return <ui.div className=\"ui-carousel__sliders-inner\" __css={css} {...rest} />\n}\n"],"mappings":"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","names":[]}
|
@@ -2,7 +2,7 @@
|
|
2
2
|
import {
|
3
3
|
useCarouselContext,
|
4
4
|
useCarouselIndicators
|
5
|
-
} from "./chunk-
|
5
|
+
} from "./chunk-YSHRYDOY.mjs";
|
6
6
|
|
7
7
|
// src/carousel-indicators.tsx
|
8
8
|
import { ui, forwardRef } from "@yamada-ui/core";
|
@@ -64,4 +64,4 @@ var CarouselIndicator = ({
|
|
64
64
|
export {
|
65
65
|
CarouselIndicators
|
66
66
|
};
|
67
|
-
//# sourceMappingURL=chunk-
|
67
|
+
//# sourceMappingURL=chunk-OW2M7LIB.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/carousel-indicators.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\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 { selectedIndex, orientation, styles } = useCarouselContext()\n\n const { indexes, getIndicatorProps } = useCarouselIndicators()\n\n const css: CSSUIObject = {\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 ReactElement | null\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\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 tabIndex={-1}\n className={cx(\"ui-carousel__indicator\", className)}\n __css={css}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAEnB,SAAS,oBAAoB;AAmDV;AArCZ,IAAM,qBAAqB;AAAA,EAChC,CAAC,EAAE,WAAW,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1C,UAAM,EAAE,eAAe,aAAa,OAAO,IAAI,mBAAmB;AAElE,UAAM,EAAE,SAAS,kBAAkB,IAAI,sBAAsB;AAE7D,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,MACV,GAAI,gBAAgB,aAChB,EAAE,eAAe,SAAS,IAC1B,EAAE,eAAe,MAAM;AAAA,IAC7B;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,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,mBAAO,aAAa,OAAuB,KAAK;AAAA,UAClD,OAAO;AACL,kBAAM,EAAE,KAAK,GAAG,MAAM,IAAI,kBAAkB,EAAE,MAAM,CAAC;AAErD,mBAAO,oBAAC,qBAA6B,GAAG,SAAT,GAAgB;AAAA,UACjD;AAAA,QACF,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAIA,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,GAAG;AAAA,IAAH;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,GAAG,0BAA0B,SAAS;AAAA,MACjD,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|