@mantine/carousel 5.0.0-alpha.6

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 (52) hide show
  1. package/README.md +19 -0
  2. package/cjs/Carousel.context.js +12 -0
  3. package/cjs/Carousel.context.js.map +1 -0
  4. package/cjs/Carousel.errors.js +10 -0
  5. package/cjs/Carousel.errors.js.map +1 -0
  6. package/cjs/Carousel.js +235 -0
  7. package/cjs/Carousel.js.map +1 -0
  8. package/cjs/Carousel.styles.js +102 -0
  9. package/cjs/Carousel.styles.js.map +1 -0
  10. package/cjs/CarouselSlide/CarouselSlide.js +68 -0
  11. package/cjs/CarouselSlide/CarouselSlide.js.map +1 -0
  12. package/cjs/CarouselSlide/CarouselSlide.styles.js +59 -0
  13. package/cjs/CarouselSlide/CarouselSlide.styles.js.map +1 -0
  14. package/cjs/get-chevron-rotation.js +13 -0
  15. package/cjs/get-chevron-rotation.js.map +1 -0
  16. package/cjs/index.js +10 -0
  17. package/cjs/index.js.map +1 -0
  18. package/esm/Carousel.context.js +7 -0
  19. package/esm/Carousel.context.js.map +1 -0
  20. package/esm/Carousel.errors.js +6 -0
  21. package/esm/Carousel.errors.js.map +1 -0
  22. package/esm/Carousel.js +225 -0
  23. package/esm/Carousel.js.map +1 -0
  24. package/esm/Carousel.styles.js +98 -0
  25. package/esm/Carousel.styles.js.map +1 -0
  26. package/esm/CarouselSlide/CarouselSlide.js +60 -0
  27. package/esm/CarouselSlide/CarouselSlide.js.map +1 -0
  28. package/esm/CarouselSlide/CarouselSlide.styles.js +55 -0
  29. package/esm/CarouselSlide/CarouselSlide.styles.js.map +1 -0
  30. package/esm/get-chevron-rotation.js +9 -0
  31. package/esm/get-chevron-rotation.js.map +1 -0
  32. package/esm/index.js +2 -0
  33. package/esm/index.js.map +1 -0
  34. package/lib/Carousel.context.d.ts +16 -0
  35. package/lib/Carousel.context.d.ts.map +1 -0
  36. package/lib/Carousel.d.ts +69 -0
  37. package/lib/Carousel.d.ts.map +1 -0
  38. package/lib/Carousel.errors.d.ts +4 -0
  39. package/lib/Carousel.errors.d.ts.map +1 -0
  40. package/lib/Carousel.styles.d.ts +15 -0
  41. package/lib/Carousel.styles.d.ts.map +1 -0
  42. package/lib/CarouselSlide/CarouselSlide.d.ts +14 -0
  43. package/lib/CarouselSlide/CarouselSlide.d.ts.map +1 -0
  44. package/lib/CarouselSlide/CarouselSlide.styles.d.ts +16 -0
  45. package/lib/CarouselSlide/CarouselSlide.styles.d.ts.map +1 -0
  46. package/lib/get-chevron-rotation.d.ts +9 -0
  47. package/lib/get-chevron-rotation.d.ts.map +1 -0
  48. package/lib/index.d.ts +4 -0
  49. package/lib/index.d.ts.map +1 -0
  50. package/lib/types.d.ts +11 -0
  51. package/lib/types.d.ts.map +1 -0
  52. package/package.json +33 -0
package/README.md ADDED
@@ -0,0 +1,19 @@
1
+ # Mantine carousel
2
+
3
+ Embla based carousel
4
+
5
+ [View documentation](https://mantine.dev/)
6
+
7
+ ## Installation
8
+
9
+ ```sh
10
+ # With yarn
11
+ yarn add @mantine/core @mantine/hooks @mantine/carousel
12
+
13
+ # With npm
14
+ npm install @mantine/core @mantine/hooks @mantine/carousel
15
+ ```
16
+
17
+ ## License
18
+
19
+ MIT
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var utils = require('@mantine/utils');
6
+ var Carousel_errors = require('./Carousel.errors.js');
7
+
8
+ const [CarouselProvider, useCarouselContext] = utils.createSafeContext(Carousel_errors.CAROUSEL_ERRORS.context);
9
+
10
+ exports.CarouselProvider = CarouselProvider;
11
+ exports.useCarouselContext = useCarouselContext;
12
+ //# sourceMappingURL=Carousel.context.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.context.js","sources":["../src/Carousel.context.ts"],"sourcesContent":["import { MantineNumberSize } from '@mantine/core';\nimport { createSafeContext } from '@mantine/utils';\nimport { CAROUSEL_ERRORS } from './Carousel.errors';\nimport { CarouselOrientation, Embla, CarouselBreakpoint } from './types';\n\ninterface CarouselContext {\n embla: Embla;\n slideSize: string | number;\n slideGap: MantineNumberSize;\n orientation: CarouselOrientation;\n includeGapInSize: boolean;\n breakpoints: CarouselBreakpoint[];\n}\n\nexport const [CarouselProvider, useCarouselContext] = createSafeContext<CarouselContext>(\n CAROUSEL_ERRORS.context\n);\n"],"names":["createSafeContext","CAROUSEL_ERRORS"],"mappings":";;;;;;;AAEY,MAAC,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,GAAGA,uBAAiB,CAACC,+BAAe,CAAC,OAAO;;;;;"}
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const CAROUSEL_ERRORS = {
6
+ context: "[@mantine/carousel] Carousel.Slide was rendered outside of Carousel context"
7
+ };
8
+
9
+ exports.CAROUSEL_ERRORS = CAROUSEL_ERRORS;
10
+ //# sourceMappingURL=Carousel.errors.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.errors.js","sources":["../src/Carousel.errors.ts"],"sourcesContent":["export const CAROUSEL_ERRORS = {\n context: '[@mantine/carousel] Carousel.Slide was rendered outside of Carousel context',\n};\n"],"names":[],"mappings":";;;;AAAY,MAAC,eAAe,GAAG;AAC/B,EAAE,OAAO,EAAE,6EAA6E;AACxF;;;;"}
@@ -0,0 +1,235 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var core = require('@mantine/core');
7
+ var useEmblaCarousel = require('embla-carousel-react');
8
+ var CarouselSlide = require('./CarouselSlide/CarouselSlide.js');
9
+ var Carousel_context = require('./Carousel.context.js');
10
+ var getChevronRotation = require('./get-chevron-rotation.js');
11
+ var Carousel_styles = require('./Carousel.styles.js');
12
+
13
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
14
+
15
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
+ var useEmblaCarousel__default = /*#__PURE__*/_interopDefaultLegacy(useEmblaCarousel);
17
+
18
+ var __defProp = Object.defineProperty;
19
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
20
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
21
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
22
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
23
+ var __spreadValues = (a, b) => {
24
+ for (var prop in b || (b = {}))
25
+ if (__hasOwnProp.call(b, prop))
26
+ __defNormalProp(a, prop, b[prop]);
27
+ if (__getOwnPropSymbols)
28
+ for (var prop of __getOwnPropSymbols(b)) {
29
+ if (__propIsEnum.call(b, prop))
30
+ __defNormalProp(a, prop, b[prop]);
31
+ }
32
+ return a;
33
+ };
34
+ var __objRest = (source, exclude) => {
35
+ var target = {};
36
+ for (var prop in source)
37
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
38
+ target[prop] = source[prop];
39
+ if (source != null && __getOwnPropSymbols)
40
+ for (var prop of __getOwnPropSymbols(source)) {
41
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
42
+ target[prop] = source[prop];
43
+ }
44
+ return target;
45
+ };
46
+ const defaultProps = {
47
+ controlSize: 26,
48
+ controlsOffset: "sm",
49
+ slideSize: "100%",
50
+ slideGap: 0,
51
+ orientation: "horizontal",
52
+ align: "center",
53
+ slidesToScroll: 1,
54
+ includeGapInSize: true,
55
+ draggable: true,
56
+ dragFree: false,
57
+ loop: false,
58
+ speed: 10,
59
+ initialSlide: 0,
60
+ inViewThreshold: 0,
61
+ withControls: true,
62
+ withIndicators: false
63
+ };
64
+ const _Carousel = React.forwardRef((props, ref) => {
65
+ const _a = core.useComponentDefaultProps("Carousel", defaultProps, props), {
66
+ children,
67
+ className,
68
+ getEmblaApi,
69
+ onNextSlide,
70
+ onPreviousSlide,
71
+ nextControlLabel,
72
+ previousControlLabel,
73
+ controlSize,
74
+ controlsOffset,
75
+ classNames,
76
+ styles,
77
+ unstyled,
78
+ slideSize,
79
+ slideGap,
80
+ orientation,
81
+ height,
82
+ align,
83
+ slidesToScroll,
84
+ includeGapInSize,
85
+ draggable,
86
+ dragFree,
87
+ loop,
88
+ speed,
89
+ initialSlide,
90
+ inViewThreshold,
91
+ withControls,
92
+ withIndicators,
93
+ plugins,
94
+ nextControlIcon,
95
+ previousControlIcon,
96
+ breakpoints
97
+ } = _a, others = __objRest(_a, [
98
+ "children",
99
+ "className",
100
+ "getEmblaApi",
101
+ "onNextSlide",
102
+ "onPreviousSlide",
103
+ "nextControlLabel",
104
+ "previousControlLabel",
105
+ "controlSize",
106
+ "controlsOffset",
107
+ "classNames",
108
+ "styles",
109
+ "unstyled",
110
+ "slideSize",
111
+ "slideGap",
112
+ "orientation",
113
+ "height",
114
+ "align",
115
+ "slidesToScroll",
116
+ "includeGapInSize",
117
+ "draggable",
118
+ "dragFree",
119
+ "loop",
120
+ "speed",
121
+ "initialSlide",
122
+ "inViewThreshold",
123
+ "withControls",
124
+ "withIndicators",
125
+ "plugins",
126
+ "nextControlIcon",
127
+ "previousControlIcon",
128
+ "breakpoints"
129
+ ]);
130
+ const { classes, cx, theme } = Carousel_styles['default']({ controlSize, controlsOffset, orientation, height }, { name: "Carousel", classNames, styles, unstyled });
131
+ const [emblaRefElement, embla] = useEmblaCarousel__default({
132
+ axis: orientation === "horizontal" ? "x" : "y",
133
+ direction: theme.dir,
134
+ startIndex: initialSlide,
135
+ loop,
136
+ align,
137
+ slidesToScroll,
138
+ draggable,
139
+ dragFree,
140
+ speed,
141
+ inViewThreshold
142
+ }, plugins);
143
+ const [selected, setSelected] = React.useState(0);
144
+ const [slidesCount, setSlidesCount] = React.useState(0);
145
+ const handleScroll = React.useCallback((index) => embla && embla.scrollTo(index), [embla]);
146
+ const handleSelect = React.useCallback(() => {
147
+ if (!embla)
148
+ return;
149
+ setSelected(embla.selectedScrollSnap());
150
+ }, [embla, setSelected]);
151
+ const handlePrevious = React.useCallback(() => {
152
+ embla == null ? void 0 : embla.scrollPrev();
153
+ onPreviousSlide == null ? void 0 : onPreviousSlide();
154
+ }, [embla]);
155
+ const handleNext = React.useCallback(() => {
156
+ embla == null ? void 0 : embla.scrollNext();
157
+ onNextSlide == null ? void 0 : onNextSlide();
158
+ }, [embla]);
159
+ React.useEffect(() => {
160
+ if (embla) {
161
+ getEmblaApi == null ? void 0 : getEmblaApi(embla);
162
+ handleSelect();
163
+ setSlidesCount(embla.scrollSnapList().length);
164
+ embla.on("select", handleSelect);
165
+ return () => {
166
+ embla.off("select", handleSelect);
167
+ };
168
+ }
169
+ return void 0;
170
+ }, [embla]);
171
+ const canScrollPrev = (embla == null ? void 0 : embla.canScrollPrev()) || false;
172
+ const canScrollNext = (embla == null ? void 0 : embla.canScrollNext()) || false;
173
+ const indicators = Array(slidesCount).fill(0).map((_, index) => /* @__PURE__ */ React__default.createElement(core.UnstyledButton, {
174
+ key: index,
175
+ "data-active": index === selected || void 0,
176
+ className: classes.indicator,
177
+ "aria-hidden": true,
178
+ tabIndex: -1,
179
+ onClick: () => handleScroll(index)
180
+ }));
181
+ return /* @__PURE__ */ React__default.createElement(core.StylesApiProvider, {
182
+ classNames,
183
+ styles,
184
+ unstyled
185
+ }, /* @__PURE__ */ React__default.createElement(Carousel_context.CarouselProvider, {
186
+ value: { slideGap, slideSize, embla, orientation, includeGapInSize, breakpoints }
187
+ }, /* @__PURE__ */ React__default.createElement(core.Box, __spreadValues({
188
+ className: cx(classes.root, className),
189
+ ref
190
+ }, others), /* @__PURE__ */ React__default.createElement("div", {
191
+ className: classes.viewport,
192
+ ref: emblaRefElement
193
+ }, /* @__PURE__ */ React__default.createElement("div", {
194
+ className: classes.container
195
+ }, children)), withIndicators && /* @__PURE__ */ React__default.createElement("div", {
196
+ className: classes.indicators
197
+ }, indicators), withControls && /* @__PURE__ */ React__default.createElement("div", {
198
+ className: classes.controls
199
+ }, /* @__PURE__ */ React__default.createElement(core.UnstyledButton, {
200
+ onClick: handlePrevious,
201
+ className: classes.control,
202
+ "aria-label": previousControlLabel,
203
+ "data-inactive": !canScrollPrev || void 0,
204
+ tabIndex: canScrollPrev ? 0 : -1
205
+ }, typeof previousControlIcon !== "undefined" ? previousControlIcon : /* @__PURE__ */ React__default.createElement(core.ChevronIcon, {
206
+ style: {
207
+ transform: `rotate(${getChevronRotation.getChevronRotation({
208
+ dir: theme.dir,
209
+ orientation,
210
+ direction: "previous"
211
+ })}deg)`
212
+ }
213
+ })), /* @__PURE__ */ React__default.createElement(core.UnstyledButton, {
214
+ onClick: handleNext,
215
+ className: classes.control,
216
+ "aria-label": nextControlLabel,
217
+ "data-inactive": !canScrollNext || void 0,
218
+ tabIndex: canScrollNext ? 0 : -1
219
+ }, typeof nextControlIcon !== "undefined" ? nextControlIcon : /* @__PURE__ */ React__default.createElement(core.ChevronIcon, {
220
+ style: {
221
+ transform: `rotate(${getChevronRotation.getChevronRotation({
222
+ dir: theme.dir,
223
+ orientation,
224
+ direction: "next"
225
+ })}deg)`
226
+ }
227
+ }))))));
228
+ });
229
+ _Carousel.Slide = CarouselSlide.CarouselSlide;
230
+ _Carousel.displayName = "@mantine/carousel/Carousel";
231
+ const Carousel = _Carousel;
232
+
233
+ exports.Carousel = Carousel;
234
+ exports._Carousel = _Carousel;
235
+ //# sourceMappingURL=Carousel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.js","sources":["../src/Carousel.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { forwardRef, useEffect, useCallback, useState } from 'react';\nimport {\n useComponentDefaultProps,\n Box,\n DefaultProps,\n UnstyledButton,\n ChevronIcon,\n MantineNumberSize,\n StylesApiProvider,\n Selectors,\n} from '@mantine/core';\nimport useEmblaCarousel, { EmblaPluginType } from 'embla-carousel-react';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { CarouselSlide, CarouselSlideStylesNames } from './CarouselSlide/CarouselSlide';\nimport { CarouselProvider } from './Carousel.context';\nimport { CarouselOrientation, Embla, CarouselBreakpoint } from './types';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport useStyles, { CarouselStylesParams } from './Carousel.styles';\n\nexport type CarouselStylesNames = CarouselSlideStylesNames | Selectors<typeof useStyles>;\n\nexport interface CarouselProps\n extends DefaultProps<CarouselStylesNames, CarouselStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** <Carousel.Slide /> components */\n children?: React.ReactNode;\n\n /** Called when user clicks next button */\n onNextSlide?(): void;\n\n /** Called when user clicks previous button */\n onPreviousSlide?(): void;\n\n /** Get embla API as ref */\n getEmblaApi?(embla: Embla): void;\n\n /** Next control aria-label */\n nextControlLabel?: string;\n\n /** Previous control aria-label */\n previousControlLabel?: string;\n\n /** Previous/next controls size in px */\n controlSize?: number;\n\n /** Key of theme.spacing or number to set space between next/previous control and carousel boundary */\n controlsOffset?: MantineNumberSize;\n\n /** Slide width, defaults to 100%, examples: 200px, 50% */\n slideSize?: string | number;\n\n /** Key of theme.spacing or number to set gap between slides in px */\n slideGap?: MantineNumberSize;\n\n /** Control slideSize and slideGap at different viewport sizes */\n breakpoints?: CarouselBreakpoint[];\n\n /** Carousel orientation, horizontal by default */\n orientation?: CarouselOrientation;\n\n /** Slides container height, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines how slides will be aligned relative to the container. Use number between 0-1 to align slides based on percentage, where 0.5 equals 50% */\n align?: 'start' | 'center' | 'end' | number;\n\n /** Number of slides that should be scrolled with next/previous buttons */\n slidesToScroll?: number;\n\n /** Determines whether gap should be treated as part of the slide size, true by default */\n includeGapInSize?: boolean;\n\n /** Determines whether carousel can be scrolled with mouse and touch interactions, true by default */\n draggable?: boolean;\n\n /** Determines whether momentum scrolling should be enabled, false by default */\n dragFree?: boolean;\n\n /** Enables infinite looping. Automatically falls back to false if slide content isn't enough to loop. */\n loop?: boolean;\n\n /** Adjusts scroll speed when triggered by any of the methods. Higher numbers enables faster scrolling. */\n speed?: number;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view. For example, 0.5 equals 50%. */\n inViewThreshold?: number;\n\n /** Determines whether next/previous controls should be displayed, true by default */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed, false by default */\n withIndicators?: boolean;\n\n /** An array of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of next control */\n nextControlIcon?: React.ReactNode;\n\n /** Previous control icon */\n previousControlIcon?: React.ReactNode;\n}\n\nconst defaultProps: Partial<CarouselProps> = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n align: 'center',\n slidesToScroll: 1,\n includeGapInSize: true,\n draggable: true,\n dragFree: false,\n loop: false,\n speed: 10,\n initialSlide: 0,\n inViewThreshold: 0,\n withControls: true,\n withIndicators: false,\n};\n\nexport const _Carousel = forwardRef<HTMLDivElement, CarouselProps>((props, ref) => {\n const {\n children,\n className,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n nextControlLabel,\n previousControlLabel,\n controlSize,\n controlsOffset,\n classNames,\n styles,\n unstyled,\n slideSize,\n slideGap,\n orientation,\n height,\n align,\n slidesToScroll,\n includeGapInSize,\n draggable,\n dragFree,\n loop,\n speed,\n initialSlide,\n inViewThreshold,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n breakpoints,\n ...others\n } = useComponentDefaultProps('Carousel', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { controlSize, controlsOffset, orientation, height },\n { name: 'Carousel', classNames, styles, unstyled }\n );\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: theme.dir,\n startIndex: initialSlide,\n loop,\n align,\n slidesToScroll,\n draggable,\n dragFree,\n speed,\n inViewThreshold,\n },\n plugins\n );\n\n const [selected, setSelected] = useState(0);\n const [slidesCount, setSlidesCount] = useState(0);\n\n const handleScroll = useCallback((index) => embla && embla.scrollTo(index), [embla]);\n\n const handleSelect = useCallback(() => {\n if (!embla) return;\n setSelected(embla.selectedScrollSnap());\n }, [embla, setSelected]);\n\n const handlePrevious = useCallback(() => {\n embla?.scrollPrev();\n onPreviousSlide?.();\n }, [embla]);\n\n const handleNext = useCallback(() => {\n embla?.scrollNext();\n onNextSlide?.();\n }, [embla]);\n\n useEffect(() => {\n if (embla) {\n getEmblaApi?.(embla);\n handleSelect();\n setSlidesCount(embla.scrollSnapList().length);\n embla.on('select', handleSelect);\n\n return () => {\n embla.off('select', handleSelect);\n };\n }\n\n return undefined;\n }, [embla]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n key={index}\n data-active={index === selected || undefined}\n className={classes.indicator}\n aria-hidden\n tabIndex={-1}\n onClick={() => handleScroll(index)}\n />\n ));\n\n return (\n <StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>\n <CarouselProvider\n value={{ slideGap, slideSize, embla, orientation, includeGapInSize, breakpoints }}\n >\n <Box className={cx(classes.root, className)} ref={ref} {...others}>\n <div className={classes.viewport} ref={emblaRefElement}>\n <div className={classes.container}>{children}</div>\n </div>\n\n {withIndicators && <div className={classes.indicators}>{indicators}</div>}\n\n {withControls && (\n <div className={classes.controls}>\n <UnstyledButton\n onClick={handlePrevious}\n className={classes.control}\n aria-label={previousControlLabel}\n data-inactive={!canScrollPrev || undefined}\n tabIndex={canScrollPrev ? 0 : -1}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <ChevronIcon\n style={{\n transform: `rotate(${getChevronRotation({\n dir: theme.dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n onClick={handleNext}\n className={classes.control}\n aria-label={nextControlLabel}\n data-inactive={!canScrollNext || undefined}\n tabIndex={canScrollNext ? 0 : -1}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <ChevronIcon\n style={{\n transform: `rotate(${getChevronRotation({\n dir: theme.dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n </Box>\n </CarouselProvider>\n </StylesApiProvider>\n );\n}) as any;\n\n_Carousel.Slide = CarouselSlide;\n_Carousel.displayName = '@mantine/carousel/Carousel';\n\nexport const Carousel: ForwardRefWithStaticComponents<\n CarouselProps,\n { Slide: typeof CarouselSlide }\n> = _Carousel;\n"],"names":["forwardRef","useComponentDefaultProps","useStyles","useEmblaCarousel","useState","useCallback","useEffect","React","UnstyledButton","StylesApiProvider","CarouselProvider","Box","ChevronIcon","getChevronRotation","CarouselSlide"],"mappings":"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"}
@@ -0,0 +1,102 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var core = require('@mantine/core');
6
+
7
+ var __defProp = Object.defineProperty;
8
+ var __defProps = Object.defineProperties;
9
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
10
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
11
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
12
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
13
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
14
+ var __spreadValues = (a, b) => {
15
+ for (var prop in b || (b = {}))
16
+ if (__hasOwnProp.call(b, prop))
17
+ __defNormalProp(a, prop, b[prop]);
18
+ if (__getOwnPropSymbols)
19
+ for (var prop of __getOwnPropSymbols(b)) {
20
+ if (__propIsEnum.call(b, prop))
21
+ __defNormalProp(a, prop, b[prop]);
22
+ }
23
+ return a;
24
+ };
25
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
26
+ var useStyles = core.createStyles((theme, { controlSize, controlsOffset, orientation, height }) => {
27
+ const horizontal = orientation === "horizontal";
28
+ return {
29
+ root: {
30
+ overflow: "hidden",
31
+ position: "relative"
32
+ },
33
+ container: {
34
+ display: "flex",
35
+ flexDirection: horizontal ? "row" : "column",
36
+ height
37
+ },
38
+ viewport: {},
39
+ controls: {
40
+ position: "absolute",
41
+ zIndex: 1,
42
+ left: horizontal ? 0 : `calc(50% - ${controlSize / 2}px)`,
43
+ right: horizontal ? 0 : void 0,
44
+ top: horizontal ? `calc(50% - ${controlSize / 2}px)` : 0,
45
+ bottom: horizontal ? void 0 : 0,
46
+ display: "flex",
47
+ flexDirection: horizontal ? "row" : "column",
48
+ alignItems: "center",
49
+ justifyContent: "space-between",
50
+ paddingLeft: horizontal ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing }) : void 0,
51
+ paddingRight: horizontal ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing }) : void 0,
52
+ paddingTop: !horizontal ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing }) : void 0,
53
+ paddingBottom: !horizontal ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing }) : void 0,
54
+ pointerEvents: "none"
55
+ },
56
+ control: __spreadProps(__spreadValues({
57
+ display: "flex",
58
+ justifyContent: "center",
59
+ alignItems: "center",
60
+ minWidth: controlSize,
61
+ minHeight: controlSize,
62
+ borderRadius: controlSize,
63
+ pointerEvents: "all",
64
+ backgroundColor: theme.white,
65
+ color: theme.black,
66
+ boxShadow: theme.shadows.md,
67
+ opacity: theme.colorScheme === "dark" ? 0.65 : 0.85,
68
+ border: `1px solid ${theme.colors.gray[3]}`,
69
+ transition: `opacity 150ms ${theme.transitionTimingFunction}`
70
+ }, theme.fn.hover({ opacity: 1 })), {
71
+ "&:active": theme.activeStyles
72
+ }),
73
+ indicators: {
74
+ position: "absolute",
75
+ bottom: horizontal ? theme.spacing.md : 0,
76
+ top: horizontal ? void 0 : 0,
77
+ left: horizontal ? 0 : void 0,
78
+ right: horizontal ? 0 : theme.spacing.md,
79
+ display: "flex",
80
+ flexDirection: horizontal ? "row" : "column",
81
+ justifyContent: "center",
82
+ gap: 8,
83
+ pointerEvents: "none"
84
+ },
85
+ indicator: {
86
+ pointerEvents: "all",
87
+ width: horizontal ? 25 : 5,
88
+ height: horizontal ? 5 : 25,
89
+ borderRadius: 1e4,
90
+ backgroundColor: theme.white,
91
+ boxShadow: theme.shadows.sm,
92
+ opacity: 0.6,
93
+ transition: `opacity 150ms ${theme.transitionTimingFunction}`,
94
+ "&[data-active]": {
95
+ opacity: 1
96
+ }
97
+ }
98
+ };
99
+ });
100
+
101
+ exports.default = useStyles;
102
+ //# sourceMappingURL=Carousel.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.styles.js","sources":["../src/Carousel.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/core';\n\nexport interface CarouselStylesParams {\n controlSize: number;\n controlsOffset: MantineNumberSize;\n orientation: 'vertical' | 'horizontal';\n height: React.CSSProperties['height'];\n}\n\nexport default createStyles(\n (theme, { controlSize, controlsOffset, orientation, height }: CarouselStylesParams) => {\n const horizontal = orientation === 'horizontal';\n return {\n root: {\n overflow: 'hidden',\n position: 'relative',\n },\n\n container: {\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n height,\n },\n\n viewport: {},\n\n controls: {\n position: 'absolute',\n zIndex: 1,\n left: horizontal ? 0 : `calc(50% - ${controlSize / 2}px)`,\n right: horizontal ? 0 : undefined,\n top: horizontal ? `calc(50% - ${controlSize / 2}px)` : 0,\n bottom: horizontal ? undefined : 0,\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n alignItems: 'center',\n justifyContent: 'space-between',\n paddingLeft: horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingRight: horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingTop: !horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingBottom: !horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n pointerEvents: 'none',\n },\n\n control: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n minWidth: controlSize,\n minHeight: controlSize,\n borderRadius: controlSize,\n pointerEvents: 'all',\n backgroundColor: theme.white,\n color: theme.black,\n boxShadow: theme.shadows.md,\n opacity: theme.colorScheme === 'dark' ? 0.65 : 0.85,\n border: `1px solid ${theme.colors.gray[3]}`,\n transition: `opacity 150ms ${theme.transitionTimingFunction}`,\n ...theme.fn.hover({ opacity: 1 }),\n '&:active': theme.activeStyles,\n },\n\n indicators: {\n position: 'absolute',\n bottom: horizontal ? theme.spacing.md : 0,\n top: horizontal ? undefined : 0,\n left: horizontal ? 0 : undefined,\n right: horizontal ? 0 : theme.spacing.md,\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n justifyContent: 'center',\n gap: 8,\n pointerEvents: 'none',\n },\n\n indicator: {\n pointerEvents: 'all',\n width: horizontal ? 25 : 5,\n height: horizontal ? 5 : 25,\n borderRadius: 10000,\n backgroundColor: theme.white,\n boxShadow: theme.shadows.sm,\n opacity: 0.6,\n transition: `opacity 150ms ${theme.transitionTimingFunction}`,\n\n '&[data-active]': {\n opacity: 1,\n },\n },\n };\n }\n);\n"],"names":["createStyles"],"mappings":"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"}
@@ -0,0 +1,68 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var core = require('@mantine/core');
7
+ var Carousel_context = require('../Carousel.context.js');
8
+ var CarouselSlide_styles = require('./CarouselSlide.styles.js');
9
+
10
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
11
+
12
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
+
14
+ var __defProp = Object.defineProperty;
15
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
16
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
17
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
18
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
19
+ var __spreadValues = (a, b) => {
20
+ for (var prop in b || (b = {}))
21
+ if (__hasOwnProp.call(b, prop))
22
+ __defNormalProp(a, prop, b[prop]);
23
+ if (__getOwnPropSymbols)
24
+ for (var prop of __getOwnPropSymbols(b)) {
25
+ if (__propIsEnum.call(b, prop))
26
+ __defNormalProp(a, prop, b[prop]);
27
+ }
28
+ return a;
29
+ };
30
+ var __objRest = (source, exclude) => {
31
+ var target = {};
32
+ for (var prop in source)
33
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
34
+ target[prop] = source[prop];
35
+ if (source != null && __getOwnPropSymbols)
36
+ for (var prop of __getOwnPropSymbols(source)) {
37
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
38
+ target[prop] = source[prop];
39
+ }
40
+ return target;
41
+ };
42
+ const CarouselSlide = React.forwardRef((_a, ref) => {
43
+ var _b = _a, { children, className, size, gap, onClick } = _b, others = __objRest(_b, ["children", "className", "size", "gap", "onClick"]);
44
+ const ctx = Carousel_context.useCarouselContext();
45
+ const { classNames, styles, unstyled } = core.useContextStylesApi();
46
+ const { classes, cx } = CarouselSlide_styles['default']({
47
+ gap: typeof gap === "undefined" ? ctx.slideGap : gap,
48
+ size: typeof size === "undefined" ? ctx.slideSize : size,
49
+ orientation: ctx.orientation,
50
+ includeGapInSize: ctx.includeGapInSize,
51
+ breakpoints: ctx.breakpoints
52
+ }, { name: "Carousel", classNames, styles, unstyled });
53
+ const handleClick = React.useCallback((event) => {
54
+ var _a2;
55
+ if ((_a2 = ctx.embla) == null ? void 0 : _a2.clickAllowed()) {
56
+ onClick == null ? void 0 : onClick(event);
57
+ }
58
+ }, [ctx.embla]);
59
+ return /* @__PURE__ */ React__default.createElement(core.Box, __spreadValues({
60
+ className: cx(classes.slide, className),
61
+ ref,
62
+ onClick: handleClick
63
+ }, others), children);
64
+ });
65
+ CarouselSlide.displayName = "@mantine/carousel/CarouselSlide";
66
+
67
+ exports.CarouselSlide = CarouselSlide;
68
+ //# sourceMappingURL=CarouselSlide.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CarouselSlide.js","sources":["../../src/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport {\n Box,\n DefaultProps,\n Selectors,\n MantineNumberSize,\n useContextStylesApi,\n} from '@mantine/core';\nimport { useCarouselContext } from '../Carousel.context';\nimport useStyles from './CarouselSlide.styles';\n\nexport type CarouselSlideStylesNames = Selectors<typeof useStyles>;\n\nexport interface CarouselSlideProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n /** Slide content */\n children?: React.ReactNode;\n\n /** Slide width, defaults to 100%, examples: 200px, 50% */\n size?: string | number;\n\n /** Key of theme.spacing or number to set gap between slides in px */\n gap?: MantineNumberSize;\n}\n\nexport const CarouselSlide = forwardRef<HTMLDivElement, CarouselSlideProps>(\n ({ children, className, size, gap, onClick, ...others }, ref) => {\n const ctx = useCarouselContext();\n const { classNames, styles, unstyled } = useContextStylesApi();\n const { classes, cx } = useStyles(\n {\n gap: typeof gap === 'undefined' ? ctx.slideGap : gap,\n size: typeof size === 'undefined' ? ctx.slideSize : size,\n orientation: ctx.orientation,\n includeGapInSize: ctx.includeGapInSize,\n breakpoints: ctx.breakpoints,\n },\n { name: 'Carousel', classNames, styles, unstyled }\n );\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (ctx.embla?.clickAllowed()) {\n onClick?.(event);\n }\n },\n [ctx.embla]\n );\n\n return (\n <Box className={cx(classes.slide, className)} ref={ref} onClick={handleClick} {...others}>\n {children}\n </Box>\n );\n }\n);\n\nCarouselSlide.displayName = '@mantine/carousel/CarouselSlide';\n"],"names":["forwardRef","useCarouselContext","useContextStylesApi","useStyles","useCallback","React","Box"],"mappings":"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"}
@@ -0,0 +1,59 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var core = require('@mantine/core');
6
+
7
+ var __defProp = Object.defineProperty;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var useStyles = core.createStyles((theme, { size, gap, orientation, includeGapInSize, breakpoints = [] }) => {
24
+ const slideBreakpoints = core.getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {
25
+ const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
26
+ const breakpointSize = theme.fn.size({
27
+ size: property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth,
28
+ sizes: theme.breakpoints
29
+ });
30
+ const breakpointGap = typeof breakpoint.slideGap === "undefined" ? gap : breakpoint.slideGap;
31
+ acc[`@media (${property}: ${breakpointSize + (property === "max-width" ? 0 : 1)}px)`] = {
32
+ flex: `0 0 calc(${typeof breakpoint.slideSize === "number" ? `${breakpoint.slideSize}px` : breakpoint.slideSize} - ${includeGapInSize ? theme.fn.size({
33
+ size: breakpointGap,
34
+ sizes: theme.spacing
35
+ }) / 2 : 0}px)`,
36
+ [orientation === "horizontal" ? "marginRight" : "marginBottom"]: theme.fn.size({
37
+ size: breakpointGap,
38
+ sizes: theme.spacing
39
+ })
40
+ };
41
+ return acc;
42
+ }, {});
43
+ return {
44
+ slide: __spreadValues({
45
+ position: "relative",
46
+ flex: `0 0 calc(${typeof size === "number" ? `${size}px` : size} - ${includeGapInSize ? theme.fn.size({
47
+ size: gap,
48
+ sizes: theme.spacing
49
+ }) / 2 : 0}px)`,
50
+ [orientation === "horizontal" ? "marginRight" : "marginBottom"]: theme.fn.size({
51
+ size: gap,
52
+ sizes: theme.spacing
53
+ })
54
+ }, slideBreakpoints)
55
+ };
56
+ });
57
+
58
+ exports.default = useStyles;
59
+ //# sourceMappingURL=CarouselSlide.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CarouselSlide.styles.js","sources":["../../src/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, getSortedBreakpoints } from '@mantine/core';\nimport { CarouselOrientation, CarouselBreakpoint } from '../types';\n\nexport interface CarouselSlideStylesParams {\n size: string | number;\n gap: MantineNumberSize;\n orientation: CarouselOrientation;\n includeGapInSize: boolean;\n breakpoints: CarouselBreakpoint[];\n}\n\nexport default createStyles(\n (\n theme,\n { size, gap, orientation, includeGapInSize, breakpoints = [] }: CarouselSlideStylesParams\n ) => {\n const slideBreakpoints = getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {\n const property = 'maxWidth' in breakpoint ? 'max-width' : 'min-width';\n const breakpointSize = theme.fn.size({\n size: property === 'max-width' ? breakpoint.maxWidth : breakpoint.minWidth,\n sizes: theme.breakpoints,\n });\n\n const breakpointGap = typeof breakpoint.slideGap === 'undefined' ? gap : breakpoint.slideGap;\n\n acc[`@media (${property}: ${breakpointSize + (property === 'max-width' ? 0 : 1)}px)`] = {\n flex: `0 0 calc(${\n typeof breakpoint.slideSize === 'number'\n ? `${breakpoint.slideSize}px`\n : breakpoint.slideSize\n } - ${\n includeGapInSize\n ? theme.fn.size({\n size: breakpointGap,\n sizes: theme.spacing,\n }) / 2\n : 0\n }px)`,\n\n [orientation === 'horizontal' ? 'marginRight' : 'marginBottom']: theme.fn.size({\n size: breakpointGap,\n sizes: theme.spacing,\n }),\n };\n\n return acc;\n }, {});\n\n return {\n slide: {\n position: 'relative',\n flex: `0 0 calc(${typeof size === 'number' ? `${size}px` : size} - ${\n includeGapInSize\n ? theme.fn.size({\n size: gap,\n sizes: theme.spacing,\n }) / 2\n : 0\n }px)`,\n [orientation === 'horizontal' ? 'marginRight' : 'marginBottom']: theme.fn.size({\n size: gap,\n sizes: theme.spacing,\n }),\n\n ...slideBreakpoints,\n },\n };\n }\n);\n"],"names":["createStyles","getSortedBreakpoints"],"mappings":"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"}
@@ -0,0 +1,13 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ function getChevronRotation({ dir, orientation, direction }) {
6
+ if (direction === "previous") {
7
+ return orientation === "horizontal" ? 90 * (dir === "ltr" ? 1 : -1) : -180;
8
+ }
9
+ return orientation === "horizontal" ? 90 * (dir === "ltr" ? -1 : 1) : 0;
10
+ }
11
+
12
+ exports.getChevronRotation = getChevronRotation;
13
+ //# sourceMappingURL=get-chevron-rotation.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-chevron-rotation.js","sources":["../src/get-chevron-rotation.ts"],"sourcesContent":["import { CarouselOrientation } from './types';\n\ninterface Options {\n dir: 'rtl' | 'ltr';\n orientation: CarouselOrientation;\n direction: 'next' | 'previous';\n}\n\nexport function getChevronRotation({ dir, orientation, direction }: Options) {\n if (direction === 'previous') {\n return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? 1 : -1) : -180;\n }\n\n return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? -1 : 1) : 0;\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,kBAAkB,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE;AACpE,EAAE,IAAI,SAAS,KAAK,UAAU,EAAE;AAChC,IAAI,OAAO,WAAW,KAAK,YAAY,GAAG,EAAE,IAAI,GAAG,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;AAC/E,GAAG;AACH,EAAE,OAAO,WAAW,KAAK,YAAY,GAAG,EAAE,IAAI,GAAG,KAAK,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1E;;;;"}
package/cjs/index.js ADDED
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var Carousel = require('./Carousel.js');
6
+
7
+
8
+
9
+ exports.Carousel = Carousel.Carousel;
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -0,0 +1,7 @@
1
+ import { createSafeContext } from '@mantine/utils';
2
+ import { CAROUSEL_ERRORS } from './Carousel.errors.js';
3
+
4
+ const [CarouselProvider, useCarouselContext] = createSafeContext(CAROUSEL_ERRORS.context);
5
+
6
+ export { CarouselProvider, useCarouselContext };
7
+ //# sourceMappingURL=Carousel.context.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.context.js","sources":["../src/Carousel.context.ts"],"sourcesContent":["import { MantineNumberSize } from '@mantine/core';\nimport { createSafeContext } from '@mantine/utils';\nimport { CAROUSEL_ERRORS } from './Carousel.errors';\nimport { CarouselOrientation, Embla, CarouselBreakpoint } from './types';\n\ninterface CarouselContext {\n embla: Embla;\n slideSize: string | number;\n slideGap: MantineNumberSize;\n orientation: CarouselOrientation;\n includeGapInSize: boolean;\n breakpoints: CarouselBreakpoint[];\n}\n\nexport const [CarouselProvider, useCarouselContext] = createSafeContext<CarouselContext>(\n CAROUSEL_ERRORS.context\n);\n"],"names":[],"mappings":";;;AAEY,MAAC,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,GAAG,iBAAiB,CAAC,eAAe,CAAC,OAAO;;;;"}