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

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_var = require('../../core/system/var.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_chevron_left_icon = require('../icon/icons/chevron-left-icon.cjs');
const require_chevron_right_icon = require('../icon/icons/chevron-right-icon.cjs');
const require_icon_button = require('../button/icon-button.cjs');
const require_carousel_style = require('./carousel.style.cjs');
const require_use_carousel = require('./use-carousel.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/carousel/carousel.tsx
const { ComponentContext, PropsContext: CarouselPropsContext, useComponentContext, usePropsContext: useCarouselPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("carousel", require_carousel_style.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 } = require_use_carousel.useCarousel(rest);
	const componentContext = (0, react.useMemo)(() => ({ includeGapInSize }), [includeGapInSize]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_carousel.CarouselContext, {
		value: (0, react.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__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
			value: componentContext,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.section, { ...getRootProps() })
		})
	});
}, "root")(void 0, ({ gap, slideSize,...rest }) => {
	return {
		...rest,
		"--slide-gap": require_var.varAttr(gap, "spaces"),
		"--slide-size": require_var.varAttr(slideSize, "sizes")
	};
});
const CarouselList = withContext("div", "list")(void 0, (props) => {
	const { includeGapInSize } = useComponentContext();
	const { getListProps } = require_use_carousel.useCarouselContext();
	return {
		"data-include-gap-in-size": (0, require_utils_index.utils_exports.dataAttr)(includeGapInSize),
		...getListProps(props)
	};
});
const CarouselItem = withContext("div", "item")(void 0, ({ slideSize,...rest }) => {
	const { includeGapInSize } = useComponentContext();
	const { getItemProps } = require_use_carousel.useCarouselContext();
	return {
		"data-include-gap-in-size": (0, require_utils_index.utils_exports.dataAttr)(includeGapInSize),
		"--slide-size": require_var.varAttr(slideSize, "sizes"),
		...getItemProps(rest)
	};
});
const CarouselPrevTrigger = withContext(require_icon_button.IconButton, {
	name: "PrevTrigger",
	slot: ["trigger", "prev"]
})(void 0, (props) => {
	const { getPrevTriggerProps } = require_use_carousel.useCarouselContext();
	return {
		fullRounded: true,
		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_left_icon.ChevronLeftIcon, {}),
		...getPrevTriggerProps(props)
	};
});
const CarouselNextTrigger = withContext(require_icon_button.IconButton, {
	name: "NextTrigger",
	slot: ["trigger", "next"]
})(void 0, (props) => {
	const { getNextTriggerProps } = require_use_carousel.useCarouselContext();
	return {
		fullRounded: true,
		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_right_icon.ChevronRightIcon, {}),
		...getNextTriggerProps(props)
	};
});
const CarouselIndicators = withContext("div", "indicators")(void 0, ({ children, render,...rest }) => {
	const { index: selectedIndex, snapCount, getIndicatorProps, getIndicatorsProps } = require_use_carousel.useCarouselContext();
	return {
		children: (0, react.useMemo)(() => {
			if (children) return children;
			else return Array.from({ length: snapCount }, (_, index) => {
				if (render) {
					const component = render({
						index,
						selected: index === selectedIndex
					});
					if ((0, react.isValidElement)(component)) return (0, react.cloneElement)(component, { ...getIndicatorProps({
						key: index,
						index
					}) });
					else return component;
				} else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselIndicator, { index }, index);
			});
		}, [
			children,
			getIndicatorProps,
			render,
			selectedIndex,
			snapCount
		]),
		...getIndicatorsProps(rest)
	};
});
const CarouselIndicator = withContext("button", "indicator")(void 0, (props) => {
	const { getIndicatorProps } = require_use_carousel.useCarouselContext();
	return getIndicatorProps(props);
});

//#endregion
exports.CarouselIndicator = CarouselIndicator;
exports.CarouselIndicators = CarouselIndicators;
exports.CarouselItem = CarouselItem;
exports.CarouselList = CarouselList;
exports.CarouselNextTrigger = CarouselNextTrigger;
exports.CarouselPrevTrigger = CarouselPrevTrigger;
exports.CarouselPropsContext = CarouselPropsContext;
exports.CarouselRoot = CarouselRoot;
exports.useCarouselPropsContext = useCarouselPropsContext;
//# sourceMappingURL=carousel.cjs.map