@yamada-ui/carousel 2.0.6-dev-20240927162227 → 2.0.6-dev-20240927164847
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/dist/carousel-control.js +6 -0
- package/dist/carousel-control.js.map +1 -1
- package/dist/carousel-control.mjs +1 -1
- package/dist/carousel-indicators.d.mts +1 -2
- package/dist/carousel-indicators.d.ts +1 -2
- package/dist/carousel-indicators.js +4 -0
- package/dist/carousel-indicators.js.map +1 -1
- package/dist/carousel-indicators.mjs +1 -1
- package/dist/carousel-slide.js +4 -0
- package/dist/carousel-slide.js.map +1 -1
- package/dist/carousel-slide.mjs +1 -1
- package/dist/carousel.js +20 -0
- package/dist/carousel.js.map +1 -1
- package/dist/carousel.mjs +4 -4
- package/dist/{chunk-V7WWGAGN.mjs → chunk-4J2ZLVEE.mjs} +10 -4
- package/dist/chunk-4J2ZLVEE.mjs.map +1 -0
- package/dist/{chunk-4D3RMGS7.mjs → chunk-JWJMR4LX.mjs} +7 -1
- package/dist/chunk-JWJMR4LX.mjs.map +1 -0
- package/dist/{chunk-3OKZ522Y.mjs → chunk-L4NF6CWV.mjs} +5 -1
- package/dist/chunk-L4NF6CWV.mjs.map +1 -0
- package/dist/{chunk-OJGFCI5M.mjs → chunk-TMSSJMLI.mjs} +5 -1
- package/dist/chunk-TMSSJMLI.mjs.map +1 -0
- package/dist/index.js +20 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -4
- package/package.json +8 -8
- package/dist/chunk-3OKZ522Y.mjs.map +0 -1
- package/dist/chunk-4D3RMGS7.mjs.map +0 -1
- package/dist/chunk-OJGFCI5M.mjs.map +0 -1
- package/dist/chunk-V7WWGAGN.mjs.map +0 -1
package/dist/carousel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/carousel.tsx","../src/carousel-control.tsx","../src/use-carousel.ts","../src/carousel-indicators.tsx","../src/carousel-slide.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n Token,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useToken } from \"@yamada-ui/use-token\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n filterUndefined,\n findChild,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { cloneElement } from \"react\"\nimport type { CarouselControlProps } from \"./carousel-control\"\nimport { CarouselControlNext, CarouselControlPrev } from \"./carousel-control\"\nimport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\nimport { CarouselIndicators } from \"./carousel-indicators\"\nimport { CarouselSlide } from \"./carousel-slide\"\nimport type {\n AlignmentOptionType,\n ScrollContainOptionType,\n SlidesInViewOptionsType,\n UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\n\ninterface CarouselOptions {\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Token<\"vertical\" | \"horizontal\">\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: Token<AlignmentOptionType>\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default ''\n */\n containScroll?: Token<ScrollContainOptionType>\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: Token<number>\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: Token<boolean>\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: Token<boolean>\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: Token<SlidesInViewOptionsType>\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: Token<boolean>\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: Token<boolean>\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: Token<number>\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: Token<number>\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: Token<boolean>\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: Token<boolean>\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: Token<boolean>\n /**\n * The CSS `width` property.\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * Props for carousel inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * If `true`, display the carousel control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * Props for carousel control element.\n */\n controlProps?: CarouselControlProps\n /**\n * Props for previous of the carousel control element.\n */\n controlPrevProps?: CarouselControlProps\n /**\n * Props for next of the carousel control element.\n */\n controlNextProps?: CarouselControlProps\n /**\n * If `true`, display the carousel indicator buttons.\n *\n * @default true\n */\n withIndicators?: Token<boolean>\n /**\n * Props for carousel indicators element.\n */\n indicatorsProps?: CarouselIndicatorsProps\n}\n\nexport interface CarouselProps\n extends ThemeProps<\"Carousel\">,\n Omit<HTMLUIProps, \"onChange\" | \"draggable\">,\n Pick<\n UseCarouselProps,\n | \"index\"\n | \"defaultIndex\"\n | \"onChange\"\n | \"onScrollProgress\"\n | \"watchDrag\"\n | \"watchResize\"\n | \"watchSlides\"\n | \"controlRef\"\n >,\n CarouselOptions {}\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see Docs https://yamada-ui.com/components/data-display/carousel\n */\nexport const Carousel = forwardRef<CarouselProps, \"div\">(\n ({ h, height, minH, minHeight, ...props }, ref) => {\n const orientation = useValue(props.orientation)\n const align = useValue(props.align)\n const autoplay = useValue(props.autoplay)\n const stopMouseEnterAutoplay = useValue(props.stopMouseEnterAutoplay)\n const loop = useValue(props.loop)\n const duration = useValue(props.duration)\n const delay = useValue(props.delay)\n const slidesToScroll = useValue(props.slidesToScroll)\n const draggable = useValue(props.draggable)\n const dragFree = useValue(props.dragFree)\n const inViewThreshold = useValue(props.inViewThreshold)\n const skipSnaps = useValue(props.skipSnaps)\n const containScroll = useValue(props.containScroll)\n const includeGapInSize = useValue(props.includeGapInSize)\n const _gap = useValue(props.gap)\n const gap = useToken(\"spaces\", _gap) ?? _gap\n const _slideSize = useValue(props.slideSize)\n const slideSize = useToken(\"sizes\", _slideSize) ?? _slideSize\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Carousel\", {\n ...props,\n orientation,\n align,\n autoplay,\n stopMouseEnterAutoplay,\n loop,\n duration,\n delay,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n includeGapInSize,\n gap,\n slideSize,\n })\n const {\n className,\n innerProps,\n withControls = true,\n controlProps,\n controlPrevProps,\n controlNextProps,\n withIndicators = true,\n indicatorsProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const computedWithControls = useValue(withControls)\n const computedWithIndicators = useValue(withIndicators)\n\n const { getContainerProps, getSlidesProps, children, ...rest } =\n useCarousel({\n ...computedProps,\n })\n\n const validChildren = getValidChildren(children)\n\n const customCarouselControlPrev = findChild(\n validChildren,\n CarouselControlPrev,\n )\n const customCarouselControlNext = findChild(\n validChildren,\n CarouselControlNext,\n )\n const customCarouselIndicators = findChild(\n validChildren,\n CarouselIndicators,\n )\n const slideChildren = pickChildren(validChildren, CarouselSlide)\n const otherChildren = omitChildren(\n validChildren,\n CarouselControlPrev,\n CarouselControlNext,\n CarouselIndicators,\n CarouselSlide,\n )\n\n const cloneSlideChildren = slideChildren.map((child, index) =>\n cloneElement(child, { index }),\n )\n\n h ??= height\n minH ??= minHeight\n\n return (\n <CarouselProvider value={{ styles, ...rest }}>\n <ui.div\n className={cx(\"ui-carousel\", className)}\n __css={{\n position: \"relative\",\n h: \"fit-content\",\n ...styles.container,\n }}\n {...getContainerProps({}, ref)}\n >\n {customCarouselControlPrev ??\n (computedWithControls ? (\n <CarouselControlPrev {...controlProps} {...controlPrevProps} />\n ) : null)}\n {customCarouselControlNext ??\n (computedWithControls ? (\n <CarouselControlNext {...controlProps} {...controlNextProps} />\n ) : null)}\n\n <CarouselSlides\n {...getSlidesProps({\n ...filterUndefined({ h, minH }),\n ...innerProps,\n })}\n >\n {cloneSlideChildren}\n </CarouselSlides>\n\n {customCarouselIndicators ??\n (computedWithIndicators ? (\n <CarouselIndicators {...indicatorsProps} />\n ) : null)}\n\n {otherChildren}\n </ui.div>\n </CarouselProvider>\n )\n },\n)\n\ntype CarouselSlidesProps = HTMLUIProps\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n ({ ...rest }, ref) => {\n const css: CSSUIObject = { w: \"100%\", h: \"fit-content\", overflow: \"hidden\" }\n\n return (\n <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n <CarouselSlidesInner {...rest} />\n </ui.div>\n )\n },\n)\n\ntype CarouselSlidesInnerProps = HTMLUIProps\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n const { orientation, includeGapInSize, gap, styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n ...styles.inner,\n ...(includeGapInSize\n ? {\n vars: [{ name: \"gap\", token: \"spaces\", value: gap }],\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n }\n : {}),\n }\n\n return (\n <ui.div className=\"ui-carousel__sliders__inner\" __css={css} {...rest} />\n )\n}\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef, useColorModeValue } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselControl } from \"./use-carousel\"\n\nexport interface CarouselControlProps extends IconButtonProps {}\n\nexport const CarouselControlPrev = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n const { getControlProps } = useCarouselControl({ operation: \"prev\" })\n\n return (\n <CarouselControl\n operation=\"prev\"\n className={cx(\"ui-carousel__control--prev\", className)}\n aria-label=\"Go to previous slide\"\n icon={\n <ChevronIcon\n __css={{\n fontSize: \"1.5em\",\n transform:\n orientation === \"vertical\" ? \"rotate(180deg)\" : \"rotate(90deg)\",\n }}\n />\n }\n {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n const { getControlProps } = useCarouselControl({ operation: \"next\" })\n\n return (\n <CarouselControl\n operation=\"next\"\n className={cx(\"ui-carousel__control--next\", className)}\n aria-label=\"Go to next slide\"\n icon={\n <ChevronIcon\n __css={{\n fontSize: \"1.5em\",\n transform:\n orientation === \"vertical\" ? \"rotate(0deg)\" : \"rotate(-90deg)\",\n }}\n />\n }\n {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nconst CarouselControl = forwardRef<\n CarouselControlProps & { operation: \"prev\" | \"next\" },\n \"button\"\n>(({ className, operation, ...rest }, ref) => {\n const { styles } = useCarouselContext()\n const colorScheme = useColorModeValue(\"whiteAlpha\", \"blackAlpha\")\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"fallback(kurillin, 9)\",\n ...styles.control,\n ...styles[operation],\n }\n\n return (\n <IconButton\n ref={ref}\n className={cx(\"ui-carousel__control\", className)}\n colorScheme={colorScheme}\n isRounded\n __css={css}\n {...rest}\n />\n )\n})\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n CSSUIObject,\n HTMLUIProps,\n CSSUIProps,\n PropGetter,\n RequiredPropGetter,\n HTMLProps,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n splitObject,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent, RefObject } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type AlignmentOptionType = EmblaOptionsType[\"align\"]\nexport type ScrollContainOptionType = EmblaOptionsType[\"containScroll\"]\nexport type SlidesInViewOptionsType = EmblaOptionsType[\"inViewThreshold\"]\nexport type DragHandlerOptionType = EmblaOptionsType[\"watchDrag\"]\nexport type ResizeHandlerOptionType = EmblaOptionsType[\"watchResize\"]\nexport type SlidesHandlerOptionType = EmblaOptionsType[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\n\ninterface CarouselContext {\n carousel: CarouselControl | undefined\n indexes: number[]\n selectedIndex: number\n orientation: \"vertical\" | \"horizontal\"\n includeGapInSize: boolean\n slidesToScroll: number\n slideSize: string | number\n gap: CSSUIProps[\"gap\"]\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n createContext<CarouselContext>({\n name: \"CarouselContext\",\n errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n })\n\nexport interface UseCarouselProps\n extends Omit<HTMLUIProps, \"onChange\" | \"draggable\" | \"gap\"> {\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: AlignmentOptionType\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default false\n */\n containScroll?: ScrollContainOptionType\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: SlidesInViewOptionsType\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: boolean\n /**\n * The CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: string | number\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n /**\n * Enables for scrolling the carousel with mouse and touch interactions.\n * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n *\n * @default true\n */\n watchDrag?: DragHandlerOptionType\n /**\n * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n *\n * @default true\n */\n watchResize?: ResizeHandlerOptionType\n /**\n * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n *\n * @default true\n */\n watchSlides?: SlidesHandlerOptionType\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | undefined>\n}\n\nexport const useCarousel = ({\n index,\n defaultIndex = 0,\n onChange,\n align = \"center\",\n orientation = \"horizontal\",\n autoplay = false,\n stopMouseEnterAutoplay = true,\n loop = true,\n duration = 25,\n delay = 4000,\n slidesToScroll = 1,\n draggable = true,\n dragFree = false,\n inViewThreshold = 0,\n skipSnaps = false,\n containScroll = false,\n slideSize = \"100%\",\n includeGapInSize = true,\n onScrollProgress,\n watchDrag = draggable,\n watchResize,\n watchSlides,\n controlRef,\n children,\n ...rest\n}: UseCarouselProps) => {\n const [{ gap = \"fallback(4, 1rem)\", ...containerProps }, slidesProps] =\n splitObject(rest, layoutStyleProperties)\n\n const [selectedIndex, setSelectedIndex] = useControllableState({\n value: index,\n defaultValue: defaultIndex,\n onChange,\n })\n\n const isVertical = orientation === \"vertical\"\n\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n axis: isVertical ? \"y\" : \"x\",\n startIndex: defaultIndex,\n loop,\n align,\n slidesToScroll,\n duration,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n watchDrag,\n watchResize,\n watchSlides,\n },\n [],\n )\n\n assignRef(controlRef, carousel)\n\n const [indexes, setIndexes] = useState<number[]>([])\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n const timeoutId = useRef<any>(undefined)\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setSelectedIndex(index)\n }, [carousel, setSelectedIndex])\n\n useEffect(() => {\n const isStop = isMouseEnter && stopMouseEnterAutoplay\n const isLast = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !isStop && !isLast) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = undefined\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [\n autoplay,\n delay,\n stopMouseEnterAutoplay,\n carousel,\n isMouseEnter,\n loop,\n selectedIndex,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [\n Children.toArray(children).length,\n align,\n orientation,\n loop,\n duration,\n gap,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n slideSize,\n includeGapInSize,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [carousel])\n\n useUpdateEffect(() => {\n if (carousel) {\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onScroll])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...containerProps,\n ...props,\n ref,\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [containerProps],\n )\n\n const getSlidesProps: PropGetter = useCallback(\n (props = {}) => ({\n ...slidesProps,\n ...props,\n ref: carouselRef,\n }),\n [slidesProps, carouselRef],\n )\n\n return {\n carousel,\n children,\n indexes,\n selectedIndex,\n orientation,\n slideSize,\n gap,\n slidesToScroll,\n includeGapInSize,\n getContainerProps,\n getSlidesProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport interface UseCarouselSlideProps {\n index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n const isSelected = index === selectedIndex\n\n const getSlideProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n }),\n [isSelected, index],\n )\n\n return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport interface UseCarouselControlProps extends IconButtonProps {\n operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n operation,\n ...rest\n}: UseCarouselControlProps) => {\n const { carousel } = useCarouselContext()\n\n const isPrev = operation === \"prev\"\n\n const disabled =\n rest.disabled ??\n rest.isDisabled ??\n (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n const onClick = useCallback(() => {\n if (!carousel) return\n\n if (isPrev) {\n carousel.scrollPrev()\n } else {\n carousel.scrollNext()\n }\n }, [carousel, isPrev])\n\n const getControlProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n disabled,\n onClick: handlerAll(props.onClick, onClick),\n }),\n [disabled, onClick],\n )\n\n return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n const onClick = useCallback(\n (ev: MouseEvent, index: number) => {\n if (!carousel) return\n\n ev.stopPropagation()\n\n carousel.scrollTo(index)\n },\n [carousel],\n )\n\n const getIndicatorProps: RequiredPropGetter<\n HTMLProps<\"button\"> & { index: number },\n HTMLProps<\"button\">\n > = useCallback(\n ({ index, ...props }) => {\n const isSelected = index === selectedIndex\n\n return {\n \"aria-label\": `Go to ${index + 1} slide`,\n ...props,\n key: index,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n }\n },\n [onClick, selectedIndex],\n )\n\n return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n typeof useCarouselIndicators\n>\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\nimport { cloneElement } from \"react\"\nimport { useCarouselContext, useCarouselIndicators } from \"./use-carousel\"\n\ninterface CarouselIndicatorsOptions {\n /**\n * The custom carousel indicator to use.\n */\n component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport interface CarouselIndicatorsProps\n extends HTMLUIProps,\n CarouselIndicatorsOptions {}\n\nexport const CarouselIndicators = forwardRef<CarouselIndicatorsProps, \"div\">(\n ({ className, component, ...rest }, ref) => {\n const { selectedIndex, orientation, styles } = useCarouselContext()\n\n const { indexes, getIndicatorProps } = useCarouselIndicators()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"fallback(kurillin, 9)\",\n display: \"flex\",\n justifyContent: \"center\",\n ...styles.indicators,\n ...(orientation === \"vertical\"\n ? { flexDirection: \"column\" }\n : { flexDirection: \"row\" }),\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-carousel__indicators\", className)}\n __css={css}\n {...rest}\n >\n {indexes.map((index) => {\n const isSelected = index === selectedIndex\n\n if (typeof component === \"function\") {\n const child = component({\n index,\n isSelected,\n }) as ReactElement | null\n\n if (!child) return null\n\n const props = getIndicatorProps({ ...child.props, index })\n\n return cloneElement(child as ReactElement, props)\n } else {\n const { key, ...props } = getIndicatorProps({ index })\n\n return <CarouselIndicator key={key} {...props} />\n }\n })}\n </ui.div>\n )\n },\n)\n\ninterface CarouselIndicatorProps extends HTMLUIProps<\"button\"> {}\n\nconst CarouselIndicator: FC<CarouselIndicatorProps> = ({\n className,\n ...rest\n}) => {\n const { styles } = useCarouselContext()\n\n const css: CSSUIObject = { ...styles.indicator }\n\n return (\n <ui.button\n type=\"button\"\n tabIndex={-1}\n className={cx(\"ui-carousel__indicators__indicator\", className)}\n __css={css}\n {...rest}\n />\n )\n}\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\nimport { useCarouselContext, useCarouselSlide } from \"./use-carousel\"\n\ninterface CarouselSlideOptions {\n /**\n * The CSS `width` property.\n */\n size?: CSSUIObject[\"width\"]\n}\n\nexport interface CarouselSlideProps\n extends HTMLUIProps,\n UseCarouselSlideProps,\n CarouselSlideOptions {}\n\nexport const CarouselSlide = forwardRef<CarouselSlideProps, \"div\">(\n ({ className, size, ...rest }, ref) => {\n const { slideSize, includeGapInSize, orientation, gap } =\n useCarouselContext()\n\n const { getSlideProps } = useCarouselSlide(rest)\n\n size ??= slideSize\n\n const css: CSSUIObject = {\n position: \"relative\",\n flex: `0 0 ${size}`,\n ...(includeGapInSize\n ? { [orientation === \"vertical\" ? \"pb\" : \"pr\"]: gap }\n : { [orientation === \"vertical\" ? \"mb\" : \"mr\"]: gap }),\n }\n\n return (\n <ui.div\n className={cx(\"ui-carousel__slide\", className)}\n __css={css}\n {...getSlideProps({})}\n >\n <CarouselSlideInner ref={ref} {...rest} />\n </ui.div>\n )\n },\n)\n\ninterface CarouselSlideInnerProps extends HTMLUIProps {}\n\nconst CarouselSlideInner = forwardRef<CarouselSlideInnerProps, \"div\">(\n ({ ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className=\"ui-carousel__slide__inner\"\n w=\"100%\"\n h=\"100%\"\n {...rest}\n />\n )\n },\n)\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_core","import_utils","useEmblaCarousel","index","indexes","import_core","import_utils","import_react","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/carousel.tsx","../src/carousel-control.tsx","../src/use-carousel.ts","../src/carousel-indicators.tsx","../src/carousel-slide.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n Token,\n CSSUIProps,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useToken } from \"@yamada-ui/use-token\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n filterUndefined,\n findChild,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport type { CarouselControlProps } from \"./carousel-control\"\nimport { CarouselControlNext, CarouselControlPrev } from \"./carousel-control\"\nimport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\nimport { CarouselIndicators } from \"./carousel-indicators\"\nimport { CarouselSlide } from \"./carousel-slide\"\nimport type {\n AlignmentOptionType,\n ScrollContainOptionType,\n SlidesInViewOptionsType,\n UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\n\ninterface CarouselOptions {\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Token<\"vertical\" | \"horizontal\">\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: Token<AlignmentOptionType>\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default ''\n */\n containScroll?: Token<ScrollContainOptionType>\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: Token<number>\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: Token<boolean>\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: Token<boolean>\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: Token<SlidesInViewOptionsType>\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: Token<boolean>\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: Token<boolean>\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: Token<number>\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: Token<number>\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: Token<boolean>\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: Token<boolean>\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: Token<boolean>\n /**\n * The CSS `width` property.\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * Props for carousel inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * If `true`, display the carousel control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * Props for carousel control element.\n */\n controlProps?: CarouselControlProps\n /**\n * Props for previous of the carousel control element.\n */\n controlPrevProps?: CarouselControlProps\n /**\n * Props for next of the carousel control element.\n */\n controlNextProps?: CarouselControlProps\n /**\n * If `true`, display the carousel indicator buttons.\n *\n * @default true\n */\n withIndicators?: Token<boolean>\n /**\n * Props for carousel indicators element.\n */\n indicatorsProps?: CarouselIndicatorsProps\n}\n\nexport interface CarouselProps\n extends ThemeProps<\"Carousel\">,\n Omit<HTMLUIProps, \"onChange\" | \"draggable\">,\n Pick<\n UseCarouselProps,\n | \"index\"\n | \"defaultIndex\"\n | \"onChange\"\n | \"onScrollProgress\"\n | \"watchDrag\"\n | \"watchResize\"\n | \"watchSlides\"\n | \"controlRef\"\n >,\n CarouselOptions {}\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see Docs https://yamada-ui.com/components/data-display/carousel\n */\nexport const Carousel = forwardRef<CarouselProps, \"div\">(\n ({ h, height, minH, minHeight, ...props }, ref) => {\n const orientation = useValue(props.orientation)\n const align = useValue(props.align)\n const autoplay = useValue(props.autoplay)\n const stopMouseEnterAutoplay = useValue(props.stopMouseEnterAutoplay)\n const loop = useValue(props.loop)\n const duration = useValue(props.duration)\n const delay = useValue(props.delay)\n const slidesToScroll = useValue(props.slidesToScroll)\n const draggable = useValue(props.draggable)\n const dragFree = useValue(props.dragFree)\n const inViewThreshold = useValue(props.inViewThreshold)\n const skipSnaps = useValue(props.skipSnaps)\n const containScroll = useValue(props.containScroll)\n const includeGapInSize = useValue(props.includeGapInSize)\n const _gap = useValue(props.gap)\n const gap = useToken(\"spaces\", _gap) ?? _gap\n const _slideSize = useValue(props.slideSize)\n const slideSize = useToken(\"sizes\", _slideSize) ?? _slideSize\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Carousel\", {\n ...props,\n orientation,\n align,\n autoplay,\n stopMouseEnterAutoplay,\n loop,\n duration,\n delay,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n includeGapInSize,\n gap,\n slideSize,\n })\n const {\n className,\n innerProps,\n withControls = true,\n controlProps,\n controlPrevProps,\n controlNextProps,\n withIndicators = true,\n indicatorsProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const computedWithControls = useValue(withControls)\n const computedWithIndicators = useValue(withIndicators)\n\n const { getContainerProps, getSlidesProps, children, ...rest } =\n useCarousel({\n ...computedProps,\n })\n\n const validChildren = getValidChildren(children)\n\n const customCarouselControlPrev = findChild(\n validChildren,\n CarouselControlPrev,\n )\n const customCarouselControlNext = findChild(\n validChildren,\n CarouselControlNext,\n )\n const customCarouselIndicators = findChild(\n validChildren,\n CarouselIndicators,\n )\n const slideChildren = pickChildren(validChildren, CarouselSlide)\n const otherChildren = omitChildren(\n validChildren,\n CarouselControlPrev,\n CarouselControlNext,\n CarouselIndicators,\n CarouselSlide,\n )\n\n const cloneSlideChildren = slideChildren.map((child, index) =>\n cloneElement(child, { index }),\n )\n\n h ??= height\n minH ??= minHeight\n\n return (\n <CarouselProvider value={{ styles, ...rest }}>\n <ui.div\n className={cx(\"ui-carousel\", className)}\n __css={{\n position: \"relative\",\n h: \"fit-content\",\n ...styles.container,\n }}\n {...getContainerProps({}, ref)}\n >\n {customCarouselControlPrev ??\n (computedWithControls ? (\n <CarouselControlPrev {...controlProps} {...controlPrevProps} />\n ) : null)}\n {customCarouselControlNext ??\n (computedWithControls ? (\n <CarouselControlNext {...controlProps} {...controlNextProps} />\n ) : null)}\n\n <CarouselSlides\n {...getSlidesProps({\n ...filterUndefined({ h, minH }),\n ...innerProps,\n })}\n >\n {cloneSlideChildren}\n </CarouselSlides>\n\n {customCarouselIndicators ??\n (computedWithIndicators ? (\n <CarouselIndicators {...indicatorsProps} />\n ) : null)}\n\n {otherChildren}\n </ui.div>\n </CarouselProvider>\n )\n },\n)\n\nCarousel.displayName = \"Carousel\"\nCarousel.__ui__ = \"Carousel\"\n\ntype CarouselSlidesProps = HTMLUIProps\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n ({ ...rest }, ref) => {\n const css: CSSUIObject = { w: \"100%\", h: \"fit-content\", overflow: \"hidden\" }\n\n return (\n <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n <CarouselSlidesInner {...rest} />\n </ui.div>\n )\n },\n)\n\nCarouselSlides.displayName = \"CarouselSlides\"\nCarouselSlides.__ui__ = \"CarouselSlides\"\n\ntype CarouselSlidesInnerProps = HTMLUIProps\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n const { orientation, includeGapInSize, gap, styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n ...styles.inner,\n ...(includeGapInSize\n ? {\n vars: [{ name: \"gap\", token: \"spaces\", value: gap }],\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n }\n : {}),\n }\n\n return (\n <ui.div className=\"ui-carousel__sliders__inner\" __css={css} {...rest} />\n )\n}\n\nCarouselSlidesInner.displayName = \"CarouselSlidesInner\"\nCarouselSlidesInner.__ui__ = \"CarouselSlidesInner\"\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef, useColorModeValue } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselControl } from \"./use-carousel\"\n\nexport interface CarouselControlProps extends IconButtonProps {}\n\nexport const CarouselControlPrev = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n const { getControlProps } = useCarouselControl({ operation: \"prev\" })\n\n return (\n <CarouselControl\n operation=\"prev\"\n className={cx(\"ui-carousel__control--prev\", className)}\n aria-label=\"Go to previous slide\"\n icon={\n <ChevronIcon\n __css={{\n fontSize: \"1.5em\",\n transform:\n orientation === \"vertical\" ? \"rotate(180deg)\" : \"rotate(90deg)\",\n }}\n />\n }\n {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nCarouselControlPrev.displayName = \"CarouselControlPrev\"\nCarouselControlPrev.__ui__ = \"CarouselControlPrev\"\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n const { getControlProps } = useCarouselControl({ operation: \"next\" })\n\n return (\n <CarouselControl\n operation=\"next\"\n className={cx(\"ui-carousel__control--next\", className)}\n aria-label=\"Go to next slide\"\n icon={\n <ChevronIcon\n __css={{\n fontSize: \"1.5em\",\n transform:\n orientation === \"vertical\" ? \"rotate(0deg)\" : \"rotate(-90deg)\",\n }}\n />\n }\n {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nCarouselControlNext.displayName = \"CarouselControlNext\"\nCarouselControlNext.__ui__ = \"CarouselControlNext\"\n\nconst CarouselControl = forwardRef<\n CarouselControlProps & { operation: \"prev\" | \"next\" },\n \"button\"\n>(({ className, operation, ...rest }, ref) => {\n const { styles } = useCarouselContext()\n const colorScheme = useColorModeValue(\"whiteAlpha\", \"blackAlpha\")\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"fallback(kurillin, 9)\",\n ...styles.control,\n ...styles[operation],\n }\n\n return (\n <IconButton\n ref={ref}\n className={cx(\"ui-carousel__control\", className)}\n colorScheme={colorScheme}\n isRounded\n __css={css}\n {...rest}\n />\n )\n})\n\nCarouselControl.displayName = \"CarouselControl\"\nCarouselControl.__ui__ = \"CarouselControl\"\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n CSSUIObject,\n HTMLUIProps,\n CSSUIProps,\n PropGetter,\n RequiredPropGetter,\n HTMLProps,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n splitObject,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent, RefObject } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type AlignmentOptionType = EmblaOptionsType[\"align\"]\nexport type ScrollContainOptionType = EmblaOptionsType[\"containScroll\"]\nexport type SlidesInViewOptionsType = EmblaOptionsType[\"inViewThreshold\"]\nexport type DragHandlerOptionType = EmblaOptionsType[\"watchDrag\"]\nexport type ResizeHandlerOptionType = EmblaOptionsType[\"watchResize\"]\nexport type SlidesHandlerOptionType = EmblaOptionsType[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\n\ninterface CarouselContext {\n carousel: CarouselControl | undefined\n indexes: number[]\n selectedIndex: number\n orientation: \"vertical\" | \"horizontal\"\n includeGapInSize: boolean\n slidesToScroll: number\n slideSize: string | number\n gap: CSSUIProps[\"gap\"]\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n createContext<CarouselContext>({\n name: \"CarouselContext\",\n errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n })\n\nexport interface UseCarouselProps\n extends Omit<HTMLUIProps, \"onChange\" | \"draggable\" | \"gap\"> {\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: AlignmentOptionType\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default false\n */\n containScroll?: ScrollContainOptionType\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: SlidesInViewOptionsType\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: boolean\n /**\n * The CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: string | number\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n /**\n * Enables for scrolling the carousel with mouse and touch interactions.\n * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n *\n * @default true\n */\n watchDrag?: DragHandlerOptionType\n /**\n * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n *\n * @default true\n */\n watchResize?: ResizeHandlerOptionType\n /**\n * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n *\n * @default true\n */\n watchSlides?: SlidesHandlerOptionType\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | undefined>\n}\n\nexport const useCarousel = ({\n index,\n defaultIndex = 0,\n onChange,\n align = \"center\",\n orientation = \"horizontal\",\n autoplay = false,\n stopMouseEnterAutoplay = true,\n loop = true,\n duration = 25,\n delay = 4000,\n slidesToScroll = 1,\n draggable = true,\n dragFree = false,\n inViewThreshold = 0,\n skipSnaps = false,\n containScroll = false,\n slideSize = \"100%\",\n includeGapInSize = true,\n onScrollProgress,\n watchDrag = draggable,\n watchResize,\n watchSlides,\n controlRef,\n children,\n ...rest\n}: UseCarouselProps) => {\n const [{ gap = \"fallback(4, 1rem)\", ...containerProps }, slidesProps] =\n splitObject(rest, layoutStyleProperties)\n\n const [selectedIndex, setSelectedIndex] = useControllableState({\n value: index,\n defaultValue: defaultIndex,\n onChange,\n })\n\n const isVertical = orientation === \"vertical\"\n\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n axis: isVertical ? \"y\" : \"x\",\n startIndex: defaultIndex,\n loop,\n align,\n slidesToScroll,\n duration,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n watchDrag,\n watchResize,\n watchSlides,\n },\n [],\n )\n\n assignRef(controlRef, carousel)\n\n const [indexes, setIndexes] = useState<number[]>([])\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n const timeoutId = useRef<any>(undefined)\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setSelectedIndex(index)\n }, [carousel, setSelectedIndex])\n\n useEffect(() => {\n const isStop = isMouseEnter && stopMouseEnterAutoplay\n const isLast = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !isStop && !isLast) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = undefined\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [\n autoplay,\n delay,\n stopMouseEnterAutoplay,\n carousel,\n isMouseEnter,\n loop,\n selectedIndex,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [\n Children.toArray(children).length,\n align,\n orientation,\n loop,\n duration,\n gap,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n slideSize,\n includeGapInSize,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [carousel])\n\n useUpdateEffect(() => {\n if (carousel) {\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onScroll])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...containerProps,\n ...props,\n ref,\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [containerProps],\n )\n\n const getSlidesProps: PropGetter = useCallback(\n (props = {}) => ({\n ...slidesProps,\n ...props,\n ref: carouselRef,\n }),\n [slidesProps, carouselRef],\n )\n\n return {\n carousel,\n children,\n indexes,\n selectedIndex,\n orientation,\n slideSize,\n gap,\n slidesToScroll,\n includeGapInSize,\n getContainerProps,\n getSlidesProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport interface UseCarouselSlideProps {\n index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n const isSelected = index === selectedIndex\n\n const getSlideProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n }),\n [isSelected, index],\n )\n\n return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport interface UseCarouselControlProps extends IconButtonProps {\n operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n operation,\n ...rest\n}: UseCarouselControlProps) => {\n const { carousel } = useCarouselContext()\n\n const isPrev = operation === \"prev\"\n\n const disabled =\n rest.disabled ??\n rest.isDisabled ??\n (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n const onClick = useCallback(() => {\n if (!carousel) return\n\n if (isPrev) {\n carousel.scrollPrev()\n } else {\n carousel.scrollNext()\n }\n }, [carousel, isPrev])\n\n const getControlProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n disabled,\n onClick: handlerAll(props.onClick, onClick),\n }),\n [disabled, onClick],\n )\n\n return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n const onClick = useCallback(\n (ev: MouseEvent, index: number) => {\n if (!carousel) return\n\n ev.stopPropagation()\n\n carousel.scrollTo(index)\n },\n [carousel],\n )\n\n const getIndicatorProps: RequiredPropGetter<\n HTMLProps<\"button\"> & { index: number },\n HTMLProps<\"button\">\n > = useCallback(\n ({ index, ...props }) => {\n const isSelected = index === selectedIndex\n\n return {\n \"aria-label\": `Go to ${index + 1} slide`,\n ...props,\n key: index,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n }\n },\n [onClick, selectedIndex],\n )\n\n return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n typeof useCarouselIndicators\n>\n","import type { HTMLUIProps, CSSUIObject, FC } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport { cloneElement } from \"react\"\nimport { useCarouselContext, useCarouselIndicators } from \"./use-carousel\"\n\ninterface CarouselIndicatorsOptions {\n /**\n * The custom carousel indicator to use.\n */\n component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport interface CarouselIndicatorsProps\n extends HTMLUIProps,\n CarouselIndicatorsOptions {}\n\nexport const CarouselIndicators = forwardRef<CarouselIndicatorsProps, \"div\">(\n ({ className, component, ...rest }, ref) => {\n const { selectedIndex, orientation, styles } = useCarouselContext()\n\n const { indexes, getIndicatorProps } = useCarouselIndicators()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"fallback(kurillin, 9)\",\n display: \"flex\",\n justifyContent: \"center\",\n ...styles.indicators,\n ...(orientation === \"vertical\"\n ? { flexDirection: \"column\" }\n : { flexDirection: \"row\" }),\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-carousel__indicators\", className)}\n __css={css}\n {...rest}\n >\n {indexes.map((index) => {\n const isSelected = index === selectedIndex\n\n if (typeof component === \"function\") {\n const child = component({\n index,\n isSelected,\n }) as ReactElement | null\n\n if (!child) return null\n\n const props = getIndicatorProps({ ...child.props, index })\n\n return cloneElement(child as ReactElement, props)\n } else {\n const { key, ...props } = getIndicatorProps({ index })\n\n return <CarouselIndicator key={key} {...props} />\n }\n })}\n </ui.div>\n )\n },\n)\n\nCarouselIndicators.displayName = \"CarouselIndicators\"\nCarouselIndicators.__ui__ = \"CarouselIndicators\"\n\ninterface CarouselIndicatorProps extends HTMLUIProps<\"button\"> {}\n\nconst CarouselIndicator: FC<CarouselIndicatorProps> = ({\n className,\n ...rest\n}) => {\n const { styles } = useCarouselContext()\n\n const css: CSSUIObject = { ...styles.indicator }\n\n return (\n <ui.button\n type=\"button\"\n tabIndex={-1}\n className={cx(\"ui-carousel__indicators__indicator\", className)}\n __css={css}\n {...rest}\n />\n )\n}\n\nCarouselIndicator.displayName = \"CarouselIndicator\"\nCarouselIndicator.__ui__ = \"CarouselIndicator\"\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\nimport { useCarouselContext, useCarouselSlide } from \"./use-carousel\"\n\ninterface CarouselSlideOptions {\n /**\n * The CSS `width` property.\n */\n size?: CSSUIObject[\"width\"]\n}\n\nexport interface CarouselSlideProps\n extends HTMLUIProps,\n UseCarouselSlideProps,\n CarouselSlideOptions {}\n\nexport const CarouselSlide = forwardRef<CarouselSlideProps, \"div\">(\n ({ className, size, ...rest }, ref) => {\n const { slideSize, includeGapInSize, orientation, gap } =\n useCarouselContext()\n\n const { getSlideProps } = useCarouselSlide(rest)\n\n size ??= slideSize\n\n const css: CSSUIObject = {\n position: \"relative\",\n flex: `0 0 ${size}`,\n ...(includeGapInSize\n ? { [orientation === \"vertical\" ? \"pb\" : \"pr\"]: gap }\n : { [orientation === \"vertical\" ? \"mb\" : \"mr\"]: gap }),\n }\n\n return (\n <ui.div\n className={cx(\"ui-carousel__slide\", className)}\n __css={css}\n {...getSlideProps({})}\n >\n <CarouselSlideInner ref={ref} {...rest} />\n </ui.div>\n )\n },\n)\n\nCarouselSlide.displayName = \"CarouselSlide\"\nCarouselSlide.__ui__ = \"CarouselSlide\"\n\ninterface CarouselSlideInnerProps extends HTMLUIProps {}\n\nconst CarouselSlideInner = forwardRef<CarouselSlideInnerProps, \"div\">(\n ({ ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className=\"ui-carousel__slide__inner\"\n w=\"100%\"\n h=\"100%\"\n {...rest}\n />\n )\n },\n)\n\nCarouselSlideInner.displayName = \"CarouselSlideInner\"\nCarouselSlideInner.__ui__ = \"CarouselSlideInner\"\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_core","import_utils","useEmblaCarousel","index","indexes","import_core","import_utils","import_react","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/carousel.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
Carousel
|
|
4
|
-
} from "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-
|
|
7
|
-
import "./chunk-
|
|
4
|
+
} from "./chunk-4J2ZLVEE.mjs";
|
|
5
|
+
import "./chunk-JWJMR4LX.mjs";
|
|
6
|
+
import "./chunk-L4NF6CWV.mjs";
|
|
7
|
+
import "./chunk-TMSSJMLI.mjs";
|
|
8
8
|
import "./chunk-YSHRYDOY.mjs";
|
|
9
9
|
export {
|
|
10
10
|
Carousel
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
import {
|
|
3
3
|
CarouselControlNext,
|
|
4
4
|
CarouselControlPrev
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-JWJMR4LX.mjs";
|
|
6
6
|
import {
|
|
7
7
|
CarouselIndicators
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-L4NF6CWV.mjs";
|
|
9
9
|
import {
|
|
10
10
|
CarouselSlide
|
|
11
|
-
} from "./chunk-
|
|
11
|
+
} from "./chunk-TMSSJMLI.mjs";
|
|
12
12
|
import {
|
|
13
13
|
CarouselProvider,
|
|
14
14
|
useCarousel,
|
|
@@ -146,12 +146,16 @@ var Carousel = forwardRef(
|
|
|
146
146
|
) });
|
|
147
147
|
}
|
|
148
148
|
);
|
|
149
|
+
Carousel.displayName = "Carousel";
|
|
150
|
+
Carousel.__ui__ = "Carousel";
|
|
149
151
|
var CarouselSlides = forwardRef(
|
|
150
152
|
({ ...rest }, ref) => {
|
|
151
153
|
const css = { w: "100%", h: "fit-content", overflow: "hidden" };
|
|
152
154
|
return /* @__PURE__ */ jsx(ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ jsx(CarouselSlidesInner, { ...rest }) });
|
|
153
155
|
}
|
|
154
156
|
);
|
|
157
|
+
CarouselSlides.displayName = "CarouselSlides";
|
|
158
|
+
CarouselSlides.__ui__ = "CarouselSlides";
|
|
155
159
|
var CarouselSlidesInner = ({ ...rest }) => {
|
|
156
160
|
const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
|
|
157
161
|
const css = {
|
|
@@ -165,8 +169,10 @@ var CarouselSlidesInner = ({ ...rest }) => {
|
|
|
165
169
|
};
|
|
166
170
|
return /* @__PURE__ */ jsx(ui.div, { className: "ui-carousel__sliders__inner", __css: css, ...rest });
|
|
167
171
|
};
|
|
172
|
+
CarouselSlidesInner.displayName = "CarouselSlidesInner";
|
|
173
|
+
CarouselSlidesInner.__ui__ = "CarouselSlidesInner";
|
|
168
174
|
|
|
169
175
|
export {
|
|
170
176
|
Carousel
|
|
171
177
|
};
|
|
172
|
-
//# sourceMappingURL=chunk-
|
|
178
|
+
//# sourceMappingURL=chunk-4J2ZLVEE.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/carousel.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n Token,\n CSSUIProps,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useToken } from \"@yamada-ui/use-token\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n filterUndefined,\n findChild,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport type { CarouselControlProps } from \"./carousel-control\"\nimport { CarouselControlNext, CarouselControlPrev } from \"./carousel-control\"\nimport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\nimport { CarouselIndicators } from \"./carousel-indicators\"\nimport { CarouselSlide } from \"./carousel-slide\"\nimport type {\n AlignmentOptionType,\n ScrollContainOptionType,\n SlidesInViewOptionsType,\n UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\n\ninterface CarouselOptions {\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Token<\"vertical\" | \"horizontal\">\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: Token<AlignmentOptionType>\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default ''\n */\n containScroll?: Token<ScrollContainOptionType>\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: Token<number>\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: Token<boolean>\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: Token<boolean>\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: Token<SlidesInViewOptionsType>\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: Token<boolean>\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: Token<boolean>\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: Token<number>\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: Token<number>\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: Token<boolean>\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: Token<boolean>\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: Token<boolean>\n /**\n * The CSS `width` property.\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * Props for carousel inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * If `true`, display the carousel control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * Props for carousel control element.\n */\n controlProps?: CarouselControlProps\n /**\n * Props for previous of the carousel control element.\n */\n controlPrevProps?: CarouselControlProps\n /**\n * Props for next of the carousel control element.\n */\n controlNextProps?: CarouselControlProps\n /**\n * If `true`, display the carousel indicator buttons.\n *\n * @default true\n */\n withIndicators?: Token<boolean>\n /**\n * Props for carousel indicators element.\n */\n indicatorsProps?: CarouselIndicatorsProps\n}\n\nexport interface CarouselProps\n extends ThemeProps<\"Carousel\">,\n Omit<HTMLUIProps, \"onChange\" | \"draggable\">,\n Pick<\n UseCarouselProps,\n | \"index\"\n | \"defaultIndex\"\n | \"onChange\"\n | \"onScrollProgress\"\n | \"watchDrag\"\n | \"watchResize\"\n | \"watchSlides\"\n | \"controlRef\"\n >,\n CarouselOptions {}\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see Docs https://yamada-ui.com/components/data-display/carousel\n */\nexport const Carousel = forwardRef<CarouselProps, \"div\">(\n ({ h, height, minH, minHeight, ...props }, ref) => {\n const orientation = useValue(props.orientation)\n const align = useValue(props.align)\n const autoplay = useValue(props.autoplay)\n const stopMouseEnterAutoplay = useValue(props.stopMouseEnterAutoplay)\n const loop = useValue(props.loop)\n const duration = useValue(props.duration)\n const delay = useValue(props.delay)\n const slidesToScroll = useValue(props.slidesToScroll)\n const draggable = useValue(props.draggable)\n const dragFree = useValue(props.dragFree)\n const inViewThreshold = useValue(props.inViewThreshold)\n const skipSnaps = useValue(props.skipSnaps)\n const containScroll = useValue(props.containScroll)\n const includeGapInSize = useValue(props.includeGapInSize)\n const _gap = useValue(props.gap)\n const gap = useToken(\"spaces\", _gap) ?? _gap\n const _slideSize = useValue(props.slideSize)\n const slideSize = useToken(\"sizes\", _slideSize) ?? _slideSize\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Carousel\", {\n ...props,\n orientation,\n align,\n autoplay,\n stopMouseEnterAutoplay,\n loop,\n duration,\n delay,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n includeGapInSize,\n gap,\n slideSize,\n })\n const {\n className,\n innerProps,\n withControls = true,\n controlProps,\n controlPrevProps,\n controlNextProps,\n withIndicators = true,\n indicatorsProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const computedWithControls = useValue(withControls)\n const computedWithIndicators = useValue(withIndicators)\n\n const { getContainerProps, getSlidesProps, children, ...rest } =\n useCarousel({\n ...computedProps,\n })\n\n const validChildren = getValidChildren(children)\n\n const customCarouselControlPrev = findChild(\n validChildren,\n CarouselControlPrev,\n )\n const customCarouselControlNext = findChild(\n validChildren,\n CarouselControlNext,\n )\n const customCarouselIndicators = findChild(\n validChildren,\n CarouselIndicators,\n )\n const slideChildren = pickChildren(validChildren, CarouselSlide)\n const otherChildren = omitChildren(\n validChildren,\n CarouselControlPrev,\n CarouselControlNext,\n CarouselIndicators,\n CarouselSlide,\n )\n\n const cloneSlideChildren = slideChildren.map((child, index) =>\n cloneElement(child, { index }),\n )\n\n h ??= height\n minH ??= minHeight\n\n return (\n <CarouselProvider value={{ styles, ...rest }}>\n <ui.div\n className={cx(\"ui-carousel\", className)}\n __css={{\n position: \"relative\",\n h: \"fit-content\",\n ...styles.container,\n }}\n {...getContainerProps({}, ref)}\n >\n {customCarouselControlPrev ??\n (computedWithControls ? (\n <CarouselControlPrev {...controlProps} {...controlPrevProps} />\n ) : null)}\n {customCarouselControlNext ??\n (computedWithControls ? (\n <CarouselControlNext {...controlProps} {...controlNextProps} />\n ) : null)}\n\n <CarouselSlides\n {...getSlidesProps({\n ...filterUndefined({ h, minH }),\n ...innerProps,\n })}\n >\n {cloneSlideChildren}\n </CarouselSlides>\n\n {customCarouselIndicators ??\n (computedWithIndicators ? (\n <CarouselIndicators {...indicatorsProps} />\n ) : null)}\n\n {otherChildren}\n </ui.div>\n </CarouselProvider>\n )\n },\n)\n\nCarousel.displayName = \"Carousel\"\nCarousel.__ui__ = \"Carousel\"\n\ntype CarouselSlidesProps = HTMLUIProps\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n ({ ...rest }, ref) => {\n const css: CSSUIObject = { w: \"100%\", h: \"fit-content\", overflow: \"hidden\" }\n\n return (\n <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n <CarouselSlidesInner {...rest} />\n </ui.div>\n )\n },\n)\n\nCarouselSlides.displayName = \"CarouselSlides\"\nCarouselSlides.__ui__ = \"CarouselSlides\"\n\ntype CarouselSlidesInnerProps = HTMLUIProps\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n const { orientation, includeGapInSize, gap, styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n ...styles.inner,\n ...(includeGapInSize\n ? {\n vars: [{ name: \"gap\", token: \"spaces\", value: gap }],\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n }\n : {}),\n }\n\n return (\n <ui.div className=\"ui-carousel__sliders__inner\" __css={css} {...rest} />\n )\n}\n\nCarouselSlidesInner.displayName = \"CarouselSlidesInner\"\nCarouselSlidesInner.__ui__ = \"CarouselSlidesInner\"\n"],"mappings":"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","names":[]}
|
|
@@ -34,6 +34,8 @@ var CarouselControlPrev = forwardRef(
|
|
|
34
34
|
);
|
|
35
35
|
}
|
|
36
36
|
);
|
|
37
|
+
CarouselControlPrev.displayName = "CarouselControlPrev";
|
|
38
|
+
CarouselControlPrev.__ui__ = "CarouselControlPrev";
|
|
37
39
|
var CarouselControlNext = forwardRef(
|
|
38
40
|
({ className, ...rest }, ref) => {
|
|
39
41
|
const { orientation } = useCarouselContext();
|
|
@@ -58,6 +60,8 @@ var CarouselControlNext = forwardRef(
|
|
|
58
60
|
);
|
|
59
61
|
}
|
|
60
62
|
);
|
|
63
|
+
CarouselControlNext.displayName = "CarouselControlNext";
|
|
64
|
+
CarouselControlNext.__ui__ = "CarouselControlNext";
|
|
61
65
|
var CarouselControl = forwardRef(({ className, operation, ...rest }, ref) => {
|
|
62
66
|
const { styles } = useCarouselContext();
|
|
63
67
|
const colorScheme = useColorModeValue("whiteAlpha", "blackAlpha");
|
|
@@ -79,9 +83,11 @@ var CarouselControl = forwardRef(({ className, operation, ...rest }, ref) => {
|
|
|
79
83
|
}
|
|
80
84
|
);
|
|
81
85
|
});
|
|
86
|
+
CarouselControl.displayName = "CarouselControl";
|
|
87
|
+
CarouselControl.__ui__ = "CarouselControl";
|
|
82
88
|
|
|
83
89
|
export {
|
|
84
90
|
CarouselControlPrev,
|
|
85
91
|
CarouselControlNext
|
|
86
92
|
};
|
|
87
|
-
//# sourceMappingURL=chunk-
|
|
93
|
+
//# sourceMappingURL=chunk-JWJMR4LX.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/carousel-control.tsx"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef, useColorModeValue } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselControl } from \"./use-carousel\"\n\nexport interface CarouselControlProps extends IconButtonProps {}\n\nexport const CarouselControlPrev = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n const { getControlProps } = useCarouselControl({ operation: \"prev\" })\n\n return (\n <CarouselControl\n operation=\"prev\"\n className={cx(\"ui-carousel__control--prev\", className)}\n aria-label=\"Go to previous slide\"\n icon={\n <ChevronIcon\n __css={{\n fontSize: \"1.5em\",\n transform:\n orientation === \"vertical\" ? \"rotate(180deg)\" : \"rotate(90deg)\",\n }}\n />\n }\n {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nCarouselControlPrev.displayName = \"CarouselControlPrev\"\nCarouselControlPrev.__ui__ = \"CarouselControlPrev\"\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n ({ className, ...rest }, ref) => {\n const { orientation } = useCarouselContext()\n\n const { getControlProps } = useCarouselControl({ operation: \"next\" })\n\n return (\n <CarouselControl\n operation=\"next\"\n className={cx(\"ui-carousel__control--next\", className)}\n aria-label=\"Go to next slide\"\n icon={\n <ChevronIcon\n __css={{\n fontSize: \"1.5em\",\n transform:\n orientation === \"vertical\" ? \"rotate(0deg)\" : \"rotate(-90deg)\",\n }}\n />\n }\n {...getControlProps(rest, ref)}\n />\n )\n },\n)\n\nCarouselControlNext.displayName = \"CarouselControlNext\"\nCarouselControlNext.__ui__ = \"CarouselControlNext\"\n\nconst CarouselControl = forwardRef<\n CarouselControlProps & { operation: \"prev\" | \"next\" },\n \"button\"\n>(({ className, operation, ...rest }, ref) => {\n const { styles } = useCarouselContext()\n const colorScheme = useColorModeValue(\"whiteAlpha\", \"blackAlpha\")\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"fallback(kurillin, 9)\",\n ...styles.control,\n ...styles[operation],\n }\n\n return (\n <IconButton\n ref={ref}\n className={cx(\"ui-carousel__control\", className)}\n colorScheme={colorScheme}\n isRounded\n __css={css}\n {...rest}\n />\n )\n})\n\nCarouselControl.displayName = \"CarouselControl\"\nCarouselControl.__ui__ = \"CarouselControl\"\n"],"mappings":";;;;;;;AACA,SAAS,kBAAkB;AAE3B,SAAS,YAAY,yBAAyB;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAiBT;AAZH,IAAM,sBAAsB;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,YAAY,IAAI,mBAAmB;AAE3C,UAAM,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,WAAW,OAAO,CAAC;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,QACrD,cAAW;AAAA,QACX,MACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,WACE,gBAAgB,aAAa,mBAAmB;AAAA,YACpD;AAAA;AAAA,QACF;AAAA,QAED,GAAG,gBAAgB,MAAM,GAAG;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,SAAS;AAEtB,IAAM,sBAAsB;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,YAAY,IAAI,mBAAmB;AAE3C,UAAM,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,WAAW,OAAO,CAAC;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,QACrD,cAAW;AAAA,QACX,MACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,WACE,gBAAgB,aAAa,iBAAiB;AAAA,YAClD;AAAA;AAAA,QACF;AAAA,QAED,GAAG,gBAAgB,MAAM,GAAG;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,SAAS;AAE7B,IAAM,kBAAkB,WAGtB,CAAC,EAAE,WAAW,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC5C,QAAM,EAAE,OAAO,IAAI,mBAAmB;AACtC,QAAM,cAAc,kBAAkB,cAAc,YAAY;AAEhE,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,SAAS;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,wBAAwB,SAAS;AAAA,MAC/C;AAAA,MACA,WAAS;AAAA,MACT,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,gBAAgB,cAAc;AAC9B,gBAAgB,SAAS;","names":[]}
|
|
@@ -47,6 +47,8 @@ var CarouselIndicators = forwardRef(
|
|
|
47
47
|
);
|
|
48
48
|
}
|
|
49
49
|
);
|
|
50
|
+
CarouselIndicators.displayName = "CarouselIndicators";
|
|
51
|
+
CarouselIndicators.__ui__ = "CarouselIndicators";
|
|
50
52
|
var CarouselIndicator = ({
|
|
51
53
|
className,
|
|
52
54
|
...rest
|
|
@@ -64,8 +66,10 @@ var CarouselIndicator = ({
|
|
|
64
66
|
}
|
|
65
67
|
);
|
|
66
68
|
};
|
|
69
|
+
CarouselIndicator.displayName = "CarouselIndicator";
|
|
70
|
+
CarouselIndicator.__ui__ = "CarouselIndicator";
|
|
67
71
|
|
|
68
72
|
export {
|
|
69
73
|
CarouselIndicators
|
|
70
74
|
};
|
|
71
|
-
//# sourceMappingURL=chunk-
|
|
75
|
+
//# sourceMappingURL=chunk-L4NF6CWV.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/carousel-indicators.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject, FC } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport { cloneElement } from \"react\"\nimport { useCarouselContext, useCarouselIndicators } from \"./use-carousel\"\n\ninterface CarouselIndicatorsOptions {\n /**\n * The custom carousel indicator to use.\n */\n component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport interface CarouselIndicatorsProps\n extends HTMLUIProps,\n CarouselIndicatorsOptions {}\n\nexport const CarouselIndicators = forwardRef<CarouselIndicatorsProps, \"div\">(\n ({ className, component, ...rest }, ref) => {\n const { selectedIndex, orientation, styles } = useCarouselContext()\n\n const { indexes, getIndicatorProps } = useCarouselIndicators()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"fallback(kurillin, 9)\",\n display: \"flex\",\n justifyContent: \"center\",\n ...styles.indicators,\n ...(orientation === \"vertical\"\n ? { flexDirection: \"column\" }\n : { flexDirection: \"row\" }),\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-carousel__indicators\", className)}\n __css={css}\n {...rest}\n >\n {indexes.map((index) => {\n const isSelected = index === selectedIndex\n\n if (typeof component === \"function\") {\n const child = component({\n index,\n isSelected,\n }) as ReactElement | null\n\n if (!child) return null\n\n const props = getIndicatorProps({ ...child.props, index })\n\n return cloneElement(child as ReactElement, props)\n } else {\n const { key, ...props } = getIndicatorProps({ index })\n\n return <CarouselIndicator key={key} {...props} />\n }\n })}\n </ui.div>\n )\n },\n)\n\nCarouselIndicators.displayName = \"CarouselIndicators\"\nCarouselIndicators.__ui__ = \"CarouselIndicators\"\n\ninterface CarouselIndicatorProps extends HTMLUIProps<\"button\"> {}\n\nconst CarouselIndicator: FC<CarouselIndicatorProps> = ({\n className,\n ...rest\n}) => {\n const { styles } = useCarouselContext()\n\n const css: CSSUIObject = { ...styles.indicator }\n\n return (\n <ui.button\n type=\"button\"\n tabIndex={-1}\n className={cx(\"ui-carousel__indicators__indicator\", className)}\n __css={css}\n {...rest}\n />\n )\n}\n\nCarouselIndicator.displayName = \"CarouselIndicator\"\nCarouselIndicator.__ui__ = \"CarouselIndicator\"\n"],"mappings":";;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAEnB,SAAS,oBAAoB;AAuDV;AAzCZ,IAAM,qBAAqB;AAAA,EAChC,CAAC,EAAE,WAAW,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1C,UAAM,EAAE,eAAe,aAAa,OAAO,IAAI,mBAAmB;AAElE,UAAM,EAAE,SAAS,kBAAkB,IAAI,sBAAsB;AAE7D,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,MACV,GAAI,gBAAgB,aAChB,EAAE,eAAe,SAAS,IAC1B,EAAE,eAAe,MAAM;AAAA,IAC7B;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,QAClD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,UAAU;AACtB,gBAAM,aAAa,UAAU;AAE7B,cAAI,OAAO,cAAc,YAAY;AACnC,kBAAM,QAAQ,UAAU;AAAA,cACtB;AAAA,cACA;AAAA,YACF,CAAC;AAED,gBAAI,CAAC,MAAO,QAAO;AAEnB,kBAAM,QAAQ,kBAAkB,EAAE,GAAG,MAAM,OAAO,MAAM,CAAC;AAEzD,mBAAO,aAAa,OAAuB,KAAK;AAAA,UAClD,OAAO;AACL,kBAAM,EAAE,KAAK,GAAG,MAAM,IAAI,kBAAkB,EAAE,MAAM,CAAC;AAErD,mBAAO,oBAAC,qBAA6B,GAAG,SAAT,GAAgB;AAAA,UACjD;AAAA,QACF,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;AAI5B,IAAM,oBAAgD,CAAC;AAAA,EACrD;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,IAAI,mBAAmB;AAEtC,QAAM,MAAmB,EAAE,GAAG,OAAO,UAAU;AAE/C,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC7D,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,kBAAkB,cAAc;AAChC,kBAAkB,SAAS;","names":[]}
|
|
@@ -29,6 +29,8 @@ var CarouselSlide = forwardRef(
|
|
|
29
29
|
);
|
|
30
30
|
}
|
|
31
31
|
);
|
|
32
|
+
CarouselSlide.displayName = "CarouselSlide";
|
|
33
|
+
CarouselSlide.__ui__ = "CarouselSlide";
|
|
32
34
|
var CarouselSlideInner = forwardRef(
|
|
33
35
|
({ ...rest }, ref) => {
|
|
34
36
|
return /* @__PURE__ */ jsx(
|
|
@@ -43,8 +45,10 @@ var CarouselSlideInner = forwardRef(
|
|
|
43
45
|
);
|
|
44
46
|
}
|
|
45
47
|
);
|
|
48
|
+
CarouselSlideInner.displayName = "CarouselSlideInner";
|
|
49
|
+
CarouselSlideInner.__ui__ = "CarouselSlideInner";
|
|
46
50
|
|
|
47
51
|
export {
|
|
48
52
|
CarouselSlide
|
|
49
53
|
};
|
|
50
|
-
//# sourceMappingURL=chunk-
|
|
54
|
+
//# sourceMappingURL=chunk-TMSSJMLI.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/carousel-slide.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\nimport { useCarouselContext, useCarouselSlide } from \"./use-carousel\"\n\ninterface CarouselSlideOptions {\n /**\n * The CSS `width` property.\n */\n size?: CSSUIObject[\"width\"]\n}\n\nexport interface CarouselSlideProps\n extends HTMLUIProps,\n UseCarouselSlideProps,\n CarouselSlideOptions {}\n\nexport const CarouselSlide = forwardRef<CarouselSlideProps, \"div\">(\n ({ className, size, ...rest }, ref) => {\n const { slideSize, includeGapInSize, orientation, gap } =\n useCarouselContext()\n\n const { getSlideProps } = useCarouselSlide(rest)\n\n size ??= slideSize\n\n const css: CSSUIObject = {\n position: \"relative\",\n flex: `0 0 ${size}`,\n ...(includeGapInSize\n ? { [orientation === \"vertical\" ? \"pb\" : \"pr\"]: gap }\n : { [orientation === \"vertical\" ? \"mb\" : \"mr\"]: gap }),\n }\n\n return (\n <ui.div\n className={cx(\"ui-carousel__slide\", className)}\n __css={css}\n {...getSlideProps({})}\n >\n <CarouselSlideInner ref={ref} {...rest} />\n </ui.div>\n )\n },\n)\n\nCarouselSlide.displayName = \"CarouselSlide\"\nCarouselSlide.__ui__ = \"CarouselSlide\"\n\ninterface CarouselSlideInnerProps extends HTMLUIProps {}\n\nconst CarouselSlideInner = forwardRef<CarouselSlideInnerProps, \"div\">(\n ({ ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className=\"ui-carousel__slide__inner\"\n w=\"100%\"\n h=\"100%\"\n {...rest}\n />\n )\n },\n)\n\nCarouselSlideInner.displayName = \"CarouselSlideInner\"\nCarouselSlideInner.__ui__ = \"CarouselSlideInner\"\n"],"mappings":";;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAuCX;AAvBD,IAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,GAAG,KAAK,GAAG,QAAQ;AACrC,UAAM,EAAE,WAAW,kBAAkB,aAAa,IAAI,IACpD,mBAAmB;AAErB,UAAM,EAAE,cAAc,IAAI,iBAAiB,IAAI;AAE/C,iCAAS;AAET,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,MAAM,OAAO,IAAI;AAAA,MACjB,GAAI,mBACA,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,IAAI,IAClD,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,IAAI;AAAA,IACxD;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG,cAAc,CAAC,CAAC;AAAA,QAEpB,8BAAC,sBAAmB,KAAW,GAAG,MAAM;AAAA;AAAA,IAC1C;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;AAIvB,IAAM,qBAAqB;AAAA,EACzB,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ;AACpB,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,GAAE;AAAA,QACF,GAAE;AAAA,QACD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -322,6 +322,8 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
|
|
|
322
322
|
);
|
|
323
323
|
}
|
|
324
324
|
);
|
|
325
|
+
CarouselControlPrev.displayName = "CarouselControlPrev";
|
|
326
|
+
CarouselControlPrev.__ui__ = "CarouselControlPrev";
|
|
325
327
|
var CarouselControlNext = (0, import_core2.forwardRef)(
|
|
326
328
|
({ className, ...rest }, ref) => {
|
|
327
329
|
const { orientation } = useCarouselContext();
|
|
@@ -346,6 +348,8 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
|
|
|
346
348
|
);
|
|
347
349
|
}
|
|
348
350
|
);
|
|
351
|
+
CarouselControlNext.displayName = "CarouselControlNext";
|
|
352
|
+
CarouselControlNext.__ui__ = "CarouselControlNext";
|
|
349
353
|
var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...rest }, ref) => {
|
|
350
354
|
const { styles } = useCarouselContext();
|
|
351
355
|
const colorScheme = (0, import_core2.useColorModeValue)("whiteAlpha", "blackAlpha");
|
|
@@ -367,6 +371,8 @@ var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...r
|
|
|
367
371
|
}
|
|
368
372
|
);
|
|
369
373
|
});
|
|
374
|
+
CarouselControl.displayName = "CarouselControl";
|
|
375
|
+
CarouselControl.__ui__ = "CarouselControl";
|
|
370
376
|
|
|
371
377
|
// src/carousel-indicators.tsx
|
|
372
378
|
var import_core3 = require("@yamada-ui/core");
|
|
@@ -411,6 +417,8 @@ var CarouselIndicators = (0, import_core3.forwardRef)(
|
|
|
411
417
|
);
|
|
412
418
|
}
|
|
413
419
|
);
|
|
420
|
+
CarouselIndicators.displayName = "CarouselIndicators";
|
|
421
|
+
CarouselIndicators.__ui__ = "CarouselIndicators";
|
|
414
422
|
var CarouselIndicator = ({
|
|
415
423
|
className,
|
|
416
424
|
...rest
|
|
@@ -428,6 +436,8 @@ var CarouselIndicator = ({
|
|
|
428
436
|
}
|
|
429
437
|
);
|
|
430
438
|
};
|
|
439
|
+
CarouselIndicator.displayName = "CarouselIndicator";
|
|
440
|
+
CarouselIndicator.__ui__ = "CarouselIndicator";
|
|
431
441
|
|
|
432
442
|
// src/carousel-slide.tsx
|
|
433
443
|
var import_core4 = require("@yamada-ui/core");
|
|
@@ -454,6 +464,8 @@ var CarouselSlide = (0, import_core4.forwardRef)(
|
|
|
454
464
|
);
|
|
455
465
|
}
|
|
456
466
|
);
|
|
467
|
+
CarouselSlide.displayName = "CarouselSlide";
|
|
468
|
+
CarouselSlide.__ui__ = "CarouselSlide";
|
|
457
469
|
var CarouselSlideInner = (0, import_core4.forwardRef)(
|
|
458
470
|
({ ...rest }, ref) => {
|
|
459
471
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
@@ -468,6 +480,8 @@ var CarouselSlideInner = (0, import_core4.forwardRef)(
|
|
|
468
480
|
);
|
|
469
481
|
}
|
|
470
482
|
);
|
|
483
|
+
CarouselSlideInner.displayName = "CarouselSlideInner";
|
|
484
|
+
CarouselSlideInner.__ui__ = "CarouselSlideInner";
|
|
471
485
|
|
|
472
486
|
// src/carousel.tsx
|
|
473
487
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
@@ -583,12 +597,16 @@ var Carousel = (0, import_core5.forwardRef)(
|
|
|
583
597
|
) });
|
|
584
598
|
}
|
|
585
599
|
);
|
|
600
|
+
Carousel.displayName = "Carousel";
|
|
601
|
+
Carousel.__ui__ = "Carousel";
|
|
586
602
|
var CarouselSlides = (0, import_core5.forwardRef)(
|
|
587
603
|
({ ...rest }, ref) => {
|
|
588
604
|
const css = { w: "100%", h: "fit-content", overflow: "hidden" };
|
|
589
605
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselSlidesInner, { ...rest }) });
|
|
590
606
|
}
|
|
591
607
|
);
|
|
608
|
+
CarouselSlides.displayName = "CarouselSlides";
|
|
609
|
+
CarouselSlides.__ui__ = "CarouselSlides";
|
|
592
610
|
var CarouselSlidesInner = ({ ...rest }) => {
|
|
593
611
|
const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
|
|
594
612
|
const css = {
|
|
@@ -602,6 +620,8 @@ var CarouselSlidesInner = ({ ...rest }) => {
|
|
|
602
620
|
};
|
|
603
621
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { className: "ui-carousel__sliders__inner", __css: css, ...rest });
|
|
604
622
|
};
|
|
623
|
+
CarouselSlidesInner.displayName = "CarouselSlidesInner";
|
|
624
|
+
CarouselSlidesInner.__ui__ = "CarouselSlidesInner";
|
|
605
625
|
// Annotate the CommonJS export names for ESM import in node:
|
|
606
626
|
0 && (module.exports = {
|
|
607
627
|
Carousel,
|