svelora 2.1.0

package/dist/Carousel/Carousel.svelte

@@ -0,0 +1,277 @@
+<script lang="ts" module>
+    import type { CarouselAutoplayOptions, CarouselProps } from './carousel.types.js'
+
+    export type Props<T = unknown> = CarouselProps<T>
+</script>
+
+<script lang="ts" generics="T = unknown">
+    import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
+    import Autoplay from 'embla-carousel-autoplay'
+    import ClassNames from 'embla-carousel-class-names'
+    import Fade from 'embla-carousel-fade'
+    import useEmblaCarousel from 'embla-carousel-svelte'
+    import { untrack } from 'svelte'
+    import Button from '../Button/Button.svelte'
+    import { getComponentConfig } from '../config.js'
+    import { carouselDefaults, carouselVariants } from './carousel.variants.js'
+
+    const config = getComponentConfig('carousel', carouselDefaults)
+
+    let {
+        ref = $bindable(null),
+        api = $bindable<EmblaCarouselType | undefined>(),
+        items,
+        index = $bindable(0),
+        onIndexChange,
+        onSettle,
+        slidesToShow = 1,
+        loop = false,
+        align = 'start',
+        orientation = 'horizontal',
+        draggable = true,
+        dragFree = false,
+        slidesToScroll = 1,
+        autoplay = false,
+        fade = false,
+        classNames = false,
+        breakpoints,
+        plugins: extraPlugins,
+        options: optionsOverride,
+        arrows = true,
+        dots = true,
+        prevIcon,
+        nextIcon,
+        color = config.defaultVariants.color,
+        size = config.defaultVariants.size,
+        variant = config.defaultVariants.variant,
+        class: className,
+        ui,
+        slide: slideSnippet,
+        dot: dotSnippet,
+        prevSlot,
+        nextSlot,
+        children
+    }: Props<T> = $props()
+
+    let selectedIndex = $state(0)
+    let scrollSnaps = $state<number[]>([])
+    let canScrollPrev = $state(false)
+    let canScrollNext = $state(false)
+
+    const resolvedPrevIcon = $derived(
+        prevIcon ?? (orientation === 'vertical' ? 'lucide:chevron-up' : 'lucide:chevron-left')
+    )
+    const resolvedNextIcon = $derived(
+        nextIcon ?? (orientation === 'vertical' ? 'lucide:chevron-down' : 'lucide:chevron-right')
+    )
+
+    function buildAutoplay(opts: CarouselAutoplayOptions) {
+        return Autoplay({
+            delay: opts.delay ?? 4000,
+            defaultInteraction: opts.defaultInteraction ?? true,
+            stopOnLastSnap: opts.stopOnLastSnap ?? false,
+            rootNode: opts.rootNode ?? null
+        })
+    }
+
+    const plugins = $derived.by<EmblaPluginType[]>(() => {
+        const list: EmblaPluginType[] = []
+        if (autoplay) list.push(buildAutoplay(typeof autoplay === 'object' ? autoplay : {}))
+        if (fade) list.push(Fade())
+        if (classNames) list.push(ClassNames())
+        if (extraPlugins) list.push(...extraPlugins)
+        return list
+    })
+
+    const emblaOptions = $derived.by<EmblaOptionsType>(() => ({
+        loop,
+        align,
+        axis: orientation === 'vertical' ? 'y' : 'x',
+        draggable,
+        dragFree,
+        slidesToScroll,
+        breakpoints,
+        ...optionsOverride
+    }))
+
+    const dotIndices = $derived(scrollSnaps.map((_, i) => i))
+
+    function classListHas(cls: unknown, re: RegExp): boolean {
+        if (typeof cls === 'string') return re.test(cls)
+        if (Array.isArray(cls)) return cls.some((c) => classListHas(c, re))
+        return false
+    }
+
+    const userOverridesBasis = $derived(classListHas(ui?.slide, /\bbasis-/))
+    const containerStyle = $derived(
+        orientation === 'vertical'
+            ? 'display: flex; flex-direction: column; touch-action: pan-x;'
+            : 'display: flex; flex-direction: row; touch-action: pan-y;'
+    )
+    const slideStyle = $derived.by(() => {
+        if (userOverridesBasis) return undefined
+        const minDim = orientation === 'vertical' ? 'min-height' : 'min-width'
+        return `flex: 0 0 calc(100% / ${slidesToShow}); ${minDim}: 0;`
+    })
+
+    const variantSlots = $derived(carouselVariants({ orientation, size, color, variant }))
+    const classes = $derived({
+        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
+        viewport: variantSlots.viewport({ class: [config.slots.viewport, ui?.viewport] }),
+        container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
+        slide: variantSlots.slide({ class: [config.slots.slide, ui?.slide] }),
+        arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
+        arrowPrev: variantSlots.arrowPrev({ class: [config.slots.arrowPrev, ui?.arrowPrev] }),
+        arrowNext: variantSlots.arrowNext({ class: [config.slots.arrowNext, ui?.arrowNext] }),
+        dots: variantSlots.dots({ class: [config.slots.dots, ui?.dots] }),
+        dot: variantSlots.dot({ class: [config.slots.dot, ui?.dot] })
+    })
+
+    function syncFromApi(embla: EmblaCarouselType) {
+        const newIndex = embla.selectedSnap()
+        selectedIndex = newIndex
+        scrollSnaps = embla.snapList()
+        canScrollPrev = embla.canGoToPrev()
+        canScrollNext = embla.canGoToNext()
+        if (newIndex !== index) {
+            index = newIndex
+            onIndexChange?.(newIndex)
+        }
+    }
+
+    function handleEmblaInit(event: CustomEvent<EmblaCarouselType>) {
+        const embla = event.detail
+        api = embla
+        syncFromApi(embla)
+        embla.on('select', () => syncFromApi(embla))
+        embla.on('reinit', () => syncFromApi(embla))
+        if (onSettle) embla.on('settle', () => onSettle(embla))
+    }
+
+    $effect(() => {
+        if (!api) return
+        const desired = index
+        if (desired !== untrack(() => selectedIndex)) {
+            api.goTo(desired)
+        }
+    })
+
+    function scrollPrev() {
+        if (!api) return
+        api.goToPrev()
+        syncFromApi(api)
+    }
+
+    function scrollNext() {
+        if (!api) return
+        api.goToNext()
+        syncFromApi(api)
+    }
+
+    function scrollTo(i: number) {
+        if (!api) return
+        api.goTo(i)
+        syncFromApi(api)
+    }
+</script>
+
+{#snippet defaultPrev()}
+    <Button
+        {color}
+        {size}
+        {variant}
+        icon={resolvedPrevIcon}
+        square
+        disabled={!canScrollPrev}
+        aria-label="Previous slide"
+        class={[classes.arrow, classes.arrowPrev]}
+        onclick={scrollPrev}
+    />
+{/snippet}
+
+{#snippet defaultNext()}
+    <Button
+        {color}
+        {size}
+        {variant}
+        icon={resolvedNextIcon}
+        square
+        disabled={!canScrollNext}
+        aria-label="Next slide"
+        class={[classes.arrow, classes.arrowNext]}
+        onclick={scrollNext}
+    />
+{/snippet}
+
+{#snippet defaultDot(i: number, selected: boolean)}
+    <button
+        type="button"
+        class={classes.dot}
+        data-selected={selected ? '' : undefined}
+        aria-label={`Go to slide ${i + 1}`}
+        aria-current={selected ? 'true' : undefined}
+        onclick={() => scrollTo(i)}
+    ></button>
+{/snippet}
+
+<div
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    style:--sv-slides={slidesToShow}
+>
+    <div
+        class={classes.viewport}
+        use:useEmblaCarousel={{ options: emblaOptions, plugins }}
+        onemblainit={handleEmblaInit}
+    >
+        <div class={classes.container} style={containerStyle}>
+            {#if items}
+                {#each items as item, i (i)}
+                    <div class={classes.slide} style={slideStyle} data-index={i}>
+                        {#if slideSnippet}
+                            {@render slideSnippet({
+                                item,
+                                index: i,
+                                selected: i === selectedIndex
+                            })}
+                        {:else}
+                            {String(item)}
+                        {/if}
+                    </div>
+                {/each}
+            {:else if children}
+                {@render children()}
+            {/if}
+        </div>
+    </div>
+
+    {#if arrows}
+        {#if prevSlot}
+            {@render prevSlot({ canScroll: canScrollPrev, scroll: scrollPrev })}
+        {:else}
+            {@render defaultPrev()}
+        {/if}
+        {#if nextSlot}
+            {@render nextSlot({ canScroll: canScrollNext, scroll: scrollNext })}
+        {:else}
+            {@render defaultNext()}
+        {/if}
+    {/if}
+
+    {#if dots && scrollSnaps.length > 1}
+        <div class={classes.dots} role="tablist">
+            {#each dotIndices as i (i)}
+                {#if dotSnippet}
+                    {@render dotSnippet({
+                        index: i,
+                        selected: i === selectedIndex,
+                        select: () => scrollTo(i)
+                    })}
+                {:else}
+                    {@render defaultDot(i, i === selectedIndex)}
+                {/if}
+            {/each}
+        </div>
+    {/if}
+</div>

package/dist/Carousel/Carousel.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { CarouselProps } from './carousel.types.js';
+export type Props<T = unknown> = CarouselProps<T>;
+declare function $$render<T = unknown>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "ref" | "api" | "index";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "api" | "index";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Carousel: $$IsomorphicComponent;
+type Carousel<T = unknown> = InstanceType<typeof Carousel<T>>;
+export default Carousel;

package/dist/Carousel/carousel.types.d.ts

@@ -0,0 +1,251 @@
+import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { CarouselSlots, CarouselVariantProps } from './carousel.variants.js';
+/**
+ * Re-export the Embla API type so consumers can type their `bind:api` value
+ * without importing `embla-carousel` directly.
+ */
+export type CarouselApi = EmblaCarouselType;
+/**
+ * Configuration for the autoplay plugin. When `true` the defaults are used;
+ * pass an object to override individual settings.
+ *
+ * v9 simplified the autoplay API: `stopOnInteraction`, `stopOnMouseEnter`
+ * and `stopOnFocusIn` collapsed into a single `defaultInteraction` flag —
+ * `false` keeps autoplay running through pointer/keyboard input, `true`
+ * pauses on the first interaction (matching the old `stopOnFocusIn` +
+ * `stopOnMouseEnter` combined behavior).
+ */
+export interface CarouselAutoplayOptions {
+    /** Delay between slides in milliseconds, or a function returning one. @default 4000 */
+    delay?: number | ((scrollSnaps: number[], emblaApi: EmblaCarouselType) => number[]);
+    /**
+     * Whether autoplay should pause on the first interaction (pointer/keyboard).
+     * Set to `false` to keep autoplay running while the user interacts.
+     * @default true
+     */
+    defaultInteraction?: boolean;
+    /** Stop the autoplay timer permanently after the last snap. @default false */
+    stopOnLastSnap?: boolean;
+    /**
+     * Custom root node used to detect visibility changes (used by autoplay to
+     * pause when the carousel scrolls off-screen). @default null
+     */
+    rootNode?: null | ((emblaRoot: HTMLElement) => HTMLElement | null);
+}
+/**
+ * Props passed to the `slide` snippet.
+ */
+export interface CarouselSlideSlotProps<T = unknown> {
+    /** The current slide item from the `items` array. */
+    item: T;
+    /** Zero-based slide index. */
+    index: number;
+    /** Whether this slide is the currently selected one. */
+    selected: boolean;
+}
+/**
+ * Props passed to the `dot` snippet for custom indicator rendering.
+ */
+export interface CarouselDotSlotProps {
+    /** Zero-based dot index. */
+    index: number;
+    /** Whether this dot represents the currently selected slide. */
+    selected: boolean;
+    /** Imperative helper to jump to this slide. */
+    select: () => void;
+}
+/**
+ * Props passed to the `prev` / `next` snippets for custom arrow rendering.
+ */
+export interface CarouselArrowSlotProps {
+    /** Whether the corresponding direction can scroll (false at boundaries when `loop=false`). */
+    canScroll: boolean;
+    /** Imperative helper to trigger the scroll. */
+    scroll: () => void;
+}
+/**
+ * Props for the Carousel component.
+ *
+ * @example
+ * ```svelte
+ * <Carousel items={images} loop autoplay>
+ *   {#snippet slide({ item })}
+ *     <img src={item.url} alt={item.alt} />
+ *   {/snippet}
+ * </Carousel>
+ * ```
+ *
+ * @see https://www.embla-carousel.com/
+ */
+export interface CarouselProps<T = unknown> {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Bindable Embla API. Use it to control the carousel imperatively, e.g.
+     * `api.goTo(3)` or `api.plugins().autoplay.stop()`.
+     */
+    api?: EmblaCarouselType;
+    /**
+     * Array of items to render as slides. If omitted, pass slide elements as
+     * `children` instead.
+     */
+    items?: T[];
+    /**
+     * Currently selected slide index (zero-based). Supports two-way binding.
+     * @default 0
+     */
+    index?: number;
+    /**
+     * Callback fired when the selected slide changes.
+     */
+    onIndexChange?: (index: number) => void;
+    /**
+     * Callback fired when the carousel settles after a scroll.
+     */
+    onSettle?: (api: EmblaCarouselType) => void;
+    /**
+     * Number of slides visible at once. Acts as a default that can be
+     * overridden via `ui.slide` or responsive `breakpoints`.
+     * @default 1
+     */
+    slidesToShow?: number;
+    /**
+     * Wrap around to the first slide after the last (and vice versa).
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Alignment of slides within the viewport.
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Layout axis.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Allow pointer/touch dragging to scroll between slides.
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * Allow free-form dragging without snapping to slides.
+     * @default false
+     */
+    dragFree?: boolean;
+    /**
+     * Number of slides to advance per scroll action ('auto' lets Embla decide
+     * based on viewport size).
+     * @default 1
+     */
+    slidesToScroll?: number | 'auto';
+    /**
+     * Enable autoplay. Pass `true` for defaults or an object to customize.
+     * @default false
+     */
+    autoplay?: boolean | CarouselAutoplayOptions;
+    /**
+     * Use a fade transition between slides instead of sliding.
+     * @default false
+     */
+    fade?: boolean;
+    /**
+     * Apply Embla's helper class names (`is-snapped`, `is-in-view`,
+     * `is-prev`, `is-next`, `is-selected`, `is-draggable`, `is-dragging`).
+     * Useful for advanced styling.
+     * @default false
+     */
+    classNames?: boolean;
+    /**
+     * Responsive overrides keyed by media query. Each value is a partial Embla
+     * options object that applies when the media query matches.
+     *
+     * @example
+     * ```ts
+     * { '(min-width: 768px)': { slidesToScroll: 2 } }
+     * ```
+     */
+    breakpoints?: Record<string, Omit<EmblaOptionsType, 'breakpoints'>>;
+    /**
+     * Additional Embla plugins. Use this to plug in `auto-scroll`, `wheel-gestures`,
+     * or any third-party Embla plugin not covered by built-in props.
+     */
+    plugins?: EmblaPluginType[];
+    /**
+     * Escape hatch for setting any Embla option directly. Merged on top of
+     * options derived from typed props above.
+     */
+    options?: Partial<EmblaOptionsType>;
+    /**
+     * Show prev/next arrow buttons.
+     * @default true
+     */
+    arrows?: boolean;
+    /**
+     * Show pagination dots below the carousel.
+     * @default true
+     */
+    dots?: boolean;
+    /**
+     * Icon for the "previous slide" arrow.
+     * @default 'lucide:chevron-left' (or 'lucide:chevron-up' when vertical)
+     */
+    prevIcon?: string;
+    /**
+     * Icon for the "next slide" arrow.
+     * @default 'lucide:chevron-right' (or 'lucide:chevron-down' when vertical)
+     */
+    nextIcon?: string;
+    /**
+     * Color scheme used for the active dot and the arrow buttons.
+     * @default 'primary'
+     */
+    color?: NonNullable<CarouselVariantProps['color']>;
+    /**
+     * Controls arrow and dot sizes.
+     * @default 'md'
+     */
+    size?: NonNullable<CarouselVariantProps['size']>;
+    /**
+     * Visual style of arrow buttons.
+     * @default 'soft'
+     */
+    variant?: NonNullable<CarouselVariantProps['variant']>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override classes for specific carousel slots.
+     */
+    ui?: Partial<Record<CarouselSlots, ClassNameValue>>;
+    /**
+     * Per-slide renderer. Called for each item in `items`. Receives the item,
+     * its index, and whether it is the currently selected slide.
+     */
+    slide?: Snippet<[CarouselSlideSlotProps<T>]>;
+    /**
+     * Custom dot renderer. When omitted a default dot button is rendered.
+     */
+    dot?: Snippet<[CarouselDotSlotProps]>;
+    /**
+     * Custom prev arrow renderer. When omitted a default `Button` with
+     * `prevIcon` is rendered.
+     */
+    prevSlot?: Snippet<[CarouselArrowSlotProps]>;
+    /**
+     * Custom next arrow renderer. When omitted a default `Button` with
+     * `nextIcon` is rendered.
+     */
+    nextSlot?: Snippet<[CarouselArrowSlotProps]>;
+    /**
+     * Fallback content for the slide container. Used when `items` is not
+     * provided — pass `.embla__slide` elements directly.
+     */
+    children?: Snippet;
+}

package/dist/Carousel/carousel.types.js

@@ -0,0 +1 @@
+export {};