@arolariu/components/dist/components/ui/carousel.d.ts

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
import * as React from "react";
type CarouselApi = NonNullable<UseEmblaCarouselType[1]>;
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
type CarouselOptions = UseCarouselParameters[0];
type CarouselPlugin = UseCarouselParameters[1];
/**
 * Carousel configuration props.
 */
type CarouselProps = {
    /**
     * Embla carousel options forwarded to the underlying carousel instance.
     * @default undefined
     */
    opts?: CarouselOptions;
    /**
     * Embla plugins applied to the carousel instance.
     * @default undefined
     */
    plugins?: CarouselPlugin;
    /**
     * Axis orientation used for layout and keyboard navigation. This prop also
     * controls Embla's internal `axis` option (`"x"` for horizontal and `"y"`
     * for vertical).
     * @default "horizontal"
     */
    orientation?: "horizontal" | "vertical";
    /**
     * Callback invoked with the initialized Embla API instance.
     * @default undefined
     */
    setApi?: (api: CarouselApi) => void;
};
/**
 * Provides a compound carousel container powered by Embla.
 *
 * @remarks
 * - Renders a `<div>` element
 * - Built on `embla-carousel-react`
 * - Exposes context for content, items, and navigation controls
 *
 * @example
 * ```tsx
 * <Carousel>
 *   <CarouselContent>
 *     <CarouselItem>Slide 1</CarouselItem>
 *     <CarouselItem>Slide 2</CarouselItem>
 *   </CarouselContent>
 *   <CarouselPrevious />
 *   <CarouselNext />
 * </Carousel>
 * ```
 *
 * @param props.opts - Embla options forwarded to the carousel instance. Common
 * options include `loop` for infinite scrolling, `align` for slide alignment,
 * `slidesToScroll` to control navigation increments, `dragFree` for momentum
 * dragging, `duration` for transition timing, and `startIndex` for the initial
 * slide.
 * @param props.plugins - Embla plugins applied to the carousel instance.
 *
 * @example With autoplay
 * ```tsx
 * import Autoplay from "embla-carousel-autoplay";
 *
 * <Carousel plugins={[Autoplay({delay: 3000})]}>
 *   <CarouselContent>...</CarouselContent>
 * </Carousel>
 * ```
 *
 * @param props.setApi - Optional callback for advanced Embla API access after
 * initialization, useful for custom controls, analytics, or external state
 * synchronization.
 *
 * @see {@link https://www.embla-carousel.com/get-started/react/ | Embla React Docs}
 */
declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders the scrollable track that contains carousel slides.
 *
 * @remarks
 * - Renders nested `<div>` elements
 * - Built on Embla's viewport and track structure
 *
 * @example
 * ```tsx
 * <CarouselContent>
 *   <CarouselItem>Slide</CarouselItem>
 * </CarouselContent>
 * ```
 *
 * @see {@link https://www.embla-carousel.com/get-started/react/ | Embla React Docs}
 */
declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders an individual carousel slide.
 *
 * @remarks
 * - Renders a `<div>` element
 * - Built on the shared carousel context for orientation-aware styling
 *
 * @example
 * ```tsx
 * <CarouselItem>Slide content</CarouselItem>
 * ```
 *
 * @see {@link https://www.embla-carousel.com/get-started/react/ | Embla React Docs}
 */
declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders the previous-slide navigation button.
 *
 * @remarks
 * - Renders the shared `<Button>` component
 * - Built on carousel context state and Embla navigation APIs
 * - Pass `children` to override the default `ArrowLeft` navigation icon
 *
 * @example
 * ```tsx
 * <CarouselPrevious />
 * ```
 *
 * @see {@link https://www.embla-carousel.com/get-started/react/ | Embla React Docs}
 */
declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<Omit<import("./button").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
 * Renders the next-slide navigation button.
 *
 * @remarks
 * - Renders the shared `<Button>` component
 * - Built on carousel context state and Embla navigation APIs
 * - Pass `children` to override the default `ArrowRight` navigation icon
 *
 * @example
 * ```tsx
 * <CarouselNext />
 * ```
 *
 * @see {@link https://www.embla-carousel.com/get-started/react/ | Embla React Docs}
 */
declare const CarouselNext: React.ForwardRefExoticComponent<Omit<Omit<import("./button").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi };
export type { CarouselOptions, CarouselPlugin, CarouselProps };
//# sourceMappingURL=carousel.d.ts.map