dgz-ui/dist/types/ui/carousel/carousel.d.ts

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript

import { default as useEmblaCarousel, UseEmblaCarouselType } from 'embla-carousel-react';
import { ButtonProps } from '../button';
import * as React from 'react';
type CarouselApi = UseEmblaCarouselType[1];
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
type CarouselOptions = UseCarouselParameters[0];
type CarouselPlugin = UseCarouselParameters[1];
/**
 * @typedef {object} CarouselProps
 * @property {CarouselOptions} [opts] - Options for the Embla Carousel.
 * @property {CarouselPlugin} [plugins] - Plugins for the Embla Carousel.
 * @property {'horizontal' | 'vertical'} [orientation='horizontal'] - The orientation of the carousel.
 * @property {(api: CarouselApi) => void} [setApi] - Callback to get the Embla Carousel API.
 */
type CarouselProps = {
    opts?: CarouselOptions;
    plugins?: CarouselPlugin;
    orientation?: 'horizontal' | 'vertical';
    setApi?: (api: CarouselApi) => void;
};
/**
 * A flexible and extensible carousel component built with Embla Carousel.
 * @augments {React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>}
 * @param {object} props - The props for the Carousel component.
 * @param {'horizontal' | 'vertical'} [props.orientation='horizontal'] - The orientation of the carousel.
 * @param {CarouselOptions} [props.opts] - Options for the Embla Carousel.
 * @param {(api: CarouselApi) => void} [props.setApi] - Callback to get the Embla Carousel API.
 * @param {CarouselPlugin} [props.plugins] - Plugins for the Embla Carousel.
 * @param {string} [props.className] - Additional CSS classes.
 * @param {React.ReactNode} [props.children] - The child elements to be rendered within the carousel.
 * @returns {JSX.Element} The Carousel component.
 */
declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders the content of the carousel.
 * @augments {React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>}
 * @param {object} props - The props for the CarouselContent component.
 * @param {string} [props.className] - Additional CSS classes.
 * @param {React.ReactNode} [props.children] - The child elements (CarouselItems) to be rendered.
 * @returns {JSX.Element} The CarouselContent component.
 */
declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
/**
 * Represents an individual item or slide within the CarouselContent.
 * @augments {React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>}
 * @param {object} props - The props for the CarouselItem component.
 * @param {string} [props.className] - Additional CSS classes.
 * @param {React.ReactNode} [props.children] - The content of the carousel item.
 * @returns {JSX.Element} The CarouselItem component.
 */
declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
/**
 * Navigation button for the carousel to go to the previous slide.
 * @augments {React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>}
 * @param {object} props - The props for the CarouselPrevious component.
 * @param {string} [props.className] - Additional CSS classes.
 * @param {'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'} [props.variant='outline'] - The visual style of the button.
 * @param {'default' | 'sm' | 'lg' | 'icon'} [props.size='icon'] - The size of the button.
 * @returns {JSX.Element} The CarouselPrevious component.
 */
declare const CarouselPrevious: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Navigation button for the carousel to go to the next slide.
 * @augments {React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>}
 * @param {object} props - The props for the CarouselNext component.
 * @param {string} [props.className] - Additional CSS classes.
 * @param {'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'} [props.variant='outline'] - The visual style of the button.
 * @param {'default' | 'sm' | 'lg' | 'icon'} [props.size='icon'] - The size of the button.
 * @returns {JSX.Element} The CarouselNext component.
 */
declare const CarouselNext: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi, };
//# sourceMappingURL=carousel.d.ts.map