@yamada-ui/carousel 1.0.28 → 2.0.0-next-20240513035416
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.d.mts +8 -0
- package/dist/carousel-control.d.ts +8 -0
- package/dist/carousel-control.js +158 -0
- package/dist/carousel-control.js.map +1 -0
- package/dist/carousel-control.mjs +11 -0
- package/dist/carousel-control.mjs.map +1 -0
- package/dist/carousel-indicators.d.mts +17 -0
- package/dist/carousel-indicators.d.ts +17 -0
- package/dist/carousel-indicators.js +141 -0
- package/dist/carousel-indicators.js.map +1 -0
- package/dist/carousel-indicators.mjs +9 -0
- package/dist/carousel-indicators.mjs.map +1 -0
- package/dist/carousel-slide.d.mts +17 -0
- package/dist/carousel-slide.d.ts +17 -0
- package/dist/carousel-slide.js +106 -0
- package/dist/carousel-slide.js.map +1 -0
- package/dist/carousel-slide.mjs +9 -0
- package/dist/carousel-slide.mjs.map +1 -0
- package/dist/carousel.d.mts +144 -0
- package/dist/carousel.d.ts +144 -0
- package/dist/carousel.js +599 -0
- package/dist/carousel.js.map +1 -0
- package/dist/carousel.mjs +12 -0
- package/dist/carousel.mjs.map +1 -0
- package/dist/chunk-DDY7Q2IV.mjs +87 -0
- package/dist/chunk-DDY7Q2IV.mjs.map +1 -0
- package/dist/chunk-IKJXFLRJ.mjs +72 -0
- package/dist/chunk-IKJXFLRJ.mjs.map +1 -0
- package/dist/chunk-QQ2HS4J4.mjs +260 -0
- package/dist/chunk-QQ2HS4J4.mjs.map +1 -0
- package/dist/chunk-VQX7S5CU.mjs +50 -0
- package/dist/chunk-VQX7S5CU.mjs.map +1 -0
- package/dist/chunk-YDLJHKEU.mjs +171 -0
- package/dist/chunk-YDLJHKEU.mjs.map +1 -0
- package/dist/index.d.mts +9 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +609 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +23 -0
- package/dist/index.mjs.map +1 -0
- package/dist/use-carousel.d.mts +176 -0
- package/dist/use-carousel.d.ts +176 -0
- package/dist/use-carousel.js +292 -0
- package/dist/use-carousel.js.map +1 -0
- package/dist/use-carousel.mjs +18 -0
- package/dist/use-carousel.mjs.map +1 -0
- package/package.json +1 -1
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/carousel.tsx","../src/use-carousel.ts","../src/carousel-slide.tsx","../src/carousel-control.tsx","../src/carousel-indicators.tsx"],"sourcesContent":["export { Carousel } from \"./carousel\"\nexport type { CarouselProps } from \"./carousel\"\nexport { CarouselSlide } from \"./carousel-slide\"\nexport type { CarouselSlideProps } from \"./carousel-slide\"\nexport { CarouselControlPrev, CarouselControlNext } from \"./carousel-control\"\nexport type { CarouselControlProps } from \"./carousel-control\"\nexport { CarouselIndicators } from \"./carousel-indicators\"\nexport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n Token,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useToken } from \"@yamada-ui/use-token\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n calc,\n cx,\n filterUndefined,\n findChildren,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { cloneElement } from \"react\"\nimport type { UseCarouselProps } from \"./use-carousel\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\nimport type { CarouselControlProps, CarouselIndicatorsProps } from \"./\"\nimport {\n CarouselControlNext,\n CarouselControlPrev,\n CarouselIndicators,\n CarouselSlide,\n} from \"./\"\n\ntype 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<\"start\" | \"center\" | \"end\" | number>\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default ''\n */\n containScroll?: Token<\"trimSnaps\" | \"keepSnaps\" | \"\">\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<number>\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: 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 * Adjusts scroll speed when triggered by any of the methods.\n * Higher numbers enables faster scrolling.\n *\n * @default 10\n */\n speed?: 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<\"div\">\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 type CarouselProps = ThemeProps<\"Carousel\"> &\n Omit<HTMLUIProps<\"div\">, \"onChange\" | \"draggable\"> &\n Pick<\n UseCarouselProps,\n \"index\" | \"defaultIndex\" | \"onChange\" | \"onScrollProgress\"\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 speed = useValue(props.speed)\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 = useToken(\"spaces\", useValue(props.gap)) ?? useValue(props.gap)\n const slideSize =\n useToken(\"sizes\", useValue(props.slideSize)) ?? useValue(props.slideSize)\n\n const [styles, mergedProps] = useMultiComponentStyle(\"Carousel\", {\n ...props,\n orientation,\n align,\n autoplay,\n stopMouseEnterAutoplay,\n loop,\n speed,\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] = findChildren(\n validChildren,\n CarouselControlPrev,\n )\n const [customCarouselControlNext] = findChildren(\n validChildren,\n CarouselControlNext,\n )\n const [customCarouselIndicators] = findChildren(\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<\"div\">\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<\"div\">\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 var: [{ __prefix: \"ui\", name: \"gap\", token: \"spaces\", value: gap }],\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]:\n calc.negate(\"var(--ui-gap)\"),\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 type {\n CSSUIObject,\n HTMLUIProps,\n CSSUIProps,\n UIPropGetter,\n RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n createContext,\n dataAttr,\n handlerAll,\n splitObject,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType } from \"embla-carousel-react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype CarouselContext = {\n carousel: EmblaCarouselType | undefined\n indexes: number[]\n selectedIndex: number\n orientation: \"vertical\" | \"horizontal\"\n includeGapInSize: boolean\n slidesToScroll: number\n slideSize: string | number\n gap: CSSUIProps[\"gap\"]\n styles: Record<string, CSSUIObject>\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n createContext<CarouselContext>({\n name: \"CarouselContext\",\n errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n })\n\nexport type UseCarouselProps = Omit<\n HTMLUIProps<\"div\">,\n \"onChange\" | \"draggable\" | \"gap\"\n> & {\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: \"start\" | \"center\" | \"end\" | number\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default ''\n */\n containScroll?: \"trimSnaps\" | \"keepSnaps\" | \"\"\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: number\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * Adjusts scroll speed when triggered by any of the methods.\n * Higher numbers enables faster scrolling.\n *\n * @default 10\n */\n speed?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: boolean\n /**\n * The CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: string | number\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n index,\n defaultIndex = 0,\n onChange,\n align = \"center\",\n orientation = \"horizontal\",\n autoplay = false,\n stopMouseEnterAutoplay = true,\n loop = true,\n speed = 10,\n delay = 4000,\n gap = \"fallback(4, 1rem)\",\n slidesToScroll = 1,\n draggable = true,\n dragFree = false,\n inViewThreshold = 0,\n skipSnaps = false,\n containScroll = \"\",\n slideSize = \"100%\",\n includeGapInSize = true,\n onScrollProgress,\n children,\n ...rest\n}: UseCarouselProps) => {\n const computedProps = splitObject(rest, layoutStyleProperties)\n\n const [selectedIndex, setSelectedIndex] = useControllableState({\n value: index,\n defaultValue: defaultIndex,\n onChange,\n })\n\n const isVertical = orientation === \"vertical\"\n\n const [carouselRef, carousel] = useEmblaCarousel({\n axis: isVertical ? \"y\" : \"x\",\n startIndex: defaultIndex,\n loop,\n align,\n slidesToScroll,\n draggable,\n dragFree,\n speed,\n inViewThreshold,\n skipSnaps,\n containScroll,\n })\n\n const [indexes, setIndexes] = useState<number[]>([])\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n const timeoutId = useRef<any>(undefined)\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setSelectedIndex(index)\n }, [carousel, setSelectedIndex])\n\n useEffect(() => {\n const isStop = isMouseEnter && stopMouseEnterAutoplay\n const isLast = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !isStop && !isLast) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = undefined\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [\n autoplay,\n delay,\n stopMouseEnterAutoplay,\n carousel,\n isMouseEnter,\n loop,\n selectedIndex,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [\n Children.toArray(children).length,\n align,\n orientation,\n loop,\n speed,\n gap,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n slideSize,\n includeGapInSize,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [carousel])\n\n useUpdateEffect(() => {\n if (carousel) {\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onScroll])\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...computedProps[0],\n ...props,\n ref,\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [computedProps],\n )\n\n const getSlidesProps: UIPropGetter = useCallback(\n (props = {}) => ({\n ...computedProps[1],\n ...props,\n ref: carouselRef,\n }),\n [computedProps, carouselRef],\n )\n\n return {\n carousel,\n children,\n indexes,\n selectedIndex,\n orientation,\n slideSize,\n gap,\n slidesToScroll,\n includeGapInSize,\n getContainerProps,\n getSlidesProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport type UseCarouselSlideProps = {\n index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n const isSelected = index === selectedIndex\n\n const getSlideProps: UIPropGetter = useCallback(\n (props = {}) => ({\n ...props,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n }),\n [isSelected, index],\n )\n\n return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport type UseCarouselControlProps = IconButtonProps & {\n operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n operation,\n ...rest\n}: UseCarouselControlProps) => {\n const { carousel } = useCarouselContext()\n\n const isPrev = operation === \"prev\"\n\n const disabled =\n rest.disabled ??\n rest.isDisabled ??\n (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n const onClick = useCallback(() => {\n if (!carousel) return\n\n if (isPrev) {\n carousel.scrollPrev()\n } else {\n carousel.scrollNext()\n }\n }, [carousel, isPrev])\n\n const getControlProps: UIPropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n disabled,\n onClick: handlerAll(props.onClick, onClick),\n }),\n [disabled, onClick],\n )\n\n return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n const onClick = useCallback(\n (ev: MouseEvent, index: number) => {\n if (!carousel) return\n\n ev.stopPropagation()\n\n carousel.scrollTo(index)\n },\n [carousel],\n )\n\n const getIndicatorProps: RequiredUIPropGetter<\"button\", { index: number }> =\n useCallback(\n ({ index, ...props }) => {\n const isSelected = index === selectedIndex\n\n return {\n \"aria-label\": `Go to ${index + 1} slide`,\n ...props,\n key: index,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n }\n },\n [onClick, selectedIndex],\n )\n\n return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n typeof useCarouselIndicators\n>\n","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\ntype CarouselSlideOptions = {\n /**\n * The CSS `width` property.\n */\n size?: CSSUIObject[\"width\"]\n}\n\nexport type CarouselSlideProps = HTMLUIProps<\"div\"> &\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\ntype CarouselSlideInnerProps = HTMLUIProps<\"div\">\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","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 type CarouselControlProps = 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 { 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\ntype CarouselIndicatorsOptions = {\n /**\n * The custom caroucel indicator to use.\n */\n component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport type CarouselIndicatorsProps = Omit<HTMLUIProps<\"div\">, \"children\"> &\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\ntype CarouselIndicatorProps = 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__indicator\", className)}\n __css={css}\n {...rest}\n />\n )\n}\n"],"mappings":"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","names":["import_core","import_utils","import_react","useEmblaCarousel","index","indexes","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_react","import_jsx_runtime"]}
|
package/dist/index.mjs
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
"use client"
|
2
|
+
import {
|
3
|
+
Carousel
|
4
|
+
} from "./chunk-YDLJHKEU.mjs";
|
5
|
+
import {
|
6
|
+
CarouselControlNext,
|
7
|
+
CarouselControlPrev
|
8
|
+
} from "./chunk-DDY7Q2IV.mjs";
|
9
|
+
import {
|
10
|
+
CarouselIndicators
|
11
|
+
} from "./chunk-IKJXFLRJ.mjs";
|
12
|
+
import {
|
13
|
+
CarouselSlide
|
14
|
+
} from "./chunk-VQX7S5CU.mjs";
|
15
|
+
import "./chunk-QQ2HS4J4.mjs";
|
16
|
+
export {
|
17
|
+
Carousel,
|
18
|
+
CarouselControlNext,
|
19
|
+
CarouselControlPrev,
|
20
|
+
CarouselIndicators,
|
21
|
+
CarouselSlide
|
22
|
+
};
|
23
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -0,0 +1,176 @@
|
|
1
|
+
import * as _yamada_ui_core from '@yamada-ui/core';
|
2
|
+
import { HTMLUIProps, CSSUIProps, UIPropGetter, RequiredUIPropGetter, CSSUIObject } from '@yamada-ui/core';
|
3
|
+
import * as react from 'react';
|
4
|
+
import { IconButtonProps } from '@yamada-ui/button';
|
5
|
+
import { EmblaCarouselType } from 'embla-carousel-react';
|
6
|
+
|
7
|
+
type CarouselContext = {
|
8
|
+
carousel: EmblaCarouselType | undefined;
|
9
|
+
indexes: number[];
|
10
|
+
selectedIndex: number;
|
11
|
+
orientation: "vertical" | "horizontal";
|
12
|
+
includeGapInSize: boolean;
|
13
|
+
slidesToScroll: number;
|
14
|
+
slideSize: string | number;
|
15
|
+
gap: CSSUIProps["gap"];
|
16
|
+
styles: Record<string, CSSUIObject>;
|
17
|
+
};
|
18
|
+
declare const CarouselProvider: react.Provider<CarouselContext>;
|
19
|
+
declare const useCarouselContext: () => CarouselContext;
|
20
|
+
type UseCarouselProps = Omit<HTMLUIProps<"div">, "onChange" | "draggable" | "gap"> & {
|
21
|
+
/**
|
22
|
+
* The index of the carousel slide.
|
23
|
+
*/
|
24
|
+
index?: number;
|
25
|
+
/**
|
26
|
+
* The initial index of the carousel slide.
|
27
|
+
*
|
28
|
+
* @default 0
|
29
|
+
*/
|
30
|
+
defaultIndex?: number;
|
31
|
+
/**
|
32
|
+
* The callback invoked when carousel slide selected.
|
33
|
+
*/
|
34
|
+
onChange?: (index: number) => void;
|
35
|
+
/**
|
36
|
+
* The orientation of the carousel.
|
37
|
+
*
|
38
|
+
* @default 'horizontal'
|
39
|
+
*/
|
40
|
+
orientation?: "vertical" | "horizontal";
|
41
|
+
/**
|
42
|
+
* The alignment of the carousel.
|
43
|
+
*
|
44
|
+
* @default 'center'
|
45
|
+
*/
|
46
|
+
align?: "start" | "center" | "end" | number;
|
47
|
+
/**
|
48
|
+
* Clear leading and trailing empty space that causes excessive scrolling.
|
49
|
+
* Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
|
50
|
+
*
|
51
|
+
* @default ''
|
52
|
+
*/
|
53
|
+
containScroll?: "trimSnaps" | "keepSnaps" | "";
|
54
|
+
/**
|
55
|
+
* The number of slides that should be scrolled with next or previous buttons.
|
56
|
+
*
|
57
|
+
* @default 1
|
58
|
+
*/
|
59
|
+
slidesToScroll?: number;
|
60
|
+
/**
|
61
|
+
* If `true`, momentum scrolling will be enabled.
|
62
|
+
*
|
63
|
+
* @default false
|
64
|
+
*/
|
65
|
+
dragFree?: boolean;
|
66
|
+
/**
|
67
|
+
* If `true`, carousel can be scrolled with mouse and touch interactions.
|
68
|
+
*
|
69
|
+
* @default true
|
70
|
+
*/
|
71
|
+
draggable?: boolean;
|
72
|
+
/**
|
73
|
+
* Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
|
74
|
+
*
|
75
|
+
* @default 0
|
76
|
+
*/
|
77
|
+
inViewThreshold?: number;
|
78
|
+
/**
|
79
|
+
* If `true`, infinite looping.
|
80
|
+
* Automatically falls back to false if slide content isn't enough to loop.
|
81
|
+
*
|
82
|
+
* @default true
|
83
|
+
*/
|
84
|
+
loop?: boolean;
|
85
|
+
/**
|
86
|
+
* If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.
|
87
|
+
* Note that this option will be ignored if the dragFree option is set to true.
|
88
|
+
*
|
89
|
+
* @default false
|
90
|
+
*/
|
91
|
+
skipSnaps?: boolean;
|
92
|
+
/**
|
93
|
+
* Adjusts scroll speed when triggered by any of the methods.
|
94
|
+
* Higher numbers enables faster scrolling.
|
95
|
+
*
|
96
|
+
* @default 10
|
97
|
+
*/
|
98
|
+
speed?: number;
|
99
|
+
/**
|
100
|
+
* The number for the autoplay interval of the carousel.
|
101
|
+
*
|
102
|
+
* @default 4000
|
103
|
+
*/
|
104
|
+
delay?: number;
|
105
|
+
/**
|
106
|
+
* If `true`, the carousel will be autoplay.
|
107
|
+
*
|
108
|
+
* @default false
|
109
|
+
*/
|
110
|
+
autoplay?: boolean;
|
111
|
+
/**
|
112
|
+
* If `true`, autoplay will pause when the mouse entries over.
|
113
|
+
*
|
114
|
+
* @default true
|
115
|
+
*/
|
116
|
+
stopMouseEnterAutoplay?: boolean;
|
117
|
+
/**
|
118
|
+
* If `true`, gap will be treated as part of the carousel slide size.
|
119
|
+
*
|
120
|
+
* @default true
|
121
|
+
*/
|
122
|
+
includeGapInSize?: boolean;
|
123
|
+
/**
|
124
|
+
* The CSS `gap` property.
|
125
|
+
*
|
126
|
+
* @default '4'
|
127
|
+
*/
|
128
|
+
gap?: CSSUIProps["gap"];
|
129
|
+
/**
|
130
|
+
* The carousel slide width.
|
131
|
+
*
|
132
|
+
* @default '100%'
|
133
|
+
*/
|
134
|
+
slideSize?: string | number;
|
135
|
+
/**
|
136
|
+
* A callback that return the current scroll amount when the carousel is scrolled.
|
137
|
+
*/
|
138
|
+
onScrollProgress?: (progress: number) => void;
|
139
|
+
};
|
140
|
+
declare const useCarousel: ({ index, defaultIndex, onChange, align, orientation, autoplay, stopMouseEnterAutoplay, loop, speed, delay, gap, slidesToScroll, draggable, dragFree, inViewThreshold, skipSnaps, containScroll, slideSize, includeGapInSize, onScrollProgress, children, ...rest }: UseCarouselProps) => {
|
141
|
+
carousel: EmblaCarouselType | undefined;
|
142
|
+
children: react.ReactNode;
|
143
|
+
indexes: number[];
|
144
|
+
selectedIndex: number;
|
145
|
+
orientation: "vertical" | "horizontal";
|
146
|
+
slideSize: string | number;
|
147
|
+
gap: number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "xs" | "3xl" | "4xl" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | Partial<Record<"base" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl", number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "xs" | "3xl" | "4xl" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">> | _yamada_ui_core.ColorModeArray<number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "xs" | "3xl" | "4xl" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">;
|
148
|
+
slidesToScroll: number;
|
149
|
+
includeGapInSize: boolean;
|
150
|
+
getContainerProps: UIPropGetter;
|
151
|
+
getSlidesProps: UIPropGetter;
|
152
|
+
};
|
153
|
+
type UseCarouselReturn = ReturnType<typeof useCarousel>;
|
154
|
+
type UseCarouselSlideProps = {
|
155
|
+
index?: number;
|
156
|
+
};
|
157
|
+
declare const useCarouselSlide: ({ index }: UseCarouselSlideProps) => {
|
158
|
+
getSlideProps: UIPropGetter;
|
159
|
+
};
|
160
|
+
type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>;
|
161
|
+
type UseCarouselControlProps = IconButtonProps & {
|
162
|
+
operation: "prev" | "next";
|
163
|
+
};
|
164
|
+
declare const useCarouselControl: ({ operation, ...rest }: UseCarouselControlProps) => {
|
165
|
+
getControlProps: UIPropGetter<"button">;
|
166
|
+
};
|
167
|
+
type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>;
|
168
|
+
declare const useCarouselIndicators: () => {
|
169
|
+
indexes: number[];
|
170
|
+
getIndicatorProps: RequiredUIPropGetter<"button", {
|
171
|
+
index: number;
|
172
|
+
}>;
|
173
|
+
};
|
174
|
+
type UseCarouselIndicatorsReturn = ReturnType<typeof useCarouselIndicators>;
|
175
|
+
|
176
|
+
export { CarouselProvider, type UseCarouselControlProps, type UseCarouselControlReturn, type UseCarouselIndicatorsReturn, type UseCarouselProps, type UseCarouselReturn, type UseCarouselSlideProps, type UseCarouselSlideReturn, useCarousel, useCarouselContext, useCarouselControl, useCarouselIndicators, useCarouselSlide };
|
@@ -0,0 +1,176 @@
|
|
1
|
+
import * as _yamada_ui_core from '@yamada-ui/core';
|
2
|
+
import { HTMLUIProps, CSSUIProps, UIPropGetter, RequiredUIPropGetter, CSSUIObject } from '@yamada-ui/core';
|
3
|
+
import * as react from 'react';
|
4
|
+
import { IconButtonProps } from '@yamada-ui/button';
|
5
|
+
import { EmblaCarouselType } from 'embla-carousel-react';
|
6
|
+
|
7
|
+
type CarouselContext = {
|
8
|
+
carousel: EmblaCarouselType | undefined;
|
9
|
+
indexes: number[];
|
10
|
+
selectedIndex: number;
|
11
|
+
orientation: "vertical" | "horizontal";
|
12
|
+
includeGapInSize: boolean;
|
13
|
+
slidesToScroll: number;
|
14
|
+
slideSize: string | number;
|
15
|
+
gap: CSSUIProps["gap"];
|
16
|
+
styles: Record<string, CSSUIObject>;
|
17
|
+
};
|
18
|
+
declare const CarouselProvider: react.Provider<CarouselContext>;
|
19
|
+
declare const useCarouselContext: () => CarouselContext;
|
20
|
+
type UseCarouselProps = Omit<HTMLUIProps<"div">, "onChange" | "draggable" | "gap"> & {
|
21
|
+
/**
|
22
|
+
* The index of the carousel slide.
|
23
|
+
*/
|
24
|
+
index?: number;
|
25
|
+
/**
|
26
|
+
* The initial index of the carousel slide.
|
27
|
+
*
|
28
|
+
* @default 0
|
29
|
+
*/
|
30
|
+
defaultIndex?: number;
|
31
|
+
/**
|
32
|
+
* The callback invoked when carousel slide selected.
|
33
|
+
*/
|
34
|
+
onChange?: (index: number) => void;
|
35
|
+
/**
|
36
|
+
* The orientation of the carousel.
|
37
|
+
*
|
38
|
+
* @default 'horizontal'
|
39
|
+
*/
|
40
|
+
orientation?: "vertical" | "horizontal";
|
41
|
+
/**
|
42
|
+
* The alignment of the carousel.
|
43
|
+
*
|
44
|
+
* @default 'center'
|
45
|
+
*/
|
46
|
+
align?: "start" | "center" | "end" | number;
|
47
|
+
/**
|
48
|
+
* Clear leading and trailing empty space that causes excessive scrolling.
|
49
|
+
* Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
|
50
|
+
*
|
51
|
+
* @default ''
|
52
|
+
*/
|
53
|
+
containScroll?: "trimSnaps" | "keepSnaps" | "";
|
54
|
+
/**
|
55
|
+
* The number of slides that should be scrolled with next or previous buttons.
|
56
|
+
*
|
57
|
+
* @default 1
|
58
|
+
*/
|
59
|
+
slidesToScroll?: number;
|
60
|
+
/**
|
61
|
+
* If `true`, momentum scrolling will be enabled.
|
62
|
+
*
|
63
|
+
* @default false
|
64
|
+
*/
|
65
|
+
dragFree?: boolean;
|
66
|
+
/**
|
67
|
+
* If `true`, carousel can be scrolled with mouse and touch interactions.
|
68
|
+
*
|
69
|
+
* @default true
|
70
|
+
*/
|
71
|
+
draggable?: boolean;
|
72
|
+
/**
|
73
|
+
* Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
|
74
|
+
*
|
75
|
+
* @default 0
|
76
|
+
*/
|
77
|
+
inViewThreshold?: number;
|
78
|
+
/**
|
79
|
+
* If `true`, infinite looping.
|
80
|
+
* Automatically falls back to false if slide content isn't enough to loop.
|
81
|
+
*
|
82
|
+
* @default true
|
83
|
+
*/
|
84
|
+
loop?: boolean;
|
85
|
+
/**
|
86
|
+
* If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.
|
87
|
+
* Note that this option will be ignored if the dragFree option is set to true.
|
88
|
+
*
|
89
|
+
* @default false
|
90
|
+
*/
|
91
|
+
skipSnaps?: boolean;
|
92
|
+
/**
|
93
|
+
* Adjusts scroll speed when triggered by any of the methods.
|
94
|
+
* Higher numbers enables faster scrolling.
|
95
|
+
*
|
96
|
+
* @default 10
|
97
|
+
*/
|
98
|
+
speed?: number;
|
99
|
+
/**
|
100
|
+
* The number for the autoplay interval of the carousel.
|
101
|
+
*
|
102
|
+
* @default 4000
|
103
|
+
*/
|
104
|
+
delay?: number;
|
105
|
+
/**
|
106
|
+
* If `true`, the carousel will be autoplay.
|
107
|
+
*
|
108
|
+
* @default false
|
109
|
+
*/
|
110
|
+
autoplay?: boolean;
|
111
|
+
/**
|
112
|
+
* If `true`, autoplay will pause when the mouse entries over.
|
113
|
+
*
|
114
|
+
* @default true
|
115
|
+
*/
|
116
|
+
stopMouseEnterAutoplay?: boolean;
|
117
|
+
/**
|
118
|
+
* If `true`, gap will be treated as part of the carousel slide size.
|
119
|
+
*
|
120
|
+
* @default true
|
121
|
+
*/
|
122
|
+
includeGapInSize?: boolean;
|
123
|
+
/**
|
124
|
+
* The CSS `gap` property.
|
125
|
+
*
|
126
|
+
* @default '4'
|
127
|
+
*/
|
128
|
+
gap?: CSSUIProps["gap"];
|
129
|
+
/**
|
130
|
+
* The carousel slide width.
|
131
|
+
*
|
132
|
+
* @default '100%'
|
133
|
+
*/
|
134
|
+
slideSize?: string | number;
|
135
|
+
/**
|
136
|
+
* A callback that return the current scroll amount when the carousel is scrolled.
|
137
|
+
*/
|
138
|
+
onScrollProgress?: (progress: number) => void;
|
139
|
+
};
|
140
|
+
declare const useCarousel: ({ index, defaultIndex, onChange, align, orientation, autoplay, stopMouseEnterAutoplay, loop, speed, delay, gap, slidesToScroll, draggable, dragFree, inViewThreshold, skipSnaps, containScroll, slideSize, includeGapInSize, onScrollProgress, children, ...rest }: UseCarouselProps) => {
|
141
|
+
carousel: EmblaCarouselType | undefined;
|
142
|
+
children: react.ReactNode;
|
143
|
+
indexes: number[];
|
144
|
+
selectedIndex: number;
|
145
|
+
orientation: "vertical" | "horizontal";
|
146
|
+
slideSize: string | number;
|
147
|
+
gap: number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "xs" | "3xl" | "4xl" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | Partial<Record<"base" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl", number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "xs" | "3xl" | "4xl" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">> | _yamada_ui_core.ColorModeArray<number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "xs" | "3xl" | "4xl" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5">;
|
148
|
+
slidesToScroll: number;
|
149
|
+
includeGapInSize: boolean;
|
150
|
+
getContainerProps: UIPropGetter;
|
151
|
+
getSlidesProps: UIPropGetter;
|
152
|
+
};
|
153
|
+
type UseCarouselReturn = ReturnType<typeof useCarousel>;
|
154
|
+
type UseCarouselSlideProps = {
|
155
|
+
index?: number;
|
156
|
+
};
|
157
|
+
declare const useCarouselSlide: ({ index }: UseCarouselSlideProps) => {
|
158
|
+
getSlideProps: UIPropGetter;
|
159
|
+
};
|
160
|
+
type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>;
|
161
|
+
type UseCarouselControlProps = IconButtonProps & {
|
162
|
+
operation: "prev" | "next";
|
163
|
+
};
|
164
|
+
declare const useCarouselControl: ({ operation, ...rest }: UseCarouselControlProps) => {
|
165
|
+
getControlProps: UIPropGetter<"button">;
|
166
|
+
};
|
167
|
+
type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>;
|
168
|
+
declare const useCarouselIndicators: () => {
|
169
|
+
indexes: number[];
|
170
|
+
getIndicatorProps: RequiredUIPropGetter<"button", {
|
171
|
+
index: number;
|
172
|
+
}>;
|
173
|
+
};
|
174
|
+
type UseCarouselIndicatorsReturn = ReturnType<typeof useCarouselIndicators>;
|
175
|
+
|
176
|
+
export { CarouselProvider, type UseCarouselControlProps, type UseCarouselControlReturn, type UseCarouselIndicatorsReturn, type UseCarouselProps, type UseCarouselReturn, type UseCarouselSlideProps, type UseCarouselSlideReturn, useCarousel, useCarouselContext, useCarouselControl, useCarouselIndicators, useCarouselSlide };
|