@mantine/carousel 9.1.1 → 9.2.1
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/cjs/Carousel.cjs.map +1 -1
- package/cjs/Carousel.context.cjs.map +1 -1
- package/cjs/CarouselSlide/CarouselSlide.cjs.map +1 -1
- package/cjs/CarouselVariables/CarouselVariables.cjs.map +1 -1
- package/cjs/get-chevron-rotation.cjs.map +1 -1
- package/esm/Carousel.context.mjs.map +1 -1
- package/esm/Carousel.mjs.map +1 -1
- package/esm/CarouselSlide/CarouselSlide.mjs.map +1 -1
- package/esm/CarouselVariables/CarouselVariables.mjs.map +1 -1
- package/esm/get-chevron-rotation.mjs.map +1 -1
- package/package.json +5 -5
package/cjs/Carousel.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.cjs","names":["Children","UnstyledButton","CarouselProvider","CarouselContainerVariables","CarouselVariables","Box","VisuallyHidden","AccordionChevron","getChevronRotation","classes","CarouselSlide"],"sources":["../src/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useState } from 'react';\nimport type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n AccordionChevron,\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n rem,\n StyleProp,\n StylesApiProps,\n UnstyledButton,\n useDirection,\n useProps,\n useRandomClassName,\n useStyles,\n VisuallyHidden,\n} from '@mantine/core';\nimport { clamp, useId } from '@mantine/hooks';\nimport { CarouselProvider, type CarouselContextValue } from './Carousel.context';\nimport { CarouselSlide } from './CarouselSlide/CarouselSlide';\nimport {\n CarouselContainerVariables,\n CarouselVariables,\n} from './CarouselVariables/CarouselVariables';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport classes from './Carousel.module.css';\n\nexport type CarouselStylesNames =\n | 'slide'\n | 'root'\n | 'viewport'\n | 'container'\n | 'controls'\n | 'control'\n | 'indicators'\n | 'indicator';\n\nexport type CarouselCssVariables = {\n root: '--carousel-height' | '--carousel-control-size' | '--carousel-controls-offset';\n};\n\nexport interface CarouselProps\n extends BoxProps, StylesApiProps<CarouselFactory>, ElementProps<'div'> {\n /** Options passed down to embla carousel */\n emblaOptions?: EmblaOptionsType;\n\n /** `Carousel.Slide` components */\n children?: React.ReactNode;\n\n /** Called when next slide is shown */\n onNextSlide?: () => void;\n\n /** Called when previous slider is shown */\n onPreviousSlide?: () => void;\n\n /** Called with slide index when slide changes */\n onSlideChange?: (index: number) => void;\n\n /** Get embla API as ref */\n getEmblaApi?: (embla: EmblaCarouselType) => void;\n\n /** Props passed down to next control */\n nextControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed down to previous control */\n previousControlProps?: React.ComponentProps<'button'>;\n\n /** Controls size of the next and previous controls @default 26 */\n controlSize?: React.CSSProperties['width'];\n\n /** Controls position of the next and previous controls, key of `theme.spacing` or any valid CSS value @default 'sm' */\n controlsOffset?: MantineSpacing;\n\n /** Controls slide width based on viewport width @default '100%' */\n slideSize?: StyleProp<string | number>;\n\n /** Key of theme.spacing or number to set gap between slides */\n slideGap?: StyleProp<MantineSpacing>;\n\n /** Carousel orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Determines type of queries used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Slides container `height`, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines whether gap between slides should be treated as part of the slide size @default true */\n includeGapInSize?: boolean;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Determines whether next/previous controls should be displayed @default true */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed @default false */\n withIndicators?: boolean;\n\n /** A list of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of the next control */\n nextControlIcon?: React.ReactNode;\n\n /** Icon of the previous control */\n previousControlIcon?: React.ReactNode;\n\n /** Determines whether arrow key should switch slides @default true */\n withKeyboardEvents?: boolean;\n\n /** Function to get props for indicator button */\n getIndicatorProps?: (index: number) => ElementProps<'button'> & DataAttributes;\n}\n\nexport type CarouselFactory = Factory<{\n props: CarouselProps;\n ref: HTMLDivElement;\n stylesNames: CarouselStylesNames;\n vars: CarouselCssVariables;\n staticComponents: {\n Slide: typeof CarouselSlide;\n };\n}>;\n\nconst defaultProps = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n} satisfies Partial<CarouselProps>;\n\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n};\n\nconst varsResolver = createVarsResolver<CarouselFactory>(\n (_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n })\n);\n\nexport const Carousel = factory<CarouselFactory>((_props) => {\n const props = useProps('Carousel', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n onSlideChange,\n nextControlProps,\n previousControlProps,\n controlSize,\n controlsOffset,\n slideSize,\n slideGap,\n orientation,\n height,\n includeGapInSize,\n draggable,\n initialSlide,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n withKeyboardEvents,\n mod,\n type,\n emblaOptions,\n attributes,\n getIndicatorProps,\n id,\n ...others\n } = props;\n\n const getStyles = useStyles<CarouselFactory>({\n name: 'Carousel',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _id = useId(id);\n\n const responsiveClassName = useRandomClassName();\n const { dir } = useDirection();\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: orientation === 'horizontal' ? dir : undefined,\n startIndex: initialSlide,\n ...defaultEmblaOptions,\n ...emblaOptions,\n },\n plugins\n );\n\n const [selected, setSelected] = useState(0);\n const [slidesCount, setSlidesCount] = useState(0);\n\n const handleScroll = useCallback((index: number) => embla && embla.scrollTo(index), [embla]);\n\n const handleSelect = useCallback(() => {\n if (!embla) {\n return;\n }\n const slide = embla.selectedScrollSnap();\n setSelected(slide);\n slide !== selected && onSlideChange?.(slide);\n }, [embla, setSelected, onSlideChange, selected]);\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 const handleKeydown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (withKeyboardEvents) {\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n handleNext();\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n handlePrevious();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n embla?.scrollTo(0);\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n embla?.scrollTo(embla.scrollSnapList().length - 1);\n }\n }\n },\n [embla, handleNext, handlePrevious]\n );\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, emblaOptions?.slidesToScroll, handleSelect]);\n\n useEffect(() => {\n if (embla) {\n embla.reInit();\n setSlidesCount(embla.scrollSnapList().length);\n setSelected((currentSelected) =>\n clamp(currentSelected, 0, Children.toArray(children).length - 1)\n );\n }\n }, [Children.toArray(children).length, emblaOptions?.slidesToScroll]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const handleIndicatorKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n const isHorizontal = orientation === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = index < slidesCount - 1 ? index + 1 : 0;\n handleScroll(nextIndex);\n const nextIndicator = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement;\n nextIndicator?.focus();\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = index > 0 ? index - 1 : slidesCount - 1;\n handleScroll(prevIndex);\n const prevIndicator = event.currentTarget.parentElement?.children[prevIndex] as HTMLElement;\n prevIndicator?.focus();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n handleScroll(0);\n const firstIndicator = event.currentTarget.parentElement?.children[0] as HTMLElement;\n firstIndicator?.focus();\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n handleScroll(slidesCount - 1);\n const lastIndicator = event.currentTarget.parentElement?.children[\n slidesCount - 1\n ] as HTMLElement;\n lastIndicator?.focus();\n }\n },\n [orientation, slidesCount, handleScroll]\n );\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n {...getStyles('indicator')}\n key={index}\n role=\"tab\"\n aria-label={`Go to slide ${index + 1}`}\n aria-selected={index === selected}\n tabIndex={index === selected ? 0 : -1}\n data-active={index === selected || undefined}\n onClick={() => handleScroll(index)}\n onKeyDown={(event) => handleIndicatorKeyDown(event, index)}\n data-orientation={orientation}\n onMouseDown={(event) => event.preventDefault()}\n {...getIndicatorProps?.(index)}\n />\n ));\n\n return (\n <CarouselProvider value={{ getStyles, orientation }}>\n {type === 'container' ? (\n <CarouselContainerVariables {...props} selector={`.${responsiveClassName}`} />\n ) : (\n <CarouselVariables {...props} selector={`.${responsiveClassName}`} />\n )}\n\n <Box\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n id={_id}\n mod={[{ orientation, 'include-gap-in-size': includeGapInSize }, mod]}\n onKeyDownCapture={handleKeydown}\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {slidesCount > 0 && `Slide ${selected + 1} of ${slidesCount}`}\n </VisuallyHidden>\n\n {withControls && (\n <div {...getStyles('controls')} data-orientation={orientation}>\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Previous slide\"\n aria-disabled={!canScrollPrev}\n data-inactive={!canScrollPrev || undefined}\n data-type=\"previous\"\n tabIndex={canScrollPrev ? 0 : -1}\n {...previousControlProps}\n {...getStyles('control', {\n className: previousControlProps?.className,\n style: previousControlProps?.style,\n })}\n onClick={(event) => {\n handlePrevious();\n previousControlProps?.onClick?.(event);\n }}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Next slide\"\n aria-disabled={!canScrollNext}\n data-inactive={!canScrollNext || undefined}\n data-type=\"next\"\n tabIndex={canScrollNext ? 0 : -1}\n {...getStyles('control', {\n className: nextControlProps?.className,\n style: nextControlProps?.style,\n })}\n {...nextControlProps}\n onClick={(event) => {\n handleNext();\n nextControlProps?.onClick?.(event);\n }}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n\n <div {...getStyles('viewport')} ref={emblaRefElement} data-type={type}>\n <div\n {...getStyles('container', { className: responsiveClassName })}\n data-orientation={orientation}\n >\n {children}\n </div>\n </div>\n\n {withIndicators && (\n <div\n {...getStyles('indicators')}\n role=\"tablist\"\n aria-label=\"Slides\"\n data-orientation={orientation}\n >\n {indicators}\n </div>\n )}\n </Box>\n </CarouselProvider>\n );\n});\n\nCarousel.classes = classes;\nCarousel.varsResolver = varsResolver;\nCarousel.displayName = '@mantine/carousel/Carousel';\nCarousel.Slide = CarouselSlide;\n\nexport namespace Carousel {\n export type Props = CarouselProps;\n export type CssVariables = CarouselCssVariables;\n export type Factory = CarouselFactory;\n export type StylesNames = CarouselStylesNames;\n export type ContextValue = CarouselContextValue;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.cjs","names":["Children","UnstyledButton","CarouselProvider","CarouselContainerVariables","CarouselVariables","Box","VisuallyHidden","AccordionChevron","getChevronRotation","classes","CarouselSlide"],"sources":["../src/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useState } from 'react';\nimport type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n AccordionChevron,\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n rem,\n StyleProp,\n StylesApiProps,\n UnstyledButton,\n useDirection,\n useProps,\n useRandomClassName,\n useStyles,\n VisuallyHidden,\n} from '@mantine/core';\nimport { clamp, useId } from '@mantine/hooks';\nimport { CarouselProvider, type CarouselContextValue } from './Carousel.context';\nimport { CarouselSlide } from './CarouselSlide/CarouselSlide';\nimport {\n CarouselContainerVariables,\n CarouselVariables,\n} from './CarouselVariables/CarouselVariables';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport classes from './Carousel.module.css';\n\nexport type CarouselStylesNames =\n | 'slide'\n | 'root'\n | 'viewport'\n | 'container'\n | 'controls'\n | 'control'\n | 'indicators'\n | 'indicator';\n\nexport type CarouselCssVariables = {\n root: '--carousel-height' | '--carousel-control-size' | '--carousel-controls-offset';\n};\n\nexport interface CarouselProps\n extends BoxProps, StylesApiProps<CarouselFactory>, ElementProps<'div'> {\n /** Options passed down to embla carousel */\n emblaOptions?: EmblaOptionsType;\n\n /** `Carousel.Slide` components */\n children?: React.ReactNode;\n\n /** Called when next slide is shown */\n onNextSlide?: () => void;\n\n /** Called when previous slider is shown */\n onPreviousSlide?: () => void;\n\n /** Called with slide index when slide changes */\n onSlideChange?: (index: number) => void;\n\n /** Get embla API as ref */\n getEmblaApi?: (embla: EmblaCarouselType) => void;\n\n /** Props passed down to next control */\n nextControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed down to previous control */\n previousControlProps?: React.ComponentProps<'button'>;\n\n /** Controls size of the next and previous controls @default 26 */\n controlSize?: React.CSSProperties['width'];\n\n /** Controls position of the next and previous controls, key of `theme.spacing` or any valid CSS value @default 'sm' */\n controlsOffset?: MantineSpacing;\n\n /** Controls slide width based on viewport width @default '100%' */\n slideSize?: StyleProp<string | number>;\n\n /** Key of theme.spacing or number to set gap between slides */\n slideGap?: StyleProp<MantineSpacing>;\n\n /** Carousel orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Determines type of queries used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Slides container `height`, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines whether gap between slides should be treated as part of the slide size @default true */\n includeGapInSize?: boolean;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Determines whether next/previous controls should be displayed @default true */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed @default false */\n withIndicators?: boolean;\n\n /** A list of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of the next control */\n nextControlIcon?: React.ReactNode;\n\n /** Icon of the previous control */\n previousControlIcon?: React.ReactNode;\n\n /** Determines whether arrow key should switch slides @default true */\n withKeyboardEvents?: boolean;\n\n /** Function to get props for indicator button */\n getIndicatorProps?: (index: number) => ElementProps<'button'> & DataAttributes;\n}\n\nexport type CarouselFactory = Factory<{\n props: CarouselProps;\n ref: HTMLDivElement;\n stylesNames: CarouselStylesNames;\n vars: CarouselCssVariables;\n staticComponents: {\n Slide: typeof CarouselSlide;\n };\n}>;\n\nconst defaultProps = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n} satisfies Partial<CarouselProps>;\n\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n};\n\nconst varsResolver = createVarsResolver<CarouselFactory>(\n (_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n })\n);\n\nexport const Carousel = factory<CarouselFactory>((_props) => {\n const props = useProps('Carousel', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n onSlideChange,\n nextControlProps,\n previousControlProps,\n controlSize,\n controlsOffset,\n slideSize,\n slideGap,\n orientation,\n height,\n includeGapInSize,\n draggable,\n initialSlide,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n withKeyboardEvents,\n mod,\n type,\n emblaOptions,\n attributes,\n getIndicatorProps,\n id,\n ...others\n } = props;\n\n const getStyles = useStyles<CarouselFactory>({\n name: 'Carousel',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _id = useId(id);\n\n const responsiveClassName = useRandomClassName();\n const { dir } = useDirection();\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: orientation === 'horizontal' ? dir : undefined,\n startIndex: initialSlide,\n ...defaultEmblaOptions,\n ...emblaOptions,\n },\n plugins\n );\n\n const [selected, setSelected] = useState(0);\n const [slidesCount, setSlidesCount] = useState(0);\n\n const handleScroll = useCallback((index: number) => embla && embla.scrollTo(index), [embla]);\n\n const handleSelect = useCallback(() => {\n if (!embla) {\n return;\n }\n const slide = embla.selectedScrollSnap();\n setSelected(slide);\n slide !== selected && onSlideChange?.(slide);\n }, [embla, setSelected, onSlideChange, selected]);\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 const handleKeydown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (withKeyboardEvents) {\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n handleNext();\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n handlePrevious();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n embla?.scrollTo(0);\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n embla?.scrollTo(embla.scrollSnapList().length - 1);\n }\n }\n },\n [embla, handleNext, handlePrevious]\n );\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, emblaOptions?.slidesToScroll, handleSelect]);\n\n useEffect(() => {\n if (embla) {\n embla.reInit();\n setSlidesCount(embla.scrollSnapList().length);\n setSelected((currentSelected) =>\n clamp(currentSelected, 0, Children.toArray(children).length - 1)\n );\n }\n }, [Children.toArray(children).length, emblaOptions?.slidesToScroll]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const handleIndicatorKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n const isHorizontal = orientation === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = index < slidesCount - 1 ? index + 1 : 0;\n handleScroll(nextIndex);\n const nextIndicator = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement;\n nextIndicator?.focus();\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = index > 0 ? index - 1 : slidesCount - 1;\n handleScroll(prevIndex);\n const prevIndicator = event.currentTarget.parentElement?.children[prevIndex] as HTMLElement;\n prevIndicator?.focus();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n handleScroll(0);\n const firstIndicator = event.currentTarget.parentElement?.children[0] as HTMLElement;\n firstIndicator?.focus();\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n handleScroll(slidesCount - 1);\n const lastIndicator = event.currentTarget.parentElement?.children[\n slidesCount - 1\n ] as HTMLElement;\n lastIndicator?.focus();\n }\n },\n [orientation, slidesCount, handleScroll]\n );\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n {...getStyles('indicator')}\n key={index}\n role=\"tab\"\n aria-label={`Go to slide ${index + 1}`}\n aria-selected={index === selected}\n tabIndex={index === selected ? 0 : -1}\n data-active={index === selected || undefined}\n onClick={() => handleScroll(index)}\n onKeyDown={(event) => handleIndicatorKeyDown(event, index)}\n data-orientation={orientation}\n onMouseDown={(event) => event.preventDefault()}\n {...getIndicatorProps?.(index)}\n />\n ));\n\n return (\n <CarouselProvider value={{ getStyles, orientation }}>\n {type === 'container' ? (\n <CarouselContainerVariables {...props} selector={`.${responsiveClassName}`} />\n ) : (\n <CarouselVariables {...props} selector={`.${responsiveClassName}`} />\n )}\n\n <Box\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n id={_id}\n mod={[{ orientation, 'include-gap-in-size': includeGapInSize }, mod]}\n onKeyDownCapture={handleKeydown}\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {slidesCount > 0 && `Slide ${selected + 1} of ${slidesCount}`}\n </VisuallyHidden>\n\n {withControls && (\n <div {...getStyles('controls')} data-orientation={orientation}>\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Previous slide\"\n aria-disabled={!canScrollPrev}\n data-inactive={!canScrollPrev || undefined}\n data-type=\"previous\"\n tabIndex={canScrollPrev ? 0 : -1}\n {...previousControlProps}\n {...getStyles('control', {\n className: previousControlProps?.className,\n style: previousControlProps?.style,\n })}\n onClick={(event) => {\n handlePrevious();\n previousControlProps?.onClick?.(event);\n }}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Next slide\"\n aria-disabled={!canScrollNext}\n data-inactive={!canScrollNext || undefined}\n data-type=\"next\"\n tabIndex={canScrollNext ? 0 : -1}\n {...getStyles('control', {\n className: nextControlProps?.className,\n style: nextControlProps?.style,\n })}\n {...nextControlProps}\n onClick={(event) => {\n handleNext();\n nextControlProps?.onClick?.(event);\n }}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n\n <div {...getStyles('viewport')} ref={emblaRefElement} data-type={type}>\n <div\n {...getStyles('container', { className: responsiveClassName })}\n data-orientation={orientation}\n >\n {children}\n </div>\n </div>\n\n {withIndicators && (\n <div\n {...getStyles('indicators')}\n role=\"tablist\"\n aria-label=\"Slides\"\n data-orientation={orientation}\n >\n {indicators}\n </div>\n )}\n </Box>\n </CarouselProvider>\n );\n});\n\nCarousel.classes = classes;\nCarousel.varsResolver = varsResolver;\nCarousel.displayName = '@mantine/carousel/Carousel';\nCarousel.Slide = CarouselSlide;\n\nexport namespace Carousel {\n export type Props = CarouselProps;\n export type CssVariables = CarouselCssVariables;\n export type Factory = CarouselFactory;\n export type StylesNames = CarouselStylesNames;\n export type ContextValue = CarouselContextValue;\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.context.cjs","names":[],"sources":["../src/Carousel.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '@mantine/core';\nimport type { CarouselFactory } from './Carousel';\n\nexport interface CarouselContextValue {\n getStyles: GetStylesApi<CarouselFactory>;\n orientation: 'horizontal' | 'vertical' | undefined;\n}\n\nexport const [CarouselProvider, useCarouselContext] = createSafeContext<CarouselContextValue>(\n 'Carousel component was not found in tree'\n);\n"],"mappings":";;;AAQA,MAAa,CAAC,kBAAkB,uBAAA,
|
|
1
|
+
{"version":3,"file":"Carousel.context.cjs","names":[],"sources":["../src/Carousel.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '@mantine/core';\nimport type { CarouselFactory } from './Carousel';\n\nexport interface CarouselContextValue {\n getStyles: GetStylesApi<CarouselFactory>;\n orientation: 'horizontal' | 'vertical' | undefined;\n}\n\nexport const [CarouselProvider, useCarouselContext] = createSafeContext<CarouselContextValue>(\n 'Carousel component was not found in tree'\n);\n"],"mappings":";;;AAQA,MAAa,CAAC,kBAAkB,uBAAA,0BAAA,EAAA,mBAC9B,0CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlide.cjs","names":["useCarouselContext","Box","classes"],"sources":["../../src/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '@mantine/core';\nimport { useCarouselContext } from '../Carousel.context';\nimport classes from '../Carousel.module.css';\n\nexport type CarouselSlideStylesNames = 'slide';\n\nexport interface CarouselSlideProps\n extends BoxProps, CompoundStylesApiProps<CarouselSlideFactory>, ElementProps<'div'> {}\n\nexport type CarouselSlideFactory = Factory<{\n props: CarouselSlideProps;\n ref: HTMLDivElement;\n stylesNames: CarouselSlideStylesNames;\n compound: true;\n}>;\n\nexport const CarouselSlide = factory<CarouselSlideFactory>((props) => {\n const { classNames, className, style, styles, vars, mod, ...others } = useProps(\n 'CarouselSlide',\n null,\n props\n );\n\n const ctx = useCarouselContext();\n\n return (\n <Box\n mod={[{ orientation: ctx.orientation }, mod]}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n {...ctx.getStyles('slide', { className, style, classNames, styles })}\n {...others}\n />\n );\n});\n\nCarouselSlide.classes = classes;\nCarouselSlide.displayName = '@mantine/carousel/CarouselSlide';\n"],"mappings":";;;;;;;AAwBA,MAAa,iBAAA,GAAA,cAAA,UAA+C,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,KAAK,GAAG,YAAA,GAAA,cAAA,UAC1D,iBACA,MACA,
|
|
1
|
+
{"version":3,"file":"CarouselSlide.cjs","names":["useCarouselContext","Box","classes"],"sources":["../../src/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '@mantine/core';\nimport { useCarouselContext } from '../Carousel.context';\nimport classes from '../Carousel.module.css';\n\nexport type CarouselSlideStylesNames = 'slide';\n\nexport interface CarouselSlideProps\n extends BoxProps, CompoundStylesApiProps<CarouselSlideFactory>, ElementProps<'div'> {}\n\nexport type CarouselSlideFactory = Factory<{\n props: CarouselSlideProps;\n ref: HTMLDivElement;\n stylesNames: CarouselSlideStylesNames;\n compound: true;\n}>;\n\nexport const CarouselSlide = factory<CarouselSlideFactory>((props) => {\n const { classNames, className, style, styles, vars, mod, ...others } = useProps(\n 'CarouselSlide',\n null,\n props\n );\n\n const ctx = useCarouselContext();\n\n return (\n <Box\n mod={[{ orientation: ctx.orientation }, mod]}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n {...ctx.getStyles('slide', { className, style, classNames, styles })}\n {...others}\n />\n );\n});\n\nCarouselSlide.classes = classes;\nCarouselSlide.displayName = '@mantine/carousel/CarouselSlide';\n"],"mappings":";;;;;;;AAwBA,MAAa,iBAAA,GAAA,cAAA,UAA+C,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,KAAK,GAAG,YAAA,GAAA,cAAA,UAC1D,iBACA,MACA,KACF;CAEA,MAAM,MAAMA,yBAAAA,mBAAmB;CAE/B,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,KAAD;EACE,KAAK,CAAC,EAAE,aAAa,IAAI,YAAY,GAAG,GAAG;EAC3C,MAAK;EACL,wBAAqB;EACrB,cAAW;EACX,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EACnE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,cAAc,UAAUC,wBAAAA;AACxB,cAAc,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselVariables.cjs","names":["InlineStyles"],"sources":["../../src/CarouselVariables/CarouselVariables.tsx"],"sourcesContent":["import {\n filterProps,\n getBaseValue,\n getSortedBreakpoints,\n getSpacing,\n InlineStyles,\n keys,\n MantineBreakpoint,\n px,\n rem,\n useMantineTheme,\n} from '@mantine/core';\nimport type { CarouselProps } from '../Carousel';\n\ninterface CarouselVariablesProps extends CarouselProps {\n selector: string;\n}\n\nexport function CarouselVariables({ slideGap, slideSize, selector }: CarouselVariablesProps) {\n const theme = useMantineTheme();\n\n const baseStyles: Record<string, string | undefined> = filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(slideGap)),\n '--carousel-slide-size': rem(getBaseValue(slideSize)),\n });\n\n const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n (acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof slideGap === 'object' && slideGap[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-gap'] = getSpacing(slideGap[breakpoint]);\n }\n\n if (typeof slideSize === 'object' && slideSize[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-size'] = getSpacing(slideSize[breakpoint]);\n }\n\n return acc;\n },\n {}\n );\n\n const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n (breakpoint) => keys(queries[breakpoint.value]).length > 0\n );\n\n const media = sortedBreakpoints.map((breakpoint) => ({\n query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n styles: queries[breakpoint.value],\n }));\n\n return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n if (typeof values === 'object' && values !== null) {\n return keys(values);\n }\n\n return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({ slideGap, slideSize }: Omit<CarouselVariablesProps, 'selector'>) {\n const breakpoints = Array.from(\n new Set([...getBreakpoints(slideGap), ...getBreakpoints(slideSize)])\n );\n\n return sortBreakpoints(breakpoints);\n}\n\nexport function CarouselContainerVariables({\n slideGap,\n slideSize,\n selector,\n}: CarouselVariablesProps) {\n const baseStyles: Record<string, string | undefined> = filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(slideGap)),\n '--carousel-slide-size': rem(getBaseValue(slideSize)),\n });\n\n const queries = getUniqueBreakpoints({ slideGap, slideSize }).reduce<\n Record<string, Record<string, any>>\n >((acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof slideGap === 'object' && slideGap[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-gap'] = getSpacing(slideGap[breakpoint]);\n }\n\n if (typeof slideSize === 'object' && slideSize[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-size'] = getSpacing(slideSize[breakpoint]);\n }\n\n return acc;\n }, {});\n\n const media = Object.keys(queries).map((breakpoint) => ({\n query: `carousel (min-width: ${breakpoint})`,\n styles: queries[breakpoint],\n }));\n\n return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":";;;;;AAkBA,SAAgB,kBAAkB,EAAE,UAAU,WAAW,YAAoC;CAC3F,MAAM,SAAA,GAAA,cAAA,
|
|
1
|
+
{"version":3,"file":"CarouselVariables.cjs","names":["InlineStyles"],"sources":["../../src/CarouselVariables/CarouselVariables.tsx"],"sourcesContent":["import {\n filterProps,\n getBaseValue,\n getSortedBreakpoints,\n getSpacing,\n InlineStyles,\n keys,\n MantineBreakpoint,\n px,\n rem,\n useMantineTheme,\n} from '@mantine/core';\nimport type { CarouselProps } from '../Carousel';\n\ninterface CarouselVariablesProps extends CarouselProps {\n selector: string;\n}\n\nexport function CarouselVariables({ slideGap, slideSize, selector }: CarouselVariablesProps) {\n const theme = useMantineTheme();\n\n const baseStyles: Record<string, string | undefined> = filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(slideGap)),\n '--carousel-slide-size': rem(getBaseValue(slideSize)),\n });\n\n const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n (acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof slideGap === 'object' && slideGap[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-gap'] = getSpacing(slideGap[breakpoint]);\n }\n\n if (typeof slideSize === 'object' && slideSize[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-size'] = getSpacing(slideSize[breakpoint]);\n }\n\n return acc;\n },\n {}\n );\n\n const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n (breakpoint) => keys(queries[breakpoint.value]).length > 0\n );\n\n const media = sortedBreakpoints.map((breakpoint) => ({\n query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n styles: queries[breakpoint.value],\n }));\n\n return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n if (typeof values === 'object' && values !== null) {\n return keys(values);\n }\n\n return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({ slideGap, slideSize }: Omit<CarouselVariablesProps, 'selector'>) {\n const breakpoints = Array.from(\n new Set([...getBreakpoints(slideGap), ...getBreakpoints(slideSize)])\n );\n\n return sortBreakpoints(breakpoints);\n}\n\nexport function CarouselContainerVariables({\n slideGap,\n slideSize,\n selector,\n}: CarouselVariablesProps) {\n const baseStyles: Record<string, string | undefined> = filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(slideGap)),\n '--carousel-slide-size': rem(getBaseValue(slideSize)),\n });\n\n const queries = getUniqueBreakpoints({ slideGap, slideSize }).reduce<\n Record<string, Record<string, any>>\n >((acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof slideGap === 'object' && slideGap[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-gap'] = getSpacing(slideGap[breakpoint]);\n }\n\n if (typeof slideSize === 'object' && slideSize[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-size'] = getSpacing(slideSize[breakpoint]);\n }\n\n return acc;\n }, {});\n\n const media = Object.keys(queries).map((breakpoint) => ({\n query: `carousel (min-width: ${breakpoint})`,\n styles: queries[breakpoint],\n }));\n\n return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":";;;;;AAkBA,SAAgB,kBAAkB,EAAE,UAAU,WAAW,YAAoC;CAC3F,MAAM,SAAA,GAAA,cAAA,iBAAwB;CAE9B,MAAM,cAAA,GAAA,cAAA,aAA6D;EACjE,yBAAA,GAAA,cAAA,aAAA,GAAA,cAAA,cAAgD,QAAQ,CAAC;EACzD,0BAAA,GAAA,cAAA,MAAA,GAAA,cAAA,cAA0C,SAAS,CAAC;CACtD,CAAC;CAED,MAAM,WAAA,GAAA,cAAA,MAAe,MAAM,WAAW,EAAE,QACrC,KAAK,eAAe;EACnB,IAAI,CAAC,IAAI,aACP,IAAI,cAAc,CAAC;EAGrB,IAAI,OAAO,aAAa,YAAY,SAAS,gBAAgB,KAAA,GAC3D,IAAI,YAAY,2BAAA,GAAA,cAAA,YAAqC,SAAS,WAAW;EAG3E,IAAI,OAAO,cAAc,YAAY,UAAU,gBAAgB,KAAA,GAC7D,IAAI,YAAY,4BAAA,GAAA,cAAA,YAAsC,UAAU,WAAW;EAG7E,OAAO;CACT,GACA,CAAC,CACH;CAWA,OAAO,iBAAA,GAAA,kBAAA,KAACA,cAAAA,cAAD;EAAc,QAAQ;EAAY,QAAA,GAAA,cAAA,uBAAA,GAAA,cAAA,MATW,OAAO,GAAG,MAAM,WAAW,EAAE,QAC9E,gBAAA,GAAA,cAAA,MAAoB,QAAQ,WAAW,MAAM,EAAE,SAAS,CAG7B,EAAE,KAAK,gBAAgB;GACnD,OAAO,eAAe,MAAM,YAAY,WAAW,OAA4B;GAC/E,QAAQ,QAAQ,WAAW;EAC7B,EAEoD;EAAa;CAAW,CAAA;AAC9E;AAEA,SAAS,eAAe,QAAiB;CACvC,IAAI,OAAO,WAAW,YAAY,WAAW,MAC3C,QAAA,GAAA,cAAA,MAAY,MAAM;CAGpB,OAAO,CAAC;AACV;AAEA,SAAS,gBAAgB,aAAuB;CAC9C,OAAO,YAAY,MAAM,GAAG,OAAA,GAAA,cAAA,IAAU,CAAC,KAAA,GAAA,cAAA,IAAmB,CAAC,CAAY;AACzE;AAEA,SAAS,qBAAqB,EAAE,UAAU,aAAuD;CAK/F,OAAO,gBAJa,MAAM,KACxB,IAAI,IAAI,CAAC,GAAG,eAAe,QAAQ,GAAG,GAAG,eAAe,SAAS,CAAC,CAAC,CAGpC,CAAC;AACpC;AAEA,SAAgB,2BAA2B,EACzC,UACA,WACA,YACyB;CACzB,MAAM,cAAA,GAAA,cAAA,aAA6D;EACjE,yBAAA,GAAA,cAAA,aAAA,GAAA,cAAA,cAAgD,QAAQ,CAAC;EACzD,0BAAA,GAAA,cAAA,MAAA,GAAA,cAAA,cAA0C,SAAS,CAAC;CACtD,CAAC;CAED,MAAM,UAAU,qBAAqB;EAAE;EAAU;CAAU,CAAC,EAAE,QAE3D,KAAK,eAAe;EACrB,IAAI,CAAC,IAAI,aACP,IAAI,cAAc,CAAC;EAGrB,IAAI,OAAO,aAAa,YAAY,SAAS,gBAAgB,KAAA,GAC3D,IAAI,YAAY,2BAAA,GAAA,cAAA,YAAqC,SAAS,WAAW;EAG3E,IAAI,OAAO,cAAc,YAAY,UAAU,gBAAgB,KAAA,GAC7D,IAAI,YAAY,4BAAA,GAAA,cAAA,YAAsC,UAAU,WAAW;EAG7E,OAAO;CACT,GAAG,CAAC,CAAC;CAOL,OAAO,iBAAA,GAAA,kBAAA,KAACA,cAAAA,cAAD;EAAc,QAAQ;EAAY,WAL3B,OAAO,KAAK,OAAO,EAAE,KAAK,gBAAgB;GACtD,OAAO,wBAAwB,WAAW;GAC1C,QAAQ,QAAQ;EAClB,EAEwD;EAAa;CAAW,CAAA;AAClF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-chevron-rotation.cjs","names":[],"sources":["../src/get-chevron-rotation.ts"],"sourcesContent":["interface Options {\n dir: 'rtl' | 'ltr';\n orientation: 'horizontal' | 'vertical' | undefined;\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"],"mappings":";;AAMA,SAAgB,mBAAmB,EAAE,KAAK,aAAa,aAAsB;
|
|
1
|
+
{"version":3,"file":"get-chevron-rotation.cjs","names":[],"sources":["../src/get-chevron-rotation.ts"],"sourcesContent":["interface Options {\n dir: 'rtl' | 'ltr';\n orientation: 'horizontal' | 'vertical' | undefined;\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"],"mappings":";;AAMA,SAAgB,mBAAmB,EAAE,KAAK,aAAa,aAAsB;CAC3E,IAAI,cAAc,YAChB,OAAO,gBAAgB,eAAe,MAAM,QAAQ,QAAQ,IAAI,MAAM;CAGxE,OAAO,gBAAgB,eAAe,MAAM,QAAQ,QAAQ,KAAK,KAAK;AACxE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.context.mjs","names":[],"sources":["../src/Carousel.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '@mantine/core';\nimport type { CarouselFactory } from './Carousel';\n\nexport interface CarouselContextValue {\n getStyles: GetStylesApi<CarouselFactory>;\n orientation: 'horizontal' | 'vertical' | undefined;\n}\n\nexport const [CarouselProvider, useCarouselContext] = createSafeContext<CarouselContextValue>(\n 'Carousel component was not found in tree'\n);\n"],"mappings":";;;AAQA,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,
|
|
1
|
+
{"version":3,"file":"Carousel.context.mjs","names":[],"sources":["../src/Carousel.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '@mantine/core';\nimport type { CarouselFactory } from './Carousel';\n\nexport interface CarouselContextValue {\n getStyles: GetStylesApi<CarouselFactory>;\n orientation: 'horizontal' | 'vertical' | undefined;\n}\n\nexport const [CarouselProvider, useCarouselContext] = createSafeContext<CarouselContextValue>(\n 'Carousel component was not found in tree'\n);\n"],"mappings":";;;AAQA,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,0CACF"}
|
package/esm/Carousel.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.mjs","names":["classes"],"sources":["../src/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useState } from 'react';\nimport type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n AccordionChevron,\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n rem,\n StyleProp,\n StylesApiProps,\n UnstyledButton,\n useDirection,\n useProps,\n useRandomClassName,\n useStyles,\n VisuallyHidden,\n} from '@mantine/core';\nimport { clamp, useId } from '@mantine/hooks';\nimport { CarouselProvider, type CarouselContextValue } from './Carousel.context';\nimport { CarouselSlide } from './CarouselSlide/CarouselSlide';\nimport {\n CarouselContainerVariables,\n CarouselVariables,\n} from './CarouselVariables/CarouselVariables';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport classes from './Carousel.module.css';\n\nexport type CarouselStylesNames =\n | 'slide'\n | 'root'\n | 'viewport'\n | 'container'\n | 'controls'\n | 'control'\n | 'indicators'\n | 'indicator';\n\nexport type CarouselCssVariables = {\n root: '--carousel-height' | '--carousel-control-size' | '--carousel-controls-offset';\n};\n\nexport interface CarouselProps\n extends BoxProps, StylesApiProps<CarouselFactory>, ElementProps<'div'> {\n /** Options passed down to embla carousel */\n emblaOptions?: EmblaOptionsType;\n\n /** `Carousel.Slide` components */\n children?: React.ReactNode;\n\n /** Called when next slide is shown */\n onNextSlide?: () => void;\n\n /** Called when previous slider is shown */\n onPreviousSlide?: () => void;\n\n /** Called with slide index when slide changes */\n onSlideChange?: (index: number) => void;\n\n /** Get embla API as ref */\n getEmblaApi?: (embla: EmblaCarouselType) => void;\n\n /** Props passed down to next control */\n nextControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed down to previous control */\n previousControlProps?: React.ComponentProps<'button'>;\n\n /** Controls size of the next and previous controls @default 26 */\n controlSize?: React.CSSProperties['width'];\n\n /** Controls position of the next and previous controls, key of `theme.spacing` or any valid CSS value @default 'sm' */\n controlsOffset?: MantineSpacing;\n\n /** Controls slide width based on viewport width @default '100%' */\n slideSize?: StyleProp<string | number>;\n\n /** Key of theme.spacing or number to set gap between slides */\n slideGap?: StyleProp<MantineSpacing>;\n\n /** Carousel orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Determines type of queries used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Slides container `height`, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines whether gap between slides should be treated as part of the slide size @default true */\n includeGapInSize?: boolean;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Determines whether next/previous controls should be displayed @default true */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed @default false */\n withIndicators?: boolean;\n\n /** A list of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of the next control */\n nextControlIcon?: React.ReactNode;\n\n /** Icon of the previous control */\n previousControlIcon?: React.ReactNode;\n\n /** Determines whether arrow key should switch slides @default true */\n withKeyboardEvents?: boolean;\n\n /** Function to get props for indicator button */\n getIndicatorProps?: (index: number) => ElementProps<'button'> & DataAttributes;\n}\n\nexport type CarouselFactory = Factory<{\n props: CarouselProps;\n ref: HTMLDivElement;\n stylesNames: CarouselStylesNames;\n vars: CarouselCssVariables;\n staticComponents: {\n Slide: typeof CarouselSlide;\n };\n}>;\n\nconst defaultProps = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n} satisfies Partial<CarouselProps>;\n\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n};\n\nconst varsResolver = createVarsResolver<CarouselFactory>(\n (_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n })\n);\n\nexport const Carousel = factory<CarouselFactory>((_props) => {\n const props = useProps('Carousel', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n onSlideChange,\n nextControlProps,\n previousControlProps,\n controlSize,\n controlsOffset,\n slideSize,\n slideGap,\n orientation,\n height,\n includeGapInSize,\n draggable,\n initialSlide,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n withKeyboardEvents,\n mod,\n type,\n emblaOptions,\n attributes,\n getIndicatorProps,\n id,\n ...others\n } = props;\n\n const getStyles = useStyles<CarouselFactory>({\n name: 'Carousel',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _id = useId(id);\n\n const responsiveClassName = useRandomClassName();\n const { dir } = useDirection();\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: orientation === 'horizontal' ? dir : undefined,\n startIndex: initialSlide,\n ...defaultEmblaOptions,\n ...emblaOptions,\n },\n plugins\n );\n\n const [selected, setSelected] = useState(0);\n const [slidesCount, setSlidesCount] = useState(0);\n\n const handleScroll = useCallback((index: number) => embla && embla.scrollTo(index), [embla]);\n\n const handleSelect = useCallback(() => {\n if (!embla) {\n return;\n }\n const slide = embla.selectedScrollSnap();\n setSelected(slide);\n slide !== selected && onSlideChange?.(slide);\n }, [embla, setSelected, onSlideChange, selected]);\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 const handleKeydown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (withKeyboardEvents) {\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n handleNext();\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n handlePrevious();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n embla?.scrollTo(0);\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n embla?.scrollTo(embla.scrollSnapList().length - 1);\n }\n }\n },\n [embla, handleNext, handlePrevious]\n );\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, emblaOptions?.slidesToScroll, handleSelect]);\n\n useEffect(() => {\n if (embla) {\n embla.reInit();\n setSlidesCount(embla.scrollSnapList().length);\n setSelected((currentSelected) =>\n clamp(currentSelected, 0, Children.toArray(children).length - 1)\n );\n }\n }, [Children.toArray(children).length, emblaOptions?.slidesToScroll]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const handleIndicatorKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n const isHorizontal = orientation === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = index < slidesCount - 1 ? index + 1 : 0;\n handleScroll(nextIndex);\n const nextIndicator = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement;\n nextIndicator?.focus();\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = index > 0 ? index - 1 : slidesCount - 1;\n handleScroll(prevIndex);\n const prevIndicator = event.currentTarget.parentElement?.children[prevIndex] as HTMLElement;\n prevIndicator?.focus();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n handleScroll(0);\n const firstIndicator = event.currentTarget.parentElement?.children[0] as HTMLElement;\n firstIndicator?.focus();\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n handleScroll(slidesCount - 1);\n const lastIndicator = event.currentTarget.parentElement?.children[\n slidesCount - 1\n ] as HTMLElement;\n lastIndicator?.focus();\n }\n },\n [orientation, slidesCount, handleScroll]\n );\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n {...getStyles('indicator')}\n key={index}\n role=\"tab\"\n aria-label={`Go to slide ${index + 1}`}\n aria-selected={index === selected}\n tabIndex={index === selected ? 0 : -1}\n data-active={index === selected || undefined}\n onClick={() => handleScroll(index)}\n onKeyDown={(event) => handleIndicatorKeyDown(event, index)}\n data-orientation={orientation}\n onMouseDown={(event) => event.preventDefault()}\n {...getIndicatorProps?.(index)}\n />\n ));\n\n return (\n <CarouselProvider value={{ getStyles, orientation }}>\n {type === 'container' ? (\n <CarouselContainerVariables {...props} selector={`.${responsiveClassName}`} />\n ) : (\n <CarouselVariables {...props} selector={`.${responsiveClassName}`} />\n )}\n\n <Box\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n id={_id}\n mod={[{ orientation, 'include-gap-in-size': includeGapInSize }, mod]}\n onKeyDownCapture={handleKeydown}\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {slidesCount > 0 && `Slide ${selected + 1} of ${slidesCount}`}\n </VisuallyHidden>\n\n {withControls && (\n <div {...getStyles('controls')} data-orientation={orientation}>\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Previous slide\"\n aria-disabled={!canScrollPrev}\n data-inactive={!canScrollPrev || undefined}\n data-type=\"previous\"\n tabIndex={canScrollPrev ? 0 : -1}\n {...previousControlProps}\n {...getStyles('control', {\n className: previousControlProps?.className,\n style: previousControlProps?.style,\n })}\n onClick={(event) => {\n handlePrevious();\n previousControlProps?.onClick?.(event);\n }}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Next slide\"\n aria-disabled={!canScrollNext}\n data-inactive={!canScrollNext || undefined}\n data-type=\"next\"\n tabIndex={canScrollNext ? 0 : -1}\n {...getStyles('control', {\n className: nextControlProps?.className,\n style: nextControlProps?.style,\n })}\n {...nextControlProps}\n onClick={(event) => {\n handleNext();\n nextControlProps?.onClick?.(event);\n }}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n\n <div {...getStyles('viewport')} ref={emblaRefElement} data-type={type}>\n <div\n {...getStyles('container', { className: responsiveClassName })}\n data-orientation={orientation}\n >\n {children}\n </div>\n </div>\n\n {withIndicators && (\n <div\n {...getStyles('indicators')}\n role=\"tablist\"\n aria-label=\"Slides\"\n data-orientation={orientation}\n >\n {indicators}\n </div>\n )}\n </Box>\n </CarouselProvider>\n );\n});\n\nCarousel.classes = classes;\nCarousel.varsResolver = varsResolver;\nCarousel.displayName = '@mantine/carousel/Carousel';\nCarousel.Slide = CarouselSlide;\n\nexport namespace Carousel {\n export type Props = CarouselProps;\n export type CssVariables = CarouselCssVariables;\n export type Factory = CarouselFactory;\n export type StylesNames = CarouselStylesNames;\n export type ContextValue = CarouselContextValue;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.mjs","names":["classes"],"sources":["../src/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useState } from 'react';\nimport type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n AccordionChevron,\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n rem,\n StyleProp,\n StylesApiProps,\n UnstyledButton,\n useDirection,\n useProps,\n useRandomClassName,\n useStyles,\n VisuallyHidden,\n} from '@mantine/core';\nimport { clamp, useId } from '@mantine/hooks';\nimport { CarouselProvider, type CarouselContextValue } from './Carousel.context';\nimport { CarouselSlide } from './CarouselSlide/CarouselSlide';\nimport {\n CarouselContainerVariables,\n CarouselVariables,\n} from './CarouselVariables/CarouselVariables';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport classes from './Carousel.module.css';\n\nexport type CarouselStylesNames =\n | 'slide'\n | 'root'\n | 'viewport'\n | 'container'\n | 'controls'\n | 'control'\n | 'indicators'\n | 'indicator';\n\nexport type CarouselCssVariables = {\n root: '--carousel-height' | '--carousel-control-size' | '--carousel-controls-offset';\n};\n\nexport interface CarouselProps\n extends BoxProps, StylesApiProps<CarouselFactory>, ElementProps<'div'> {\n /** Options passed down to embla carousel */\n emblaOptions?: EmblaOptionsType;\n\n /** `Carousel.Slide` components */\n children?: React.ReactNode;\n\n /** Called when next slide is shown */\n onNextSlide?: () => void;\n\n /** Called when previous slider is shown */\n onPreviousSlide?: () => void;\n\n /** Called with slide index when slide changes */\n onSlideChange?: (index: number) => void;\n\n /** Get embla API as ref */\n getEmblaApi?: (embla: EmblaCarouselType) => void;\n\n /** Props passed down to next control */\n nextControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed down to previous control */\n previousControlProps?: React.ComponentProps<'button'>;\n\n /** Controls size of the next and previous controls @default 26 */\n controlSize?: React.CSSProperties['width'];\n\n /** Controls position of the next and previous controls, key of `theme.spacing` or any valid CSS value @default 'sm' */\n controlsOffset?: MantineSpacing;\n\n /** Controls slide width based on viewport width @default '100%' */\n slideSize?: StyleProp<string | number>;\n\n /** Key of theme.spacing or number to set gap between slides */\n slideGap?: StyleProp<MantineSpacing>;\n\n /** Carousel orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Determines type of queries used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Slides container `height`, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines whether gap between slides should be treated as part of the slide size @default true */\n includeGapInSize?: boolean;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Determines whether next/previous controls should be displayed @default true */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed @default false */\n withIndicators?: boolean;\n\n /** A list of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of the next control */\n nextControlIcon?: React.ReactNode;\n\n /** Icon of the previous control */\n previousControlIcon?: React.ReactNode;\n\n /** Determines whether arrow key should switch slides @default true */\n withKeyboardEvents?: boolean;\n\n /** Function to get props for indicator button */\n getIndicatorProps?: (index: number) => ElementProps<'button'> & DataAttributes;\n}\n\nexport type CarouselFactory = Factory<{\n props: CarouselProps;\n ref: HTMLDivElement;\n stylesNames: CarouselStylesNames;\n vars: CarouselCssVariables;\n staticComponents: {\n Slide: typeof CarouselSlide;\n };\n}>;\n\nconst defaultProps = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n} satisfies Partial<CarouselProps>;\n\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n};\n\nconst varsResolver = createVarsResolver<CarouselFactory>(\n (_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n })\n);\n\nexport const Carousel = factory<CarouselFactory>((_props) => {\n const props = useProps('Carousel', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n onSlideChange,\n nextControlProps,\n previousControlProps,\n controlSize,\n controlsOffset,\n slideSize,\n slideGap,\n orientation,\n height,\n includeGapInSize,\n draggable,\n initialSlide,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n withKeyboardEvents,\n mod,\n type,\n emblaOptions,\n attributes,\n getIndicatorProps,\n id,\n ...others\n } = props;\n\n const getStyles = useStyles<CarouselFactory>({\n name: 'Carousel',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _id = useId(id);\n\n const responsiveClassName = useRandomClassName();\n const { dir } = useDirection();\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: orientation === 'horizontal' ? dir : undefined,\n startIndex: initialSlide,\n ...defaultEmblaOptions,\n ...emblaOptions,\n },\n plugins\n );\n\n const [selected, setSelected] = useState(0);\n const [slidesCount, setSlidesCount] = useState(0);\n\n const handleScroll = useCallback((index: number) => embla && embla.scrollTo(index), [embla]);\n\n const handleSelect = useCallback(() => {\n if (!embla) {\n return;\n }\n const slide = embla.selectedScrollSnap();\n setSelected(slide);\n slide !== selected && onSlideChange?.(slide);\n }, [embla, setSelected, onSlideChange, selected]);\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 const handleKeydown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (withKeyboardEvents) {\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n handleNext();\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n handlePrevious();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n embla?.scrollTo(0);\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n embla?.scrollTo(embla.scrollSnapList().length - 1);\n }\n }\n },\n [embla, handleNext, handlePrevious]\n );\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, emblaOptions?.slidesToScroll, handleSelect]);\n\n useEffect(() => {\n if (embla) {\n embla.reInit();\n setSlidesCount(embla.scrollSnapList().length);\n setSelected((currentSelected) =>\n clamp(currentSelected, 0, Children.toArray(children).length - 1)\n );\n }\n }, [Children.toArray(children).length, emblaOptions?.slidesToScroll]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const handleIndicatorKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n const isHorizontal = orientation === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = index < slidesCount - 1 ? index + 1 : 0;\n handleScroll(nextIndex);\n const nextIndicator = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement;\n nextIndicator?.focus();\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = index > 0 ? index - 1 : slidesCount - 1;\n handleScroll(prevIndex);\n const prevIndicator = event.currentTarget.parentElement?.children[prevIndex] as HTMLElement;\n prevIndicator?.focus();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n handleScroll(0);\n const firstIndicator = event.currentTarget.parentElement?.children[0] as HTMLElement;\n firstIndicator?.focus();\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n handleScroll(slidesCount - 1);\n const lastIndicator = event.currentTarget.parentElement?.children[\n slidesCount - 1\n ] as HTMLElement;\n lastIndicator?.focus();\n }\n },\n [orientation, slidesCount, handleScroll]\n );\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n {...getStyles('indicator')}\n key={index}\n role=\"tab\"\n aria-label={`Go to slide ${index + 1}`}\n aria-selected={index === selected}\n tabIndex={index === selected ? 0 : -1}\n data-active={index === selected || undefined}\n onClick={() => handleScroll(index)}\n onKeyDown={(event) => handleIndicatorKeyDown(event, index)}\n data-orientation={orientation}\n onMouseDown={(event) => event.preventDefault()}\n {...getIndicatorProps?.(index)}\n />\n ));\n\n return (\n <CarouselProvider value={{ getStyles, orientation }}>\n {type === 'container' ? (\n <CarouselContainerVariables {...props} selector={`.${responsiveClassName}`} />\n ) : (\n <CarouselVariables {...props} selector={`.${responsiveClassName}`} />\n )}\n\n <Box\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n id={_id}\n mod={[{ orientation, 'include-gap-in-size': includeGapInSize }, mod]}\n onKeyDownCapture={handleKeydown}\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {slidesCount > 0 && `Slide ${selected + 1} of ${slidesCount}`}\n </VisuallyHidden>\n\n {withControls && (\n <div {...getStyles('controls')} data-orientation={orientation}>\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Previous slide\"\n aria-disabled={!canScrollPrev}\n data-inactive={!canScrollPrev || undefined}\n data-type=\"previous\"\n tabIndex={canScrollPrev ? 0 : -1}\n {...previousControlProps}\n {...getStyles('control', {\n className: previousControlProps?.className,\n style: previousControlProps?.style,\n })}\n onClick={(event) => {\n handlePrevious();\n previousControlProps?.onClick?.(event);\n }}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Next slide\"\n aria-disabled={!canScrollNext}\n data-inactive={!canScrollNext || undefined}\n data-type=\"next\"\n tabIndex={canScrollNext ? 0 : -1}\n {...getStyles('control', {\n className: nextControlProps?.className,\n style: nextControlProps?.style,\n })}\n {...nextControlProps}\n onClick={(event) => {\n handleNext();\n nextControlProps?.onClick?.(event);\n }}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n\n <div {...getStyles('viewport')} ref={emblaRefElement} data-type={type}>\n <div\n {...getStyles('container', { className: responsiveClassName })}\n data-orientation={orientation}\n >\n {children}\n </div>\n </div>\n\n {withIndicators && (\n <div\n {...getStyles('indicators')}\n role=\"tablist\"\n aria-label=\"Slides\"\n data-orientation={orientation}\n >\n {indicators}\n </div>\n )}\n </Box>\n </CarouselProvider>\n );\n});\n\nCarousel.classes = classes;\nCarousel.varsResolver = varsResolver;\nCarousel.displayName = '@mantine/carousel/Carousel';\nCarousel.Slide = CarouselSlide;\n\nexport namespace Carousel {\n export type Props = CarouselProps;\n export type CssVariables = CarouselCssVariables;\n export type Factory = CarouselFactory;\n export type StylesNames = CarouselStylesNames;\n export type ContextValue = CarouselContextValue;\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlide.mjs","names":["classes"],"sources":["../../src/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '@mantine/core';\nimport { useCarouselContext } from '../Carousel.context';\nimport classes from '../Carousel.module.css';\n\nexport type CarouselSlideStylesNames = 'slide';\n\nexport interface CarouselSlideProps\n extends BoxProps, CompoundStylesApiProps<CarouselSlideFactory>, ElementProps<'div'> {}\n\nexport type CarouselSlideFactory = Factory<{\n props: CarouselSlideProps;\n ref: HTMLDivElement;\n stylesNames: CarouselSlideStylesNames;\n compound: true;\n}>;\n\nexport const CarouselSlide = factory<CarouselSlideFactory>((props) => {\n const { classNames, className, style, styles, vars, mod, ...others } = useProps(\n 'CarouselSlide',\n null,\n props\n );\n\n const ctx = useCarouselContext();\n\n return (\n <Box\n mod={[{ orientation: ctx.orientation }, mod]}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n {...ctx.getStyles('slide', { className, style, classNames, styles })}\n {...others}\n />\n );\n});\n\nCarouselSlide.classes = classes;\nCarouselSlide.displayName = '@mantine/carousel/CarouselSlide';\n"],"mappings":";;;;;;AAwBA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,KAAK,GAAG,WAAW,SACrE,iBACA,MACA,
|
|
1
|
+
{"version":3,"file":"CarouselSlide.mjs","names":["classes"],"sources":["../../src/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '@mantine/core';\nimport { useCarouselContext } from '../Carousel.context';\nimport classes from '../Carousel.module.css';\n\nexport type CarouselSlideStylesNames = 'slide';\n\nexport interface CarouselSlideProps\n extends BoxProps, CompoundStylesApiProps<CarouselSlideFactory>, ElementProps<'div'> {}\n\nexport type CarouselSlideFactory = Factory<{\n props: CarouselSlideProps;\n ref: HTMLDivElement;\n stylesNames: CarouselSlideStylesNames;\n compound: true;\n}>;\n\nexport const CarouselSlide = factory<CarouselSlideFactory>((props) => {\n const { classNames, className, style, styles, vars, mod, ...others } = useProps(\n 'CarouselSlide',\n null,\n props\n );\n\n const ctx = useCarouselContext();\n\n return (\n <Box\n mod={[{ orientation: ctx.orientation }, mod]}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n {...ctx.getStyles('slide', { className, style, classNames, styles })}\n {...others}\n />\n );\n});\n\nCarouselSlide.classes = classes;\nCarouselSlide.displayName = '@mantine/carousel/CarouselSlide';\n"],"mappings":";;;;;;AAwBA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,KAAK,GAAG,WAAW,SACrE,iBACA,MACA,KACF;CAEA,MAAM,MAAM,mBAAmB;CAE/B,OACE,oBAAC,KAAD;EACE,KAAK,CAAC,EAAE,aAAa,IAAI,YAAY,GAAG,GAAG;EAC3C,MAAK;EACL,wBAAqB;EACrB,cAAW;EACX,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EACnE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselVariables.mjs","names":[],"sources":["../../src/CarouselVariables/CarouselVariables.tsx"],"sourcesContent":["import {\n filterProps,\n getBaseValue,\n getSortedBreakpoints,\n getSpacing,\n InlineStyles,\n keys,\n MantineBreakpoint,\n px,\n rem,\n useMantineTheme,\n} from '@mantine/core';\nimport type { CarouselProps } from '../Carousel';\n\ninterface CarouselVariablesProps extends CarouselProps {\n selector: string;\n}\n\nexport function CarouselVariables({ slideGap, slideSize, selector }: CarouselVariablesProps) {\n const theme = useMantineTheme();\n\n const baseStyles: Record<string, string | undefined> = filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(slideGap)),\n '--carousel-slide-size': rem(getBaseValue(slideSize)),\n });\n\n const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n (acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof slideGap === 'object' && slideGap[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-gap'] = getSpacing(slideGap[breakpoint]);\n }\n\n if (typeof slideSize === 'object' && slideSize[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-size'] = getSpacing(slideSize[breakpoint]);\n }\n\n return acc;\n },\n {}\n );\n\n const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n (breakpoint) => keys(queries[breakpoint.value]).length > 0\n );\n\n const media = sortedBreakpoints.map((breakpoint) => ({\n query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n styles: queries[breakpoint.value],\n }));\n\n return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n if (typeof values === 'object' && values !== null) {\n return keys(values);\n }\n\n return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({ slideGap, slideSize }: Omit<CarouselVariablesProps, 'selector'>) {\n const breakpoints = Array.from(\n new Set([...getBreakpoints(slideGap), ...getBreakpoints(slideSize)])\n );\n\n return sortBreakpoints(breakpoints);\n}\n\nexport function CarouselContainerVariables({\n slideGap,\n slideSize,\n selector,\n}: CarouselVariablesProps) {\n const baseStyles: Record<string, string | undefined> = filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(slideGap)),\n '--carousel-slide-size': rem(getBaseValue(slideSize)),\n });\n\n const queries = getUniqueBreakpoints({ slideGap, slideSize }).reduce<\n Record<string, Record<string, any>>\n >((acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof slideGap === 'object' && slideGap[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-gap'] = getSpacing(slideGap[breakpoint]);\n }\n\n if (typeof slideSize === 'object' && slideSize[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-size'] = getSpacing(slideSize[breakpoint]);\n }\n\n return acc;\n }, {});\n\n const media = Object.keys(queries).map((breakpoint) => ({\n query: `carousel (min-width: ${breakpoint})`,\n styles: queries[breakpoint],\n }));\n\n return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":";;;;AAkBA,SAAgB,kBAAkB,EAAE,UAAU,WAAW,YAAoC;CAC3F,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"CarouselVariables.mjs","names":[],"sources":["../../src/CarouselVariables/CarouselVariables.tsx"],"sourcesContent":["import {\n filterProps,\n getBaseValue,\n getSortedBreakpoints,\n getSpacing,\n InlineStyles,\n keys,\n MantineBreakpoint,\n px,\n rem,\n useMantineTheme,\n} from '@mantine/core';\nimport type { CarouselProps } from '../Carousel';\n\ninterface CarouselVariablesProps extends CarouselProps {\n selector: string;\n}\n\nexport function CarouselVariables({ slideGap, slideSize, selector }: CarouselVariablesProps) {\n const theme = useMantineTheme();\n\n const baseStyles: Record<string, string | undefined> = filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(slideGap)),\n '--carousel-slide-size': rem(getBaseValue(slideSize)),\n });\n\n const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n (acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof slideGap === 'object' && slideGap[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-gap'] = getSpacing(slideGap[breakpoint]);\n }\n\n if (typeof slideSize === 'object' && slideSize[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-size'] = getSpacing(slideSize[breakpoint]);\n }\n\n return acc;\n },\n {}\n );\n\n const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n (breakpoint) => keys(queries[breakpoint.value]).length > 0\n );\n\n const media = sortedBreakpoints.map((breakpoint) => ({\n query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n styles: queries[breakpoint.value],\n }));\n\n return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n if (typeof values === 'object' && values !== null) {\n return keys(values);\n }\n\n return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({ slideGap, slideSize }: Omit<CarouselVariablesProps, 'selector'>) {\n const breakpoints = Array.from(\n new Set([...getBreakpoints(slideGap), ...getBreakpoints(slideSize)])\n );\n\n return sortBreakpoints(breakpoints);\n}\n\nexport function CarouselContainerVariables({\n slideGap,\n slideSize,\n selector,\n}: CarouselVariablesProps) {\n const baseStyles: Record<string, string | undefined> = filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(slideGap)),\n '--carousel-slide-size': rem(getBaseValue(slideSize)),\n });\n\n const queries = getUniqueBreakpoints({ slideGap, slideSize }).reduce<\n Record<string, Record<string, any>>\n >((acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof slideGap === 'object' && slideGap[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-gap'] = getSpacing(slideGap[breakpoint]);\n }\n\n if (typeof slideSize === 'object' && slideSize[breakpoint] !== undefined) {\n acc[breakpoint]['--carousel-slide-size'] = getSpacing(slideSize[breakpoint]);\n }\n\n return acc;\n }, {});\n\n const media = Object.keys(queries).map((breakpoint) => ({\n query: `carousel (min-width: ${breakpoint})`,\n styles: queries[breakpoint],\n }));\n\n return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":";;;;AAkBA,SAAgB,kBAAkB,EAAE,UAAU,WAAW,YAAoC;CAC3F,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,aAAiD,YAAY;EACjE,wBAAwB,WAAW,aAAa,QAAQ,CAAC;EACzD,yBAAyB,IAAI,aAAa,SAAS,CAAC;CACtD,CAAC;CAED,MAAM,UAAU,KAAK,MAAM,WAAW,EAAE,QACrC,KAAK,eAAe;EACnB,IAAI,CAAC,IAAI,aACP,IAAI,cAAc,CAAC;EAGrB,IAAI,OAAO,aAAa,YAAY,SAAS,gBAAgB,KAAA,GAC3D,IAAI,YAAY,0BAA0B,WAAW,SAAS,WAAW;EAG3E,IAAI,OAAO,cAAc,YAAY,UAAU,gBAAgB,KAAA,GAC7D,IAAI,YAAY,2BAA2B,WAAW,UAAU,WAAW;EAG7E,OAAO;CACT,GACA,CAAC,CACH;CAWA,OAAO,oBAAC,cAAD;EAAc,QAAQ;EAAY,OATf,qBAAqB,KAAK,OAAO,GAAG,MAAM,WAAW,EAAE,QAC9E,eAAe,KAAK,QAAQ,WAAW,MAAM,EAAE,SAAS,CAG7B,EAAE,KAAK,gBAAgB;GACnD,OAAO,eAAe,MAAM,YAAY,WAAW,OAA4B;GAC/E,QAAQ,QAAQ,WAAW;EAC7B,EAEoD;EAAa;CAAW,CAAA;AAC9E;AAEA,SAAS,eAAe,QAAiB;CACvC,IAAI,OAAO,WAAW,YAAY,WAAW,MAC3C,OAAO,KAAK,MAAM;CAGpB,OAAO,CAAC;AACV;AAEA,SAAS,gBAAgB,aAAuB;CAC9C,OAAO,YAAY,MAAM,GAAG,MAAO,GAAG,CAAC,IAAgB,GAAG,CAAC,CAAY;AACzE;AAEA,SAAS,qBAAqB,EAAE,UAAU,aAAuD;CAK/F,OAAO,gBAJa,MAAM,KACxB,IAAI,IAAI,CAAC,GAAG,eAAe,QAAQ,GAAG,GAAG,eAAe,SAAS,CAAC,CAAC,CAGpC,CAAC;AACpC;AAEA,SAAgB,2BAA2B,EACzC,UACA,WACA,YACyB;CACzB,MAAM,aAAiD,YAAY;EACjE,wBAAwB,WAAW,aAAa,QAAQ,CAAC;EACzD,yBAAyB,IAAI,aAAa,SAAS,CAAC;CACtD,CAAC;CAED,MAAM,UAAU,qBAAqB;EAAE;EAAU;CAAU,CAAC,EAAE,QAE3D,KAAK,eAAe;EACrB,IAAI,CAAC,IAAI,aACP,IAAI,cAAc,CAAC;EAGrB,IAAI,OAAO,aAAa,YAAY,SAAS,gBAAgB,KAAA,GAC3D,IAAI,YAAY,0BAA0B,WAAW,SAAS,WAAW;EAG3E,IAAI,OAAO,cAAc,YAAY,UAAU,gBAAgB,KAAA,GAC7D,IAAI,YAAY,2BAA2B,WAAW,UAAU,WAAW;EAG7E,OAAO;CACT,GAAG,CAAC,CAAC;CAOL,OAAO,oBAAC,cAAD;EAAc,QAAQ;EAAY,WAL3B,OAAO,KAAK,OAAO,EAAE,KAAK,gBAAgB;GACtD,OAAO,wBAAwB,WAAW;GAC1C,QAAQ,QAAQ;EAClB,EAEwD;EAAa;CAAW,CAAA;AAClF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-chevron-rotation.mjs","names":[],"sources":["../src/get-chevron-rotation.ts"],"sourcesContent":["interface Options {\n dir: 'rtl' | 'ltr';\n orientation: 'horizontal' | 'vertical' | undefined;\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"],"mappings":";;AAMA,SAAgB,mBAAmB,EAAE,KAAK,aAAa,aAAsB;
|
|
1
|
+
{"version":3,"file":"get-chevron-rotation.mjs","names":[],"sources":["../src/get-chevron-rotation.ts"],"sourcesContent":["interface Options {\n dir: 'rtl' | 'ltr';\n orientation: 'horizontal' | 'vertical' | undefined;\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"],"mappings":";;AAMA,SAAgB,mBAAmB,EAAE,KAAK,aAAa,aAAsB;CAC3E,IAAI,cAAc,YAChB,OAAO,gBAAgB,eAAe,MAAM,QAAQ,QAAQ,IAAI,MAAM;CAGxE,OAAO,gBAAgB,eAAe,MAAM,QAAQ,QAAQ,KAAK,KAAK;AACxE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/carousel",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.1",
|
|
4
4
|
"description": "Embla based carousel",
|
|
5
5
|
"homepage": "https://mantine.dev/x/carousel/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"directory": "packages/@mantine/carousel"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"@mantine/core": "9.
|
|
48
|
-
"@mantine/hooks": "9.
|
|
47
|
+
"@mantine/core": "9.2.1",
|
|
48
|
+
"@mantine/hooks": "9.2.1",
|
|
49
49
|
"embla-carousel": ">=8.0.0",
|
|
50
50
|
"embla-carousel-react": ">=8.0.0",
|
|
51
51
|
"react": "^19.2.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@mantine-tests/core": "workspace:*",
|
|
56
56
|
"@mantine/core": "workspace:*",
|
|
57
57
|
"@mantine/hooks": "workspace:*",
|
|
58
|
-
"react": "19.2.
|
|
59
|
-
"react-dom": "19.2.
|
|
58
|
+
"react": "19.2.6",
|
|
59
|
+
"react-dom": "19.2.6"
|
|
60
60
|
}
|
|
61
61
|
}
|