@aspect-ops/exon-ui 0.0.3 → 0.2.0

package/dist/components/Carousel/Carousel.svelte

@@ -0,0 +1,454 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+
+	interface Props {
+		activeIndex?: number;
+		autoplay?: boolean;
+		autoplayInterval?: number;
+		loop?: boolean;
+		showIndicators?: boolean;
+		showArrows?: boolean;
+		class?: string;
+		onchange?: (index: number) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		activeIndex = $bindable(0),
+		autoplay = false,
+		autoplayInterval = 5000,
+		loop = true,
+		showIndicators = true,
+		showArrows = true,
+		class: className = '',
+		onchange,
+		children
+	}: Props = $props();
+
+	let containerRef: HTMLDivElement;
+	let slidesRef: HTMLDivElement;
+	let slideCount = $state(0);
+	let isDragging = $state(false);
+	let startX = 0;
+	let currentX = 0;
+	let autoplayTimer: number | null = null;
+	let isHovered = $state(false);
+	let isFocused = $state(false);
+
+	// Derive the transform value
+	const translateX = $derived(-activeIndex * 100);
+
+	// Count slides on mount
+	onMount(() => {
+		updateSlideCount();
+		if (autoplay) {
+			startAutoplay();
+		}
+	});
+
+	onDestroy(() => {
+		stopAutoplay();
+	});
+
+	function updateSlideCount() {
+		if (slidesRef) {
+			slideCount = slidesRef.children.length;
+		}
+	}
+
+	function next() {
+		if (activeIndex < slideCount - 1) {
+			setActiveIndex(activeIndex + 1);
+		} else if (loop) {
+			setActiveIndex(0);
+		}
+	}
+
+	function prev() {
+		if (activeIndex > 0) {
+			setActiveIndex(activeIndex - 1);
+		} else if (loop) {
+			setActiveIndex(slideCount - 1);
+		}
+	}
+
+	function goToSlide(index: number) {
+		setActiveIndex(index);
+	}
+
+	function setActiveIndex(index: number) {
+		if (index !== activeIndex) {
+			activeIndex = index;
+			onchange?.(index);
+		}
+	}
+
+	function handleTouchStart(e: TouchEvent) {
+		stopAutoplay();
+		isDragging = true;
+		startX = e.touches[0].clientX;
+		currentX = startX;
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!isDragging) return;
+		currentX = e.touches[0].clientX;
+	}
+
+	function handleTouchEnd() {
+		if (!isDragging) return;
+		isDragging = false;
+
+		const diff = startX - currentX;
+		const threshold = 50;
+
+		if (Math.abs(diff) > threshold) {
+			if (diff > 0) {
+				next();
+			} else {
+				prev();
+			}
+		}
+
+		if (autoplay && !isHovered && !isFocused) {
+			startAutoplay();
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'ArrowLeft':
+				e.preventDefault();
+				prev();
+				break;
+			case 'ArrowRight':
+				e.preventDefault();
+				next();
+				break;
+			case 'Home':
+				e.preventDefault();
+				goToSlide(0);
+				break;
+			case 'End':
+				e.preventDefault();
+				goToSlide(slideCount - 1);
+				break;
+		}
+	}
+
+	function startAutoplay() {
+		if (!autoplay) return;
+		stopAutoplay();
+		autoplayTimer = window.setInterval(() => {
+			next();
+		}, autoplayInterval);
+	}
+
+	function stopAutoplay() {
+		if (autoplayTimer !== null) {
+			clearInterval(autoplayTimer);
+			autoplayTimer = null;
+		}
+	}
+
+	function handleMouseEnter() {
+		isHovered = true;
+		if (autoplay) {
+			stopAutoplay();
+		}
+	}
+
+	function handleMouseLeave() {
+		isHovered = false;
+		if (autoplay && !isFocused) {
+			startAutoplay();
+		}
+	}
+
+	function handleFocus() {
+		isFocused = true;
+		if (autoplay) {
+			stopAutoplay();
+		}
+	}
+
+	function handleBlur() {
+		isFocused = false;
+		if (autoplay && !isHovered) {
+			startAutoplay();
+		}
+	}
+
+	// Restart autoplay when props change
+	$effect(() => {
+		if (autoplay) {
+			stopAutoplay();
+			if (!isHovered && !isFocused) {
+				startAutoplay();
+			}
+		} else {
+			stopAutoplay();
+		}
+	});
+
+	// Update slide count when children change
+	$effect(() => {
+		if (children) {
+			updateSlideCount();
+		}
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+	class="carousel {className}"
+	bind:this={containerRef}
+	role="region"
+	aria-roledescription="carousel"
+	aria-label="Image carousel"
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	onkeydown={handleKeydown}
+	tabindex="0"
+>
+	<!-- Carousel viewport -->
+	<div
+		class="carousel__viewport"
+		ontouchstart={handleTouchStart}
+		ontouchmove={handleTouchMove}
+		ontouchend={handleTouchEnd}
+		ontouchcancel={handleTouchEnd}
+	>
+		<div
+			bind:this={slidesRef}
+			class="carousel__slides"
+			style="transform: translateX({translateX}%); transition: {isDragging
+				? 'none'
+				: 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)'};"
+			aria-live="polite"
+			aria-atomic="false"
+		>
+			{@render children?.()}
+		</div>
+	</div>
+
+	<!-- Previous/Next arrows -->
+	{#if showArrows && slideCount > 1}
+		<button
+			class="carousel__arrow carousel__arrow--prev"
+			onclick={prev}
+			aria-label="Previous slide"
+			disabled={!loop && activeIndex === 0}
+			tabindex="-1"
+		>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<polyline points="15 18 9 12 15 6"></polyline>
+			</svg>
+		</button>
+		<button
+			class="carousel__arrow carousel__arrow--next"
+			onclick={next}
+			aria-label="Next slide"
+			disabled={!loop && activeIndex === slideCount - 1}
+			tabindex="-1"
+		>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<polyline points="9 18 15 12 9 6"></polyline>
+			</svg>
+		</button>
+	{/if}
+
+	<!-- Indicators -->
+	{#if showIndicators && slideCount > 1}
+		<div class="carousel__indicators" role="tablist">
+			{#each Array(slideCount) as _, index}
+				<button
+					class="carousel__indicator"
+					class:carousel__indicator--active={index === activeIndex}
+					onclick={() => goToSlide(index)}
+					aria-label="Slide {index + 1} of {slideCount}"
+					aria-selected={index === activeIndex}
+					role="tab"
+					tabindex="-1"
+				></button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.carousel {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		border-radius: var(--radius-md, 0.375rem);
+	}
+
+	.carousel:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.carousel__viewport {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		touch-action: pan-y;
+	}
+
+	.carousel__slides {
+		display: flex;
+		width: 100%;
+	}
+
+	/* Arrows */
+	.carousel__arrow {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 44px;
+		min-height: 44px;
+		width: 2.75rem;
+		height: 2.75rem;
+		padding: 0;
+		background: rgba(255, 255, 255, 0.9);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-full, 9999px);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		z-index: 2;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.carousel__arrow:hover:not(:disabled) {
+		background: rgba(255, 255, 255, 1);
+		box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+	}
+
+	.carousel__arrow:active:not(:disabled) {
+		transform: translateY(-50%) scale(0.95);
+	}
+
+	.carousel__arrow:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	.carousel__arrow:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.carousel__arrow--prev {
+		left: var(--space-md, 1rem);
+	}
+
+	.carousel__arrow--next {
+		right: var(--space-md, 1rem);
+	}
+
+	/* Indicators */
+	.carousel__indicators {
+		position: absolute;
+		bottom: var(--space-md, 1rem);
+		left: 50%;
+		transform: translateX(-50%);
+		display: flex;
+		gap: var(--space-sm, 0.5rem);
+		padding: var(--space-sm, 0.5rem);
+		background: rgba(0, 0, 0, 0.3);
+		border-radius: var(--radius-full, 9999px);
+		z-index: 2;
+	}
+
+	.carousel__indicator {
+		width: 0.5rem;
+		height: 0.5rem;
+		min-width: 44px;
+		min-height: 44px;
+		padding: 0;
+		background: rgba(255, 255, 255, 0.5);
+		border: none;
+		border-radius: var(--radius-full, 9999px);
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		position: relative;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.carousel__indicator::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 0.5rem;
+		height: 0.5rem;
+		background: currentColor;
+		border-radius: var(--radius-full, 9999px);
+		opacity: 0.5;
+		transition: opacity var(--transition-fast, 150ms ease);
+	}
+
+	.carousel__indicator--active::before {
+		background: rgba(255, 255, 255, 1);
+		opacity: 1;
+	}
+
+	.carousel__indicator:hover::before {
+		opacity: 0.8;
+	}
+
+	.carousel__indicator:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	/* Responsive adjustments */
+	@media (min-width: 640px) {
+		.carousel__arrow {
+			width: 3rem;
+			height: 3rem;
+		}
+	}
+
+	/* Dark mode support */
+	:global([data-theme='dark']) .carousel__arrow {
+		background: rgba(31, 41, 55, 0.9);
+		border-color: var(--color-border, #374151);
+		color: var(--color-text, #f9fafb);
+	}
+
+	:global([data-theme='dark']) .carousel__arrow:hover:not(:disabled) {
+		background: rgba(31, 41, 55, 1);
+	}
+</style>

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

@@ -0,0 +1,14 @@
+interface Props {
+    activeIndex?: number;
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    loop?: boolean;
+    showIndicators?: boolean;
+    showArrows?: boolean;
+    class?: string;
+    onchange?: (index: number) => void;
+    children?: import('svelte').Snippet;
+}
+declare const Carousel: import("svelte").Component<Props, {}, "activeIndex">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/components/Carousel/CarouselSlide.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="carousel-slide {className}">
+	{@render children?.()}
+</div>
+
+<style>
+	.carousel-slide {
+		flex: 0 0 100%;
+		min-width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const CarouselSlide: import("svelte").Component<Props, {}, "">;
+type CarouselSlide = ReturnType<typeof CarouselSlide>;
+export default CarouselSlide;

package/dist/components/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Carousel } from './Carousel.svelte';
+export { default as CarouselSlide } from './CarouselSlide.svelte';

package/dist/components/Carousel/index.js

@@ -0,0 +1,2 @@
+export { default as Carousel } from './Carousel.svelte';
+export { default as CarouselSlide } from './CarouselSlide.svelte';