react-carousel-latest/dist/CubeSlider-CjfZhUTb.d.cts

A headless, accessible, tree-shakeable React carousel with a compound-component API (and a backwards-compatible CardSlider preset).

import * as react from 'react';
import { ReactNode } from 'react';

type ShapeOption = "blob" | "heart" | "star" | "bear" | "music" | "trophy" | "ring";
type BlobProps = {
    /** Seed used to pick blob shapes/positions deterministically per card. */
    seed: number;
    shape?: ShapeOption;
};
/** Decorative background SVG shapes for the {@link Card} preset. */
declare function Blobs({ seed, shape }: BlobProps): react.JSX.Element;

/** Visual design presets for {@link Card}. */
type CardVariant = "gradient" | "glass" | "solid" | "outline" | "dark" | "minimal";
interface CardProps {
    title: string;
    category: string;
    description: string;
    /** Palette start colour (exposed to CSS as `--rc-from`). */
    from: string;
    /** Palette end colour (exposed to CSS as `--rc-to`). */
    to: string;
    shape: ShapeOption;
    /** Visual design. Default `"gradient"`. */
    variant?: CardVariant;
}
/**
 * The opinionated card. Its palette is published as CSS custom properties
 * (`--rc-from` / `--rc-to`) so each `variant` class can build backgrounds,
 * borders, and accents from the same two colours. Styling lives in
 * `presets.css` — no Tailwind required.
 */
declare function Card({ title, category, description, from, to, shape, variant, }: CardProps): react.JSX.Element;

interface CardSliderSlide {
    title: string;
    category: string;
    description: string;
    /** When provided, the card becomes a link opened on click. */
    link?: string;
}
interface CardSliderProps {
    slides: CardSliderSlide[];
    shape: ShapeOption;
    /** Randomise palette assignment across cards. Default `false`. */
    randomBackground?: boolean;
    /** Card design preset. Default `"gradient"`. */
    variant?: CardVariant;
}
/**
 * Card preset — a horizontal, native-scroll row of decorated cards. Also the
 * default export of the package. Styling is framework-free (no Tailwind), and
 * the `variant` prop selects a card design.
 */
declare function CardSlider({ slides, shape, randomBackground, variant, }: CardSliderProps): react.JSX.Element;

interface ImageSlide {
    /** Image URL (used as a full-bleed background). */
    src: string;
    /** Accessible description of the image. */
    alt?: string;
    /** Optional overlay caption, centered on the slide. */
    caption?: ReactNode;
    /** When set, the slide links out. */
    href?: string;
}
interface ImageSliderProps {
    slides: ImageSlide[];
    loop?: boolean;
    autoplay?: boolean;
    autoplayInterval?: number;
    /** Slide height (px number or any CSS length). Default `460`. */
    height?: number | string;
    showArrows?: boolean;
    showDots?: boolean;
    className?: string;
    label?: string;
}
/**
 * Image preset — a full-bleed image carousel with an optional centered caption,
 * thin overlaid arrows, and overlaid pagination dots. Built on the headless
 * `Carousel`, so keyboard / swipe / autoplay come for free.
 *
 * Needs both stylesheets: `react-carousel-latest/styles.css` and
 * `react-carousel-latest/presets.css`.
 */
declare function ImageSlider({ slides, loop, autoplay, autoplayInterval, height, showArrows, showDots, className, label, }: ImageSliderProps): react.JSX.Element;

interface SlicerSlide {
    src: string;
    alt?: string;
    caption?: ReactNode;
}
interface SlicerSliderProps {
    slides: SlicerSlide[];
    loop?: boolean;
    autoplay?: boolean;
    autoplayInterval?: number;
    /** Slide height in px (the slice maths needs a fixed height). Default `460`. */
    height?: number;
    /** Number of horizontal strips the image is sliced into. Default `6`. */
    slices?: number;
    showArrows?: boolean;
    showDots?: boolean;
    className?: string;
    label?: string;
}
/**
 * Slicer preset — transitions between slides with a staggered horizontal-slice
 * wipe. Uses the headless `useCarousel` hook directly (the transition isn't a
 * sliding track) and re-exposes it through context so the standard
 * `Carousel.Button` / `Carousel.Dots` work unchanged.
 *
 * Needs both stylesheets: `react-carousel-latest/styles.css` and
 * `react-carousel-latest/presets.css`.
 */
declare function SlicerSlider({ slides, loop, autoplay, autoplayInterval, height, slices, showArrows, showDots, className, label, }: SlicerSliderProps): react.JSX.Element;

interface CubeSlide {
    src: string;
    alt?: string;
    caption?: ReactNode;
}
interface CubeSliderProps {
    slides: CubeSlide[];
    loop?: boolean;
    autoplay?: boolean;
    autoplayInterval?: number;
    /** Slide height in px. Default `460`. */
    height?: number;
    /** Spin on the vertical axis (rotateX) instead of horizontal (rotateY). */
    vertical?: boolean;
    /** Darken the side faces + cast a soft ground shadow. Default `true`. */
    shadow?: boolean;
    showArrows?: boolean;
    showDots?: boolean;
    className?: string;
    label?: string;
}
/**
 * Cube preset — slides are the faces of a 3D cube; navigating rotates the cube
 * 90° to the next face. Like {@link SlicerSlider} it drives the headless
 * `useCarousel` directly and re-exposes it through context so the standard
 * `Carousel.Button` / `Carousel.Dots` work unchanged.
 *
 * Each face is transformed by its offset from the active slide
 * (`rotate(offset·90°) translateZ(depth)`); all faces share one transition, so
 * they orbit together as a rigid cube. `depth` is half the rotation-axis size,
 * measured from the viewport so the cube stays responsive.
 *
 * Needs both stylesheets: `react-carousel-latest/styles.css` and
 * `react-carousel-latest/presets.css`.
 */
declare function CubeSlider({ slides, loop, autoplay, autoplayInterval, height, vertical, shadow, showArrows, showDots, className, label, }: CubeSliderProps): react.JSX.Element;

export { Blobs as B, CardSlider as C, type ImageSlide as I, type ShapeOption as S, type CardSliderProps as a, type CardSliderSlide as b, type CardVariant as c, type CubeSlide as d, CubeSlider as e, type CubeSliderProps as f, ImageSlider as g, type ImageSliderProps as h, type SlicerSlide as i, SlicerSlider as j, type SlicerSliderProps as k, Card as l, type CardProps as m };