@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/carousel.d.ts

@@ -0,0 +1,170 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { IconButton } from "./button.js";
+type EmblaApi = NonNullable<UseEmblaCarouselType[1]>;
+export type CarouselApi = EmblaApi;
+export type CarouselOptions = NonNullable<Parameters<typeof useEmblaCarousel>[0]>;
+export type CarouselPlugin = NonNullable<Parameters<typeof useEmblaCarousel>[1]>[number];
+declare const carouselLabels: {
+    carousel: string;
+    slide: string;
+    slideOf: string;
+    previous: string;
+    next: string;
+    goTo: string;
+    pause: string;
+    play: string;
+    counter: string;
+    dots: string;
+    thumbs: string;
+    empty: string;
+    loading: string;
+};
+export type CarouselLabels = typeof carouselLabels;
+export type CarouselPreset = "default" | "gallery" | "hero" | "strip";
+type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
+/**
+ * State and commands of the surrounding carousel, for custom controls.
+ *
+ * ```tsx
+ * const { index, count, scrollTo, playing } = useCarousel();
+ * ```
+ */
+export declare function useCarousel(): {
+    api: import("embla-carousel").EmblaCarouselType | undefined;
+    index: number;
+    count: number;
+    canPrev: boolean;
+    canNext: boolean;
+    playing: boolean;
+    scrollTo: (i: number) => void;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+};
+export declare const carouselVariants: (props?: ({
+    preset?: "gallery" | "default" | "hero" | "strip" | null | undefined;
+    controls?: "hidden" | "inside" | "outside" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CarouselAutoplayOptions {
+    /** ms per slide. Default 6000. */
+    delay?: number;
+    /** Stop for good after a manual swipe or arrow click. Default `false` (resume after). */
+    stopOnInteraction?: boolean;
+}
+export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLElement>, "dir"> {
+    /** Required accessible name: "Featured listings", "Customer stories". */
+    label: string;
+    preset?: CarouselPreset;
+    orientation?: "horizontal" | "vertical";
+    /** Slides visible at once, or per breakpoint (`{ base: 1, md: 2, lg: 3 }`), or `"auto"` (slide sets its width). */
+    slidesPerView?: number | "auto" | Partial<Record<Breakpoint, number>>;
+    /** Space between slides, from `--gap`. */
+    gap?: "none" | "sm" | "md" | "lg";
+    loop?: boolean;
+    align?: "start" | "center";
+    /** `fade` cross-fades (one slide per view). Reduced motion: instant. */
+    transition?: "slide" | "fade";
+    /** Advance on a timer. A pause button is always rendered; off under reduced motion. */
+    autoplay?: boolean | CarouselAutoplayOptions;
+    /** Arrow placement. Default: `inside` for hero / gallery, `outside` otherwise. */
+    controls?: "inside" | "outside" | "hidden";
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    /** First slide shows a skeleton. */
+    loading?: boolean;
+    /** Escape hatch: raw engine options / plugins. */
+    options?: CarouselOptions;
+    plugins?: CarouselPlugin[];
+    /** Receives the engine API once ready. */
+    setApi?: (api: CarouselApi | undefined) => void;
+    labels?: Partial<CarouselLabels>;
+}
+/**
+ * One scrolling core for panels and websites: card sliders, hero slider, gallery with thumbnails,
+ * KPI strip. WAI-ARIA carousel pattern, arrows / Home / End when focus is inside, a mandatory
+ * pause button with autoplay, `inert` off-screen slides, RTL-aware.
+ *
+ * ```tsx
+ * <Carousel label="Featured stays" slidesPerView={{ base: 1, md: 2, lg: 3 }}>
+ *   <CarouselViewport>
+ *     {stays.map((s) => <CarouselSlide key={s.id}>…</CarouselSlide>)}
+ *   </CarouselViewport>
+ *   <CarouselDots />
+ * </Carousel>
+ * ```
+ */
+export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLElement>>;
+export interface CarouselViewportProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Built-in previous / next arrows on the stage. Default `true` (hidden when `controls="hidden"` or one slide). */
+    arrows?: boolean;
+    /** Built-in pause button when autoplay is on. Turn off only if you render `CarouselPlayPause` yourself. */
+    playPause?: boolean;
+    /** Shown when there are no slides. */
+    empty?: React.ReactNode;
+    /** Class of the scrolling track (the flex row of slides). */
+    containerClassName?: string;
+}
+/**
+ * The clipping viewport and the slide track. Children are `CarouselSlide`s. Renders the arrows
+ * (and the pause button with autoplay) on the stage, so they line up with the slides.
+ */
+export declare const CarouselViewport: React.ForwardRefExoticComponent<CarouselViewportProps & React.RefAttributes<HTMLDivElement>>;
+export interface CarouselSlideProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/** One slide: `role="group"`, `aria-roledescription="slide"`, labelled "3 of 7"; `inert` while off-screen. */
+export declare const CarouselSlide: React.ForwardRefExoticComponent<CarouselSlideProps & React.RefAttributes<HTMLDivElement>>;
+type ArrowProps = Omit<React.ComponentPropsWithoutRef<typeof IconButton>, "label" | "children"> & {
+    label?: string;
+    children?: React.ReactNode;
+};
+/** Previous slide. Disabled at the start (unless `loop`). */
+export declare function CarouselPrev(props: ArrowProps): React.JSX.Element;
+/** Next slide. Disabled at the end (unless `loop`). */
+export declare function CarouselNext(props: ArrowProps): React.JSX.Element;
+export interface CarouselDotsProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/** One button per slide; the current one is `aria-current` and painted with `--accent`. */
+export declare const CarouselDots: React.ForwardRefExoticComponent<CarouselDotsProps & React.RefAttributes<HTMLDivElement>>;
+export interface CarouselThumbsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** One thumbnail per slide (URL or `{ src, alt }`). */
+    items: (string | {
+        src: string;
+        alt?: string;
+    })[];
+    /** Thumbnail box ratio. Default 4/3. */
+    aspect?: number;
+    /** Center the row while it fits (it still scrolls when it overflows). Default `"start"`. */
+    align?: "start" | "center";
+}
+/** A row of thumbnail buttons under a gallery carousel; the selected one gets a `--ring` border. */
+export declare const CarouselThumbs: React.ForwardRefExoticComponent<CarouselThumbsProps & React.RefAttributes<HTMLDivElement>>;
+export interface CarouselPlayPauseProps extends Omit<ArrowProps, "onClick"> {
+}
+/** Pause / resume autoplay. Rendered automatically on the stage while autoplay is on. */
+export declare function CarouselPlayPause({ className, size, ...props }: CarouselPlayPauseProps): React.JSX.Element | null;
+export interface CarouselCounterProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+/** "3 / 7" in the locale's digits. */
+export declare const CarouselCounter: React.ForwardRefExoticComponent<CarouselCounterProps & React.RefAttributes<HTMLSpanElement>>;
+export interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Accessible name of the list ("Customers"). */
+    label: string;
+    /** Seconds per loop. Default 40. */
+    duration?: number;
+    reverse?: boolean;
+    /** Pause while hovered or focused. Default `true`. */
+    pauseOnHover?: boolean;
+    /** Fade the edges. Default `true`. */
+    fade?: boolean;
+    gap?: "sm" | "md" | "lg";
+}
+/**
+ * Endless logo band in pure CSS: no JS, renders with SSR. The items are listed once for assistive
+ * tech; a duplicate track (aria-hidden) closes the loop. Reduced motion: static, scrollable row.
+ */
+export declare function Marquee({ label, duration, reverse, pauseOnHover, fade, gap, className, style, children, ...props }: MarqueeProps): React.JSX.Element;
+export {};

package/dist/components/carousel.js

@@ -0,0 +1,348 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import Autoplay from "embla-carousel-autoplay";
+import Fade from "embla-carousel-fade";
+import { cva } from "class-variance-authority";
+import { ChevronLeft, ChevronRight, ChevronUp, ChevronDown, Pause, Play } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { useReducedMotion } from "../lib/use-reduced-motion.js";
+import { useControllableState, useIsomorphicLayoutEffect } from "../lib/use-controllable-state.js";
+import { IconButton } from "./button.js";
+import { Skeleton } from "./skeleton.js";
+const carouselLabels = {
+    carousel: "carousel",
+    slide: "slide",
+    slideOf: "{index} of {total}",
+    previous: "Previous slide",
+    next: "Next slide",
+    goTo: "Go to slide {index}",
+    pause: "Pause autoplay",
+    play: "Start autoplay",
+    counter: "Slide {index} of {total}",
+    dots: "Choose slide",
+    thumbs: "Slide thumbnails",
+    empty: "Nothing to show yet",
+    loading: "Loading slides",
+};
+const CarouselContext = React.createContext(null);
+function useCarouselContext(part) {
+    const ctx = React.useContext(CarouselContext);
+    if (!ctx)
+        throw new Error(`${part} must be used inside <Carousel>.`);
+    return ctx;
+}
+/**
+ * State and commands of the surrounding carousel, for custom controls.
+ *
+ * ```tsx
+ * const { index, count, scrollTo, playing } = useCarousel();
+ * ```
+ */
+export function useCarousel() {
+    const c = useCarouselContext("useCarousel");
+    return {
+        api: c.api,
+        index: c.index,
+        count: c.count,
+        canPrev: c.canPrev,
+        canNext: c.canNext,
+        playing: c.playing,
+        scrollTo: c.scrollTo,
+        scrollPrev: c.scrollPrev,
+        scrollNext: c.scrollNext,
+        play: c.play,
+        pause: c.pause,
+        toggle: c.playing ? c.pause : c.play,
+    };
+}
+/* ------------------------------------------------------------------ */
+/* Root                                                                 */
+/* ------------------------------------------------------------------ */
+export const carouselVariants = cva("vui-carousel relative min-w-0", {
+    variants: {
+        preset: {
+            default: "",
+            /** Thumbnail strip below. */
+            gallery: "",
+            /** Full-bleed, glass arrows inside, dots over the bottom edge. */
+            hero: "vui-carousel-hero overflow-hidden",
+            /** Arrows outside, faded edges. */
+            strip: "vui-carousel-strip",
+        },
+        controls: {
+            inside: "",
+            outside: "vui-carousel-outside",
+            hidden: "",
+        },
+    },
+    defaultVariants: { preset: "default", controls: "outside" },
+});
+const GAP = {
+    none: "0px",
+    sm: "calc(var(--gap) * 0.5)",
+    md: "calc(var(--gap) * 0.8)",
+    lg: "var(--gap)",
+};
+/**
+ * One scrolling core for panels and websites: card sliders, hero slider, gallery with thumbnails,
+ * KPI strip. WAI-ARIA carousel pattern, arrows / Home / End when focus is inside, a mandatory
+ * pause button with autoplay, `inert` off-screen slides, RTL-aware.
+ *
+ * ```tsx
+ * <Carousel label="Featured stays" slidesPerView={{ base: 1, md: 2, lg: 3 }}>
+ *   <CarouselViewport>
+ *     {stays.map((s) => <CarouselSlide key={s.id}>…</CarouselSlide>)}
+ *   </CarouselViewport>
+ *   <CarouselDots />
+ * </Carousel>
+ * ```
+ */
+export const Carousel = React.forwardRef(function Carousel({ label, preset = "default", orientation = "horizontal", slidesPerView, gap = "md", loop = false, align = "start", transition = "slide", autoplay = false, controls: controlsProp, index: indexProp, defaultIndex = 0, onIndexChange, loading = false, options, plugins: extraPlugins, setApi, labels, className, style, onKeyDown, children, ...props }, ref) {
+    const t = useLabels("carousel", carouselLabels, labels);
+    const { dir, locale } = useLocale();
+    const reduced = useReducedMotion();
+    const controls = controlsProp ?? (preset === "hero" || preset === "gallery" ? "inside" : "outside");
+    const fade = transition === "fade" && !reduced;
+    const autoplayOn = Boolean(autoplay) && !reduced;
+    const autoplayOpts = typeof autoplay === "object" ? autoplay : {};
+    const delay = autoplayOpts.delay ?? 6000;
+    const stopOnInteraction = autoplayOpts.stopOnInteraction ?? false;
+    const [index, setIndex] = useControllableState({ value: indexProp, defaultValue: defaultIndex, onChange: onIndexChange, name: "Carousel" });
+    const [snapCount, setSnapCount] = React.useState(0);
+    const [slideCount, setSlideCount] = React.useState(0);
+    const [canPrev, setCanPrev] = React.useState(false);
+    const [canNext, setCanNext] = React.useState(false);
+    const [playing, setPlaying] = React.useState(autoplayOn);
+    const [inView, setInView] = React.useState(null);
+    const [dragging, setDragging] = React.useState(false);
+    const plugins = React.useMemo(() => {
+        const list = [];
+        if (fade)
+            list.push(Fade());
+        if (autoplayOn)
+            list.push(Autoplay({ delay, stopOnInteraction, stopOnMouseEnter: true, stopOnFocusIn: true, playOnInit: true }));
+        return [...list, ...(extraPlugins ?? [])];
+    }, [fade, autoplayOn, delay, stopOnInteraction, extraPlugins]);
+    const [viewportRef, api] = useEmblaCarousel({
+        loop,
+        align: fade ? "center" : align,
+        axis: orientation === "vertical" ? "y" : "x",
+        direction: orientation === "horizontal" ? dir : "ltr",
+        startIndex: indexProp ?? defaultIndex,
+        containScroll: loop ? false : "trimSnaps",
+        watchDrag: slideCount > 1,
+        duration: 28,
+        ...options,
+    }, plugins);
+    const count = api ? snapCount : slideCount;
+    React.useEffect(() => setApi?.(api), [api, setApi]);
+    const indexRef = React.useRef(index);
+    indexRef.current = index;
+    React.useEffect(() => {
+        if (!api)
+            return;
+        const sync = () => {
+            const i = api.selectedScrollSnap();
+            setCanPrev(api.canScrollPrev());
+            setCanNext(api.canScrollNext());
+            if (i !== indexRef.current)
+                setIndex(i);
+        };
+        const view = () => setInView(new Set(fade ? [api.selectedScrollSnap()] : api.slidesInView()));
+        const down = () => setDragging(true);
+        const up = () => setDragging(false);
+        const onPlay = () => setPlaying(true);
+        const onStop = () => setPlaying(false);
+        sync();
+        view();
+        setSnapCount(api.scrollSnapList().length);
+        const reinit = () => {
+            setSnapCount(api.scrollSnapList().length);
+            sync();
+            view();
+        };
+        api.on("select", sync).on("select", view).on("reInit", reinit).on("slidesInView", view).on("pointerDown", down).on("pointerUp", up).on("settle", up);
+        api.on("autoplay:play", onPlay).on("autoplay:stop", onStop);
+        setPlaying(Boolean(api.plugins().autoplay?.isPlaying()));
+        return () => {
+            api.off("select", sync).off("select", view).off("reInit", reinit).off("slidesInView", view).off("pointerDown", down).off("pointerUp", up).off("settle", up);
+            api.off("autoplay:play", onPlay).off("autoplay:stop", onStop);
+        };
+    }, [api, fade, setIndex]);
+    // Controlled index → engine.
+    React.useEffect(() => {
+        if (!api || indexProp === undefined)
+            return;
+        if (api.selectedScrollSnap() !== indexProp)
+            api.scrollTo(indexProp, reduced);
+    }, [api, indexProp, reduced]);
+    const scrollTo = React.useCallback((i) => {
+        if (api)
+            api.scrollTo(i, reduced);
+        else
+            setIndex(i);
+    }, [api, reduced, setIndex]);
+    const scrollPrev = React.useCallback(() => api?.scrollPrev(reduced), [api, reduced]);
+    const scrollNext = React.useCallback(() => api?.scrollNext(reduced), [api, reduced]);
+    const play = React.useCallback(() => api?.plugins().autoplay?.play(), [api]);
+    const pause = React.useCallback(() => api?.plugins().autoplay?.stop(), [api]);
+    const nf = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    const total = count;
+    const ctx = React.useMemo(() => ({
+        api,
+        viewportRef,
+        index,
+        count: total,
+        slideCount,
+        setSlideCount,
+        canPrev: api ? canPrev : index > 0,
+        canNext: api ? canNext : index < total - 1,
+        playing,
+        autoplay: autoplayOn,
+        inView,
+        preset,
+        controls,
+        orientation,
+        transition: fade ? "fade" : "slide",
+        loading,
+        t,
+        nf,
+        scrollTo,
+        scrollPrev,
+        scrollNext,
+        play,
+        pause,
+    }), [api, viewportRef, index, total, slideCount, canPrev, canNext, playing, autoplayOn, inView, preset, controls, orientation, fade, loading, t, nf, scrollTo, scrollPrev, scrollNext, play, pause]);
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey)
+            return;
+        const target = e.target;
+        if (target.closest("input, textarea, select, [contenteditable=true], [role=slider], [role=tablist]"))
+            return;
+        const vertical = orientation === "vertical";
+        const back = vertical ? "ArrowUp" : dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+        const fwd = vertical ? "ArrowDown" : dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+        if (e.key === back)
+            scrollPrev();
+        else if (e.key === fwd)
+            scrollNext();
+        else if (e.key === "Home")
+            scrollTo(0);
+        else if (e.key === "End")
+            scrollTo(Math.max(0, total - 1));
+        else
+            return;
+        e.preventDefault();
+    };
+    const spv = slidesPerView ?? 1;
+    const spvVars = {};
+    const spvAttrs = {};
+    if (spv === "auto")
+        spvAttrs["data-spv-auto"] = "";
+    else if (typeof spv === "number")
+        spvVars["--spv-base"] = String(fade ? 1 : spv);
+    else
+        for (const [bp, n] of Object.entries(spv)) {
+            spvVars[`--spv-${bp}`] = String(fade ? 1 : n);
+            if (bp !== "base")
+                spvAttrs[`data-spv-${bp}`] = "";
+        }
+    return (_jsx(CarouselContext.Provider, { value: ctx, children: _jsx("section", { ref: ref, role: "region", "aria-roledescription": t("carousel"), "aria-label": label, "data-slot": "carousel", "data-preset": preset, "data-controls": controls, "data-orientation": orientation, "data-transition": fade ? "fade" : "slide", "data-dragging": dragging ? "" : undefined, "data-single": total <= 1 ? "" : undefined, className: cn(carouselVariants({ preset, controls }), className), style: { "--carousel-gap": fade ? "0px" : GAP[gap], ...spvVars, ...style }, onKeyDown: handleKeyDown, ...spvAttrs, ...props, children: children }) }));
+});
+/* ------------------------------------------------------------------ */
+/* Viewport + slides                                                    */
+/* ------------------------------------------------------------------ */
+const SlideIndexContext = React.createContext({ index: -1, total: 0 });
+/**
+ * The clipping viewport and the slide track. Children are `CarouselSlide`s. Renders the arrows
+ * (and the pause button with autoplay) on the stage, so they line up with the slides.
+ */
+export const CarouselViewport = React.forwardRef(function CarouselViewport({ arrows = true, playPause = true, empty, containerClassName, className, children, ...props }, ref) {
+    const c = useCarouselContext("CarouselViewport");
+    const slides = React.Children.toArray(children).filter(React.isValidElement);
+    const n = slides.length;
+    const { setSlideCount } = c;
+    useIsomorphicLayoutEffect(() => setSlideCount(n), [n, setSlideCount]);
+    if (n === 0 && !c.loading) {
+        return (_jsx("div", { ref: ref, "data-slot": "carousel-empty", className: cn("flex min-h-40 items-center justify-center rounded-ui border border-dashed border-line text-sm text-fg-muted", className), ...props, children: empty ?? c.t("empty") }));
+    }
+    const vertical = c.orientation === "vertical";
+    const showArrows = arrows && c.controls !== "hidden" && c.slideCount > 1;
+    return (_jsxs("div", { "data-slot": "carousel-stage", className: "vui-carousel-stage relative", children: [c.autoplay && playPause ? _jsx(CarouselPlayPause, { className: "vui-carousel-playpause absolute end-3 top-3 z-20" }) : null, _jsx("div", { ref: ref, className: cn("vui-carousel-viewport overflow-hidden", className), "data-slot": "carousel-viewport", ...props, children: _jsx("div", { ref: c.viewportRef, className: "h-full", children: _jsx("div", { "data-slot": "carousel-container", "aria-live": c.playing ? "off" : "polite", "aria-busy": c.loading || undefined, className: cn("vui-carousel-container flex", vertical ? "h-full flex-col" : "touch-pan-y", containerClassName), children: c.loading && n === 0 ? (_jsx(CarouselSlide, { "aria-label": c.t("loading"), children: _jsx(Skeleton, { className: "ui-shimmer aspect-video w-full rounded-ui" }) })) : (slides.map((slide, i) => (_jsx(SlideIndexContext.Provider, { value: { index: i, total: n }, children: slide }, slide.key ?? i)))) }) }) }), showArrows ? (_jsxs(_Fragment, { children: [_jsx(CarouselPrev, { className: cn("vui-carousel-arrow absolute z-10", vertical ? "start-1/2 top-2 -translate-x-1/2 rtl:translate-x-1/2" : "start-3 top-1/2 -translate-y-1/2") }), _jsx(CarouselNext, { className: cn("vui-carousel-arrow absolute z-10", vertical ? "start-1/2 bottom-2 -translate-x-1/2 rtl:translate-x-1/2" : "end-3 top-1/2 -translate-y-1/2") })] })) : null] }));
+});
+/** One slide: `role="group"`, `aria-roledescription="slide"`, labelled "3 of 7"; `inert` while off-screen. */
+export const CarouselSlide = React.forwardRef(function CarouselSlide({ className, children, ...props }, ref) {
+    const c = useCarouselContext("CarouselSlide");
+    const { index: i, total } = React.useContext(SlideIndexContext);
+    const hidden = c.inView !== null && i >= 0 && !c.inView.has(i);
+    return (_jsx("div", { ref: ref, role: "group", "aria-roledescription": c.t("slide"), "aria-label": i >= 0 ? c.t("slideOf", { index: c.nf.format(i + 1), total: c.nf.format(Math.max(total, i + 1)) }) : undefined, "data-slot": "carousel-slide", "data-active": i === c.index ? "" : undefined, inert: hidden || undefined, className: cn("vui-carousel-slide min-w-0 shrink-0 grow-0", className), ...props, children: children }));
+});
+function ArrowButton({ direction, label, className, onClick, size, variant, ...props }) {
+    const c = useCarouselContext(direction === "prev" ? "CarouselPrev" : "CarouselNext");
+    const vertical = c.orientation === "vertical";
+    const Icon = direction === "prev" ? (vertical ? ChevronUp : ChevronLeft) : vertical ? ChevronDown : ChevronRight;
+    const disabled = direction === "prev" ? !c.canPrev : !c.canNext;
+    const overlay = c.controls === "inside" || c.preset === "hero";
+    return (_jsx(IconButton, { label: label ?? c.t(direction === "prev" ? "previous" : "next"), tooltip: false, size: size ?? (c.preset === "hero" ? "lg" : "md"), variant: variant ?? (overlay ? "ghost" : "secondary"), "data-slot": direction === "prev" ? "carousel-prev" : "carousel-next", disabled: disabled, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                (direction === "prev" ? c.scrollPrev : c.scrollNext)();
+        }, className: cn("rounded-full!", overlay && "surface-popover hover:bg-popover", !vertical && "rtl:[&_svg]:-scale-x-100", className), ...props, children: _jsx(Icon, { "aria-hidden": true }) }));
+}
+/** Previous slide. Disabled at the start (unless `loop`). */
+export function CarouselPrev(props) {
+    return _jsx(ArrowButton, { direction: "prev", ...props });
+}
+/** Next slide. Disabled at the end (unless `loop`). */
+export function CarouselNext(props) {
+    return _jsx(ArrowButton, { direction: "next", ...props });
+}
+/** One button per slide; the current one is `aria-current` and painted with `--accent`. */
+export const CarouselDots = React.forwardRef(function CarouselDots({ className, ...props }, ref) {
+    const c = useCarouselContext("CarouselDots");
+    if (c.count <= 1)
+        return null;
+    return (_jsx("div", { ref: ref, role: "group", "aria-label": c.t("dots"), "data-slot": "carousel-dots", className: cn("vui-carousel-dots flex items-center justify-center gap-1", c.preset === "hero" ? "absolute inset-x-0 bottom-4 z-10" : "mt-4", className), ...props, children: Array.from({ length: c.count }, (_, i) => (_jsx("button", { type: "button", "aria-label": c.t("goTo", { index: c.nf.format(i + 1) }), "aria-current": i === c.index ? "true" : undefined, "data-slot": "carousel-dot", onClick: () => c.scrollTo(i), className: "vui-carousel-dot focus-ring group/dot relative flex h-6 min-w-6 items-center justify-center rounded-full", children: _jsx("span", { "aria-hidden": true, className: "block h-1.5 rounded-full" }) }, i))) }));
+});
+/** A row of thumbnail buttons under a gallery carousel; the selected one gets a `--ring` border. */
+export const CarouselThumbs = React.forwardRef(function CarouselThumbs({ items, aspect = 4 / 3, align = "start", className, ...props }, ref) {
+    const c = useCarouselContext("CarouselThumbs");
+    const listRef = React.useRef(null);
+    React.useEffect(() => {
+        const el = listRef.current?.querySelector(`[data-index="${c.index}"]`);
+        el?.scrollIntoView?.({ block: "nearest", inline: "nearest", behavior: "smooth" });
+    }, [c.index]);
+    return (_jsx("div", { ref: ref, role: "group", "aria-label": c.t("thumbs"), "data-slot": "carousel-thumbs", className: cn("mt-3", className), ...props, children: _jsx("div", { ref: listRef, className: cn("vui-carousel-thumbs-track scrollbar-none flex gap-2 overflow-x-auto p-1", align === "center" && "[&>:first-child]:ms-auto [&>:last-child]:me-auto"), children: items.map((item, i) => {
+                const src = typeof item === "string" ? item : item.src;
+                const alt = typeof item === "string" ? "" : item.alt ?? "";
+                return (_jsx("button", { type: "button", "data-index": i, "data-slot": "carousel-thumb", "aria-label": c.t("goTo", { index: c.nf.format(i + 1) }) + (alt ? `: ${alt}` : ""), "aria-current": i === c.index ? "true" : undefined, onClick: () => c.scrollTo(i), className: "vui-carousel-thumb focus-ring relative w-20 shrink-0 overflow-hidden rounded-ui-sm bg-skeleton sm:w-24", style: { aspectRatio: String(aspect) }, children: _jsx("img", { src: src, alt: "", loading: "lazy", decoding: "async", className: "absolute inset-0 size-full object-cover" }) }, i));
+            }) }) }));
+});
+/** Pause / resume autoplay. Rendered automatically on the stage while autoplay is on. */
+export function CarouselPlayPause({ className, size, ...props }) {
+    const c = useCarouselContext("CarouselPlayPause");
+    if (!c.autoplay)
+        return null;
+    return (_jsx(IconButton, { label: c.t(c.playing ? "pause" : "play"), tooltip: false, size: size ?? "sm", variant: "ghost", "data-slot": "carousel-playpause", "aria-pressed": undefined, onClick: c.playing ? c.pause : c.play, className: cn("surface-popover rounded-full! hover:bg-popover", className), ...props, children: c.playing ? _jsx(Pause, { "aria-hidden": true }) : _jsx(Play, { "aria-hidden": true }) }));
+}
+/** "3 / 7" in the locale's digits. */
+export const CarouselCounter = React.forwardRef(function CarouselCounter({ className, ...props }, ref) {
+    const c = useCarouselContext("CarouselCounter");
+    if (c.count === 0)
+        return null;
+    return (_jsxs("span", { ref: ref, "data-slot": "carousel-counter", className: cn("tabular text-[13px] text-fg-muted", className), ...props, children: [_jsx("span", { className: "sr-only", children: c.t("counter", { index: c.nf.format(c.index + 1), total: c.nf.format(c.count) }) }), _jsxs("span", { "aria-hidden": true, children: [_jsx("span", { className: "font-medium text-fg", children: c.nf.format(c.index + 1) }), _jsx("span", { className: "mx-1 text-fg-subtle", children: "/" }), c.nf.format(c.count)] })] }));
+});
+/**
+ * Endless logo band in pure CSS: no JS, renders with SSR. The items are listed once for assistive
+ * tech; a duplicate track (aria-hidden) closes the loop. Reduced motion: static, scrollable row.
+ */
+export function Marquee({ label, duration = 40, reverse, pauseOnHover = true, fade = true, gap = "lg", className, style, children, ...props }) {
+    const items = React.Children.toArray(children);
+    const track = (hidden) => (_jsx("ul", { "aria-hidden": hidden || undefined, "aria-label": hidden ? undefined : label, className: "vui-marquee-track flex shrink-0 items-center", children: items.map((child, i) => (_jsx("li", { className: "flex shrink-0 items-center", children: child }, i))) }));
+    return (_jsxs("div", { "data-slot": "marquee", "data-reverse": reverse ? "" : undefined, "data-pause-on-hover": pauseOnHover ? "" : undefined, "data-fade": fade ? "" : undefined, className: cn("vui-marquee flex overflow-hidden", className), style: { "--marquee-duration": `${duration}s`, "--marquee-gap": GAP[gap], ...style }, ...props, children: [track(false), track(true)] }));
+}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+export type CheckboxCheckedState = boolean | "indeterminate";
+export declare const checkboxVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked" | "defaultChecked" | "onCheckedChange" | "children"> {
+    checked?: CheckboxCheckedState;
+    defaultChecked?: CheckboxCheckedState;
+    onCheckedChange?: (checked: CheckboxCheckedState) => void;
+    /** Text next to the box; the whole row is clickable. */
+    label?: React.ReactNode;
+    /** Secondary line under the label (linked with `aria-describedby`). */
+    description?: React.ReactNode;
+    /** 16 / 18 px box. Default `"md"`. */
+    size?: "sm" | "md";
+    /** `"card"`: a bordered, selectable tile — module pickers, plan add-ons. Needs `label`. */
+    variant?: "default" | "card";
+    /** Leading icon / logo inside a card. */
+    icon?: React.ReactNode;
+    /** Invalid look + `aria-invalid` (a surrounding Field with `error` sets it for you). */
+    invalid?: boolean;
+    /** Visible and focusable, but the value can't change (`aria-readonly`). */
+    readOnly?: boolean;
+    /** Classes for the box itself when `label` is used (`className` goes on the row). */
+    controlClassName?: string;
+}
+/**
+ * Yes/no and multi-select: "Allow comments", row selection, permissions, consent.
+ * Built on Radix Checkbox (tri-state, hidden input with `name`). Reads Field context.
+ *
+ * ```tsx
+ * <Checkbox label="Allow comments" description="Readers can reply below the post." defaultChecked />
+ * <Checkbox checked={some ? "indeterminate" : all} onCheckedChange={toggleAll} aria-label="Select all rows" />
+ * <Field label="I accept the terms" orientation="horizontal" error={err}><Checkbox name="terms" /></Field>
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "dir"> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Form name; every checked item submits one entry (`formData.getAll(name)`). */
+    name?: string;
+    /** Shorthand for the items. Or compose `CheckboxGroupItem` children. */
+    items?: {
+        value: string;
+        label: React.ReactNode;
+        description?: React.ReactNode;
+        icon?: React.ReactNode;
+        disabled?: boolean;
+    }[];
+    orientation?: "vertical" | "horizontal";
+    /** `"card"` lays the items out as selectable tiles in a responsive grid. */
+    variant?: "default" | "card";
+    size?: "sm" | "md";
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+}
+/**
+ * Several checkboxes that share one array value: notification channels, modules, permissions.
+ * `role="group"`, labelled by the surrounding Field / Fieldset.
+ *
+ * ```tsx
+ * <Field label="Notify me by">
+ *   <CheckboxGroup name="channels" defaultValue={["email"]} items={[{ value: "email", label: "Email" }, { value: "sms", label: "SMS" }]} />
+ * </Field>
+ * ```
+ */
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface CheckboxGroupItemProps extends Omit<CheckboxProps, "checked" | "defaultChecked" | "value"> {
+    /** The string added to the group value when checked. */
+    value: string;
+}
+/** One option inside a `CheckboxGroup`. */
+export declare const CheckboxGroupItem: React.ForwardRefExoticComponent<CheckboxGroupItemProps & React.RefAttributes<HTMLButtonElement>>;