@yamada-ui/carousel 0.2.4 → 0.2.5

package/dist/carousel-control.d.mts

@@ -0,0 +1,8 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { IconButtonProps } from '@yamada-ui/button';
+
+type CarouselControlProps = IconButtonProps;
+declare const CarouselControlPrev: _yamada_ui_core.Component<"button", IconButtonProps>;
+declare const CarouselControlNext: _yamada_ui_core.Component<"button", IconButtonProps>;
+
+export { CarouselControlNext, CarouselControlPrev, CarouselControlProps };

package/dist/carousel-indicators.d.mts

@@ -0,0 +1,17 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { FC } from 'react';
+
+type CarouselIndicatorsOptions = {
+    /**
+     * The custom curousel indicator to use.
+     */
+    component?: FC<{
+        index: number;
+        isSelected: boolean;
+    }>;
+};
+type CarouselIndicatorsProps = Omit<HTMLUIProps<'div'>, 'children'> & CarouselIndicatorsOptions;
+declare const CarouselIndicators: _yamada_ui_core.Component<"div", CarouselIndicatorsProps>;
+
+export { CarouselIndicators, CarouselIndicatorsProps };

package/dist/carousel-slide.d.mts

@@ -0,0 +1,18 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, UIProps } from '@yamada-ui/core';
+import { UseCarouselSlideProps } from './use-carousel.mjs';
+import 'react';
+import '@yamada-ui/button';
+import '@yamada-ui/utils';
+import 'embla-carousel-react';
+
+type CarouselSlideOptions = {
+    /**
+     * The CSS `width` property.
+     */
+    size?: UIProps['width'];
+};
+type CarouselSlideProps = HTMLUIProps<'div'> & UseCarouselSlideProps & CarouselSlideOptions;
+declare const CarouselSlide: _yamada_ui_core.Component<"div", CarouselSlideProps>;
+
+export { CarouselSlide, CarouselSlideProps };

package/dist/carousel.d.mts

@@ -0,0 +1,140 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, HTMLUIProps, Token, UIProps } from '@yamada-ui/core';
+import { UseCarouselProps } from './use-carousel.mjs';
+import { CarouselControlProps } from './carousel-control.mjs';
+import { CarouselIndicatorsProps } from './carousel-indicators.mjs';
+import 'react';
+import '@yamada-ui/button';
+import '@yamada-ui/utils';
+import 'embla-carousel-react';
+
+type CarouselOptions = {
+    /**
+     * 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'];
+    /**
+     * 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;
+declare const Carousel: _yamada_ui_core.Component<"div", CarouselProps>;
+
+export { Carousel, CarouselProps };

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+export { Carousel, CarouselProps } from './carousel.mjs';
+export { CarouselSlide, CarouselSlideProps } from './carousel-slide.mjs';
+export { CarouselControlNext, CarouselControlPrev, CarouselControlProps } from './carousel-control.mjs';
+export { CarouselIndicators, CarouselIndicatorsProps } from './carousel-indicators.mjs';
+import '@yamada-ui/core';
+import './use-carousel.mjs';
+import 'react';
+import '@yamada-ui/button';
+import '@yamada-ui/utils';
+import 'embla-carousel-react';

package/dist/use-carousel.d.mts

@@ -0,0 +1,177 @@
+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 { PropGetter, RequiredPropGetter } from '@yamada-ui/utils';
+import { EmblaCarouselType } from 'embla-carousel-react';
+
+type CarouselContext = {
+    carousel: EmblaCarouselType | undefined;
+    indexes: number[];
+    selectedIndex: number;
+    orientation: 'vertical' | 'horizontal';
+    includeGapInSize: boolean;
+    slidesToScroll: number;
+    slideSize: 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;
+    /**
+     * 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;
+    /**
+     * 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) => {
+    carousel: EmblaCarouselType | undefined;
+    children: react.ReactNode;
+    indexes: number[];
+    selectedIndex: number;
+    orientation: "vertical" | "horizontal";
+    slideSize: 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;
+    getSlidesProps: PropGetter;
+};
+type UseCarouselReturn = ReturnType<typeof useCarousel>;
+type UseCarouselSlideProps = {
+    index?: number;
+};
+declare const useCarouselSlide: ({ index }: UseCarouselSlideProps) => {
+    getSlideProps: PropGetter;
+};
+type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>;
+type UseCarouselControlProps = IconButtonProps & {
+    operation: 'prev' | 'next';
+};
+declare const useCarouselControl: ({ operation, ...rest }: UseCarouselControlProps) => {
+    getControlProps: PropGetter;
+};
+type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>;
+declare const useCarouselIndicators: () => {
+    indexes: number[];
+    getIndicatorProps: RequiredPropGetter<{
+        index: number;
+    }>;
+};
+type UseCarouselIndicatorsReturn = ReturnType<typeof useCarouselIndicators>;
+
+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.2.4",
+  "version": "0.2.5",
   "description": "Yamada UI carousel component",
   "keywords": [
     "yamada",
@@ -36,13 +36,13 @@
   },
   "dependencies": {
     "embla-carousel-react": "^7.0.0",
-    "@yamada-ui/button": "0.2.4",
-    "@yamada-ui/core": "0.4.3",
-    "@yamada-ui/icon": "0.2.4",
-    "@yamada-ui/use-controllable-state": "0.1.3",
-    "@yamada-ui/use-token": "0.1.16",
-    "@yamada-ui/use-value": "0.1.16",
-    "@yamada-ui/utils": "0.1.2"
+    "@yamada-ui/button": "0.2.5",
+    "@yamada-ui/core": "0.5.0",
+    "@yamada-ui/icon": "0.2.5",
+    "@yamada-ui/use-controllable-state": "0.1.4",
+    "@yamada-ui/use-token": "0.1.17",
+    "@yamada-ui/use-value": "0.1.17",
+    "@yamada-ui/utils": "0.1.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0",