@yamada-ui/react/dist/esm/components/carousel/carousel.js

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

"use client";


import { utils_exports } from "../../utils/index.js";
import { varAttr } from "../../core/system/var.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { ChevronLeftIcon } from "../icon/icons/chevron-left-icon.js";
import { ChevronRightIcon } from "../icon/icons/chevron-right-icon.js";
import { IconButton } from "../button/icon-button.js";
import { carouselStyle } from "./carousel.style.js";
import { CarouselContext, useCarousel, useCarouselContext } from "./use-carousel.js";
import { cloneElement, isValidElement, useMemo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/carousel/carousel.tsx
const { ComponentContext, PropsContext: CarouselPropsContext, useComponentContext, usePropsContext: useCarouselPropsContext, withContext, withProvider } = createSlotComponent("carousel", carouselStyle);
/**
* `Carousel` is a component that displays multiple elements like a slideshow.
*
* @see https://yamada-ui.com/docs/components/carousel
*/
const CarouselRoot = withProvider(({ includeGapInSize = true,...rest }) => {
	const { carousel, index, setIndex, snapCount, total, getIndicatorProps, getIndicatorsProps, getItemProps, getListProps, getNextTriggerProps, getPrevTriggerProps, getRootProps } = useCarousel(rest);
	const componentContext = useMemo(() => ({ includeGapInSize }), [includeGapInSize]);
	return /* @__PURE__ */ jsx(CarouselContext, {
		value: useMemo(() => ({
			carousel,
			index,
			setIndex,
			snapCount,
			total,
			getIndicatorProps,
			getIndicatorsProps,
			getItemProps,
			getListProps,
			getNextTriggerProps,
			getPrevTriggerProps
		}), [
			carousel,
			total,
			index,
			setIndex,
			snapCount,
			getIndicatorProps,
			getIndicatorsProps,
			getItemProps,
			getListProps,
			getNextTriggerProps,
			getPrevTriggerProps
		]),
		children: /* @__PURE__ */ jsx(ComponentContext, {
			value: componentContext,
			children: /* @__PURE__ */ jsx(styled.section, { ...getRootProps() })
		})
	});
}, "root")(void 0, ({ gap, slideSize,...rest }) => {
	return {
		...rest,
		"--slide-gap": varAttr(gap, "spaces"),
		"--slide-size": varAttr(slideSize, "sizes")
	};
});
const CarouselList = withContext("div", "list")(void 0, (props) => {
	const { includeGapInSize } = useComponentContext();
	const { getListProps } = useCarouselContext();
	return {
		"data-include-gap-in-size": (0, utils_exports.dataAttr)(includeGapInSize),
		...getListProps(props)
	};
});
const CarouselItem = withContext("div", "item")(void 0, ({ slideSize,...rest }) => {
	const { includeGapInSize } = useComponentContext();
	const { getItemProps } = useCarouselContext();
	return {
		"data-include-gap-in-size": (0, utils_exports.dataAttr)(includeGapInSize),
		"--slide-size": varAttr(slideSize, "sizes"),
		...getItemProps(rest)
	};
});
const CarouselPrevTrigger = withContext(IconButton, {
	name: "PrevTrigger",
	slot: ["trigger", "prev"]
})(void 0, (props) => {
	const { getPrevTriggerProps } = useCarouselContext();
	return {
		fullRounded: true,
		icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
		...getPrevTriggerProps(props)
	};
});
const CarouselNextTrigger = withContext(IconButton, {
	name: "NextTrigger",
	slot: ["trigger", "next"]
})(void 0, (props) => {
	const { getNextTriggerProps } = useCarouselContext();
	return {
		fullRounded: true,
		icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
		...getNextTriggerProps(props)
	};
});
const CarouselIndicators = withContext("div", "indicators")(void 0, ({ children, render,...rest }) => {
	const { index: selectedIndex, snapCount, getIndicatorProps, getIndicatorsProps } = useCarouselContext();
	return {
		children: useMemo(() => {
			if (children) return children;
			else return Array.from({ length: snapCount }, (_, index) => {
				if (render) {
					const component = render({
						index,
						selected: index === selectedIndex
					});
					if (isValidElement(component)) return cloneElement(component, { ...getIndicatorProps({
						key: index,
						index
					}) });
					else return component;
				} else return /* @__PURE__ */ jsx(CarouselIndicator, { index }, index);
			});
		}, [
			children,
			getIndicatorProps,
			render,
			selectedIndex,
			snapCount
		]),
		...getIndicatorsProps(rest)
	};
});
const CarouselIndicator = withContext("button", "indicator")(void 0, (props) => {
	const { getIndicatorProps } = useCarouselContext();
	return getIndicatorProps(props);
});

//#endregion
export { CarouselIndicator, CarouselIndicators, CarouselItem, CarouselList, CarouselNextTrigger, CarouselPrevTrigger, CarouselPropsContext, CarouselRoot, useCarouselPropsContext };
//# sourceMappingURL=carousel.js.map