@yamada-ui/carousel 1.0.28 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/carousel-control.d.mts +8 -0
  2. package/dist/carousel-control.d.ts +8 -0
  3. package/dist/carousel-control.js +158 -0
  4. package/dist/carousel-control.js.map +1 -0
  5. package/dist/carousel-control.mjs +11 -0
  6. package/dist/carousel-control.mjs.map +1 -0
  7. package/dist/carousel-indicators.d.mts +17 -0
  8. package/dist/carousel-indicators.d.ts +17 -0
  9. package/dist/carousel-indicators.js +141 -0
  10. package/dist/carousel-indicators.js.map +1 -0
  11. package/dist/carousel-indicators.mjs +9 -0
  12. package/dist/carousel-indicators.mjs.map +1 -0
  13. package/dist/carousel-slide.d.mts +17 -0
  14. package/dist/carousel-slide.d.ts +17 -0
  15. package/dist/carousel-slide.js +106 -0
  16. package/dist/carousel-slide.js.map +1 -0
  17. package/dist/carousel-slide.mjs +9 -0
  18. package/dist/carousel-slide.mjs.map +1 -0
  19. package/dist/carousel.d.mts +144 -0
  20. package/dist/carousel.d.ts +144 -0
  21. package/dist/carousel.js +599 -0
  22. package/dist/carousel.js.map +1 -0
  23. package/dist/carousel.mjs +12 -0
  24. package/dist/carousel.mjs.map +1 -0
  25. package/dist/chunk-ABN4VJ2X.mjs +171 -0
  26. package/dist/chunk-ABN4VJ2X.mjs.map +1 -0
  27. package/dist/chunk-DDY7Q2IV.mjs +87 -0
  28. package/dist/chunk-DDY7Q2IV.mjs.map +1 -0
  29. package/dist/chunk-QQ2HS4J4.mjs +260 -0
  30. package/dist/chunk-QQ2HS4J4.mjs.map +1 -0
  31. package/dist/chunk-SDWORTZY.mjs +72 -0
  32. package/dist/chunk-SDWORTZY.mjs.map +1 -0
  33. package/dist/chunk-VQX7S5CU.mjs +50 -0
  34. package/dist/chunk-VQX7S5CU.mjs.map +1 -0
  35. package/dist/index.d.mts +9 -0
  36. package/dist/index.d.ts +9 -0
  37. package/dist/index.js +609 -0
  38. package/dist/index.js.map +1 -0
  39. package/dist/index.mjs +23 -0
  40. package/dist/index.mjs.map +1 -0
  41. package/dist/use-carousel.d.mts +176 -0
  42. package/dist/use-carousel.d.ts +176 -0
  43. package/dist/use-carousel.js +292 -0
  44. package/dist/use-carousel.js.map +1 -0
  45. package/dist/use-carousel.mjs +18 -0
  46. package/dist/use-carousel.mjs.map +1 -0
  47. package/package.json +3 -3
@@ -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": "1.0.29",
4
4
  "description": "Yamada UI carousel component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -37,10 +37,10 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "embla-carousel-react": "^7.0.0",
40
- "@yamada-ui/button": "1.0.28",
41
40
  "@yamada-ui/core": "1.6.7",
42
- "@yamada-ui/icon": "1.0.25",
41
+ "@yamada-ui/button": "1.0.28",
43
42
  "@yamada-ui/use-controllable-state": "1.0.13",
43
+ "@yamada-ui/icon": "1.0.25",
44
44
  "@yamada-ui/use-token": "1.1.13",
45
45
  "@yamada-ui/use-value": "1.1.13",
46
46
  "@yamada-ui/utils": "1.2.0"