npm - @yamada-ui/react - Versions diffs - 2.2.6 → 2.2.7-dev-20260804111744 - Mend

@yamada-ui/react 2.2.6 → 2.2.7-dev-20260804111744

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.

Files changed (811) hide show

package/dist/esm/components/carousel/carousel.js CHANGED Viewed

@@ -20,32 +20,33 @@ const { ComponentContext, PropsContext: CarouselPropsContext, useComponentContex
 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]);
+	const carouselContext = useMemo(() => ({
+		carousel,
+		index,
+		setIndex,
+		snapCount,
+		total,
+		getIndicatorProps,
+		getIndicatorsProps,
+		getItemProps,
+		getListProps,
+		getNextTriggerProps,
+		getPrevTriggerProps
+	}), [
+		carousel,
+		total,
+		index,
+		setIndex,
+		snapCount,
+		getIndicatorProps,
+		getIndicatorsProps,
+		getItemProps,
+		getListProps,
+		getNextTriggerProps,
+		getPrevTriggerProps
+	]);
 	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
-		]),
+		value: carouselContext,
 		children: /* @__PURE__ */ jsx(ComponentContext, {
 			value: componentContext,
 			children: /* @__PURE__ */ jsx(styled.section, { ...getRootProps() })

package/dist/esm/components/carousel/carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.js","names":[],"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 extends Pick<\n CarouselRootProps,\n \"includeGapInSize\"\n> {}\n\nexport interface CarouselRootProps\n extends\n 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) 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 return component\n } else {\n return <CarouselIndicator key={index} index={index} />\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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"}
1	+ {"version":3,"file":"carousel.js","names":["dataAttr"],"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 extends Pick<\n CarouselRootProps,\n \"includeGapInSize\"\n> {}\n\nexport interface CarouselRootProps\n extends\n 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) 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 return component\n } else {\n return <CarouselIndicator key={index} index={index} />\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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"}

package/dist/esm/components/carousel/use-carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-carousel.js","names":["createContext"],"sources":["../../../../src/components/carousel/use-carousel.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n EmblaCarouselType,\n EmblaOptionsType,\n EmblaPluginType,\n} from \"embla-carousel\"\nimport type { KeyboardEvent, RefObject } from \"react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport {\n type HTMLProps,\n mergeProps,\n type Orientation,\n type PropGetter,\n type RequiredPropGetter,\n} from \"../../core\"\nimport { useBoolean } from \"../../hooks/use-boolean\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n isFunction,\n mergeRefs,\n runKeyAction,\n useIds,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype EmblaOptions = Required<EmblaOptionsType>\nexport type CarouselAlign = EmblaOptions[\"align\"]\nexport type CarouselContainScroll = EmblaOptions[\"containScroll\"]\nexport type CarouselInViewThreshold = EmblaOptions[\"inViewThreshold\"]\nexport type CarouselWatchDrag = EmblaOptions[\"watchDrag\"]\nexport type CarouselWatchResize = EmblaOptions[\"watchResize\"]\nexport type CarouselWatchSlides = EmblaOptions[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\nexport type CarouselPlugin = EmblaPluginType\n\nexport interface CarouselContext extends Omit<\n UseCarouselReturn,\n \"getRootProps\"\n> {}\n\nconst [CarouselContext, useCarouselContext] = createContext<CarouselContext>({\n name: \"CarouselContext\",\n})\n\nexport { CarouselContext, useCarouselContext }\n\nexport interface UseCarouselProps extends Omit<\n HTMLProps<\"section\">,\n \"onChange\"\n> {\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 Ref of the resizable item callback.\n /\n controlRef?: RefObject<CarouselControl \| null>\n /\n The initial index of the carousel slide.\n \n @default 0\n /\n defaultIndex?: number\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 The index of the carousel slide.\n /\n index?: number\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 Embla plugins to use.\n /\n plugins?: CarouselPlugin[]\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 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 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?: CarouselWatchDrag\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?: CarouselWatchResize\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?: CarouselWatchSlides\n /\n The callback invoked when carousel slide selected.\n /\n onChange?: (index: number) => void\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 id,\n align = \"center\",\n autoplay = false,\n containScroll = false,\n controlRef,\n defaultIndex = 0,\n delay = 4000,\n dragFree = false,\n draggable = true,\n duration = 25,\n index: indexProp,\n inViewThreshold = 0,\n loop = true,\n orientation = \"horizontal\",\n plugins = [],\n skipSnaps = false,\n slidesToScroll = 1,\n stopMouseEnterAutoplay = true,\n watchDrag = draggable,\n watchResize: watchResizeProp = true,\n watchSlides = true,\n onChange,\n onScrollProgress,\n ...rest\n}: UseCarouselProps = {}) => {\n const { t } = useI18n(\"carousel\")\n const [index, setIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: indexProp,\n onChange,\n })\n const [rootId, listId] = useIds()\n const [hover, { off: onMouseLeave, on: onMouseEnter }] = useBoolean()\n const timeoutId = useRef<NodeJS.Timeout \| null>(null)\n const indicatorMapRef = useRef<Map<number, HTMLButtonElement \| null>>(\n new Map(),\n )\n const listRef = useRef<HTMLDivElement>(null)\n const horizontal = orientation === \"horizontal\"\n const axis = horizontal ? \"x\" : \"y\"\n const [snapCount, setSnapCount] = useState(0)\n const [total, setTotal] = useState(0)\n const watchResize = useCallback<Extract<CarouselWatchResize, Function>>(\n (methods, entries) => {\n const result = isFunction(watchResizeProp)\n ? watchResizeProp(methods, entries)\n : true\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n\n return result\n },\n [watchResizeProp],\n )\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n align,\n axis,\n container: listRef.current,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n startIndex: defaultIndex,\n watchDrag,\n watchResize,\n watchSlides,\n },\n plugins,\n )\n\n id ??= rootId\n\n const onInit = useCallback((methods: CarouselControl) => {\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n }, [])\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 setIndex(index)\n }, [carousel, setIndex])\n\n const onFocusIndicator = useCallback(\n (index: number) => {\n const el = indicatorMapRef.current.get(index)\n\n el?.focus()\n carousel?.scrollTo(index)\n },\n [carousel],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLButtonElement>) => {\n const lastIndex = snapCount - 1\n\n runKeyAction(ev, {\n ArrowDown: () => {\n if (horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowLeft: () => {\n if (!horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n ArrowRight: () => {\n if (!horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowUp: () => {\n if (horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n End: () => {\n onFocusIndicator(lastIndex)\n },\n Home: () => {\n onFocusIndicator(0)\n },\n })\n },\n [snapCount, horizontal, onFocusIndicator],\n )\n\n assignRef(controlRef, carousel)\n\n useEffect(() => {\n if (carousel) {\n carousel.on(\"reInit\", onInit)\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"reInit\", onInit)\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onInit, onScroll, onSelect])\n\n useEffect(() => {\n const stop = hover && stopMouseEnterAutoplay\n const last = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !stop && !last) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = null\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [autoplay, carousel, delay, hover, stopMouseEnterAutoplay])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n if (indexProp === undefined) return\n\n carousel.scrollTo(indexProp)\n }, [indexProp])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n }, [\n carousel,\n total,\n align,\n axis,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n ])\n\n const getRootProps: PropGetter<\"section\"> = useCallback(\n ({ ref, ...props } = {}) =>\n mergeProps(\n {\n id,\n \"aria-roledescription\": \"carousel\",\n \"data-orientation\": orientation,\n },\n rest,\n {\n ref,\n onMouseEnter,\n onMouseLeave,\n },\n props,\n )(),\n [id, onMouseEnter, onMouseLeave, rest, orientation],\n )\n\n const getListProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id: listId,\n \"aria-live\": autoplay ? \"off\" : \"polite\",\n \"data-orientation\": orientation,\n ...props,\n ref: mergeRefs(ref, listRef, carouselRef),\n }),\n [autoplay, listId, orientation, carouselRef],\n )\n\n const getItemProps: RequiredPropGetter<\"div\", { index: number }> =\n useCallback(\n ({ index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n id: `${listId}-${indexProp}`,\n \"aria-label\": t(\"{page} of {total}\", { page, total }),\n \"aria-roledescription\": \"slide\",\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tabpanel\",\n ...props,\n }\n },\n [index, listId, total, orientation, t],\n )\n\n const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to previous slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollPrev(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollPrev()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to next slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollNext(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollNext()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getIndicatorsProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-label\": t(\"Slides\"),\n \"aria-orientation\": orientation,\n role: \"tablist\",\n ...props,\n }),\n [orientation, t],\n )\n\n const getIndicatorProps: RequiredPropGetter<\"button\", { index: number }> =\n useCallback(\n ({ ref, index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n type: \"button\" as const,\n \"aria-controls\": `${listId}-${indexProp}`,\n \"aria-label\": t(\"Go to {page} slide\", { page }),\n \"aria-selected\": selected,\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tab\",\n tabIndex: selected ? 0 : -1,\n ...props,\n ref: mergeRefs(ref, (node) => {\n indicatorMapRef.current.set(indexProp, node)\n }),\n onClick: handlerAll(props.onClick, () =>\n carousel?.scrollTo(indexProp),\n ),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(indexProp)),\n }\n },\n [index, listId, t, orientation, onKeyDown, carousel],\n )\n\n return {\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 }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-carousel.js","names":["createContext","isFunction","dataAttr","handlerAll"],"sources":["../../../../src/components/carousel/use-carousel.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n EmblaCarouselType,\n EmblaOptionsType,\n EmblaPluginType,\n} from \"embla-carousel\"\nimport type { KeyboardEvent, RefObject } from \"react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport {\n type HTMLProps,\n mergeProps,\n type Orientation,\n type PropGetter,\n type RequiredPropGetter,\n} from \"../../core\"\nimport { useBoolean } from \"../../hooks/use-boolean\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n isFunction,\n mergeRefs,\n runKeyAction,\n useIds,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype EmblaOptions = Required<EmblaOptionsType>\nexport type CarouselAlign = EmblaOptions[\"align\"]\nexport type CarouselContainScroll = EmblaOptions[\"containScroll\"]\nexport type CarouselInViewThreshold = EmblaOptions[\"inViewThreshold\"]\nexport type CarouselWatchDrag = EmblaOptions[\"watchDrag\"]\nexport type CarouselWatchResize = EmblaOptions[\"watchResize\"]\nexport type CarouselWatchSlides = EmblaOptions[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\nexport type CarouselPlugin = EmblaPluginType\n\nexport interface CarouselContext extends Omit<\n UseCarouselReturn,\n \"getRootProps\"\n> {}\n\nconst [CarouselContext, useCarouselContext] = createContext<CarouselContext>({\n name: \"CarouselContext\",\n})\n\nexport { CarouselContext, useCarouselContext }\n\nexport interface UseCarouselProps extends Omit<\n HTMLProps<\"section\">,\n \"onChange\"\n> {\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 Ref of the resizable item callback.\n /\n controlRef?: RefObject<CarouselControl \| null>\n /\n The initial index of the carousel slide.\n \n @default 0\n /\n defaultIndex?: number\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 The index of the carousel slide.\n /\n index?: number\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 Embla plugins to use.\n /\n plugins?: CarouselPlugin[]\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 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 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?: CarouselWatchDrag\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?: CarouselWatchResize\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?: CarouselWatchSlides\n /\n The callback invoked when carousel slide selected.\n /\n onChange?: (index: number) => void\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 id,\n align = \"center\",\n autoplay = false,\n containScroll = false,\n controlRef,\n defaultIndex = 0,\n delay = 4000,\n dragFree = false,\n draggable = true,\n duration = 25,\n index: indexProp,\n inViewThreshold = 0,\n loop = true,\n orientation = \"horizontal\",\n plugins = [],\n skipSnaps = false,\n slidesToScroll = 1,\n stopMouseEnterAutoplay = true,\n watchDrag = draggable,\n watchResize: watchResizeProp = true,\n watchSlides = true,\n onChange,\n onScrollProgress,\n ...rest\n}: UseCarouselProps = {}) => {\n const { t } = useI18n(\"carousel\")\n const [index, setIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: indexProp,\n onChange,\n })\n const [rootId, listId] = useIds()\n const [hover, { off: onMouseLeave, on: onMouseEnter }] = useBoolean()\n const timeoutId = useRef<NodeJS.Timeout \| null>(null)\n const indicatorMapRef = useRef<Map<number, HTMLButtonElement \| null>>(\n new Map(),\n )\n const listRef = useRef<HTMLDivElement>(null)\n const horizontal = orientation === \"horizontal\"\n const axis = horizontal ? \"x\" : \"y\"\n const [snapCount, setSnapCount] = useState(0)\n const [total, setTotal] = useState(0)\n const watchResize = useCallback<Extract<CarouselWatchResize, Function>>(\n (methods, entries) => {\n const result = isFunction(watchResizeProp)\n ? watchResizeProp(methods, entries)\n : true\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n\n return result\n },\n [watchResizeProp],\n )\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n align,\n axis,\n container: listRef.current,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n startIndex: defaultIndex,\n watchDrag,\n watchResize,\n watchSlides,\n },\n plugins,\n )\n\n id ??= rootId\n\n const onInit = useCallback((methods: CarouselControl) => {\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n }, [])\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 setIndex(index)\n }, [carousel, setIndex])\n\n const onFocusIndicator = useCallback(\n (index: number) => {\n const el = indicatorMapRef.current.get(index)\n\n el?.focus()\n carousel?.scrollTo(index)\n },\n [carousel],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLButtonElement>) => {\n const lastIndex = snapCount - 1\n\n runKeyAction(ev, {\n ArrowDown: () => {\n if (horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowLeft: () => {\n if (!horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n ArrowRight: () => {\n if (!horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowUp: () => {\n if (horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n End: () => {\n onFocusIndicator(lastIndex)\n },\n Home: () => {\n onFocusIndicator(0)\n },\n })\n },\n [snapCount, horizontal, onFocusIndicator],\n )\n\n assignRef(controlRef, carousel)\n\n useEffect(() => {\n if (carousel) {\n carousel.on(\"reInit\", onInit)\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"reInit\", onInit)\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onInit, onScroll, onSelect])\n\n useEffect(() => {\n const stop = hover && stopMouseEnterAutoplay\n const last = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !stop && !last) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = null\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [autoplay, carousel, delay, hover, stopMouseEnterAutoplay])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n if (indexProp === undefined) return\n\n carousel.scrollTo(indexProp)\n }, [indexProp])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n }, [\n carousel,\n total,\n align,\n axis,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n ])\n\n const getRootProps: PropGetter<\"section\"> = useCallback(\n ({ ref, ...props } = {}) =>\n mergeProps(\n {\n id,\n \"aria-roledescription\": \"carousel\",\n \"data-orientation\": orientation,\n },\n rest,\n {\n ref,\n onMouseEnter,\n onMouseLeave,\n },\n props,\n )(),\n [id, onMouseEnter, onMouseLeave, rest, orientation],\n )\n\n const getListProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id: listId,\n \"aria-live\": autoplay ? \"off\" : \"polite\",\n \"data-orientation\": orientation,\n ...props,\n ref: mergeRefs(ref, listRef, carouselRef),\n }),\n [autoplay, listId, orientation, carouselRef],\n )\n\n const getItemProps: RequiredPropGetter<\"div\", { index: number }> =\n useCallback(\n ({ index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n id: `${listId}-${indexProp}`,\n \"aria-label\": t(\"{page} of {total}\", { page, total }),\n \"aria-roledescription\": \"slide\",\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tabpanel\",\n ...props,\n }\n },\n [index, listId, total, orientation, t],\n )\n\n const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to previous slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollPrev(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollPrev()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to next slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollNext(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollNext()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getIndicatorsProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-label\": t(\"Slides\"),\n \"aria-orientation\": orientation,\n role: \"tablist\",\n ...props,\n }),\n [orientation, t],\n )\n\n const getIndicatorProps: RequiredPropGetter<\"button\", { index: number }> =\n useCallback(\n ({ ref, index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n type: \"button\" as const,\n \"aria-controls\": `${listId}-${indexProp}`,\n \"aria-label\": t(\"Go to {page} slide\", { page }),\n \"aria-selected\": selected,\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tab\",\n tabIndex: selected ? 0 : -1,\n ...props,\n ref: mergeRefs(ref, (node) => {\n indicatorMapRef.current.set(indexProp, node)\n }),\n onClick: handlerAll(props.onClick, () =>\n carousel?.scrollTo(indexProp),\n ),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(indexProp)),\n }\n },\n [index, listId, t, orientation, onKeyDown, carousel],\n )\n\n return {\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 }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n"],"mappings":"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"}

package/dist/esm/components/chart/area-chart.js CHANGED Viewed

@@ -13,11 +13,12 @@ const { PropsContext: AreaChartPropsContext, usePropsContext: useAreaChartPropsC
 * @see https://yamada-ui.com/docs/components/area-chart
 */
 const AreaChart$1 = withContext(({ children, series = [], ...rest }) => {
+	const components = useMemo(() => [{
+		component: ChartArea,
+		fallback: series.map((props, index) => /* @__PURE__ */ jsx(ChartArea, { ...props }, index))
+	}], [series]);
 	return /* @__PURE__ */ jsx(CartesianChart, {
-		components: useMemo(() => [{
-			component: ChartArea,
-			fallback: series.map((props, index) => /* @__PURE__ */ jsx(ChartArea, { ...props }, index))
-		}], [series]),
+		components,
 		render: (props) => /* @__PURE__ */ jsx(AreaChart, { ...props }),
 		...rest,
 		children

package/dist/esm/components/chart/area-chart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"area-chart.js","names":["AreaChart","OriginalAreaChart"],"sources":["../../../../src/components/chart/area-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { AreaChartStyle } from \"./area-chart.style\"\nimport type { CartesianChartProps, ChartAreaProps } from \"./cartesian-chart\"\nimport { useMemo } from \"react\"\nimport { AreaChart as OriginalAreaChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { areaChartStyle } from \"./area-chart.style\"\nimport { CartesianChart, ChartArea } from \"./cartesian-chart\"\n\nexport interface AreaChartProps<Y extends Dict = Dict>\n extends\n Omit<CartesianChartProps<Y>, \"components\" \| \"render\">,\n ThemeProps<AreaChartStyle> {\n /**\n If provided, generate areas based on series.\n /\n series?: ChartAreaProps<Y>[]\n}\n\nconst {\n PropsContext: AreaChartPropsContext,\n usePropsContext: useAreaChartPropsContext,\n withContext,\n} = createComponent<AreaChartProps, AreaChartStyle>(\n \"area-chart\",\n areaChartStyle,\n)\n\nexport { AreaChartPropsContext, useAreaChartPropsContext }\n\n/\n `AreaChart` is a component for drawing area charts to compare multiple sets of data.\n \n @see https://yamada-ui.com/docs/components/area-chart\n */\nexport const AreaChart = withContext<\"div\", AreaChartProps>(\n <Y extends Dict>({ children, series = [], ...rest }: AreaChartProps<Y>) => {\n const components = useMemo(\n () => [\n {\n component: ChartArea,\n fallback: series.map((props, index) => (\n <ChartArea key={index} {...props} />\n )),\n },\n ],\n [series],\n )\n\n return (\n <CartesianChart\n components={components}\n render={(props) => <OriginalAreaChart {...props} />}\n {...rest}\n >\n {children}\n </CartesianChart>\n )\n },\n)() as GenericsComponent<{\n <Y extends Dict>(props: AreaChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;AAuBA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,cACF;;;;;;AASA,MAAaA,cAAY,aACN,EAAE,UAAU,SAAS,CAAC,GAAG,GAAG,WAA8B;~~CAazE~~,~~OACE~~,~~oBAAC~~,~~gBAAD;EACE,YAde,~~cACX,CACJ;~~GACE~~,WAAW;~~GACX~~,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,WAAD,EAAuB,GAAI,MAAQ,GAAnB,KAAmB,CACpC;~~EACH~~,CACF,GACA,CAAC,MAAM,~~CAKgB~~;~~EACrB~~,SAAS,UAAU,oBAACC,WAAD,EAAmB,GAAI,MAAQ,CAAA;EAClD,GAAI;EAEH;CACa,CAAA;AAEpB,CACF,CAAC,CAAC"}
1	+ {"version":3,"file":"area-chart.js","names":["AreaChart","OriginalAreaChart"],"sources":["../../../../src/components/chart/area-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { AreaChartStyle } from \"./area-chart.style\"\nimport type { CartesianChartProps, ChartAreaProps } from \"./cartesian-chart\"\nimport { useMemo } from \"react\"\nimport { AreaChart as OriginalAreaChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { areaChartStyle } from \"./area-chart.style\"\nimport { CartesianChart, ChartArea } from \"./cartesian-chart\"\n\nexport interface AreaChartProps<Y extends Dict = Dict>\n extends\n Omit<CartesianChartProps<Y>, \"components\" \| \"render\">,\n ThemeProps<AreaChartStyle> {\n /**\n If provided, generate areas based on series.\n /\n series?: ChartAreaProps<Y>[]\n}\n\nconst {\n PropsContext: AreaChartPropsContext,\n usePropsContext: useAreaChartPropsContext,\n withContext,\n} = createComponent<AreaChartProps, AreaChartStyle>(\n \"area-chart\",\n areaChartStyle,\n)\n\nexport { AreaChartPropsContext, useAreaChartPropsContext }\n\n/\n `AreaChart` is a component for drawing area charts to compare multiple sets of data.\n \n @see https://yamada-ui.com/docs/components/area-chart\n */\nexport const AreaChart = withContext<\"div\", AreaChartProps>(\n <Y extends Dict>({ children, series = [], ...rest }: AreaChartProps<Y>) => {\n const components = useMemo(\n () => [\n {\n component: ChartArea,\n fallback: series.map((props, index) => (\n <ChartArea key={index} {...props} />\n )),\n },\n ],\n [series],\n )\n\n return (\n <CartesianChart\n components={components}\n render={(props) => <OriginalAreaChart {...props} />}\n {...rest}\n >\n {children}\n </CartesianChart>\n )\n },\n)() as GenericsComponent<{\n <Y extends Dict>(props: AreaChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;AAuBA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,cACF;;;;;;AASA,MAAaA,cAAY,aACN,EAAE,UAAU,SAAS,CAAC,GAAG,GAAG,WAA8B;CACzE,MAAM,aAAa,cACX,CACJ;EACE,WAAW;EACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,WAAD,EAAuB,GAAI,MAAQ,GAAnB,KAAmB,CACpC;CACH,CACF,GACA,CAAC,MAAM,CACT;CAEA,OACE,oBAAC,gBAAD;EACc;EACZ,SAAS,UAAU,oBAACC,WAAD,EAAmB,GAAI,MAAQ,CAAA;EAClD,GAAI;EAEH;CACa,CAAA;AAEpB,CACF,CAAC,CAAC"}

package/dist/esm/components/chart/bar-chart.js CHANGED Viewed

@@ -13,11 +13,12 @@ const { PropsContext: BarChartPropsContext, usePropsContext: useBarChartPropsCon
 * @see https://yamada-ui.com/docs/components/bar-chart
 */
 const BarChart$1 = withContext(({ children, series = [], ...rest }) => {
+	const components = useMemo(() => [{
+		component: ChartBar,
+		fallback: series.map((props, index) => /* @__PURE__ */ jsx(ChartBar, { ...props }, index))
+	}], [series]);
 	return /* @__PURE__ */ jsx(CartesianChart, {
-		components: useMemo(() => [{
-			component: ChartBar,
-			fallback: series.map((props, index) => /* @__PURE__ */ jsx(ChartBar, { ...props }, index))
-		}], [series]),
+		components,
 		render: (props) => /* @__PURE__ */ jsx(BarChart, { ...props }),
 		...rest,
 		children

package/dist/esm/components/chart/bar-chart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bar-chart.js","names":["BarChart","OriginalBarChart"],"sources":["../../../../src/components/chart/bar-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { BarChartStyle } from \"./bar-chart.style\"\nimport type { CartesianChartProps, ChartBarProps } from \"./cartesian-chart\"\nimport { useMemo } from \"react\"\nimport { BarChart as OriginalBarChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { barChartStyle } from \"./bar-chart.style\"\nimport { CartesianChart, ChartBar } from \"./cartesian-chart\"\n\nexport interface BarChartProps<Y extends Dict = Dict>\n extends\n Omit<CartesianChartProps<Y>, \"components\" \| \"render\">,\n ThemeProps<BarChartStyle> {\n /**\n If provided, generate bars based on series.\n /\n series?: ChartBarProps<Y>[]\n}\n\nconst {\n PropsContext: BarChartPropsContext,\n usePropsContext: useBarChartPropsContext,\n withContext,\n} = createComponent<BarChartProps, BarChartStyle>(\"bar-chart\", barChartStyle)\n\nexport { BarChartPropsContext, useBarChartPropsContext }\n\n/\n `BarChart` is a component for drawing bar charts to compare multiple sets of data.\n \n @see https://yamada-ui.com/docs/components/bar-chart\n */\nexport const BarChart = withContext<\"div\", BarChartProps>(\n <Y extends Dict>({ children, series = [], ...rest }: BarChartProps<Y>) => {\n const components = useMemo(\n () => [\n {\n component: ChartBar,\n fallback: series.map((props, index) => (\n <ChartBar key={index} {...props} />\n )),\n },\n ],\n [series],\n )\n\n return (\n <CartesianChart\n components={components}\n render={(props) => <OriginalBarChart {...props} />}\n {...rest}\n >\n {children}\n </CartesianChart>\n )\n },\n)() as GenericsComponent<{\n <Y extends Dict>(props: BarChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;AAuBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,aAAa;;;;;;AAS5E,MAAaA,aAAW,aACL,EAAE,UAAU,SAAS,CAAC,GAAG,GAAG,WAA6B;~~CAaxE~~,~~OACE~~,~~oBAAC~~,~~gBAAD;EACE,YAde,~~cACX,CACJ;~~GACE~~,WAAW;~~GACX~~,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,UAAD,EAAsB,GAAI,MAAQ,GAAnB,KAAmB,CACnC;~~EACH~~,CACF,GACA,CAAC,MAAM,~~CAKgB~~;~~EACrB~~,SAAS,UAAU,oBAACC,UAAD,EAAkB,GAAI,MAAQ,CAAA;EACjD,GAAI;EAEH;CACa,CAAA;AAEpB,CACF,CAAC,CAAC"}
1	+ {"version":3,"file":"bar-chart.js","names":["BarChart","OriginalBarChart"],"sources":["../../../../src/components/chart/bar-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { BarChartStyle } from \"./bar-chart.style\"\nimport type { CartesianChartProps, ChartBarProps } from \"./cartesian-chart\"\nimport { useMemo } from \"react\"\nimport { BarChart as OriginalBarChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { barChartStyle } from \"./bar-chart.style\"\nimport { CartesianChart, ChartBar } from \"./cartesian-chart\"\n\nexport interface BarChartProps<Y extends Dict = Dict>\n extends\n Omit<CartesianChartProps<Y>, \"components\" \| \"render\">,\n ThemeProps<BarChartStyle> {\n /**\n If provided, generate bars based on series.\n /\n series?: ChartBarProps<Y>[]\n}\n\nconst {\n PropsContext: BarChartPropsContext,\n usePropsContext: useBarChartPropsContext,\n withContext,\n} = createComponent<BarChartProps, BarChartStyle>(\"bar-chart\", barChartStyle)\n\nexport { BarChartPropsContext, useBarChartPropsContext }\n\n/\n `BarChart` is a component for drawing bar charts to compare multiple sets of data.\n \n @see https://yamada-ui.com/docs/components/bar-chart\n */\nexport const BarChart = withContext<\"div\", BarChartProps>(\n <Y extends Dict>({ children, series = [], ...rest }: BarChartProps<Y>) => {\n const components = useMemo(\n () => [\n {\n component: ChartBar,\n fallback: series.map((props, index) => (\n <ChartBar key={index} {...props} />\n )),\n },\n ],\n [series],\n )\n\n return (\n <CartesianChart\n components={components}\n render={(props) => <OriginalBarChart {...props} />}\n {...rest}\n >\n {children}\n </CartesianChart>\n )\n },\n)() as GenericsComponent<{\n <Y extends Dict>(props: BarChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;AAuBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,aAAa;;;;;;AAS5E,MAAaA,aAAW,aACL,EAAE,UAAU,SAAS,CAAC,GAAG,GAAG,WAA6B;CACxE,MAAM,aAAa,cACX,CACJ;EACE,WAAW;EACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,UAAD,EAAsB,GAAI,MAAQ,GAAnB,KAAmB,CACnC;CACH,CACF,GACA,CAAC,MAAM,CACT;CAEA,OACE,oBAAC,gBAAD;EACc;EACZ,SAAS,UAAU,oBAACC,UAAD,EAAkB,GAAI,MAAQ,CAAA;EACjD,GAAI;EAEH;CACa,CAAA;AAEpB,CACF,CAAC,CAAC"}

package/dist/esm/components/chart/cartesian-chart.js CHANGED Viewed

@@ -150,31 +150,32 @@ const ChartXAxis = withContext((props) => {
 		tickLineProps.css,
 		css
 	]);
-	const { getRootProps, getXAxisProps } = useChartXAxis({
-		label: useMemo(() => {
-			if (!labelProp) return labelProp;
-			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
-			if ((0, utils_exports.isFunction)(labelProp)) return (props) => labelProp({
-				...props,
-				className: (0, utils_exports.cx)(className, props.className)
-			});
-			else if (isValidElement(labelProp)) return cloneElement(labelProp, { className });
-			else if ((0, utils_exports.isObject)(labelProp)) {
-				const [omittedProps, styleProps] = (0, utils_exports.splitObject)(labelProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return {
-				className,
-				children: labelProp
+	const label = useMemo(() => {
+		if (!labelProp) return labelProp;
+		const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, utils_exports.isFunction)(labelProp)) return (props) => labelProp({
+			...props,
+			className: (0, utils_exports.cx)(className, props.className)
+		});
+		else if (isValidElement(labelProp)) return cloneElement(labelProp, { className });
+		else if ((0, utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
 			};
-		}, [
-			labelProp,
-			labelProps.className,
-			labelProps.css,
-			css
-		]),
+		} else return {
+			className,
+			children: labelProp
+		};
+	}, [
+		labelProp,
+		labelProps.className,
+		labelProps.css,
+		css
+	]);
+	const { getRootProps, getXAxisProps } = useChartXAxis({
+		label,
 		tick,
 		tickLine,
 		...rest
@@ -234,31 +235,32 @@ const ChartYAxis = withContext((props) => {
 		tickLineProps.css,
 		css
 	]);
-	const { getRootProps, getYAxisProps } = useChartYAxis({
-		label: useMemo(() => {
-			if (!labelProp) return labelProp;
-			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
-			if ((0, utils_exports.isFunction)(labelProp)) return (props) => labelProp({
-				...props,
-				className: (0, utils_exports.cx)(className, props.className)
-			});
-			else if (isValidElement(labelProp)) return cloneElement(labelProp, { className });
-			else if ((0, utils_exports.isObject)(labelProp)) {
-				const [omittedProps, styleProps] = (0, utils_exports.splitObject)(labelProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return {
-				className,
-				children: labelProp
+	const label = useMemo(() => {
+		if (!labelProp) return labelProp;
+		const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, utils_exports.isFunction)(labelProp)) return (props) => labelProp({
+			...props,
+			className: (0, utils_exports.cx)(className, props.className)
+		});
+		else if (isValidElement(labelProp)) return cloneElement(labelProp, { className });
+		else if ((0, utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
 			};
-		}, [
-			labelProp,
-			labelProps.className,
-			labelProps.css,
-			css
-		]),
+		} else return {
+			className,
+			children: labelProp
+		};
+	}, [
+		labelProp,
+		labelProps.className,
+		labelProps.css,
+		css
+	]);
+	const { getRootProps, getYAxisProps } = useChartYAxis({
+		label,
 		tick,
 		tickLine,
 		...rest
@@ -320,55 +322,57 @@ const ChartLine = withContext((props) => {
 		css,
 		color
 	]);
+	const activeDot = useMemo(() => {
+		if (!activeDotProp) return activeDotProp;
+		const className = (0, utils_exports.cx)(activeDotProps.className, css(activeDotProps.css), css({
+			fill: color,
+			stroke: color
+		}));
+		if ((0, utils_exports.isFunction)(activeDotProp)) return (props) => activeDotProp({
+			...props,
+			className: (0, utils_exports.cx)(className, props.className)
+		});
+		else if (isValidElement(activeDotProp)) return cloneElement(activeDotProp, { className });
+		else if ((0, utils_exports.isObject)(activeDotProp)) {
+			const [omittedProps, styleProps] = (0, utils_exports.splitObject)(activeDotProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		activeDotProp,
+		activeDotProps.className,
+		activeDotProps.css,
+		css,
+		color
+	]);
+	const label = useMemo(() => {
+		if (!labelProp) return labelProp;
+		const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, utils_exports.isFunction)(labelProp)) return (props) => labelProp({
+			...props,
+			className: (0, utils_exports.cx)(className, props.className)
+		});
+		else if (isValidElement(labelProp)) return cloneElement(labelProp, { className });
+		else if ((0, utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		labelProp,
+		labelProps.className,
+		labelProps.css,
+		css
+	]);
 	const { getLineProps, getRootProps } = useChartLine({
-		activeDot: useMemo(() => {
-			if (!activeDotProp) return activeDotProp;
-			const className = (0, utils_exports.cx)(activeDotProps.className, css(activeDotProps.css), css({
-				fill: color,
-				stroke: color
-			}));
-			if ((0, utils_exports.isFunction)(activeDotProp)) return (props) => activeDotProp({
-				...props,
-				className: (0, utils_exports.cx)(className, props.className)
-			});
-			else if (isValidElement(activeDotProp)) return cloneElement(activeDotProp, { className });
-			else if ((0, utils_exports.isObject)(activeDotProp)) {
-				const [omittedProps, styleProps] = (0, utils_exports.splitObject)(activeDotProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return { className };
-		}, [
-			activeDotProp,
-			activeDotProps.className,
-			activeDotProps.css,
-			css,
-			color
-		]),
+		activeDot,
 		dataKey,
 		dot,
-		label: useMemo(() => {
-			if (!labelProp) return labelProp;
-			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
-			if ((0, utils_exports.isFunction)(labelProp)) return (props) => labelProp({
-				...props,
-				className: (0, utils_exports.cx)(className, props.className)
-			});
-			else if (isValidElement(labelProp)) return cloneElement(labelProp, { className });
-			else if ((0, utils_exports.isObject)(labelProp)) {
-				const [omittedProps, styleProps] = (0, utils_exports.splitObject)(labelProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return { className };
-		}, [
-			labelProp,
-			labelProps.className,
-			labelProps.css,
-			css
-		]),
+		label,
 		stroke,
 		...rest
 	});
@@ -518,30 +522,31 @@ const ChartBar = withContext((props) => {
 	const fill = JSON.stringify(color);
 	const labelProps = useSlotComponentProps({}, "labelList");
 	const css = useMemo(() => getCSS(system, theme), [system, theme]);
+	const label = useMemo(() => {
+		if (!labelProp) return labelProp;
+		const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, utils_exports.isFunction)(labelProp)) return (props) => labelProp({
+			...props,
+			className: (0, utils_exports.cx)(className, props.className)
+		});
+		else if (isValidElement(labelProp)) return cloneElement(labelProp, { className });
+		else if ((0, utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		labelProp,
+		labelProps.className,
+		labelProps.css,
+		css
+	]);
 	const { getBarProps, getRootProps } = useChartBar({
 		dataKey,
 		fill,
-		label: useMemo(() => {
-			if (!labelProp) return labelProp;
-			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
-			if ((0, utils_exports.isFunction)(labelProp)) return (props) => labelProp({
-				...props,
-				className: (0, utils_exports.cx)(className, props.className)
-			});
-			else if (isValidElement(labelProp)) return cloneElement(labelProp, { className });
-			else if ((0, utils_exports.isObject)(labelProp)) {
-				const [omittedProps, styleProps] = (0, utils_exports.splitObject)(labelProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return { className };
-		}, [
-			labelProp,
-			labelProps.className,
-			labelProps.css,
-			css
-		]),
+		label,
 		...rest
 	});
 	return /* @__PURE__ */ jsx(styled.path, {
@@ -563,31 +568,32 @@ const ChartReferenceLine = withContext((props) => {
 	const { theme } = useTheme();
 	const labelProps = useSlotComponentProps({}, "referenceLineLabel");
 	const css = useMemo(() => getCSS(system, theme), [system, theme]);
-	const { getReferenceLineProps, getRootProps } = useChartReferenceLine({
-		label: useMemo(() => {
-			if (!labelProp) return labelProp;
-			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
-			if ((0, utils_exports.isFunction)(labelProp)) return (props) => labelProp({
-				...props,
-				className: (0, utils_exports.cx)(className, props.className)
-			});
-			else if (isValidElement(labelProp)) return cloneElement(labelProp, { className });
-			else if ((0, utils_exports.isObject)(labelProp)) {
-				const [omittedProps, styleProps] = (0, utils_exports.splitObject)(labelProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return {
-				className,
-				children: labelProp
+	const label = useMemo(() => {
+		if (!labelProp) return labelProp;
+		const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, utils_exports.isFunction)(labelProp)) return (props) => labelProp({
+			...props,
+			className: (0, utils_exports.cx)(className, props.className)
+		});
+		else if (isValidElement(labelProp)) return cloneElement(labelProp, { className });
+		else if ((0, utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, utils_exports.cx)(className, omittedProps.className, css(styleProps))
 			};
-		}, [
-			labelProp,
-			labelProps.className,
-			labelProps.css,
-			css
-		]),
+		} else return {
+			className,
+			children: labelProp
+		};
+	}, [
+		labelProp,
+		labelProps.className,
+		labelProps.css,
+		css
+	]);
+	const { getReferenceLineProps, getRootProps } = useChartReferenceLine({
+		label,
 		...rest
 	});
 	return /* @__PURE__ */ jsx(styled.line, {