@yamada-ui/carousel 0.1.11 → 0.2.0

package/dist/carousel-control.js

@@ -140,7 +140,7 @@ var CarouselControl = (0, import_core2.forwardRef)(
         ref,
         className: (0, import_utils2.cx)("ui-carousel-control", className),
         colorScheme,
-        isRound: true,
+        isRounded: true,
         __css: css,
         ...rest
       }

package/dist/carousel-control.mjs

@@ -1,7 +1,7 @@
 import {
   CarouselControlNext,
   CarouselControlPrev
-} from "./chunk-FDF2QUCY.mjs";
+} from "./chunk-W7IEYNRW.mjs";
 import "./chunk-4P3A5PTO.mjs";
 export {
   CarouselControlNext,

package/dist/carousel-indicators.d.ts

@@ -3,6 +3,9 @@ import { HTMLUIProps } from '@yamada-ui/core';
 import { FC } from 'react';
 
 type CarouselIndicatorsOptions = {
+    /**
+     * The custom curousel indicator to use.
+     */
     component?: FC<{
         index: number;
         isSelected: boolean;

package/dist/carousel-slide.d.ts

@@ -7,6 +7,9 @@ import '@yamada-ui/utils';
 import 'embla-carousel-react';
 
 type CarouselSlideOptions = {
+    /**
+     * The CSS `width` property.
+     */
     size?: UIProps['width'];
 };
 type CarouselSlideProps = HTMLUIProps<'div'> & UseCarouselSlideProps & CarouselSlideOptions;

package/dist/carousel.d.ts

@@ -1,6 +1,6 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { ThemeProps, HTMLUIProps, Token, UIProps } from '@yamada-ui/core';
-import { UseCarouselProps, Orientation, Align, ContainScroll } from './use-carousel.js';
+import { UseCarouselProps } from './use-carousel.js';
 import { CarouselControlProps } from './carousel-control.js';
 import { CarouselIndicatorsProps } from './carousel-indicators.js';
 import 'react';
@@ -9,27 +9,129 @@ import '@yamada-ui/utils';
 import 'embla-carousel-react';
 
 type CarouselOptions = {
-    orientation?: Token<Orientation>;
-    align?: Token<Align>;
-    containScroll?: Token<ContainScroll>;
+    /**
+     * The orientation of the carousel.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: Token<'vertical' | 'horizontal'>;
+    /**
+     * The alignment of the carousel.
+     *
+     * @default 'center'
+     */
+    align?: Token<'start' | 'center' | 'end' | number>;
+    /**
+     * Clear leading and trailing empty space that causes excessive scrolling.
+     * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
+     *
+     * @default ''
+     */
+    containScroll?: Token<'trimSnaps' | 'keepSnaps' | ''>;
+    /**
+     * The number of slides that should be scrolled with next or previous buttons.
+     *
+     * @default 1
+     */
     slidesToScroll?: Token<number>;
+    /**
+     * If `true`, momentum scrolling will be enabled.
+     *
+     * @default false
+     */
     dragFree?: Token<boolean>;
+    /**
+     * If `true`, carousel can be scrolled with mouse and touch interactions.
+     *
+     * @default true
+     */
     draggable?: Token<boolean>;
+    /**
+     * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
+     *
+     * @default 0
+     */
     inViewThreshold?: Token<number>;
+    /**
+     * If `true`, infinite looping.
+     * Automatically falls back to false if slide content isn't enough to loop.
+     *
+     * @default true
+     */
     loop?: Token<boolean>;
+    /**
+     * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.
+     * Note that this option will be ignored if the dragFree option is set to true.
+     *
+     * @default false
+     */
     skipSnaps?: Token<boolean>;
+    /**
+     * Adjusts scroll speed when triggered by any of the methods.
+     * Higher numbers enables faster scrolling.
+     *
+     * @default 10
+     */
     speed?: Token<number>;
+    /**
+     * The number for the autoplay interval of the carousel.
+     *
+     * @default 4000
+     */
     delay?: Token<number>;
+    /**
+     * If `true`, the carousel will be autoplay.
+     *
+     * @default false
+     */
     autoplay?: Token<boolean>;
+    /**
+     * If `true`, autoplay will pause when the mouse entries over.
+     *
+     * @default true
+     */
     stopMouseEnterAutoplay?: Token<boolean>;
+    /**
+     * If `true`, gap will be treated as part of the carousel slide size.
+     *
+     * @default true
+     */
     includeGapInSize?: Token<boolean>;
+    /**
+     * The CSS `width` property.
+     */
     slideSize?: UIProps['width'];
-    inner?: HTMLUIProps<'div'>;
+    /**
+     * Props for carousel inner element.
+     */
+    innerProps?: HTMLUIProps<'div'>;
+    /**
+     * If `true`, display the carousel control buttons.
+     *
+     * @default true
+     */
     withControls?: Token<boolean>;
+    /**
+     * Props for carousel control element.
+     */
     controlProps?: CarouselControlProps;
+    /**
+     * Props for previous of the carousel control element.
+     */
     controlPrevProps?: CarouselControlProps;
+    /**
+     * Props for next of the carousel control element.
+     */
     controlNextProps?: CarouselControlProps;
+    /**
+     * If `true`, display the carousel indicator buttons.
+     *
+     * @default true
+     */
     withIndicators?: Token<boolean>;
+    /**
+     * Props for carousel indicators element.
+     */
     indicatorsProps?: CarouselIndicatorsProps;
 };
 type CarouselProps = ThemeProps<'Carousel'> & Omit<HTMLUIProps<'div'>, 'onChange' | 'draggable'> & Pick<UseCarouselProps, 'index' | 'defaultIndex' | 'onChange' | 'onScrollProgress'> & CarouselOptions;

package/dist/carousel.js

@@ -360,7 +360,7 @@ var CarouselControl = (0, import_core3.forwardRef)(
         ref,
         className: (0, import_utils3.cx)("ui-carousel-control", className),
         colorScheme,
-        isRound: true,
+        isRounded: true,
         __css: css,
         ...rest
       }
@@ -457,7 +457,7 @@ var Carousel = (0, import_core5.forwardRef)(
     });
     const {
       className,
-      inner,
+      innerProps,
       withControls = true,
       controlProps,
       controlPrevProps,
@@ -495,7 +495,7 @@ var Carousel = (0, import_core5.forwardRef)(
         children: [
           customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
           customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselSlides, { ...getSlidesProps({ ...(0, import_utils5.filterUndefined)({ h, minH }), ...inner }), children: cloneSlideChildren }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselSlides, { ...getSlidesProps({ ...(0, import_utils5.filterUndefined)({ h, minH }), ...innerProps }), children: cloneSlideChildren }),
           customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselIndicators, { ...indicatorsProps }) : null,
           otherChildren
         ]

package/dist/carousel.mjs

@@ -1,7 +1,7 @@
 import {
   Carousel
-} from "./chunk-ASYTKKOY.mjs";
-import "./chunk-FDF2QUCY.mjs";
+} from "./chunk-WQL2NFWH.mjs";
+import "./chunk-W7IEYNRW.mjs";
 import "./chunk-YF54MDFK.mjs";
 import "./chunk-BWFAE3UJ.mjs";
 import "./chunk-4P3A5PTO.mjs";

package/dist/{chunk-FDF2QUCY.mjs → chunk-W7IEYNRW.mjs}

@@ -71,7 +71,7 @@ var CarouselControl = forwardRef(
         ref,
         className: cx("ui-carousel-control", className),
         colorScheme,
-        isRound: true,
+        isRounded: true,
         __css: css,
         ...rest
       }

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

@@ -1,7 +1,7 @@
 import {
   CarouselControlNext,
   CarouselControlPrev
-} from "./chunk-FDF2QUCY.mjs";
+} from "./chunk-W7IEYNRW.mjs";
 import {
   CarouselIndicators
 } from "./chunk-YF54MDFK.mjs";
@@ -73,7 +73,7 @@ var Carousel = forwardRef(
     });
     const {
       className,
-      inner,
+      innerProps,
       withControls = true,
       controlProps,
       controlPrevProps,
@@ -111,7 +111,7 @@ var Carousel = forwardRef(
         children: [
           customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ jsx(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
           customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ jsx(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
-          /* @__PURE__ */ jsx(CarouselSlides, { ...getSlidesProps({ ...filterUndefined({ h, minH }), ...inner }), children: cloneSlideChildren }),
+          /* @__PURE__ */ jsx(CarouselSlides, { ...getSlidesProps({ ...filterUndefined({ h, minH }), ...innerProps }), children: cloneSlideChildren }),
           customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ jsx(CarouselIndicators, { ...indicatorsProps }) : null,
           otherChildren
         ]

package/dist/index.js

@@ -319,7 +319,7 @@ var Carousel = (0, import_core2.forwardRef)(
     });
     const {
       className,
-      inner,
+      innerProps,
       withControls = true,
       controlProps,
       controlPrevProps,
@@ -357,7 +357,7 @@ var Carousel = (0, import_core2.forwardRef)(
         children: [
           customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
           customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlides, { ...getSlidesProps({ ...(0, import_utils2.filterUndefined)({ h, minH }), ...inner }), children: cloneSlideChildren }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlides, { ...getSlidesProps({ ...(0, import_utils2.filterUndefined)({ h, minH }), ...innerProps }), children: cloneSlideChildren }),
           customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselIndicators, { ...indicatorsProps }) : null,
           otherChildren
         ]
@@ -469,7 +469,7 @@ var CarouselControl = (0, import_core4.forwardRef)(
         ref,
         className: (0, import_utils4.cx)("ui-carousel-control", className),
         colorScheme,
-        isRound: true,
+        isRounded: true,
         __css: css,
         ...rest
       }

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import {
   Carousel
-} from "./chunk-ASYTKKOY.mjs";
+} from "./chunk-WQL2NFWH.mjs";
 import {
   CarouselControlNext,
   CarouselControlPrev
-} from "./chunk-FDF2QUCY.mjs";
+} from "./chunk-W7IEYNRW.mjs";
 import {
   CarouselIndicators
 } from "./chunk-YF54MDFK.mjs";

package/dist/use-carousel.d.ts

@@ -1,45 +1,141 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, UIProps, CSSUIObject } from '@yamada-ui/core';
 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';
-type Align = 'start' | 'center' | 'end' | number;
-type ContainScroll = '' | 'trimSnaps' | 'keepSnaps';
 type CarouselContext = {
     carousel: EmblaCarouselType | undefined;
     indexes: number[];
     selectedIndex: number;
-    orientation: Orientation;
+    orientation: 'vertical' | 'horizontal';
     includeGapInSize: boolean;
     slidesToScroll: number;
     slideSize: string | number;
-    gap: string | number;
+    gap: UIProps['gap'];
     styles: Record<string, CSSUIObject>;
 };
 declare const CarouselProvider: react.Provider<CarouselContext>;
 declare const useCarouselContext: () => CarouselContext;
 type UseCarouselProps = Omit<HTMLUIProps<'div'>, 'onChange' | 'draggable' | 'gap'> & {
+    /**
+     * The index of the carousel slide.
+     */
     index?: number;
+    /**
+     * The initial index of the carousel slide.
+     *
+     * @default 0
+     */
     defaultIndex?: number;
+    /**
+     * The callback invoked when carousel slide selected.
+     */
     onChange?: (index: number) => void;
-    orientation?: Orientation;
-    align?: Align;
-    containScroll?: ContainScroll;
+    /**
+     * The orientation of the carousel.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * The alignment of the carousel.
+     *
+     * @default 'center'
+     */
+    align?: 'start' | 'center' | 'end' | number;
+    /**
+     * Clear leading and trailing empty space that causes excessive scrolling.
+     * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
+     *
+     * @default ''
+     */
+    containScroll?: 'trimSnaps' | 'keepSnaps' | '';
+    /**
+     * The number of slides that should be scrolled with next or previous buttons.
+     *
+     * @default 1
+     */
     slidesToScroll?: number;
+    /**
+     * If `true`, momentum scrolling will be enabled.
+     *
+     * @default false
+     */
     dragFree?: boolean;
+    /**
+     * If `true`, carousel can be scrolled with mouse and touch interactions.
+     *
+     * @default true
+     */
     draggable?: boolean;
+    /**
+     * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
+     *
+     * @default 0
+     */
     inViewThreshold?: number;
+    /**
+     * If `true`, infinite looping.
+     * Automatically falls back to false if slide content isn't enough to loop.
+     *
+     * @default true
+     */
     loop?: boolean;
+    /**
+     * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.
+     * Note that this option will be ignored if the dragFree option is set to true.
+     *
+     * @default false
+     */
     skipSnaps?: boolean;
+    /**
+     * Adjusts scroll speed when triggered by any of the methods.
+     * Higher numbers enables faster scrolling.
+     *
+     * @default 10
+     */
     speed?: number;
+    /**
+     * The number for the autoplay interval of the carousel.
+     *
+     * @default 4000
+     */
     delay?: number;
+    /**
+     * If `true`, the carousel will be autoplay.
+     *
+     * @default false
+     */
     autoplay?: boolean;
+    /**
+     * If `true`, autoplay will pause when the mouse entries over.
+     *
+     * @default true
+     */
     stopMouseEnterAutoplay?: boolean;
+    /**
+     * If `true`, gap will be treated as part of the carousel slide size.
+     *
+     * @default true
+     */
     includeGapInSize?: boolean;
-    gap?: string | number;
+    /**
+     * The CSS `gap` property.
+     *
+     * @default 'md'
+     */
+    gap?: UIProps['gap'];
+    /**
+     * The carousel slide width.
+     *
+     * @default '100%'
+     */
     slideSize?: string | number;
+    /**
+     * A callback that return the current scroll amount when the carousel is scrolled.
+     */
     onScrollProgress?: (progress: number) => void;
 };
 declare const useCarousel: ({ index, defaultIndex, onChange, align, orientation, autoplay, stopMouseEnterAutoplay, loop, speed, delay, gap, slidesToScroll, draggable, dragFree, inViewThreshold, skipSnaps, containScroll, slideSize, includeGapInSize, onScrollProgress, children, ...rest }: UseCarouselProps) => {
@@ -47,9 +143,9 @@ declare const useCarousel: ({ index, defaultIndex, onChange, align, orientation,
     children: react.ReactNode;
     indexes: number[];
     selectedIndex: number;
-    orientation: Orientation;
+    orientation: "vertical" | "horizontal";
     slideSize: string | number;
-    gap: string | number;
+    gap: number | "px" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "70" | "-70" | "72" | "-72" | "80" | "-80" | "84" | "-84" | "96" | "-96" | "xs" | "-xs" | "-sm" | "-md" | "normal" | "-normal" | "-lg" | "-xl" | "-2xl" | "3xl" | "-3xl" | "4xl" | "-4xl" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | _yamada_ui_core.ResponsiveObject<number | "px" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "70" | "-70" | "72" | "-72" | "80" | "-80" | "84" | "-84" | "96" | "-96" | "xs" | "-xs" | "-sm" | "-md" | "normal" | "-normal" | "-lg" | "-xl" | "-2xl" | "3xl" | "-3xl" | "4xl" | "-4xl" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5"> | _yamada_ui_core.ColorModeArray<number | "px" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "70" | "-70" | "72" | "-72" | "80" | "-80" | "84" | "-84" | "96" | "-96" | "xs" | "-xs" | "-sm" | "-md" | "normal" | "-normal" | "-lg" | "-xl" | "-2xl" | "3xl" | "-3xl" | "4xl" | "-4xl" | "-px" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5">;
     slidesToScroll: number;
     includeGapInSize: boolean;
     getContainerProps: PropGetter;
@@ -78,4 +174,4 @@ declare const useCarouselIndicators: () => {
 };
 type UseCarouselIndicatorsReturn = ReturnType<typeof useCarouselIndicators>;
 
-export { Align, CarouselProvider, ContainScroll, Orientation, UseCarouselControlProps, UseCarouselControlReturn, UseCarouselIndicatorsReturn, UseCarouselProps, UseCarouselReturn, UseCarouselSlideProps, UseCarouselSlideReturn, useCarousel, useCarouselContext, useCarouselControl, useCarouselIndicators, useCarouselSlide };
+export { CarouselProvider, UseCarouselControlProps, UseCarouselControlReturn, UseCarouselIndicatorsReturn, UseCarouselProps, UseCarouselReturn, UseCarouselSlideProps, UseCarouselSlideReturn, useCarousel, useCarouselContext, useCarouselControl, useCarouselIndicators, useCarouselSlide };

package/package.json

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