@winkintel/bootstrap-svelte 0.0.1

package/dist/Carousel/carousel-inner.svelte

@@ -0,0 +1,30 @@
+<!--
+@component
+## Carousel.Inner
+Container for carousel items. This component should be placed inside a Carousel.Root.
+
+@example
+```svelte
+<Carousel.Root id="myCarousel">
+    <Carousel.Inner>
+        <Carousel.Item isActive={true}>
+            Slides...
+        </Carousel.Item>
+    </Carousel.Inner>
+</Carousel.Root>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the component.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+- `id` (string): Optional. Unique identifier for the component.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the carousel-inner element, in case one is not provided
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `carousel-inner-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('carousel-inner', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Carousel/carousel-inner.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ## Carousel.Inner
+ * Container for carousel items. This component should be placed inside a Carousel.Root.
+ *
+ * @example
+ * ```svelte
+ * <Carousel.Root id="myCarousel">
+ * <Carousel.Inner>
+ *     <Carousel.Item isActive={true}>
+ *         Slides...
+ *     </Carousel.Item>
+ * </Carousel.Inner>
+ * </Carousel.Root>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the component.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ * - `id` (string): Optional. Unique identifier for the component.
+ */
+declare const CarouselInner: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type CarouselInner = ReturnType<typeof CarouselInner>;
+export default CarouselInner;

package/dist/Carousel/carousel-item.svelte

@@ -0,0 +1,138 @@
+<!--
+@component
+## Carousel.Item
+Represents a slide in the carousel. Should be placed inside a Carousel.Inner.
+
+@example
+```svelte
+<Carousel.Item isActive={true}>
+    <img src="..." class="d-block w-100" alt="...">
+    <Carousel.Caption>
+        <h5>First slide label</h5>
+        <p>Some representative placeholder content for the first slide.</p>
+    </Carousel.Caption>
+</Carousel.Item>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the component.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+- `id` (string): Optional. Unique identifier for the component.
+- `isActive` (boolean): Optional. Indicates if the item is active. Default is `false`.
+- `interval` (number): Optional. Time in milliseconds before the item is shown. Default is `5000`.
+- `onSlide` (function): Optional. Callback function triggered when the item is shown.
+- `onSlid` (function): Optional. Callback function triggered after the item is shown.
+- `style` (string): Optional. Inline styles to apply to the component.
+-->
+<script lang="ts">import { easeInOut, uniqueClsx } from '../common/css.js';
+import { noop } from '../common/noop.js';
+import { linear } from 'svelte/easing';
+import { fade, fly } from 'svelte/transition';
+import { CarouselItemState, initCarouselItemState } from './carousel.svelte.js';
+// Generate a unique ID for the carousel-item element, in case one is not provided
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `carousel-item-${uid}`, isActive = false, interval = 5000, onSlide = noop, onSlid = noop, style, ...restOfProps } = $props();
+// Get the item state after the component is mounted
+const itemState = initCarouselItemState({
+    get id() {
+        return id;
+    },
+    get isActive() {
+        return isActive;
+    },
+    get interval() {
+        return interval;
+    }
+});
+let flyX = $derived.by(() => {
+    if (itemState.isNext) {
+        return '100%';
+    }
+    if (itemState.isPrev) {
+        return '-100%';
+    }
+    return undefined;
+});
+let classes = $derived(uniqueClsx('carousel-item', {
+    active: itemState.isActive, // Displays the item.
+    'carousel-item-next': itemState.isNext, // Displays the item.
+    'carousel-item-prev': itemState.isPrev, // Displays the item.
+    'carousel-item-end': itemState.isEnd, // Applies the translateX(-100%) transform.
+    'carousel-item-start': itemState.isStart // Applies the translateX(100%) transform.
+}, classValues));
+let styles = $derived(`transition: transform ${itemState.root.transitionDuration / 1000}s ease-in-out !important;` + (style ? style : ''));
+</script>
+
+{#if itemState.doSlideItem}
+    <div
+        bind:this={elementRef}
+        class={classes}
+        {id}
+        onintrostart={onSlide}
+        onintroend={onSlid}
+        style={styles}
+        transition:fly={{
+            duration: itemState.root.transitionDuration,
+            x: flyX,
+            y: undefined,
+            opacity: 1,
+            easing: easeInOut
+        }}
+        onmouseenter={() => itemState.root.handleMouseEnter()}
+        onmouseleave={() => itemState.root.handleMouseLeave()}
+        {...restOfProps}>
+        {@render children?.()}
+    </div>
+{/if}
+{#if itemState.doFadeItem}
+    <div
+        bind:this={elementRef}
+        class={classes}
+        {id}
+        onintrostart={onSlide}
+        onintroend={onSlid}
+        style={styles}
+        transition:fade={{
+            delay: itemState.order ? itemState.root.transitionDuration / 2 : 0,
+            duration: itemState.root.transitionDuration / 2,
+            easing: linear
+        }}
+        onmouseenter={() => itemState.root.handleMouseEnter()}
+        onmouseleave={() => itemState.root.handleMouseLeave()}
+        {...restOfProps}>
+        {@render children?.()}
+    </div>
+{/if}
+{#if itemState.doCrossfadeItem}
+    <div
+        bind:this={elementRef}
+        class={classes}
+        {id}
+        onintrostart={onSlide}
+        onintroend={onSlid}
+        transition:fly={{
+            duration: itemState.root.transitionDuration,
+            x: '0%',
+            y: undefined,
+            opacity: 0,
+            easing: easeInOut
+        }}
+        onmouseenter={() => itemState.root.handleMouseEnter()}
+        onmouseleave={() => itemState.root.handleMouseLeave()}
+        {...restOfProps}>
+        {@render children?.()}
+    </div>
+{/if}
+{#if itemState.doShowImmediatelyItem}
+    <div
+        bind:this={elementRef}
+        class={classes}
+        {id}
+        onintrostart={onSlide}
+        onintroend={onSlid}
+        transition:fade={{ duration: 0 }}
+        onmouseenter={() => itemState.root.handleMouseEnter()}
+        onmouseleave={() => itemState.root.handleMouseLeave()}
+        {...restOfProps}>
+        {@render children?.()}
+    </div>
+{/if}

package/dist/Carousel/carousel-item.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Carousel } from './index.js';
+/**
+ * ## Carousel.Item
+ * Represents a slide in the carousel. Should be placed inside a Carousel.Inner.
+ *
+ * @example
+ * ```svelte
+ * <Carousel.Item isActive={true}>
+ * <img src="..." class="d-block w-100" alt="...">
+ * <Carousel.Caption>
+ *     <h5>First slide label</h5>
+ *     <p>Some representative placeholder content for the first slide.</p>
+ * </Carousel.Caption>
+ * </Carousel.Item>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the component.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ * - `id` (string): Optional. Unique identifier for the component.
+ * - `isActive` (boolean): Optional. Indicates if the item is active. Default is `false`.
+ * - `interval` (number): Optional. Time in milliseconds before the item is shown. Default is `5000`.
+ * - `onSlide` (function): Optional. Callback function triggered when the item is shown.
+ * - `onSlid` (function): Optional. Callback function triggered after the item is shown.
+ * - `style` (string): Optional. Inline styles to apply to the component.
+ */
+declare const CarouselItem: import("svelte").Component<Carousel.ItemProps, {}, "elementRef">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/Carousel/carousel.svelte

@@ -0,0 +1,140 @@
+<!--
+@component
+## Carousel.Root
+The main container for a carousel component.
+
+@example
+```svelte
+<Carousel.Root animation={true} interval={5000} ride="carousel">
+    <Carousel.Indicators>
+        <Carousel.IndicatorButton ariaLabel="Slide 1" />
+        <Carousel.IndicatorButton ariaLabel="Slide 2" />
+        <Carousel.IndicatorButton ariaLabel="Slide 3" />
+    </Carousel.Indicators>
+    <Carousel.Inner>
+        <Carousel.Item isActive={true}>
+            <img src="https://placehold.co/800x400/777/555?text=Slide+1" class="d-block w-100" alt="Slide 1">
+            <Carousel.Caption>
+            <h5>First slide label</h5>
+            <p>Some representative placeholder content for the first slide.</p>
+            </Carousel.Caption>
+        </Carousel.Item>
+        <Carousel.Item>
+            <img src="https://placehold.co/800x400/777/555?text=Slide+2" class="d-block w-100" alt="Slide 2">
+        </Carousel.Item>
+        <Carousel.Item>
+            <img src="https://placehold.co/800x400/777/555?text=Slide+3" class="d-block w-100" alt="Slide 3">
+        </Carousel.Item>
+    </Carousel.Inner>
+    <Carousel.ControlPrev />
+    <Carousel.ControlNext />
+</Carousel.Root>
+```
+### Props
+- `animation` (boolean): Optional. Enables slide animation. Default is `true`.
+- `class` (string): Optional. Additional CSS classes to apply to the carousel.
+- `elementRef` (HTMLElement): Optional. Reference to the carousel DOM element.
+- `id` (string): Optional. Unique ID for the carousel element.
+- `interval` (number): Optional. The amount of time in milliseconds to delay between automatically cycling to the next item. Default is `5000`.
+- `pause` (boolean | 'hover'): Optional. Sets the pause behavior. `true` pauses on hover, 'hover' pauses on hover, and `false` disables pausing. Default is `false`.
+- `ride` (boolean | 'carousel'): Optional. Sets the autoplay behavior. `true` starts after first interaction, 'carousel' auto-plays on load. Default is `false`.
+- `style` (string): Optional. Additional inline styles to apply to the carousel.
+- `transitionDuration` (number): Optional. The duration of the transition effect in milliseconds. Default is `600`.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { onMount } from 'svelte';
+import { CarouselRootState, initCarouselRootState } from './carousel.svelte.js';
+// Generate a unique ID for the carousel element, in case one is not provided
+const uid = $props.id();
+let { animation = CarouselRootState.ANIMATION_DEFAULT, children, class: classValues, elementRef = $bindable(null), id = `carousel-${uid}`, interval = CarouselRootState.INTERNAL_DEFAULT, pause = CarouselRootState.PAUSE_DEFAULT, ride = CarouselRootState.RIDE_DEFAULT, style, transitionDuration = CarouselRootState.TRANSITION_DURATION_DEFAULT, ...restOfProps } = $props();
+// Initialize the carousel state
+const rootState = initCarouselRootState({
+    get animation() {
+        return animation;
+    },
+    get interval() {
+        return interval;
+    },
+    get pause() {
+        return pause;
+    },
+    get ride() {
+        return ride;
+    },
+    get transitionDuration() {
+        return transitionDuration;
+    }
+});
+let classes = $derived(uniqueClsx('carousel', {
+    slide: rootState.isSlideAnimation || rootState.isCrossfadeAnimation,
+    'carousel-fade': rootState.isFadeAnimation || rootState.isCrossfadeAnimation
+}, classValues));
+let styles = $derived('touch-action: pan-y;' + (style ? style : ''));
+const unset = Symbol('unset');
+// Handle touch events for swipe gestures
+function handlePointerDown(pointerEvent) {
+    rootState.handlePointerDown(pointerEvent);
+}
+function handlePointerMove(pointerEvent) {
+    rootState.handlePointerMove(pointerEvent);
+}
+function handlePointerUp(pointerEvent) {
+    rootState.handlePointerUp(pointerEvent);
+}
+onMount(() => {
+    // Cleanup when component is destroyed
+    return () => {
+        rootState.dispose();
+    };
+});
+// Track the previously synchronized prop values so rootState side effects
+// only run for genuine external prop transitions.
+let previousAnimation = unset;
+let previousInterval = unset;
+let previousPause = unset;
+let previousRide = unset;
+let previousTransitionDuration = unset;
+$effect(() => {
+    if (previousAnimation !== unset && previousAnimation !== animation) {
+        rootState.animation = animation || CarouselRootState.ANIMATION_DEFAULT;
+    }
+    previousAnimation = animation;
+});
+$effect(() => {
+    if (previousInterval !== unset && previousInterval !== interval) {
+        rootState.interval = interval || CarouselRootState.INTERNAL_DEFAULT;
+    }
+    previousInterval = interval;
+});
+$effect(() => {
+    if (previousPause !== unset && previousPause !== pause) {
+        rootState.pauseInteraction = pause === 'hover' || pause === false ? pause : CarouselRootState.PAUSE_DEFAULT;
+    }
+    previousPause = pause;
+});
+$effect(() => {
+    if (previousRide !== unset && previousRide !== ride) {
+        rootState.ride = ride || CarouselRootState.RIDE_DEFAULT;
+    }
+    previousRide = ride;
+});
+$effect(() => {
+    if (previousTransitionDuration !== unset && previousTransitionDuration !== transitionDuration) {
+        rootState.transitionDuration = transitionDuration || CarouselRootState.TRANSITION_DURATION_DEFAULT;
+    }
+    previousTransitionDuration = transitionDuration;
+});
+</script>
+
+<div
+    bind:this={elementRef}
+    class={classes}
+    {id}
+    onpointerdown={handlePointerDown}
+    onpointermove={handlePointerMove}
+    onpointerup={handlePointerUp}
+    onpointercancel={handlePointerUp}
+    style={styles}
+    {...restOfProps}>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,46 @@
+import type { Carousel } from './index.js';
+/**
+ * ## Carousel.Root
+ * The main container for a carousel component.
+ *
+ * @example
+ * ```svelte
+ * <Carousel.Root animation={true} interval={5000} ride="carousel">
+ * <Carousel.Indicators>
+ *     <Carousel.IndicatorButton ariaLabel="Slide 1" />
+ *     <Carousel.IndicatorButton ariaLabel="Slide 2" />
+ *     <Carousel.IndicatorButton ariaLabel="Slide 3" />
+ * </Carousel.Indicators>
+ * <Carousel.Inner>
+ *     <Carousel.Item isActive={true}>
+ *         <img src="https://placehold.co/800x400/777/555?text=Slide+1" class="d-block w-100" alt="Slide 1">
+ *         <Carousel.Caption>
+ *         <h5>First slide label</h5>
+ *         <p>Some representative placeholder content for the first slide.</p>
+ *         </Carousel.Caption>
+ *     </Carousel.Item>
+ *     <Carousel.Item>
+ *         <img src="https://placehold.co/800x400/777/555?text=Slide+2" class="d-block w-100" alt="Slide 2">
+ *     </Carousel.Item>
+ *     <Carousel.Item>
+ *         <img src="https://placehold.co/800x400/777/555?text=Slide+3" class="d-block w-100" alt="Slide 3">
+ *     </Carousel.Item>
+ * </Carousel.Inner>
+ * <Carousel.ControlPrev />
+ * <Carousel.ControlNext />
+ * </Carousel.Root>
+ * ```
+ * ### Props
+ * - `animation` (boolean): Optional. Enables slide animation. Default is `true`.
+ * - `class` (string): Optional. Additional CSS classes to apply to the carousel.
+ * - `elementRef` (HTMLElement): Optional. Reference to the carousel DOM element.
+ * - `id` (string): Optional. Unique ID for the carousel element.
+ * - `interval` (number): Optional. The amount of time in milliseconds to delay between automatically cycling to the next item. Default is `5000`.
+ * - `pause` (boolean | 'hover'): Optional. Sets the pause behavior. `true` pauses on hover, 'hover' pauses on hover, and `false` disables pausing. Default is `false`.
+ * - `ride` (boolean | 'carousel'): Optional. Sets the autoplay behavior. `true` starts after first interaction, 'carousel' auto-plays on load. Default is `false`.
+ * - `style` (string): Optional. Additional inline styles to apply to the carousel.
+ * - `transitionDuration` (number): Optional. The duration of the transition effect in milliseconds. Default is `600`.
+ */
+declare const Carousel: import("svelte").Component<Carousel.RootProps, {}, "elementRef">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;