@yamada-ui/carousel 0.1.5 → 0.1.7

package/dist/carousel-indicators.js

@@ -78,17 +78,9 @@ var useCarouselIndicators = () => {
 // src/carousel-indicators.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var CarouselIndicators = (0, import_core2.forwardRef)(
-  ({ className, component = CarouselIndicator, ...rest }, ref) => {
+  ({ className, component, ...rest }, ref) => {
     const { selectedIndex, orientation, styles } = useCarouselContext();
     const { indexes, getIndicatorProps } = useCarouselIndicators();
-    const cloneChildren = indexes.map((index) => {
-      const isSelected = index === selectedIndex;
-      const child = component({ index, isSelected });
-      if (!child)
-        return null;
-      const props = getIndicatorProps({ ...child.props, index });
-      return (0, import_react2.cloneElement)(child, props);
-    });
     const css = {
       position: "absolute",
       zIndex: "kurillin",
@@ -97,7 +89,19 @@ var CarouselIndicators = (0, import_core2.forwardRef)(
       ...styles.indicators,
       ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { ref, className: (0, import_utils2.cx)("ui-carousel-indicators", className), __css: css, ...rest, children: cloneChildren });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { ref, className: (0, import_utils2.cx)("ui-carousel-indicators", className), __css: css, ...rest, children: indexes.map((index) => {
+      const isSelected = index === selectedIndex;
+      if (typeof component === "function") {
+        const child = component({ index, isSelected });
+        if (!child)
+          return null;
+        const props = getIndicatorProps({ ...child.props, index });
+        return (0, import_react2.cloneElement)(child, props);
+      } else {
+        const { key, ...props } = getIndicatorProps({ index });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselIndicator, { ...props }, key);
+      }
+    }) });
   }
 );
 var CarouselIndicator = ({ className, ...rest }) => {

package/dist/carousel-indicators.mjs

@@ -1,6 +1,6 @@
 import {
   CarouselIndicators
-} from "./chunk-UMRTZXZW.mjs";
+} from "./chunk-YF54MDFK.mjs";
 import "./chunk-4P3A5PTO.mjs";
 export {
   CarouselIndicators

package/dist/carousel-slide.d.ts

@@ -1,9 +1,9 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps, UIProps } from '@yamada-ui/core';
 import { UseCarouselSlideProps } from './use-carousel.js';
-import '@yamada-ui/utils';
 import 'react';
 import '@yamada-ui/button';
+import '@yamada-ui/utils';
 import 'embla-carousel-react';
 
 type CarouselSlideOptions = {

package/dist/carousel.d.ts

@@ -3,9 +3,9 @@ import { ThemeProps, HTMLUIProps, Token, UIProps } from '@yamada-ui/core';
 import { UseCarouselProps, Orientation, Align, ContainScroll } from './use-carousel.js';
 import { CarouselControlProps } from './carousel-control.js';
 import { CarouselIndicatorsProps } from './carousel-indicators.js';
-import '@yamada-ui/utils';
 import 'react';
 import '@yamada-ui/button';
+import '@yamada-ui/utils';
 import 'embla-carousel-react';
 
 type CarouselOptions = {

package/dist/carousel.js

@@ -374,17 +374,9 @@ var import_utils4 = require("@yamada-ui/utils");
 var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var CarouselIndicators = (0, import_core4.forwardRef)(
-  ({ className, component = CarouselIndicator, ...rest }, ref) => {
+  ({ className, component, ...rest }, ref) => {
     const { selectedIndex, orientation, styles } = useCarouselContext();
     const { indexes, getIndicatorProps } = useCarouselIndicators();
-    const cloneChildren = indexes.map((index) => {
-      const isSelected = index === selectedIndex;
-      const child = component({ index, isSelected });
-      if (!child)
-        return null;
-      const props = getIndicatorProps({ ...child.props, index });
-      return (0, import_react2.cloneElement)(child, props);
-    });
     const css = {
       position: "absolute",
       zIndex: "kurillin",
@@ -393,7 +385,19 @@ var CarouselIndicators = (0, import_core4.forwardRef)(
       ...styles.indicators,
       ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core4.ui.div, { ref, className: (0, import_utils4.cx)("ui-carousel-indicators", className), __css: css, ...rest, children: cloneChildren });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core4.ui.div, { ref, className: (0, import_utils4.cx)("ui-carousel-indicators", className), __css: css, ...rest, children: indexes.map((index) => {
+      const isSelected = index === selectedIndex;
+      if (typeof component === "function") {
+        const child = component({ index, isSelected });
+        if (!child)
+          return null;
+        const props = getIndicatorProps({ ...child.props, index });
+        return (0, import_react2.cloneElement)(child, props);
+      } else {
+        const { key, ...props } = getIndicatorProps({ index });
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CarouselIndicator, { ...props }, key);
+      }
+    }) });
   }
 );
 var CarouselIndicator = ({ className, ...rest }) => {

package/dist/carousel.mjs

@@ -1,8 +1,8 @@
 import {
   Carousel
-} from "./chunk-PQ3S6YEB.mjs";
+} from "./chunk-ASYTKKOY.mjs";
 import "./chunk-FDF2QUCY.mjs";
-import "./chunk-UMRTZXZW.mjs";
+import "./chunk-YF54MDFK.mjs";
 import "./chunk-BWFAE3UJ.mjs";
 import "./chunk-4P3A5PTO.mjs";
 export {

package/dist/{chunk-PQ3S6YEB.mjs → chunk-ASYTKKOY.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-FDF2QUCY.mjs";
 import {
   CarouselIndicators
-} from "./chunk-UMRTZXZW.mjs";
+} from "./chunk-YF54MDFK.mjs";
 import {
   CarouselSlide
 } from "./chunk-BWFAE3UJ.mjs";

package/dist/{chunk-UMRTZXZW.mjs → chunk-YF54MDFK.mjs}

@@ -9,17 +9,9 @@ import { cx } from "@yamada-ui/utils";
 import { cloneElement } from "react";
 import { jsx } from "react/jsx-runtime";
 var CarouselIndicators = forwardRef(
-  ({ className, component = CarouselIndicator, ...rest }, ref) => {
+  ({ className, component, ...rest }, ref) => {
     const { selectedIndex, orientation, styles } = useCarouselContext();
     const { indexes, getIndicatorProps } = useCarouselIndicators();
-    const cloneChildren = indexes.map((index) => {
-      const isSelected = index === selectedIndex;
-      const child = component({ index, isSelected });
-      if (!child)
-        return null;
-      const props = getIndicatorProps({ ...child.props, index });
-      return cloneElement(child, props);
-    });
     const css = {
       position: "absolute",
       zIndex: "kurillin",
@@ -28,7 +20,19 @@ var CarouselIndicators = forwardRef(
       ...styles.indicators,
       ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
     };
-    return /* @__PURE__ */ jsx(ui.div, { ref, className: cx("ui-carousel-indicators", className), __css: css, ...rest, children: cloneChildren });
+    return /* @__PURE__ */ jsx(ui.div, { ref, className: cx("ui-carousel-indicators", className), __css: css, ...rest, children: indexes.map((index) => {
+      const isSelected = index === selectedIndex;
+      if (typeof component === "function") {
+        const child = component({ index, isSelected });
+        if (!child)
+          return null;
+        const props = getIndicatorProps({ ...child.props, index });
+        return cloneElement(child, props);
+      } else {
+        const { key, ...props } = getIndicatorProps({ index });
+        return /* @__PURE__ */ jsx(CarouselIndicator, { ...props }, key);
+      }
+    }) });
   }
 );
 var CarouselIndicator = ({ className, ...rest }) => {

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { CarouselControlNext, CarouselControlPrev, CarouselControlProps } from '
 export { CarouselIndicators, CarouselIndicatorsProps } from './carousel-indicators.js';
 import '@yamada-ui/core';
 import './use-carousel.js';
-import '@yamada-ui/utils';
 import 'react';
 import '@yamada-ui/button';
+import '@yamada-ui/utils';
 import 'embla-carousel-react';

package/dist/index.js

@@ -483,17 +483,9 @@ var import_utils5 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CarouselIndicators = (0, import_core5.forwardRef)(
-  ({ className, component = CarouselIndicator, ...rest }, ref) => {
+  ({ className, component, ...rest }, ref) => {
     const { selectedIndex, orientation, styles } = useCarouselContext();
     const { indexes, getIndicatorProps } = useCarouselIndicators();
-    const cloneChildren = indexes.map((index) => {
-      const isSelected = index === selectedIndex;
-      const child = component({ index, isSelected });
-      if (!child)
-        return null;
-      const props = getIndicatorProps({ ...child.props, index });
-      return (0, import_react3.cloneElement)(child, props);
-    });
     const css = {
       position: "absolute",
       zIndex: "kurillin",
@@ -502,7 +494,19 @@ var CarouselIndicators = (0, import_core5.forwardRef)(
       ...styles.indicators,
       ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { ref, className: (0, import_utils5.cx)("ui-carousel-indicators", className), __css: css, ...rest, children: cloneChildren });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { ref, className: (0, import_utils5.cx)("ui-carousel-indicators", className), __css: css, ...rest, children: indexes.map((index) => {
+      const isSelected = index === selectedIndex;
+      if (typeof component === "function") {
+        const child = component({ index, isSelected });
+        if (!child)
+          return null;
+        const props = getIndicatorProps({ ...child.props, index });
+        return (0, import_react3.cloneElement)(child, props);
+      } else {
+        const { key, ...props } = getIndicatorProps({ index });
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselIndicator, { ...props }, key);
+      }
+    }) });
   }
 );
 var CarouselIndicator = ({ className, ...rest }) => {

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   Carousel
-} from "./chunk-PQ3S6YEB.mjs";
+} from "./chunk-ASYTKKOY.mjs";
 import {
   CarouselControlNext,
   CarouselControlPrev
 } from "./chunk-FDF2QUCY.mjs";
 import {
   CarouselIndicators
-} from "./chunk-UMRTZXZW.mjs";
+} from "./chunk-YF54MDFK.mjs";
 import {
   CarouselSlide
 } from "./chunk-BWFAE3UJ.mjs";

package/dist/use-carousel.d.ts

@@ -1,8 +1,7 @@
-import * as _yamada_ui_utils from '@yamada-ui/utils';
-import { PropGetter, RequiredPropGetter } from '@yamada-ui/utils';
 import * as react from 'react';
 import { IconButtonProps } from '@yamada-ui/button';
 import { HTMLUIProps, CSSUIObject } from '@yamada-ui/core';
+import { PropGetter, RequiredPropGetter } from '@yamada-ui/utils';
 import { EmblaCarouselType } from 'embla-carousel-react';
 
 type Orientation = 'vertical' | 'horizontal';
@@ -53,29 +52,29 @@ declare const useCarousel: ({ index, defaultIndex, onChange, align, orientation,
     gap: string | number;
     slidesToScroll: number;
     includeGapInSize: boolean;
-    getContainerProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
-    getSlidesProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getContainerProps: PropGetter;
+    getSlidesProps: PropGetter;
 };
 type UseCarouselReturn = ReturnType<typeof useCarousel>;
 type UseCarouselSlideProps = {
     index?: number;
 };
 declare const useCarouselSlide: ({ index }: UseCarouselSlideProps) => {
-    getSlideProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getSlideProps: PropGetter;
 };
 type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>;
 type UseCarouselControlProps = IconButtonProps & {
     operation: 'prev' | 'next';
 };
 declare const useCarouselControl: ({ operation, ...rest }: UseCarouselControlProps) => {
-    getControlProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getControlProps: PropGetter;
 };
 type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>;
 declare const useCarouselIndicators: () => {
     indexes: number[];
     getIndicatorProps: RequiredPropGetter<{
         index: number;
-    }, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    }>;
 };
 type UseCarouselIndicatorsReturn = ReturnType<typeof useCarouselIndicators>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/carousel",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Yamada UI carousel component",
   "keywords": [
     "yamada",
@@ -36,12 +36,12 @@
   },
   "dependencies": {
     "embla-carousel-react": "^7.0.0",
-    "@yamada-ui/button": "0.1.5",
-    "@yamada-ui/core": "0.1.5",
-    "@yamada-ui/icon": "0.1.5",
+    "@yamada-ui/button": "0.1.6",
+    "@yamada-ui/core": "0.1.6",
+    "@yamada-ui/icon": "0.1.6",
     "@yamada-ui/use-controllable-state": "0.1.1",
-    "@yamada-ui/use-token": "0.1.5",
-    "@yamada-ui/use-value": "0.1.5",
+    "@yamada-ui/use-token": "0.1.6",
+    "@yamada-ui/use-value": "0.1.6",
     "@yamada-ui/utils": "0.1.1"
   },
   "devDependencies": {