@joewinke/jatui 0.1.0

package/src/lib/components/LoadingSpinner.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	/**
+	 * LoadingSpinner Component
+	 *
+	 * Customizable DaisyUI loading spinner with text, overlay, and speed options.
+	 */
+
+	interface Props {
+		type?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity' | 'pulse';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		text?: string;
+		textPosition?: 'top' | 'bottom' | 'left' | 'right';
+		overlay?: boolean;
+		centered?: boolean;
+		color?: string;
+		ariaLabel?: string;
+		visible?: boolean;
+		speed?: 'slow' | 'normal' | 'fast';
+		class?: string;
+	}
+
+	let {
+		type = 'spinner',
+		size = 'md',
+		text = '',
+		textPosition = 'bottom',
+		overlay = false,
+		centered = false,
+		color = '',
+		ariaLabel = 'Loading',
+		visible = true,
+		speed = 'normal',
+		class: className = ''
+	}: Props = $props();
+
+	const sizeClass = $derived(
+		{ xs: 'loading-xs', sm: 'loading-sm', md: 'loading-md', lg: 'loading-lg', xl: 'loading-xl' }[size]
+	);
+
+	const typeClass = $derived(
+		{
+			spinner: 'loading-spinner',
+			dots: 'loading-dots',
+			ring: 'loading-ring',
+			ball: 'loading-ball',
+			bars: 'loading-bars',
+			infinity: 'loading-infinity',
+			pulse: 'loading-pulse'
+		}[type]
+	);
+
+	const speedClass = $derived(
+		{ slow: '[animation-duration:2s]', normal: '', fast: '[animation-duration:0.5s]' }[speed]
+	);
+
+	const spinnerClass = $derived(
+		['loading', typeClass, sizeClass, speedClass, color ? '' : 'text-primary', className]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const containerClass = $derived(
+		[
+			overlay ? 'fixed inset-0 bg-black/50 flex items-center justify-center z-50' : '',
+			centered && !overlay ? 'flex items-center justify-center' : '',
+			textPosition === 'left' || textPosition === 'right' ? 'flex items-center' : '',
+			textPosition === 'top' || textPosition === 'bottom' ? 'flex flex-col items-center' : ''
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const textClass = $derived(
+		['text-sm text-base-content/70', { top: 'mb-2', bottom: 'mt-2', left: 'mr-2', right: 'ml-2' }[textPosition]]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const spinnerStyle = $derived(color ? `color: ${color}` : '');
+</script>
+
+{#if visible}
+	<div class={containerClass} aria-label={ariaLabel} role="status" aria-live="polite">
+		{#if text && textPosition === 'top'}
+			<div class={textClass}>{text}</div>
+		{/if}
+		{#if text && textPosition === 'left'}
+			<div class={textClass}>{text}</div>
+		{/if}
+
+		<div class={spinnerClass} style={spinnerStyle}></div>
+
+		{#if text && textPosition === 'right'}
+			<div class={textClass}>{text}</div>
+		{/if}
+		{#if text && textPosition === 'bottom'}
+			<div class={textClass}>{text}</div>
+		{/if}
+
+		<span class="sr-only">{ariaLabel}</span>
+	</div>
+{/if}

package/src/lib/components/Modal.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	/**
+	 * Modal Component
+	 *
+	 * Overlay dialog with focus trap, backdrop click, escape key, and body scroll lock.
+	 * Converted from Svelte 4 to Svelte 5 runes.
+	 */
+
+	import { onMount } from 'svelte';
+
+	interface Props {
+		open?: boolean;
+		title?: string;
+		size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+		showCloseButton?: boolean;
+		closeOnBackdrop?: boolean;
+		closeOnEscape?: boolean;
+		showHeader?: boolean;
+		showFooter?: boolean;
+		class?: string;
+		contentClass?: string;
+		ariaLabel?: string;
+		dismissible?: boolean;
+		zIndex?: number;
+		onclose?: () => void;
+		onopen?: () => void;
+		header?: import('svelte').Snippet;
+		footer?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title = '',
+		size = 'md',
+		showCloseButton = true,
+		closeOnBackdrop = true,
+		closeOnEscape = true,
+		showHeader = true,
+		showFooter = false,
+		class: className = '',
+		contentClass = '',
+		ariaLabel = '',
+		dismissible = true,
+		zIndex = 1000,
+		onclose,
+		onopen,
+		header,
+		footer,
+		children
+	}: Props = $props();
+
+	let modalElement: HTMLDialogElement | undefined = $state();
+	let previousFocus: HTMLElement | null = null;
+
+	const sizeClass = $derived(
+		{ sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-lg', xl: 'max-w-xl', full: 'max-w-full h-full' }[size]
+	);
+
+	const modalClass = $derived(['modal', open ? 'modal-open' : '', className].filter(Boolean).join(' '));
+
+	const contentClasses = $derived(
+		[
+			'modal-box relative bg-base-100 text-base-content',
+			sizeClass,
+			size === 'full' ? 'h-full rounded-none' : '',
+			contentClass
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	$effect(() => {
+		if (typeof document === 'undefined') return;
+		if (open) {
+			previousFocus = document.activeElement as HTMLElement;
+			document.body.style.overflow = 'hidden';
+			requestAnimationFrame(() => modalElement?.focus());
+			onopen?.();
+		} else {
+			document.body.style.overflow = '';
+			previousFocus?.focus();
+			previousFocus = null;
+		}
+	});
+
+	function close() {
+		if (dismissible) {
+			open = false;
+			onclose?.();
+		}
+	}
+
+	function handleBackdropClick(event: Event) {
+		if (closeOnBackdrop && event.target === event.currentTarget) {
+			close();
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Tab') {
+			trapFocus(event);
+		}
+	}
+
+	function handleWindowKeyDown(event: KeyboardEvent) {
+		if (open && event.key === 'Escape' && closeOnEscape) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			close();
+		}
+	}
+
+	function trapFocus(event: KeyboardEvent) {
+		if (!modalElement) return;
+		const focusableElements = modalElement.querySelectorAll(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+		);
+		const firstFocusable = focusableElements[0] as HTMLElement;
+		const lastFocusable = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+		if (event.shiftKey) {
+			if (document.activeElement === firstFocusable) {
+				event.preventDefault();
+				lastFocusable.focus();
+			}
+		} else {
+			if (document.activeElement === lastFocusable) {
+				event.preventDefault();
+				firstFocusable.focus();
+			}
+		}
+	}
+
+	onMount(() => {
+		return () => {
+			if (typeof document !== 'undefined') {
+				document.body.style.overflow = '';
+			}
+		};
+	});
+</script>
+
+<svelte:window onkeydown={handleWindowKeyDown} />
+
+{#if open}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<dialog
+		bind:this={modalElement}
+		class={modalClass}
+		style="z-index: {zIndex}"
+		aria-modal="true"
+		aria-label={ariaLabel || title}
+		open
+		onkeydown={handleKeyDown}
+		tabindex="-1"
+	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="modal-backdrop" onclick={handleBackdropClick}>
+			<div class={contentClasses}>
+				{#if showHeader && (title || showCloseButton || header)}
+					<div class="flex items-center justify-between mb-4">
+						{#if header}
+							{@render header()}
+						{:else if title}
+							<h2 class="text-lg font-semibold">{title}</h2>
+						{/if}
+
+						{#if showCloseButton && dismissible}
+							<button type="button" class="btn btn-sm btn-circle btn-primary" onclick={close} aria-label="Close modal">
+								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+							</button>
+						{/if}
+					</div>
+				{/if}
+
+				<div class="modal-content">
+					{#if children}
+						{@render children()}
+					{/if}
+				</div>
+
+				{#if showFooter && footer}
+					<div class="modal-action mt-6">
+						{@render footer()}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</dialog>
+{/if}
+
+<style>
+	.modal-backdrop {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

package/src/lib/components/PhoneInput.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	/**
+	 * PhoneInput Component
+	 *
+	 * Tel input with basic validation and format indicator.
+	 * Converted from Svelte 4 to Svelte 5 runes.
+	 */
+
+	interface Props {
+		label: string;
+		value?: string;
+		required?: boolean;
+		disabled?: boolean;
+		error?: string;
+		helpText?: string;
+		placeholder?: string;
+		class?: string;
+		id?: string;
+		name?: string;
+		oninput?: (value: string, isValid: boolean) => void;
+	}
+
+	let {
+		label,
+		value = $bindable(''),
+		required = false,
+		disabled = false,
+		error = '',
+		helpText = '',
+		placeholder = '',
+		class: className = '',
+		id = `phone-input-${Math.random().toString(36).substr(2, 9)}`,
+		name = '',
+		oninput
+	}: Props = $props();
+
+	const displayPlaceholder = $derived(placeholder || '(555) 123-4567');
+	const isValid = $derived(
+		/^[\d\s\-\(\)\.+]{10,}$/.test(value) && value.replace(/\D/g, '').length === 10
+	);
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		value = target.value;
+		oninput?.(value, isValid);
+	}
+</script>
+
+<div class="form-control w-full">
+	<label for={id} class="label">
+		<span class="label-text font-medium">
+			{label}
+			{#if required}
+				<span class="text-error ml-1">*</span>
+			{/if}
+		</span>
+	</label>
+
+	<input
+		{id}
+		{name}
+		type="tel"
+		{required}
+		{disabled}
+		placeholder={displayPlaceholder}
+		{value}
+		oninput={handleInput}
+		pattern="[0-9\s\-\(\)\.+]*"
+		class="input input-bordered w-full {error ? 'input-error' : ''} {className}"
+		aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+		aria-invalid={error ? 'true' : 'false'}
+		autocomplete="tel"
+	/>
+
+	{#if error}
+		<div class="label">
+			<span id="{id}-error" class="label-text-alt text-error" role="alert">{error}</span>
+		</div>
+	{:else if helpText}
+		<div class="label">
+			<span id="{id}-help" class="label-text-alt text-base-content/70">{helpText}</span>
+		</div>
+	{/if}
+
+	{#if value && !error}
+		<div class="label">
+			<span class="label-text-alt {isValid ? 'text-success' : 'text-warning'}">
+				{isValid ? '✓ Valid phone number' : '⚠ Invalid phone number'}
+			</span>
+		</div>
+	{/if}
+</div>

package/src/lib/components/ResizableDivider.svelte

@@ -0,0 +1,305 @@
+<script lang="ts">
+	/**
+	 * ResizableDivider Component
+	 * A draggable divider for resizing split panels.
+	 *
+	 * Features:
+	 * - Horizontal drag handle with grippy visual
+	 * - Mouse and touch support
+	 * - Emits percentage changes via callback
+	 * - Visual feedback on hover/drag
+	 * - Snap-to-collapse support with click-to-restore
+	 * - Proximity detection: grows larger when mouse approaches
+	 * - Glow effect on hover for better visibility
+	 */
+
+	interface Props {
+		onResize: (deltaY: number) => void;
+		class?: string;
+		/** Whether a panel is currently collapsed */
+		isCollapsed?: boolean;
+		/** Which direction the panel collapsed ('top' = top panel hidden, 'bottom' = bottom panel hidden) */
+		collapsedDirection?: 'top' | 'bottom' | null;
+		/** Callback when clicking the divider while collapsed (to restore) */
+		onCollapsedClick?: () => void;
+	}
+
+	let {
+		onResize,
+		class: className = '',
+		isCollapsed = false,
+		collapsedDirection = null,
+		onCollapsedClick
+	}: Props = $props();
+
+	let isDragging = $state(false);
+	let isNearby = $state(false);
+	let isHovering = $state(false);
+	let startY = $state(0);
+	let dividerElement: HTMLDivElement | undefined = $state();
+
+	// Proximity detection threshold in pixels
+	const PROXIMITY_THRESHOLD = 24;
+
+	function handleMouseDown(e: MouseEvent) {
+		if (isCollapsed && onCollapsedClick) {
+			onCollapsedClick();
+			return;
+		}
+
+		e.preventDefault();
+		isDragging = true;
+		startY = e.clientY;
+
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		if (!isDragging) return;
+		const deltaY = e.clientY - startY;
+		startY = e.clientY;
+		onResize(deltaY);
+	}
+
+	function handleMouseUp() {
+		isDragging = false;
+		document.removeEventListener('mousemove', handleMouseMove);
+		document.removeEventListener('mouseup', handleMouseUp);
+	}
+
+	function handleTouchStart(e: TouchEvent) {
+		if (isCollapsed && onCollapsedClick) {
+			onCollapsedClick();
+			return;
+		}
+
+		if (e.touches.length !== 1) return;
+		isDragging = true;
+		startY = e.touches[0].clientY;
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!isDragging || e.touches.length !== 1) return;
+		const deltaY = e.touches[0].clientY - startY;
+		startY = e.touches[0].clientY;
+		onResize(deltaY);
+	}
+
+	function handleTouchEnd() {
+		isDragging = false;
+	}
+
+	function handleMouseEnter() {
+		isHovering = true;
+	}
+
+	function handleMouseLeave() {
+		isHovering = false;
+	}
+
+	function handleProximityMove(e: MouseEvent) {
+		if (!dividerElement || isDragging) return;
+
+		const rect = dividerElement.getBoundingClientRect();
+		const dividerCenterY = rect.top + rect.height / 2;
+		const distance = Math.abs(e.clientY - dividerCenterY);
+
+		isNearby = distance <= PROXIMITY_THRESHOLD;
+	}
+
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+
+		document.addEventListener('mousemove', handleProximityMove);
+
+		return () => {
+			document.removeEventListener('mousemove', handleProximityMove);
+		};
+	});
+
+	const isExpanded = $derived(isDragging || isHovering || isNearby);
+</script>
+
+<div
+	bind:this={dividerElement}
+	class="divider-container flex items-center justify-center select-none {className} {isCollapsed ? 'cursor-pointer divider-collapsed' : 'cursor-row-resize'} {isDragging ? 'bg-primary/25' : isExpanded && isCollapsed ? 'bg-primary/40' : isExpanded ? 'bg-primary/15' : ''}"
+	class:expanded={isExpanded}
+	class:dragging={isDragging}
+	role="separator"
+	aria-orientation="horizontal"
+	aria-expanded={!isCollapsed}
+	tabindex="0"
+	onmousedown={handleMouseDown}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	ontouchstart={handleTouchStart}
+	ontouchmove={handleTouchMove}
+	ontouchend={handleTouchEnd}
+>
+	{#if isCollapsed}
+		<div class="collapsed-indicator">
+			<div class="indicator-line"></div>
+			<div class="indicator-dots">
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+			<div class="indicator-line"></div>
+		</div>
+	{:else}
+		<div class="grippy-handle">
+			<div class="grip-line"></div>
+			<div class="grip-line"></div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.divider-container {
+		height: 8px;
+		min-height: 8px;
+		transition:
+			height 200ms cubic-bezier(0.4, 0, 0.2, 1),
+			background 200ms ease,
+			box-shadow 200ms ease;
+	}
+
+	.divider-container.expanded {
+		height: 16px;
+		min-height: 16px;
+		box-shadow:
+			0 0 12px color-mix(in oklch, var(--color-primary) 40%, transparent),
+			inset 0 0 8px color-mix(in oklch, var(--color-primary) 20%, transparent);
+	}
+
+	.divider-container.dragging {
+		height: 16px;
+		min-height: 16px;
+		box-shadow:
+			0 0 20px color-mix(in oklch, var(--color-primary) 50%, transparent),
+			inset 0 0 12px color-mix(in oklch, var(--color-primary) 30%, transparent);
+	}
+
+	.grippy-handle {
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
+		padding: 4px 32px;
+		border-radius: 4px;
+		transition:
+			opacity 200ms ease,
+			transform 200ms ease;
+		opacity: 0.4;
+	}
+
+	.divider-container.expanded .grippy-handle {
+		opacity: 1;
+		transform: scaleY(1.2);
+	}
+
+	.divider-container.dragging .grippy-handle {
+		opacity: 1;
+		transform: scaleY(1.3);
+	}
+
+	.grip-line {
+		width: 32px;
+		height: 2px;
+		border-radius: 1px;
+		background: var(--color-base-content);
+		opacity: 0.4;
+		transition: background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
+	}
+
+	.divider-container.expanded .grip-line {
+		background: var(--color-primary);
+		opacity: 0.8;
+		box-shadow: 0 0 6px color-mix(in oklch, var(--color-primary) 50%, transparent);
+	}
+
+	.divider-container.dragging .grip-line {
+		background: var(--color-primary);
+		opacity: 1;
+		box-shadow: 0 0 8px color-mix(in oklch, var(--color-primary) 60%, transparent);
+	}
+
+	.divider-collapsed {
+		height: 6px;
+		min-height: 6px;
+		background: var(--color-base-200);
+		border-color: var(--color-base-300) !important;
+	}
+
+	.divider-collapsed.expanded {
+		height: 20px;
+		min-height: 20px;
+		box-shadow:
+			0 0 16px color-mix(in oklch, var(--color-primary) 50%, transparent),
+			inset 0 0 10px color-mix(in oklch, var(--color-primary) 30%, transparent);
+	}
+
+	.collapsed-indicator {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		padding: 0 16px;
+		transition: transform 200ms ease;
+	}
+
+	.divider-collapsed.expanded .collapsed-indicator {
+		transform: scaleY(1.5);
+	}
+
+	.indicator-line {
+		flex: 1;
+		height: 1px;
+		background: linear-gradient(
+			90deg,
+			transparent 0%,
+			color-mix(in oklch, var(--color-base-content) 30%, transparent) 20%,
+			color-mix(in oklch, var(--color-base-content) 30%, transparent) 80%,
+			transparent 100%
+		);
+		transition: background 200ms ease, height 200ms ease;
+	}
+
+	.divider-collapsed.expanded .indicator-line {
+		height: 2px;
+		background: linear-gradient(
+			90deg,
+			transparent 0%,
+			color-mix(in oklch, var(--color-primary) 70%, transparent) 15%,
+			color-mix(in oklch, var(--color-primary) 70%, transparent) 85%,
+			transparent 100%
+		);
+	}
+
+	.indicator-dots {
+		display: flex;
+		gap: 3px;
+		opacity: 0.5;
+		transition: opacity 200ms ease, transform 200ms ease, gap 200ms ease;
+	}
+
+	.indicator-dots span {
+		width: 3px;
+		height: 3px;
+		border-radius: 50%;
+		background: var(--color-base-content);
+		transition: width 200ms ease, height 200ms ease, background 200ms ease, box-shadow 200ms ease;
+	}
+
+	.divider-collapsed.expanded .indicator-dots {
+		opacity: 1;
+		gap: 5px;
+	}
+
+	.divider-collapsed.expanded .indicator-dots span {
+		width: 5px;
+		height: 5px;
+		background: var(--color-primary);
+		box-shadow: 0 0 8px color-mix(in oklch, var(--color-primary) 70%, transparent);
+	}
+</style>