@yamada-ui/carousel 2.0.7-next-20241005220055 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/carousel-control.js +2 -2
- package/dist/carousel-control.js.map +1 -1
- package/dist/carousel-control.mjs +2 -2
- package/dist/carousel-indicators.js +5 -5
- package/dist/carousel-indicators.js.map +1 -1
- package/dist/carousel-indicators.mjs +2 -2
- package/dist/carousel-slide.js +6 -7
- package/dist/carousel-slide.js.map +1 -1
- package/dist/carousel-slide.mjs +2 -2
- package/dist/carousel.d.mts +47 -47
- package/dist/carousel.d.ts +47 -47
- package/dist/carousel.js +71 -70
- package/dist/carousel.js.map +1 -1
- package/dist/carousel.mjs +5 -5
- package/dist/{chunk-OQNU22B2.mjs → chunk-CXXL47SC.mjs} +8 -9
- package/dist/chunk-CXXL47SC.mjs.map +1 -0
- package/dist/{chunk-T3LMURPY.mjs → chunk-PEXGWNKB.mjs} +4 -4
- package/dist/chunk-PEXGWNKB.mjs.map +1 -0
- package/dist/{chunk-LRO4RIBJ.mjs → chunk-SYCPZC2C.mjs} +41 -31
- package/dist/chunk-SYCPZC2C.mjs.map +1 -0
- package/dist/{chunk-W6XPFRNI.mjs → chunk-UTOIPGGP.mjs} +7 -7
- package/dist/chunk-UTOIPGGP.mjs.map +1 -0
- package/dist/{chunk-LV5JHVV6.mjs → chunk-WSTWB7CV.mjs} +29 -37
- package/dist/chunk-WSTWB7CV.mjs.map +1 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +71 -70
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -5
- package/dist/use-carousel.d.mts +71 -99
- package/dist/use-carousel.d.ts +71 -99
- package/dist/use-carousel.js +39 -29
- package/dist/use-carousel.js.map +1 -1
- package/dist/use-carousel.mjs +1 -1
- package/package.json +7 -8
- package/dist/chunk-LRO4RIBJ.mjs.map +0 -1
- package/dist/chunk-LV5JHVV6.mjs.map +0 -1
- package/dist/chunk-OQNU22B2.mjs.map +0 -1
- package/dist/chunk-T3LMURPY.mjs.map +0 -1
- package/dist/chunk-W6XPFRNI.mjs.map +0 -1
@@ -2,27 +2,26 @@
|
|
2
2
|
import {
|
3
3
|
CarouselControlNext,
|
4
4
|
CarouselControlPrev
|
5
|
-
} from "./chunk-
|
5
|
+
} from "./chunk-PEXGWNKB.mjs";
|
6
6
|
import {
|
7
7
|
CarouselIndicators
|
8
|
-
} from "./chunk-
|
8
|
+
} from "./chunk-UTOIPGGP.mjs";
|
9
9
|
import {
|
10
10
|
CarouselSlide
|
11
|
-
} from "./chunk-
|
11
|
+
} from "./chunk-CXXL47SC.mjs";
|
12
12
|
import {
|
13
13
|
CarouselProvider,
|
14
14
|
useCarousel,
|
15
15
|
useCarouselContext
|
16
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-SYCPZC2C.mjs";
|
17
17
|
|
18
18
|
// src/carousel.tsx
|
19
19
|
import {
|
20
|
-
ui,
|
21
20
|
forwardRef,
|
22
|
-
|
23
|
-
|
21
|
+
omitThemeProps,
|
22
|
+
ui,
|
23
|
+
useComponentMultiStyle
|
24
24
|
} from "@yamada-ui/core";
|
25
|
-
import { useToken } from "@yamada-ui/use-token";
|
26
25
|
import { useValue } from "@yamada-ui/use-value";
|
27
26
|
import {
|
28
27
|
cx,
|
@@ -36,7 +35,6 @@ import { cloneElement } from "react";
|
|
36
35
|
import { jsx, jsxs } from "react/jsx-runtime";
|
37
36
|
var Carousel = forwardRef(
|
38
37
|
({ h, height, minH, minHeight, ...props }, ref) => {
|
39
|
-
var _a, _b;
|
40
38
|
const orientation = useValue(props.orientation);
|
41
39
|
const align = useValue(props.align);
|
42
40
|
const autoplay = useValue(props.autoplay);
|
@@ -51,43 +49,37 @@ var Carousel = forwardRef(
|
|
51
49
|
const skipSnaps = useValue(props.skipSnaps);
|
52
50
|
const containScroll = useValue(props.containScroll);
|
53
51
|
const includeGapInSize = useValue(props.includeGapInSize);
|
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
52
|
const [styles, mergedProps] = useComponentMultiStyle("Carousel", {
|
59
53
|
...props,
|
60
|
-
orientation,
|
61
54
|
align,
|
62
55
|
autoplay,
|
63
|
-
|
64
|
-
loop,
|
65
|
-
duration,
|
56
|
+
containScroll,
|
66
57
|
delay,
|
67
|
-
slidesToScroll,
|
68
|
-
draggable,
|
69
58
|
dragFree,
|
59
|
+
draggable,
|
60
|
+
duration,
|
61
|
+
includeGapInSize,
|
70
62
|
inViewThreshold,
|
63
|
+
loop,
|
64
|
+
orientation,
|
71
65
|
skipSnaps,
|
72
|
-
|
73
|
-
|
74
|
-
gap,
|
75
|
-
slideSize
|
66
|
+
slidesToScroll,
|
67
|
+
stopMouseEnterAutoplay
|
76
68
|
});
|
77
69
|
const {
|
78
70
|
className,
|
79
|
-
innerProps,
|
80
71
|
withControls = true,
|
81
|
-
controlProps,
|
82
|
-
controlPrevProps,
|
83
|
-
controlNextProps,
|
84
72
|
withIndicators = true,
|
73
|
+
controlNextProps,
|
74
|
+
controlPrevProps,
|
75
|
+
controlProps,
|
85
76
|
indicatorsProps,
|
77
|
+
innerProps,
|
86
78
|
...computedProps
|
87
79
|
} = omitThemeProps(mergedProps);
|
88
80
|
const computedWithControls = useValue(withControls);
|
89
81
|
const computedWithIndicators = useValue(withIndicators);
|
90
|
-
const { getContainerProps, getSlidesProps,
|
82
|
+
const { children, getContainerProps, getSlidesProps, ...rest } = useCarousel({
|
91
83
|
...computedProps
|
92
84
|
});
|
93
85
|
const validChildren = getValidChildren(children);
|
@@ -114,17 +106,18 @@ var Carousel = forwardRef(
|
|
114
106
|
const cloneSlideChildren = slideChildren.map(
|
115
107
|
(child, index) => cloneElement(child, { index })
|
116
108
|
);
|
109
|
+
const css = {
|
110
|
+
h: "fit-content",
|
111
|
+
position: "relative",
|
112
|
+
...styles.container
|
113
|
+
};
|
117
114
|
h != null ? h : h = height;
|
118
115
|
minH != null ? minH : minH = minHeight;
|
119
116
|
return /* @__PURE__ */ jsx(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ jsxs(
|
120
117
|
ui.div,
|
121
118
|
{
|
122
119
|
className: cx("ui-carousel", className),
|
123
|
-
__css:
|
124
|
-
position: "relative",
|
125
|
-
h: "fit-content",
|
126
|
-
...styles.container
|
127
|
-
},
|
120
|
+
__css: css,
|
128
121
|
...getContainerProps({}, ref),
|
129
122
|
children: [
|
130
123
|
customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ jsx(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
|
@@ -150,20 +143,19 @@ Carousel.displayName = "Carousel";
|
|
150
143
|
Carousel.__ui__ = "Carousel";
|
151
144
|
var CarouselSlides = forwardRef(
|
152
145
|
({ ...rest }, ref) => {
|
153
|
-
const css = {
|
146
|
+
const css = { h: "fit-content", overflow: "hidden", w: "100%" };
|
154
147
|
return /* @__PURE__ */ jsx(ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ jsx(CarouselSlidesInner, { ...rest }) });
|
155
148
|
}
|
156
149
|
);
|
157
150
|
CarouselSlides.displayName = "CarouselSlides";
|
158
151
|
CarouselSlides.__ui__ = "CarouselSlides";
|
159
152
|
var CarouselSlidesInner = ({ ...rest }) => {
|
160
|
-
const {
|
153
|
+
const { includeGapInSize, orientation, styles } = useCarouselContext();
|
161
154
|
const css = {
|
162
155
|
display: "flex",
|
163
156
|
flexDirection: orientation === "vertical" ? "column" : "row",
|
164
157
|
...styles.inner,
|
165
158
|
...includeGapInSize ? {
|
166
|
-
vars: [{ name: "gap", token: "spaces", value: gap }],
|
167
159
|
[orientation === "vertical" ? "mb" : "mr"]: "calc($gap * -1)"
|
168
160
|
} : {}
|
169
161
|
};
|
@@ -175,4 +167,4 @@ CarouselSlidesInner.__ui__ = "CarouselSlidesInner";
|
|
175
167
|
export {
|
176
168
|
Carousel
|
177
169
|
};
|
178
|
-
//# sourceMappingURL=chunk-
|
170
|
+
//# sourceMappingURL=chunk-WSTWB7CV.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/carousel.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { CarouselControlProps } from \"./carousel-control\"\nimport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\nimport type {\n AlignmentOptionType,\n ScrollContainOptionType,\n SlidesInViewOptionsType,\n UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n filterUndefined,\n findChild,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { CarouselControlNext, CarouselControlPrev } from \"./carousel-control\"\nimport { CarouselIndicators } from \"./carousel-indicators\"\nimport { CarouselSlide } from \"./carousel-slide\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\n\ninterface CarouselOptions {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: Token<AlignmentOptionType>\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: Token<boolean>\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default ''\n */\n containScroll?: Token<ScrollContainOptionType>\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: Token<number>\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: Token<boolean>\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: Token<boolean>\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: Token<number>\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: Token<boolean>\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: Token<SlidesInViewOptionsType>\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: Token<boolean>\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Token<\"horizontal\" | \"vertical\">\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: Token<boolean>\n /**\n * The CSS `width` property.\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: Token<number>\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: Token<boolean>\n /**\n * If `true`, display the carousel control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the carousel indicator buttons.\n *\n * @default true\n */\n withIndicators?: Token<boolean>\n /**\n * Props for next of the carousel control element.\n */\n controlNextProps?: CarouselControlProps\n /**\n * Props for previous of the carousel control element.\n */\n controlPrevProps?: CarouselControlProps\n /**\n * Props for carousel control element.\n */\n controlProps?: CarouselControlProps\n /**\n * Props for carousel indicators element.\n */\n indicatorsProps?: CarouselIndicatorsProps\n /**\n * Props for carousel inner element.\n */\n innerProps?: HTMLUIProps\n}\n\nexport interface CarouselProps\n extends ThemeProps<\"Carousel\">,\n Omit<HTMLUIProps, \"draggable\" | \"onChange\">,\n Pick<\n UseCarouselProps,\n | \"controlRef\"\n | \"defaultIndex\"\n | \"index\"\n | \"onChange\"\n | \"onScrollProgress\"\n | \"watchDrag\"\n | \"watchResize\"\n | \"watchSlides\"\n >,\n CarouselOptions {}\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see Docs https://yamada-ui.com/components/data-display/carousel\n */\nexport const Carousel = forwardRef<CarouselProps, \"div\">(\n ({ h, height, minH, minHeight, ...props }, ref) => {\n const orientation = useValue(props.orientation)\n const align = useValue(props.align)\n const autoplay = useValue(props.autoplay)\n const stopMouseEnterAutoplay = useValue(props.stopMouseEnterAutoplay)\n const loop = useValue(props.loop)\n const duration = useValue(props.duration)\n const delay = useValue(props.delay)\n const slidesToScroll = useValue(props.slidesToScroll)\n const draggable = useValue(props.draggable)\n const dragFree = useValue(props.dragFree)\n const inViewThreshold = useValue(props.inViewThreshold)\n const skipSnaps = useValue(props.skipSnaps)\n const containScroll = useValue(props.containScroll)\n const includeGapInSize = useValue(props.includeGapInSize)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Carousel\", {\n ...props,\n align,\n autoplay,\n containScroll,\n delay,\n dragFree,\n draggable,\n duration,\n includeGapInSize,\n inViewThreshold,\n loop,\n orientation,\n skipSnaps,\n slidesToScroll,\n stopMouseEnterAutoplay,\n })\n const {\n className,\n withControls = true,\n withIndicators = true,\n controlNextProps,\n controlPrevProps,\n controlProps,\n indicatorsProps,\n innerProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const computedWithControls = useValue(withControls)\n const computedWithIndicators = useValue(withIndicators)\n\n const { children, getContainerProps, getSlidesProps, ...rest } =\n useCarousel({\n ...computedProps,\n })\n\n const validChildren = getValidChildren(children)\n\n const customCarouselControlPrev = findChild(\n validChildren,\n CarouselControlPrev,\n )\n const customCarouselControlNext = findChild(\n validChildren,\n CarouselControlNext,\n )\n const customCarouselIndicators = findChild(\n validChildren,\n CarouselIndicators,\n )\n const slideChildren = pickChildren(validChildren, CarouselSlide)\n const otherChildren = omitChildren(\n validChildren,\n CarouselControlPrev,\n CarouselControlNext,\n CarouselIndicators,\n CarouselSlide,\n )\n\n const cloneSlideChildren = slideChildren.map((child, index) =>\n cloneElement(child, { index }),\n )\n\n const css: CSSUIObject = {\n h: \"fit-content\",\n position: \"relative\",\n ...styles.container,\n }\n\n h ??= height\n minH ??= minHeight\n\n return (\n <CarouselProvider value={{ styles, ...rest }}>\n <ui.div\n className={cx(\"ui-carousel\", className)}\n __css={css}\n {...getContainerProps({}, ref)}\n >\n {customCarouselControlPrev ??\n (computedWithControls ? (\n <CarouselControlPrev {...controlProps} {...controlPrevProps} />\n ) : null)}\n {customCarouselControlNext ??\n (computedWithControls ? (\n <CarouselControlNext {...controlProps} {...controlNextProps} />\n ) : null)}\n\n <CarouselSlides\n {...getSlidesProps({\n ...filterUndefined({ h, minH }),\n ...innerProps,\n })}\n >\n {cloneSlideChildren}\n </CarouselSlides>\n\n {customCarouselIndicators ??\n (computedWithIndicators ? (\n <CarouselIndicators {...indicatorsProps} />\n ) : null)}\n\n {otherChildren}\n </ui.div>\n </CarouselProvider>\n )\n },\n)\n\nCarousel.displayName = \"Carousel\"\nCarousel.__ui__ = \"Carousel\"\n\ninterface CarouselSlidesProps extends HTMLUIProps {}\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n ({ ...rest }, ref) => {\n const css: CSSUIObject = { h: \"fit-content\", overflow: \"hidden\", w: \"100%\" }\n\n return (\n <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n <CarouselSlidesInner {...rest} />\n </ui.div>\n )\n },\n)\n\nCarouselSlides.displayName = \"CarouselSlides\"\nCarouselSlides.__ui__ = \"CarouselSlides\"\n\ninterface CarouselSlidesInnerProps extends HTMLUIProps {}\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n const { includeGapInSize, orientation, styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n ...styles.inner,\n ...(includeGapInSize\n ? {\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n }\n : {}),\n }\n\n return (\n <ui.div className=\"ui-carousel__sliders__inner\" __css={css} {...rest} />\n )\n}\n\nCarouselSlidesInner.displayName = \"CarouselSlidesInner\"\nCarouselSlidesInner.__ui__ = \"CarouselSlidesInner\"\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AA2PrB,SAOM,KAPN;AA5FD,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,GAAG,QAAQ,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AACjD,UAAM,cAAc,SAAS,MAAM,WAAW;AAC9C,UAAM,QAAQ,SAAS,MAAM,KAAK;AAClC,UAAM,WAAW,SAAS,MAAM,QAAQ;AACxC,UAAM,yBAAyB,SAAS,MAAM,sBAAsB;AACpE,UAAM,OAAO,SAAS,MAAM,IAAI;AAChC,UAAM,WAAW,SAAS,MAAM,QAAQ;AACxC,UAAM,QAAQ,SAAS,MAAM,KAAK;AAClC,UAAM,iBAAiB,SAAS,MAAM,cAAc;AACpD,UAAM,YAAY,SAAS,MAAM,SAAS;AAC1C,UAAM,WAAW,SAAS,MAAM,QAAQ;AACxC,UAAM,kBAAkB,SAAS,MAAM,eAAe;AACtD,UAAM,YAAY,SAAS,MAAM,SAAS;AAC1C,UAAM,gBAAgB,SAAS,MAAM,aAAa;AAClD,UAAM,mBAAmB,SAAS,MAAM,gBAAgB;AAExD,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,YAAY;AAAA,MAC/D,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAE9B,UAAM,uBAAuB,SAAS,YAAY;AAClD,UAAM,yBAAyB,SAAS,cAAc;AAEtD,UAAM,EAAE,UAAU,mBAAmB,gBAAgB,GAAG,KAAK,IAC3D,YAAY;AAAA,MACV,GAAG;AAAA,IACL,CAAC;AAEH,UAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,4BAA4B;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,4BAA4B;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,2BAA2B;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,UAAM,gBAAgB,aAAa,eAAe,aAAa;AAC/D,UAAM,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,qBAAqB,cAAc;AAAA,MAAI,CAAC,OAAO,UACnD,aAAa,OAAO,EAAE,MAAM,CAAC;AAAA,IAC/B;AAEA,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,MACH,UAAU;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAEA,wBAAM;AACN,iCAAS;AAET,WACE,oBAAC,oBAAiB,OAAO,EAAE,QAAQ,GAAG,KAAK,GACzC;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG,kBAAkB,CAAC,GAAG,GAAG;AAAA,QAE5B;AAAA,0EACE,uBACC,oBAAC,uBAAqB,GAAG,cAAe,GAAG,kBAAkB,IAC3D;AAAA,UACL,gEACE,uBACC,oBAAC,uBAAqB,GAAG,cAAe,GAAG,kBAAkB,IAC3D;AAAA,UAEN;AAAA,YAAC;AAAA;AAAA,cACE,GAAG,eAAe;AAAA,gBACjB,GAAG,gBAAgB,EAAE,GAAG,KAAK,CAAC;AAAA,gBAC9B,GAAG;AAAA,cACL,CAAC;AAAA,cAEA;AAAA;AAAA,UACH;AAAA,UAEC,8DACE,yBACC,oBAAC,sBAAoB,GAAG,iBAAiB,IACvC;AAAA,UAEL;AAAA;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AACvB,SAAS,SAAS;AAIlB,IAAM,iBAAiB;AAAA,EACrB,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ;AACpB,UAAM,MAAmB,EAAE,GAAG,eAAe,UAAU,UAAU,GAAG,OAAO;AAE3E,WACE,oBAAC,GAAG,KAAH,EAAO,KAAU,WAAU,wBAAuB,OAAO,KACxD,8BAAC,uBAAqB,GAAG,MAAM,GACjC;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAIxB,IAAM,sBAAoD,CAAC,EAAE,GAAG,KAAK,MAAM;AACzE,QAAM,EAAE,kBAAkB,aAAa,OAAO,IAAI,mBAAmB;AAErE,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT,eAAe,gBAAgB,aAAa,WAAW;AAAA,IACvD,GAAG,OAAO;AAAA,IACV,GAAI,mBACA;AAAA,MACE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG;AAAA,IAC9C,IACA,CAAC;AAAA,EACP;AAEA,SACE,oBAAC,GAAG,KAAH,EAAO,WAAU,+BAA8B,OAAO,KAAM,GAAG,MAAM;AAE1E;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,SAAS;","names":[]}
|
package/dist/index.d.mts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
export { Carousel, CarouselProps } from './carousel.mjs';
|
2
|
-
export { CarouselSlide, CarouselSlideProps } from './carousel-slide.mjs';
|
3
2
|
export { CarouselControlNext, CarouselControlPrev, CarouselControlProps } from './carousel-control.mjs';
|
4
3
|
export { CarouselIndicators, CarouselIndicatorsProps } from './carousel-indicators.mjs';
|
4
|
+
export { CarouselSlide, CarouselSlideProps } from './carousel-slide.mjs';
|
5
5
|
export { CarouselControl } from './use-carousel.mjs';
|
6
6
|
import '@yamada-ui/core';
|
7
7
|
import '@yamada-ui/button';
|
package/dist/index.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
export { Carousel, CarouselProps } from './carousel.js';
|
2
|
-
export { CarouselSlide, CarouselSlideProps } from './carousel-slide.js';
|
3
2
|
export { CarouselControlNext, CarouselControlPrev, CarouselControlProps } from './carousel-control.js';
|
4
3
|
export { CarouselIndicators, CarouselIndicatorsProps } from './carousel-indicators.js';
|
4
|
+
export { CarouselSlide, CarouselSlideProps } from './carousel-slide.js';
|
5
5
|
export { CarouselControl } from './use-carousel.js';
|
6
6
|
import '@yamada-ui/core';
|
7
7
|
import '@yamada-ui/button';
|
package/dist/index.js
CHANGED
@@ -41,7 +41,6 @@ module.exports = __toCommonJS(src_exports);
|
|
41
41
|
|
42
42
|
// src/carousel.tsx
|
43
43
|
var import_core5 = require("@yamada-ui/core");
|
44
|
-
var import_use_token = require("@yamada-ui/use-token");
|
45
44
|
var import_use_value = require("@yamada-ui/use-value");
|
46
45
|
var import_utils5 = require("@yamada-ui/utils");
|
47
46
|
var import_react3 = require("react");
|
@@ -63,51 +62,54 @@ var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
|
|
63
62
|
errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
|
64
63
|
});
|
65
64
|
var useCarousel = ({
|
66
|
-
index,
|
67
|
-
defaultIndex = 0,
|
68
|
-
onChange,
|
69
65
|
align = "center",
|
70
|
-
orientation = "horizontal",
|
71
66
|
autoplay = false,
|
72
|
-
|
73
|
-
|
74
|
-
|
67
|
+
children,
|
68
|
+
containScroll = false,
|
69
|
+
controlRef,
|
70
|
+
defaultIndex = 0,
|
75
71
|
delay = 4e3,
|
76
|
-
slidesToScroll = 1,
|
77
|
-
draggable = true,
|
78
72
|
dragFree = false,
|
73
|
+
draggable = true,
|
74
|
+
duration = 25,
|
75
|
+
includeGapInSize = true,
|
76
|
+
index,
|
79
77
|
inViewThreshold = 0,
|
78
|
+
loop = true,
|
79
|
+
orientation = "horizontal",
|
80
80
|
skipSnaps = false,
|
81
|
-
containScroll = false,
|
82
81
|
slideSize = "100%",
|
83
|
-
|
84
|
-
|
82
|
+
slidesToScroll = 1,
|
83
|
+
stopMouseEnterAutoplay = true,
|
85
84
|
watchDrag = draggable,
|
86
85
|
watchResize = true,
|
87
86
|
watchSlides = true,
|
88
|
-
|
89
|
-
|
87
|
+
onChange,
|
88
|
+
onScrollProgress,
|
90
89
|
...rest
|
91
90
|
}) => {
|
92
|
-
const [
|
91
|
+
const [
|
92
|
+
{ gap = "fallback(4, 1rem)", ...containerProps },
|
93
|
+
{ vars, ...slidesProps }
|
94
|
+
] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
|
93
95
|
const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
|
94
|
-
value: index,
|
95
96
|
defaultValue: defaultIndex,
|
97
|
+
value: index,
|
96
98
|
onChange
|
97
99
|
});
|
98
100
|
const isVertical = orientation === "vertical";
|
99
101
|
const [carouselRef, carousel] = (0, import_embla_carousel_react.default)(
|
100
102
|
{
|
101
|
-
axis: isVertical ? "y" : "x",
|
102
|
-
startIndex: defaultIndex,
|
103
|
-
loop,
|
104
103
|
align,
|
105
|
-
|
106
|
-
|
104
|
+
axis: isVertical ? "y" : "x",
|
105
|
+
containScroll,
|
107
106
|
dragFree,
|
107
|
+
duration,
|
108
108
|
inViewThreshold,
|
109
|
+
loop,
|
109
110
|
skipSnaps,
|
110
|
-
|
111
|
+
slidesToScroll,
|
112
|
+
startIndex: defaultIndex,
|
111
113
|
watchDrag,
|
112
114
|
watchResize,
|
113
115
|
watchSlides
|
@@ -192,11 +194,20 @@ var useCarousel = ({
|
|
192
194
|
};
|
193
195
|
}
|
194
196
|
}, [carousel, onScroll]);
|
197
|
+
(0, import_utils.useUpdateEffect)(() => {
|
198
|
+
if (!carousel) return;
|
199
|
+
if (index === void 0) return;
|
200
|
+
carousel.scrollTo(index);
|
201
|
+
}, [index]);
|
195
202
|
const getContainerProps = (0, import_react.useCallback)(
|
196
203
|
(props = {}, ref = null) => ({
|
197
204
|
...containerProps,
|
198
205
|
...props,
|
199
206
|
ref,
|
207
|
+
vars: (0, import_core.mergeVars)(vars, [
|
208
|
+
{ name: "gap", token: "spaces", value: gap },
|
209
|
+
{ name: "slideSize", token: "sizes", value: slideSize }
|
210
|
+
]),
|
200
211
|
onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
|
201
212
|
setIsMouseEnter(true);
|
202
213
|
}),
|
@@ -204,7 +215,7 @@ var useCarousel = ({
|
|
204
215
|
setIsMouseEnter(false);
|
205
216
|
})
|
206
217
|
}),
|
207
|
-
[containerProps]
|
218
|
+
[containerProps, gap, slideSize, vars]
|
208
219
|
);
|
209
220
|
const getSlidesProps = (0, import_react.useCallback)(
|
210
221
|
(props = {}) => ({
|
@@ -217,20 +228,18 @@ var useCarousel = ({
|
|
217
228
|
return {
|
218
229
|
carousel,
|
219
230
|
children,
|
231
|
+
includeGapInSize,
|
220
232
|
indexes,
|
221
|
-
selectedIndex,
|
222
233
|
orientation,
|
223
|
-
|
224
|
-
gap,
|
234
|
+
selectedIndex,
|
225
235
|
slidesToScroll,
|
226
|
-
includeGapInSize,
|
227
236
|
getContainerProps,
|
228
237
|
getSlidesProps
|
229
238
|
};
|
230
239
|
};
|
231
240
|
var useCarouselSlide = ({ index }) => {
|
232
241
|
const { selectedIndex, slidesToScroll } = useCarouselContext();
|
233
|
-
index = Math.floor((index != null ? index : 0) /
|
242
|
+
index = Math.floor((index != null ? index : 0) / slidesToScroll);
|
234
243
|
const isSelected = index === selectedIndex;
|
235
244
|
const getSlideProps = (0, import_react.useCallback)(
|
236
245
|
(props = {}) => ({
|
@@ -270,7 +279,7 @@ var useCarouselControl = ({
|
|
270
279
|
return { getControlProps };
|
271
280
|
};
|
272
281
|
var useCarouselIndicators = () => {
|
273
|
-
const {
|
282
|
+
const { carousel, indexes, selectedIndex } = useCarouselContext();
|
274
283
|
const onClick = (0, import_react.useCallback)(
|
275
284
|
(ev, index) => {
|
276
285
|
if (!carousel) return;
|
@@ -305,7 +314,6 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
|
|
305
314
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
306
315
|
CarouselControl,
|
307
316
|
{
|
308
|
-
operation: "prev",
|
309
317
|
className: (0, import_utils2.cx)("ui-carousel__control--prev", className),
|
310
318
|
"aria-label": "Go to previous slide",
|
311
319
|
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -317,6 +325,7 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
|
|
317
325
|
}
|
318
326
|
}
|
319
327
|
),
|
328
|
+
operation: "prev",
|
320
329
|
...getControlProps(rest, ref)
|
321
330
|
}
|
322
331
|
);
|
@@ -331,7 +340,6 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
|
|
331
340
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
332
341
|
CarouselControl,
|
333
342
|
{
|
334
|
-
operation: "next",
|
335
343
|
className: (0, import_utils2.cx)("ui-carousel__control--next", className),
|
336
344
|
"aria-label": "Go to next slide",
|
337
345
|
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -343,6 +351,7 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
|
|
343
351
|
}
|
344
352
|
}
|
345
353
|
),
|
354
|
+
operation: "next",
|
346
355
|
...getControlProps(rest, ref)
|
347
356
|
}
|
348
357
|
);
|
@@ -380,13 +389,13 @@ var import_react2 = require("react");
|
|
380
389
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
381
390
|
var CarouselIndicators = (0, import_core3.forwardRef)(
|
382
391
|
({ className, component, ...rest }, ref) => {
|
383
|
-
const {
|
392
|
+
const { orientation, selectedIndex, styles } = useCarouselContext();
|
384
393
|
const { indexes, getIndicatorProps } = useCarouselIndicators();
|
385
394
|
const css = {
|
386
|
-
position: "absolute",
|
387
|
-
zIndex: "fallback(kurillin, 9)",
|
388
395
|
display: "flex",
|
389
396
|
justifyContent: "center",
|
397
|
+
position: "absolute",
|
398
|
+
zIndex: "fallback(kurillin, 9)",
|
390
399
|
...styles.indicators,
|
391
400
|
...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
|
392
401
|
};
|
@@ -428,8 +437,8 @@ var CarouselIndicator = ({
|
|
428
437
|
import_core3.ui.button,
|
429
438
|
{
|
430
439
|
type: "button",
|
431
|
-
tabIndex: -1,
|
432
440
|
className: (0, import_utils3.cx)("ui-carousel__indicators__indicator", className),
|
441
|
+
tabIndex: -1,
|
433
442
|
__css: css,
|
434
443
|
...rest
|
435
444
|
}
|
@@ -444,13 +453,13 @@ var import_utils4 = require("@yamada-ui/utils");
|
|
444
453
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
445
454
|
var CarouselSlide = (0, import_core4.forwardRef)(
|
446
455
|
({ className, size, ...rest }, ref) => {
|
447
|
-
const {
|
456
|
+
const { includeGapInSize, orientation } = useCarouselContext();
|
448
457
|
const { getSlideProps } = useCarouselSlide(rest);
|
449
|
-
size != null ? size : size = slideSize;
|
458
|
+
size != null ? size : size = "$slideSize";
|
450
459
|
const css = {
|
451
|
-
position: "relative",
|
452
460
|
flex: `0 0 ${size}`,
|
453
|
-
|
461
|
+
position: "relative",
|
462
|
+
...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: "$gap" } : { [orientation === "vertical" ? "mb" : "mr"]: "$gap" }
|
454
463
|
};
|
455
464
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
456
465
|
import_core4.ui.div,
|
@@ -472,8 +481,7 @@ var CarouselSlideInner = (0, import_core4.forwardRef)(
|
|
472
481
|
{
|
473
482
|
ref,
|
474
483
|
className: "ui-carousel__slide__inner",
|
475
|
-
|
476
|
-
h: "100%",
|
484
|
+
boxSize: "100%",
|
477
485
|
...rest
|
478
486
|
}
|
479
487
|
);
|
@@ -486,7 +494,6 @@ CarouselSlideInner.__ui__ = "CarouselSlideInner";
|
|
486
494
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
487
495
|
var Carousel = (0, import_core5.forwardRef)(
|
488
496
|
({ h, height, minH, minHeight, ...props }, ref) => {
|
489
|
-
var _a, _b;
|
490
497
|
const orientation = (0, import_use_value.useValue)(props.orientation);
|
491
498
|
const align = (0, import_use_value.useValue)(props.align);
|
492
499
|
const autoplay = (0, import_use_value.useValue)(props.autoplay);
|
@@ -501,43 +508,37 @@ var Carousel = (0, import_core5.forwardRef)(
|
|
501
508
|
const skipSnaps = (0, import_use_value.useValue)(props.skipSnaps);
|
502
509
|
const containScroll = (0, import_use_value.useValue)(props.containScroll);
|
503
510
|
const includeGapInSize = (0, import_use_value.useValue)(props.includeGapInSize);
|
504
|
-
const _gap = (0, import_use_value.useValue)(props.gap);
|
505
|
-
const gap = (_a = (0, import_use_token.useToken)("spaces", _gap)) != null ? _a : _gap;
|
506
|
-
const _slideSize = (0, import_use_value.useValue)(props.slideSize);
|
507
|
-
const slideSize = (_b = (0, import_use_token.useToken)("sizes", _slideSize)) != null ? _b : _slideSize;
|
508
511
|
const [styles, mergedProps] = (0, import_core5.useComponentMultiStyle)("Carousel", {
|
509
512
|
...props,
|
510
|
-
orientation,
|
511
513
|
align,
|
512
514
|
autoplay,
|
513
|
-
|
514
|
-
loop,
|
515
|
-
duration,
|
515
|
+
containScroll,
|
516
516
|
delay,
|
517
|
-
slidesToScroll,
|
518
|
-
draggable,
|
519
517
|
dragFree,
|
518
|
+
draggable,
|
519
|
+
duration,
|
520
|
+
includeGapInSize,
|
520
521
|
inViewThreshold,
|
522
|
+
loop,
|
523
|
+
orientation,
|
521
524
|
skipSnaps,
|
522
|
-
|
523
|
-
|
524
|
-
gap,
|
525
|
-
slideSize
|
525
|
+
slidesToScroll,
|
526
|
+
stopMouseEnterAutoplay
|
526
527
|
});
|
527
528
|
const {
|
528
529
|
className,
|
529
|
-
innerProps,
|
530
530
|
withControls = true,
|
531
|
-
controlProps,
|
532
|
-
controlPrevProps,
|
533
|
-
controlNextProps,
|
534
531
|
withIndicators = true,
|
532
|
+
controlNextProps,
|
533
|
+
controlPrevProps,
|
534
|
+
controlProps,
|
535
535
|
indicatorsProps,
|
536
|
+
innerProps,
|
536
537
|
...computedProps
|
537
538
|
} = (0, import_core5.omitThemeProps)(mergedProps);
|
538
539
|
const computedWithControls = (0, import_use_value.useValue)(withControls);
|
539
540
|
const computedWithIndicators = (0, import_use_value.useValue)(withIndicators);
|
540
|
-
const { getContainerProps, getSlidesProps,
|
541
|
+
const { children, getContainerProps, getSlidesProps, ...rest } = useCarousel({
|
541
542
|
...computedProps
|
542
543
|
});
|
543
544
|
const validChildren = (0, import_utils5.getValidChildren)(children);
|
@@ -564,17 +565,18 @@ var Carousel = (0, import_core5.forwardRef)(
|
|
564
565
|
const cloneSlideChildren = slideChildren.map(
|
565
566
|
(child, index) => (0, import_react3.cloneElement)(child, { index })
|
566
567
|
);
|
568
|
+
const css = {
|
569
|
+
h: "fit-content",
|
570
|
+
position: "relative",
|
571
|
+
...styles.container
|
572
|
+
};
|
567
573
|
h != null ? h : h = height;
|
568
574
|
minH != null ? minH : minH = minHeight;
|
569
575
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
570
576
|
import_core5.ui.div,
|
571
577
|
{
|
572
578
|
className: (0, import_utils5.cx)("ui-carousel", className),
|
573
|
-
__css:
|
574
|
-
position: "relative",
|
575
|
-
h: "fit-content",
|
576
|
-
...styles.container
|
577
|
-
},
|
579
|
+
__css: css,
|
578
580
|
...getContainerProps({}, ref),
|
579
581
|
children: [
|
580
582
|
customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
|
@@ -600,20 +602,19 @@ Carousel.displayName = "Carousel";
|
|
600
602
|
Carousel.__ui__ = "Carousel";
|
601
603
|
var CarouselSlides = (0, import_core5.forwardRef)(
|
602
604
|
({ ...rest }, ref) => {
|
603
|
-
const css = {
|
605
|
+
const css = { h: "fit-content", overflow: "hidden", w: "100%" };
|
604
606
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselSlidesInner, { ...rest }) });
|
605
607
|
}
|
606
608
|
);
|
607
609
|
CarouselSlides.displayName = "CarouselSlides";
|
608
610
|
CarouselSlides.__ui__ = "CarouselSlides";
|
609
611
|
var CarouselSlidesInner = ({ ...rest }) => {
|
610
|
-
const {
|
612
|
+
const { includeGapInSize, orientation, styles } = useCarouselContext();
|
611
613
|
const css = {
|
612
614
|
display: "flex",
|
613
615
|
flexDirection: orientation === "vertical" ? "column" : "row",
|
614
616
|
...styles.inner,
|
615
617
|
...includeGapInSize ? {
|
616
|
-
vars: [{ name: "gap", token: "spaces", value: gap }],
|
617
618
|
[orientation === "vertical" ? "mb" : "mr"]: "calc($gap * -1)"
|
618
619
|
} : {}
|
619
620
|
};
|