@yamada-ui/carousel 1.0.28 → 2.0.0-next-20240513035416

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. package/dist/carousel-control.d.mts +8 -0
  2. package/dist/carousel-control.d.ts +8 -0
  3. package/dist/carousel-control.js +158 -0
  4. package/dist/carousel-control.js.map +1 -0
  5. package/dist/carousel-control.mjs +11 -0
  6. package/dist/carousel-control.mjs.map +1 -0
  7. package/dist/carousel-indicators.d.mts +17 -0
  8. package/dist/carousel-indicators.d.ts +17 -0
  9. package/dist/carousel-indicators.js +141 -0
  10. package/dist/carousel-indicators.js.map +1 -0
  11. package/dist/carousel-indicators.mjs +9 -0
  12. package/dist/carousel-indicators.mjs.map +1 -0
  13. package/dist/carousel-slide.d.mts +17 -0
  14. package/dist/carousel-slide.d.ts +17 -0
  15. package/dist/carousel-slide.js +106 -0
  16. package/dist/carousel-slide.js.map +1 -0
  17. package/dist/carousel-slide.mjs +9 -0
  18. package/dist/carousel-slide.mjs.map +1 -0
  19. package/dist/carousel.d.mts +144 -0
  20. package/dist/carousel.d.ts +144 -0
  21. package/dist/carousel.js +599 -0
  22. package/dist/carousel.js.map +1 -0
  23. package/dist/carousel.mjs +12 -0
  24. package/dist/carousel.mjs.map +1 -0
  25. package/dist/chunk-DDY7Q2IV.mjs +87 -0
  26. package/dist/chunk-DDY7Q2IV.mjs.map +1 -0
  27. package/dist/chunk-IKJXFLRJ.mjs +72 -0
  28. package/dist/chunk-IKJXFLRJ.mjs.map +1 -0
  29. package/dist/chunk-QQ2HS4J4.mjs +260 -0
  30. package/dist/chunk-QQ2HS4J4.mjs.map +1 -0
  31. package/dist/chunk-VQX7S5CU.mjs +50 -0
  32. package/dist/chunk-VQX7S5CU.mjs.map +1 -0
  33. package/dist/chunk-YDLJHKEU.mjs +171 -0
  34. package/dist/chunk-YDLJHKEU.mjs.map +1 -0
  35. package/dist/index.d.mts +9 -0
  36. package/dist/index.d.ts +9 -0
  37. package/dist/index.js +609 -0
  38. package/dist/index.js.map +1 -0
  39. package/dist/index.mjs +23 -0
  40. package/dist/index.mjs.map +1 -0
  41. package/dist/use-carousel.d.mts +176 -0
  42. package/dist/use-carousel.d.ts +176 -0
  43. package/dist/use-carousel.js +292 -0
  44. package/dist/use-carousel.js.map +1 -0
  45. package/dist/use-carousel.mjs +18 -0
  46. package/dist/use-carousel.mjs.map +1 -0
  47. package/package.json +1 -1
@@ -0,0 +1,292 @@
1
+ "use client"
2
+ "use strict";
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
+
31
+ // src/use-carousel.ts
32
+ var use_carousel_exports = {};
33
+ __export(use_carousel_exports, {
34
+ CarouselProvider: () => CarouselProvider,
35
+ useCarousel: () => useCarousel,
36
+ useCarouselContext: () => useCarouselContext,
37
+ useCarouselControl: () => useCarouselControl,
38
+ useCarouselIndicators: () => useCarouselIndicators,
39
+ useCarouselSlide: () => useCarouselSlide
40
+ });
41
+ module.exports = __toCommonJS(use_carousel_exports);
42
+ var import_core = require("@yamada-ui/core");
43
+ var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
44
+ var import_utils = require("@yamada-ui/utils");
45
+ var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
46
+ var import_react = require("react");
47
+ var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
48
+ name: "CarouselContext",
49
+ errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
50
+ });
51
+ var useCarousel = ({
52
+ index,
53
+ defaultIndex = 0,
54
+ onChange,
55
+ align = "center",
56
+ orientation = "horizontal",
57
+ autoplay = false,
58
+ stopMouseEnterAutoplay = true,
59
+ loop = true,
60
+ speed = 10,
61
+ delay = 4e3,
62
+ gap = "fallback(4, 1rem)",
63
+ slidesToScroll = 1,
64
+ draggable = true,
65
+ dragFree = false,
66
+ inViewThreshold = 0,
67
+ skipSnaps = false,
68
+ containScroll = "",
69
+ slideSize = "100%",
70
+ includeGapInSize = true,
71
+ onScrollProgress,
72
+ children,
73
+ ...rest
74
+ }) => {
75
+ const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
76
+ const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
77
+ value: index,
78
+ defaultValue: defaultIndex,
79
+ onChange
80
+ });
81
+ const isVertical = orientation === "vertical";
82
+ const [carouselRef, carousel] = (0, import_embla_carousel_react.default)({
83
+ axis: isVertical ? "y" : "x",
84
+ startIndex: defaultIndex,
85
+ loop,
86
+ align,
87
+ slidesToScroll,
88
+ draggable,
89
+ dragFree,
90
+ speed,
91
+ inViewThreshold,
92
+ skipSnaps,
93
+ containScroll
94
+ });
95
+ const [indexes, setIndexes] = (0, import_react.useState)([]);
96
+ const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
97
+ const timeoutId = (0, import_react.useRef)(void 0);
98
+ const onScroll = (0, import_react.useCallback)(() => {
99
+ if (!carousel)
100
+ return;
101
+ const progress = Math.round(
102
+ Math.max(0, Math.min(1, carousel.scrollProgress())) * 100
103
+ );
104
+ onScrollProgress == null ? void 0 : onScrollProgress(progress);
105
+ }, [carousel, onScrollProgress]);
106
+ const onSelect = (0, import_react.useCallback)(() => {
107
+ if (!carousel)
108
+ return;
109
+ const index2 = carousel.selectedScrollSnap();
110
+ setSelectedIndex(index2);
111
+ }, [carousel, setSelectedIndex]);
112
+ (0, import_react.useEffect)(() => {
113
+ const isStop = isMouseEnter && stopMouseEnterAutoplay;
114
+ const isLast = !(carousel == null ? void 0 : carousel.canScrollNext());
115
+ if (carousel && autoplay && !isStop && !isLast) {
116
+ timeoutId.current = setInterval(() => {
117
+ carousel.scrollNext();
118
+ }, delay);
119
+ } else {
120
+ if (timeoutId.current)
121
+ clearInterval(timeoutId.current);
122
+ timeoutId.current = void 0;
123
+ }
124
+ return () => {
125
+ if (timeoutId.current)
126
+ clearInterval(timeoutId.current);
127
+ };
128
+ }, [
129
+ autoplay,
130
+ delay,
131
+ stopMouseEnterAutoplay,
132
+ carousel,
133
+ isMouseEnter,
134
+ loop,
135
+ selectedIndex
136
+ ]);
137
+ (0, import_utils.useUpdateEffect)(() => {
138
+ if (!carousel)
139
+ return;
140
+ carousel.reInit();
141
+ const snapList = carousel.scrollSnapList();
142
+ const indexes2 = snapList.map((_, i) => i);
143
+ setIndexes(indexes2);
144
+ }, [
145
+ import_react.Children.toArray(children).length,
146
+ align,
147
+ orientation,
148
+ loop,
149
+ speed,
150
+ gap,
151
+ slidesToScroll,
152
+ draggable,
153
+ dragFree,
154
+ inViewThreshold,
155
+ skipSnaps,
156
+ containScroll,
157
+ slideSize,
158
+ includeGapInSize
159
+ ]);
160
+ (0, import_utils.useUpdateEffect)(() => {
161
+ if (!carousel)
162
+ return;
163
+ const snapList = carousel.scrollSnapList();
164
+ const indexes2 = snapList.map((_, i) => i);
165
+ setIndexes(indexes2);
166
+ }, [carousel]);
167
+ (0, import_utils.useUpdateEffect)(() => {
168
+ if (carousel) {
169
+ carousel.on("select", onSelect);
170
+ carousel.on("scroll", onScroll);
171
+ onScroll();
172
+ return () => {
173
+ carousel.off("select", onSelect);
174
+ carousel.off("scroll", onScroll);
175
+ };
176
+ }
177
+ }, [carousel, onScroll]);
178
+ const getContainerProps = (0, import_react.useCallback)(
179
+ (props = {}, ref = null) => ({
180
+ ...computedProps[0],
181
+ ...props,
182
+ ref,
183
+ onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
184
+ setIsMouseEnter(true);
185
+ }),
186
+ onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, () => {
187
+ setIsMouseEnter(false);
188
+ })
189
+ }),
190
+ [computedProps]
191
+ );
192
+ const getSlidesProps = (0, import_react.useCallback)(
193
+ (props = {}) => ({
194
+ ...computedProps[1],
195
+ ...props,
196
+ ref: carouselRef
197
+ }),
198
+ [computedProps, carouselRef]
199
+ );
200
+ return {
201
+ carousel,
202
+ children,
203
+ indexes,
204
+ selectedIndex,
205
+ orientation,
206
+ slideSize,
207
+ gap,
208
+ slidesToScroll,
209
+ includeGapInSize,
210
+ getContainerProps,
211
+ getSlidesProps
212
+ };
213
+ };
214
+ var useCarouselSlide = ({ index }) => {
215
+ const { selectedIndex, slidesToScroll } = useCarouselContext();
216
+ index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
217
+ const isSelected = index === selectedIndex;
218
+ const getSlideProps = (0, import_react.useCallback)(
219
+ (props = {}) => ({
220
+ ...props,
221
+ "data-index": index,
222
+ "data-selected": (0, import_utils.dataAttr)(isSelected)
223
+ }),
224
+ [isSelected, index]
225
+ );
226
+ return { getSlideProps };
227
+ };
228
+ var useCarouselControl = ({
229
+ operation,
230
+ ...rest
231
+ }) => {
232
+ var _a, _b;
233
+ const { carousel } = useCarouselContext();
234
+ const isPrev = operation === "prev";
235
+ const disabled = (_b = (_a = rest.disabled) != null ? _a : rest.isDisabled) != null ? _b : isPrev ? !(carousel == null ? void 0 : carousel.canScrollPrev()) : !(carousel == null ? void 0 : carousel.canScrollNext());
236
+ const onClick = (0, import_react.useCallback)(() => {
237
+ if (!carousel)
238
+ return;
239
+ if (isPrev) {
240
+ carousel.scrollPrev();
241
+ } else {
242
+ carousel.scrollNext();
243
+ }
244
+ }, [carousel, isPrev]);
245
+ const getControlProps = (0, import_react.useCallback)(
246
+ (props = {}, ref = null) => ({
247
+ ...props,
248
+ ref,
249
+ disabled,
250
+ onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
251
+ }),
252
+ [disabled, onClick]
253
+ );
254
+ return { getControlProps };
255
+ };
256
+ var useCarouselIndicators = () => {
257
+ const { selectedIndex, carousel, indexes } = useCarouselContext();
258
+ const onClick = (0, import_react.useCallback)(
259
+ (ev, index) => {
260
+ if (!carousel)
261
+ return;
262
+ ev.stopPropagation();
263
+ carousel.scrollTo(index);
264
+ },
265
+ [carousel]
266
+ );
267
+ const getIndicatorProps = (0, import_react.useCallback)(
268
+ ({ index, ...props }) => {
269
+ const isSelected = index === selectedIndex;
270
+ return {
271
+ "aria-label": `Go to ${index + 1} slide`,
272
+ ...props,
273
+ key: index,
274
+ "data-index": index,
275
+ "data-selected": (0, import_utils.dataAttr)(isSelected),
276
+ onClick: (0, import_utils.handlerAll)(props.onClick, (ev) => onClick(ev, index))
277
+ };
278
+ },
279
+ [onClick, selectedIndex]
280
+ );
281
+ return { indexes, getIndicatorProps };
282
+ };
283
+ // Annotate the CommonJS export names for ESM import in node:
284
+ 0 && (module.exports = {
285
+ CarouselProvider,
286
+ useCarousel,
287
+ useCarouselContext,
288
+ useCarouselControl,
289
+ useCarouselIndicators,
290
+ useCarouselSlide
291
+ });
292
+ //# sourceMappingURL=use-carousel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/use-carousel.ts"],"sourcesContent":["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 createContext,\n dataAttr,\n handlerAll,\n splitObject,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType } from \"embla-carousel-react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype CarouselContext = {\n carousel: EmblaCarouselType | 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?: \"start\" | \"center\" | \"end\" | number\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?: \"trimSnaps\" | \"keepSnaps\" | \"\"\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?: number\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 * Adjusts scroll speed when triggered by any of the methods.\n * Higher numbers enables faster scrolling.\n *\n * @default 10\n */\n speed?: 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\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 speed = 10,\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 = \"\",\n slideSize = \"100%\",\n includeGapInSize = true,\n onScrollProgress,\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 axis: isVertical ? \"y\" : \"x\",\n startIndex: defaultIndex,\n loop,\n align,\n slidesToScroll,\n draggable,\n dragFree,\n speed,\n inViewThreshold,\n skipSnaps,\n containScroll,\n })\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 speed,\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"],"mappings":"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","names":["useEmblaCarousel","index","indexes"]}
@@ -0,0 +1,18 @@
1
+ "use client"
2
+ import {
3
+ CarouselProvider,
4
+ useCarousel,
5
+ useCarouselContext,
6
+ useCarouselControl,
7
+ useCarouselIndicators,
8
+ useCarouselSlide
9
+ } from "./chunk-QQ2HS4J4.mjs";
10
+ export {
11
+ CarouselProvider,
12
+ useCarousel,
13
+ useCarouselContext,
14
+ useCarouselControl,
15
+ useCarouselIndicators,
16
+ useCarouselSlide
17
+ };
18
+ //# sourceMappingURL=use-carousel.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/carousel",
3
- "version": "1.0.28",
3
+ "version": "2.0.0-next-20240513035416",
4
4
  "description": "Yamada UI carousel component",
5
5
  "keywords": [
6
6
  "yamada",