ui-svelte 0.1.0

package/dist/display/Carousel.svelte

@@ -0,0 +1,359 @@
+<script lang="ts">
+	import {
+		ArrowDown24RegularIcon,
+		ArrowLeft24RegularIcon,
+		ArrowRight24RegularIcon,
+		ArrowUp24RegularIcon
+	} from '../icons/index.js';
+	import { Button, Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+	import { onMount, tick } from 'svelte';
+
+	type Slide = {
+		id: string | number;
+		content: Snippet;
+	};
+
+	type Props = {
+		slides: Slide[];
+		autoplay?: boolean;
+		autoplayInterval?: number;
+		loop?: boolean;
+		showControls?: boolean;
+		showIndicators?: boolean;
+		showNavigation?: boolean;
+		showCounter?: boolean;
+		orientation?: 'horizontal' | 'vertical';
+		variant?: 'primary' | 'secondary' | 'muted' | 'default';
+		size?: 'sm' | 'md' | 'lg';
+		indicatorType?: 'bar' | 'dot';
+		class?: string;
+		slideClass?: string;
+		onSlideChange?: (index: number) => void;
+	};
+
+	const {
+		class: className,
+		slideClass,
+		slides = [],
+		autoplay = false,
+		autoplayInterval = 3000,
+		loop = true,
+		showControls = true,
+		showIndicators = true,
+		showNavigation = false,
+		showCounter = false,
+		orientation = 'horizontal',
+		variant = 'default',
+		size = 'md',
+		indicatorType = 'bar',
+		onSlideChange
+	}: Props = $props();
+
+	let currentIndex = $state(0);
+	let containerEl = $state<HTMLElement>();
+	let viewportEl = $state<HTMLElement>();
+	let isDragging = $state(false);
+	let startPos = $state(0);
+	let currentTranslate = $state(0);
+	let prevTranslate = $state(0);
+	let autoplayTimer: ReturnType<typeof setTimeout> | null = $state(null);
+
+	const isVertical = $derived(orientation === 'vertical');
+	const canGoPrev = $derived(loop || currentIndex > 0);
+	const canGoNext = $derived(loop || currentIndex < slides.length - 1);
+
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	const updateTransform = () => {
+		if (!containerEl) return;
+		const offset = -currentIndex * 100;
+		const property = isVertical ? 'translateY' : 'translateX';
+		containerEl.style.transform = `${property}(${offset}%)`;
+	};
+
+	const goToSlide = (index: number) => {
+		if (index < 0 || index >= slides.length) return;
+		currentIndex = index;
+		updateTransform();
+		onSlideChange?.(index);
+		resetAutoplay();
+	};
+
+	const goToPrev = () => {
+		if (!canGoPrev) return;
+		const newIndex = currentIndex === 0 ? slides.length - 1 : currentIndex - 1;
+		goToSlide(newIndex);
+	};
+
+	const goToNext = () => {
+		if (!canGoNext) return;
+		const newIndex = currentIndex === slides.length - 1 ? 0 : currentIndex + 1;
+		goToSlide(newIndex);
+	};
+
+	const startAutoplay = () => {
+		if (!autoplay) return;
+		autoplayTimer = setInterval(() => {
+			if (loop || currentIndex < slides.length - 1) {
+				goToNext();
+			} else {
+				stopAutoplay();
+			}
+		}, autoplayInterval);
+	};
+
+	const stopAutoplay = () => {
+		if (autoplayTimer) {
+			clearInterval(autoplayTimer);
+			autoplayTimer = null;
+		}
+	};
+
+	const resetAutoplay = () => {
+		stopAutoplay();
+		startAutoplay();
+	};
+
+	const handleDragStart = (event: MouseEvent | TouchEvent) => {
+		isDragging = true;
+		stopAutoplay();
+
+		if (event instanceof MouseEvent) {
+			startPos = isVertical ? event.clientY : event.clientX;
+		} else {
+			startPos = isVertical ? event.touches[0].clientY : event.touches[0].clientX;
+		}
+
+		if (containerEl) {
+			containerEl.classList.add('is-dragging');
+		}
+	};
+
+	const handleDragMove = (event: MouseEvent | TouchEvent) => {
+		if (!isDragging || !containerEl || !viewportEl) return;
+
+		const currentPos =
+			event instanceof MouseEvent
+				? isVertical
+					? event.clientY
+					: event.clientX
+				: isVertical
+					? event.touches[0].clientY
+					: event.touches[0].clientX;
+
+		const diff = currentPos - startPos;
+		const viewportSize = isVertical ? viewportEl.offsetHeight : viewportEl.offsetWidth;
+		const percentageMoved = (diff / viewportSize) * 100;
+
+		currentTranslate = prevTranslate + percentageMoved;
+
+		const property = isVertical ? 'translateY' : 'translateX';
+		containerEl.style.transform = `${property}(calc(-${currentIndex * 100}% + ${diff}px))`;
+	};
+
+	const handleDragEnd = () => {
+		if (!isDragging) return;
+		isDragging = false;
+
+		if (containerEl) {
+			containerEl.classList.remove('is-dragging');
+		}
+
+		const movedBy = currentTranslate - prevTranslate;
+		const threshold = 15;
+
+		if (movedBy < -threshold && canGoNext) {
+			goToNext();
+		} else if (movedBy > threshold && canGoPrev) {
+			goToPrev();
+		} else {
+			updateTransform();
+		}
+
+		currentTranslate = 0;
+		prevTranslate = 0;
+
+		resetAutoplay();
+	};
+
+	const handleMouseDown = (event: MouseEvent) => {
+		event.preventDefault();
+		handleDragStart(event);
+	};
+
+	const handleMouseMove = (event: MouseEvent) => {
+		handleDragMove(event);
+	};
+
+	const handleMouseUp = () => {
+		handleDragEnd();
+	};
+
+	const handleTouchStart = (event: TouchEvent) => {
+		handleDragStart(event);
+	};
+
+	const handleTouchMove = (event: TouchEvent) => {
+		handleDragMove(event);
+	};
+
+	const handleTouchEnd = () => {
+		handleDragEnd();
+	};
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		switch (event.key) {
+			case 'ArrowLeft':
+			case 'ArrowUp':
+				event.preventDefault();
+				goToPrev();
+				break;
+			case 'ArrowRight':
+			case 'ArrowDown':
+				event.preventDefault();
+				goToNext();
+				break;
+		}
+	};
+
+	onMount(() => {
+		tick();
+		updateTransform();
+
+		if (autoplay) {
+			startAutoplay();
+		}
+
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
+		document.addEventListener('keydown', handleKeyDown);
+
+		return () => {
+			stopAutoplay();
+			document.removeEventListener('mousemove', handleMouseMove);
+			document.removeEventListener('mouseup', handleMouseUp);
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	});
+
+	$effect(() => {
+		if (containerEl) {
+			updateTransform();
+		}
+	});
+
+	$effect(() => {
+		slides;
+		if (containerEl) {
+			updateTransform();
+		}
+	});
+</script>
+
+<div class={cn('carousel', isVertical && 'is-vertical', className)}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="carousel-viewport"
+		bind:this={viewportEl}
+		class:is-dragging={isDragging}
+		onmousedown={handleMouseDown}
+		ontouchstart={handleTouchStart}
+		ontouchmove={handleTouchMove}
+		ontouchend={handleTouchEnd}
+	>
+		<div
+			class={cn('carousel-container', isDragging && 'is-dragging', isVertical && 'is-vertical')}
+			bind:this={containerEl}
+		>
+			{#each slides as slide (slide.id)}
+				<div class={cn('carousel-slide', slideClass)}>
+					{@render slide.content()}
+				</div>
+			{/each}
+		</div>
+
+		{#if showNavigation}
+			<button
+				type="button"
+				class={cn('carousel-nav is-prev', sizeClasses[size])}
+				onclick={goToPrev}
+				disabled={!canGoPrev}
+				aria-label="Previous slide"
+			>
+				{#if isVertical}
+					<Icon icon={ArrowUp24RegularIcon} />
+				{:else}
+					<Icon icon={ArrowLeft24RegularIcon} />
+				{/if}
+			</button>
+
+			<button
+				type="button"
+				class={cn('carousel-nav is-next', sizeClasses[size])}
+				onclick={goToNext}
+				disabled={!canGoNext}
+				aria-label="Next slide"
+			>
+				{#if isVertical}
+					<Icon icon={ArrowDown24RegularIcon} />
+				{:else}
+					<Icon icon={ArrowRight24RegularIcon} />
+				{/if}
+			</button>
+		{/if}
+	</div>
+
+	{#if showControls || showIndicators || showCounter}
+		<div class={cn('carousel-controls', isVertical && 'is-vertical')}>
+			{#if showControls}
+				<Button isDisabled={!canGoPrev} onclick={goToPrev} variant="ghost">
+					{#if isVertical}
+						<Icon icon={ArrowUp24RegularIcon} />
+					{:else}
+						<Icon icon={ArrowLeft24RegularIcon} />
+					{/if}
+				</Button>
+			{/if}
+
+			{#if showIndicators}
+				<div class={cn('carousel-indicators', isVertical && 'is-vertical')}>
+					{#each slides as slide, index (slide.id)}
+						<button
+							type="button"
+							class={cn(
+								'carousel-indicator',
+								sizeClasses[size],
+								currentIndex === index && 'is-active',
+								indicatorType === 'dot' && 'is-dot'
+							)}
+							onclick={() => goToSlide(index)}
+							aria-label={`Go to slide ${index + 1}`}
+						></button>
+					{/each}
+				</div>
+			{/if}
+
+			{#if showCounter}
+				<div class="carousel-counter">
+					{currentIndex + 1} / {slides.length}
+				</div>
+			{/if}
+
+			{#if showControls}
+				<Button isDisabled={!canGoNext} onclick={goToNext} variant="ghost">
+					{#if isVertical}
+						<Icon icon={ArrowDown24RegularIcon} />
+					{:else}
+						<Icon icon={ArrowRight24RegularIcon} />
+					{/if}
+				</Button>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+type Slide = {
+    id: string | number;
+    content: Snippet;
+};
+type Props = {
+    slides: Slide[];
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    loop?: boolean;
+    showControls?: boolean;
+    showIndicators?: boolean;
+    showNavigation?: boolean;
+    showCounter?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'primary' | 'secondary' | 'muted' | 'default';
+    size?: 'sm' | 'md' | 'lg';
+    indicatorType?: 'bar' | 'dot';
+    class?: string;
+    slideClass?: string;
+    onSlideChange?: (index: number) => void;
+};
+declare const Carousel: import("svelte").Component<Props, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/display/ChatBox.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+	import type { ChatState } from '../hooks/use-chat.svelte.js';
+	import {
+		Attach24RegularIcon,
+		Camera24RegularIcon,
+		Microphone2LinearIcon,
+		MoreVertical24RegularIcon,
+		Search24RegularIcon,
+		Send24RegularIcon
+	} from '../icons/index.js';
+	import { Avatar, Record, Audio, Button, Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		class?: string;
+		chat: ChatState;
+		currentUserId: string;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'muted'
+			| 'outlined';
+		userName: string;
+		userAvatar?: string;
+		userStatus?: string;
+		headerActions?: Snippet;
+		onVoiceNote?: (blob: Blob, url: string) => void;
+		onFileAttach?: (file: File) => void;
+		onCameraCapture?: () => void;
+	};
+
+	let {
+		class: className,
+		chat,
+		currentUserId,
+		variant = 'primary',
+		userName,
+		userAvatar,
+		userStatus = 'Online',
+		headerActions,
+		onVoiceNote,
+		onFileAttach,
+		onCameraCapture
+	}: Props = $props();
+
+	let messageInput = $state('');
+	let messagesContainer: HTMLDivElement;
+	let fileInput: HTMLInputElement;
+	let isRecording = $state(false);
+
+	function handleSend() {
+		if (messageInput.trim()) {
+			chat.sendMessage(messageInput);
+			messageInput = '';
+			scrollToBottom();
+		}
+	}
+
+	function handleKeyPress(e: KeyboardEvent) {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			handleSend();
+		}
+	}
+
+	function scrollToBottom() {
+		if (messagesContainer) {
+			setTimeout(() => {
+				messagesContainer.scrollTop = messagesContainer.scrollHeight;
+			}, 0);
+		}
+	}
+
+	function handleFileSelect(e: Event) {
+		const target = e.target as HTMLInputElement;
+		const file = target.files?.[0];
+		if (file) {
+			if (onFileAttach) {
+				onFileAttach(file);
+			} else {
+				const type = file.type.startsWith('image/')
+					? 'image'
+					: file.type.startsWith('audio/')
+						? 'voice'
+						: 'file';
+				chat.sendMessage(file.name, type, {
+					fileUrl: URL.createObjectURL(file),
+					fileName: file.name
+				});
+			}
+		}
+	}
+
+	function handleRecordingComplete(blob: Blob, url: string) {
+		if (onVoiceNote) {
+			onVoiceNote(blob, url);
+		} else {
+			chat.sendMessage('Voice note', 'voice', {
+				fileUrl: url,
+				fileName: 'voice-note.webm'
+			});
+		}
+		isRecording = false;
+	}
+
+	function toggleRecording() {
+		isRecording = !isRecording;
+	}
+
+	function formatTime(timestamp: Date | string) {
+		const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
+		return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
+	}
+
+	$effect(() => {
+		if (chat.messages.length > 0) {
+			scrollToBottom();
+		}
+	});
+</script>
+
+<div class={cn('chatbox', `chatbox-${variant}`, className)}>
+	<!-- Header -->
+	<div class="chatbox-header">
+		<div class="chatbox-header-start">
+			<Avatar src={userAvatar} alt={userName} size="sm" />
+			<div class="chatbox-header-center">
+				<div class="chatbox-header-name">{userName}</div>
+				<div class="chatbox-header-status">{userStatus}</div>
+			</div>
+		</div>
+		<div class="chatbox-header-end">
+			{#if headerActions}
+				{@render headerActions()}
+			{:else}
+				<Button size="sm" variant="ghost">
+					<Icon icon={Search24RegularIcon} />
+				</Button>
+				<Button size="sm" variant="ghost">
+					<Icon icon={MoreVertical24RegularIcon} />
+				</Button>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Messages -->
+	<div class="chatbox-messages" bind:this={messagesContainer}>
+		{#if chat.hasMore}
+			<button class="load-more-btn" onclick={() => chat.loadMore()} disabled={chat.isLoading}>
+				{chat.isLoading ? 'Loading...' : 'Load more messages'}
+			</button>
+		{/if}
+
+		{#each chat.messages as message}
+			{@const isOwn = message.senderId === currentUserId}
+			<div class="message-wrapper" class:own={isOwn}>
+				<div class="message" class:own={isOwn}>
+					{#if message.type === 'image'}
+						<!-- svelte-ignore a11y_img_redundant_alt -->
+						<img src={message.metadata?.fileUrl} alt="Shared image" class="message-image" />
+					{:else if message.type === ('voice' as any)}
+						<Audio
+							src={message.metadata?.fileUrl || ''}
+							variant={isOwn ? variant : ('muted' as any)}
+						/>
+					{:else if message.type === 'file'}
+						<div class="message-file">
+							<span class="message-file-icon">📎</span>
+							<span class="message-file-name">{message.metadata?.fileName || 'File'}</span>
+						</div>
+					{:else}
+						<div class="message-content">{message.content}</div>
+					{/if}
+
+					<div class="message-meta">
+						<span class="message-time">{formatTime(message.timestamp)}</span>
+						{#if isOwn}
+							<span class="message-status">
+								{#if message.status === 'sending'}⏱{/if}
+								{#if message.status === 'sent'}✓{/if}
+								{#if message.status === 'delivered'}✓✓{/if}
+								{#if message.status === 'read'}
+									<span class="message-status-read">✓✓</span>
+								{/if}
+								{#if message.status === 'error'}⚠{/if}
+							</span>
+						{/if}
+					</div>
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	<!-- Recording Overlay -->
+	{#if isRecording}
+		<div class="chatbox-record-overlay">
+			<Record name="voice-note" {variant} onRecordingComplete={handleRecordingComplete} />
+		</div>
+	{/if}
+
+	<!-- Footer -->
+	<div class="chatbox-footer">
+		<label class="chatbox-input-wrapper">
+			<label class="flex-1">
+				<input
+					bind:value={messageInput}
+					placeholder="Type a message..."
+					onkeydown={handleKeyPress}
+					disabled={chat.isSending}
+					class="chatbox-input"
+				/>
+			</label>
+
+			<div class="chatbox-input-actions">
+				<Button size="sm" variant="ghost" onclick={toggleRecording}>
+					<Icon icon={Microphone2LinearIcon} />
+				</Button>
+				<Button size="sm" variant="ghost" onclick={() => fileInput.click()}>
+					<Icon icon={Attach24RegularIcon} />
+				</Button>
+				<input
+					type="file"
+					bind:this={fileInput}
+					onchange={handleFileSelect}
+					style="display: none"
+				/>
+				{#if onCameraCapture}
+					<Button size="sm" variant="ghost" onclick={onCameraCapture}>
+						<Icon icon={Camera24RegularIcon} />
+					</Button>
+				{/if}
+			</div>
+
+			<Button
+				size="sm"
+				{variant}
+				onclick={handleSend}
+				isDisabled={chat.isSending || !messageInput.trim()}
+			>
+				<Icon icon={Send24RegularIcon} />
+			</Button>
+		</label>
+	</div>
+</div>

package/dist/display/ChatBox.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ChatState } from '../hooks/use-chat.svelte.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    chat: ChatState;
+    currentUserId: string;
+    variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'muted' | 'outlined';
+    userName: string;
+    userAvatar?: string;
+    userStatus?: string;
+    headerActions?: Snippet;
+    onVoiceNote?: (blob: Blob, url: string) => void;
+    onFileAttach?: (file: File) => void;
+    onCameraCapture?: () => void;
+};
+declare const ChatBox: import("svelte").Component<Props, {}, "">;
+type ChatBox = ReturnType<typeof ChatBox>;
+export default ChatBox;

package/dist/display/Chip.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+	import type { IconData } from './Icon.svelte';
+	import { Icon } from '../index.js';
+
+	type Props = {
+		children: Snippet;
+		onclose?: () => void;
+		type?: 'solid' | 'soft';
+		variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		startIcon?: IconData;
+		endIcon?: IconData;
+		hasShadow?: boolean;
+		isSolid?: boolean;
+	};
+
+	const {
+		children,
+		onclose,
+		variant = 'primary',
+		size = 'sm',
+		class: className,
+		startIcon,
+		endIcon,
+		hasShadow,
+		isSolid
+	}: Props = $props();
+
+	const variants = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger'
+	};
+
+	const sizes = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+</script>
+
+<button
+	onclick={() => onclose?.()}
+	class={cn(
+		'chip',
+		variants[variant],
+		sizes[size],
+		isSolid && 'is-solid',
+		hasShadow && 'has-shadow',
+		className
+	)}
+>
+	{#if startIcon}
+		<Icon icon={startIcon} />
+	{/if}
+	{@render children()}
+	{#if endIcon}
+		<Icon icon={endIcon} />
+	{/if}
+</button>