@yamada-ui/react/dist/cjs/components/carousel/carousel.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"carousel.cjs","names":["createSlotComponent","carouselStyle","useCarousel","CarouselContext","styled","varAttr","useCarouselContext","IconButton","ChevronLeftIcon","ChevronRightIcon"],"sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type {\n  CSSProps,\n  HTMLProps,\n  HTMLStyledProps,\n  Orientation,\n  ThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { CarouselStyle } from \"./carousel.style\"\nimport type {\n  CarouselAlign,\n  CarouselContainScroll,\n  CarouselInViewThreshold,\n  UseCarouselProps,\n} from \"./use-carousel\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { dataAttr } from \"../../utils\"\nimport { IconButton } from \"../button\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon\"\nimport { carouselStyle } from \"./carousel.style\"\nimport {\n  CarouselContext,\n  useCarousel,\n  useCarouselContext,\n} from \"./use-carousel\"\n\ninterface ComponentContext\n  extends Pick<CarouselRootProps, \"includeGapInSize\"> {}\n\nexport interface CarouselRootProps\n  extends Omit<HTMLStyledProps<\"section\">, \"draggable\" | \"onChange\">,\n    Omit<\n      UseCarouselProps,\n      | \"align\"\n      | \"autoplay\"\n      | \"containScroll\"\n      | \"delay\"\n      | \"dragFree\"\n      | \"draggable\"\n      | \"duration\"\n      | \"inViewThreshold\"\n      | \"loop\"\n      | \"orientation\"\n      | \"skipSnaps\"\n      | \"slidesToScroll\"\n      | \"stopMouseEnterAutoplay\"\n    >,\n    ThemeProps<CarouselStyle> {\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: CarouselAlign\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\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?: CarouselContainScroll\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: 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   * 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   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: 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?: CarouselInViewThreshold\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   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\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   * The size of the carousel item.\n   */\n  slideSize?: CSSProps[\"width\"]\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`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n}\n\nconst {\n  ComponentContext,\n  PropsContext: CarouselPropsContext,\n  useComponentContext,\n  usePropsContext: useCarouselPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<CarouselRootProps, CarouselStyle>(\n  \"carousel\",\n  carouselStyle,\n)\n\nexport { CarouselPropsContext, useCarouselPropsContext }\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see https://yamada-ui.com/docs/components/carousel\n */\nexport const CarouselRoot = withProvider<\"section\", CarouselRootProps>(\n  ({ includeGapInSize = true, ...rest }) => {\n    const {\n      carousel,\n      index,\n      setIndex,\n      snapCount,\n      total,\n      getIndicatorProps,\n      getIndicatorsProps,\n      getItemProps,\n      getListProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n    } = useCarousel(rest)\n    const componentContext = useMemo(\n      () => ({ includeGapInSize }),\n      [includeGapInSize],\n    )\n    const carouselContext = useMemo(\n      () => ({\n        carousel,\n        index,\n        setIndex,\n        snapCount,\n        total,\n        getIndicatorProps,\n        getIndicatorsProps,\n        getItemProps,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n      }),\n      [\n        carousel,\n        total,\n        index,\n        setIndex,\n        snapCount,\n        getIndicatorProps,\n        getIndicatorsProps,\n        getItemProps,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n      ],\n    )\n\n    return (\n      <CarouselContext value={carouselContext}>\n        <ComponentContext value={componentContext}>\n          <styled.section {...getRootProps()} />\n        </ComponentContext>\n      </CarouselContext>\n    )\n  },\n  \"root\",\n)(undefined, ({ gap, slideSize, ...rest }) => {\n  return {\n    ...rest,\n    \"--slide-gap\": varAttr(gap, \"spaces\"),\n    \"--slide-size\": varAttr(slideSize, \"sizes\"),\n  }\n})\n\nexport interface CarouselListProps extends HTMLStyledProps {}\n\nexport const CarouselList = withContext<\"div\", CarouselListProps>(\n  \"div\",\n  \"list\",\n)(undefined, (props) => {\n  const { includeGapInSize } = useComponentContext()\n  const { getListProps } = useCarouselContext()\n\n  return {\n    \"data-include-gap-in-size\": dataAttr(includeGapInSize),\n    ...getListProps(props),\n  }\n})\n\nexport interface CarouselItemProps extends HTMLStyledProps {\n  /**\n   * The index of the carousel item.\n   */\n  index: number\n  /**\n   * The size of the carousel item.\n   */\n  slideSize?: CSSProps[\"width\"]\n}\n\nexport const CarouselItem = withContext<\"div\", CarouselItemProps>(\n  \"div\",\n  \"item\",\n)(undefined, ({ slideSize, ...rest }) => {\n  const { includeGapInSize } = useComponentContext()\n  const { getItemProps } = useCarouselContext()\n\n  return {\n    \"data-include-gap-in-size\": dataAttr(includeGapInSize),\n    \"--slide-size\": varAttr(slideSize, \"sizes\"),\n    ...getItemProps(rest),\n  }\n})\n\nexport interface CarouselPrevTriggerProps extends IconButtonProps {}\n\nexport const CarouselPrevTrigger = withContext<\n  \"button\",\n  CarouselPrevTriggerProps\n>(IconButton, { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n  undefined,\n  (props) => {\n    const { getPrevTriggerProps } = useCarouselContext()\n\n    return {\n      fullRounded: true,\n      icon: <ChevronLeftIcon />,\n      ...getPrevTriggerProps(props),\n    }\n  },\n)\n\nexport interface CarouselNextTriggerProps extends IconButtonProps {}\n\nexport const CarouselNextTrigger = withContext<\n  \"button\",\n  CarouselNextTriggerProps\n>(IconButton, { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n  undefined,\n  (props) => {\n    const { getNextTriggerProps } = useCarouselContext()\n\n    return {\n      fullRounded: true,\n      icon: <ChevronRightIcon />,\n      ...getNextTriggerProps(props),\n    }\n  },\n)\n\nexport interface CarouselIndicatorsProps extends HTMLStyledProps {\n  /**\n   * The function used to generate children.\n   * it will be called with `{ index: number; selected: boolean }`.\n   */\n  render?: (props: { index: number; selected: boolean }) => ReactNode\n}\n\nexport const CarouselIndicators = withContext<\"div\", CarouselIndicatorsProps>(\n  \"div\",\n  \"indicators\",\n)(undefined, ({ children, render, ...rest }) => {\n  const {\n    index: selectedIndex,\n    snapCount,\n    getIndicatorProps,\n    getIndicatorsProps,\n  } = useCarouselContext()\n  const computedChildren = useMemo(() => {\n    if (children) {\n      return children\n    } else {\n      return Array.from({ length: snapCount }, (_, index) => {\n        if (render) {\n          const component = render({ index, selected: index === selectedIndex })\n\n          if (isValidElement<HTMLProps<\"button\">>(component)) {\n            return cloneElement(component, {\n              ...getIndicatorProps({ key: index, index }),\n            })\n          } else {\n            return component\n          }\n        } else {\n          return <CarouselIndicator key={index} index={index} />\n        }\n      })\n    }\n  }, [children, getIndicatorProps, render, selectedIndex, snapCount])\n\n  return {\n    children: computedChildren,\n    ...getIndicatorsProps(rest),\n  }\n})\n\nexport interface CarouselIndicatorProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The index of the carousel indicator.\n   */\n  index: number\n}\n\nexport const CarouselIndicator = withContext<\"button\", CarouselIndicatorProps>(\n  \"button\",\n  \"indicator\",\n)(undefined, (props) => {\n  const { getIndicatorProps } = useCarouselContext()\n\n  return getIndicatorProps(props)\n})\n"],"mappings":"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"}