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