@joewinke/jatui 0.1.0

package/src/lib/components/SelectInput.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+	/**
+	 * SelectInput Component
+	 *
+	 * Dropdown select with searchable mode, grouped options, and validation.
+	 * Converted from Svelte 4 to Svelte 5 runes.
+	 */
+
+	import { onMount } from 'svelte';
+
+	export interface SelectOption {
+		value: string | number;
+		label: string;
+		disabled?: boolean;
+		group?: string;
+	}
+
+	interface Props {
+		label: string;
+		value?: string | number;
+		options?: SelectOption[];
+		placeholder?: string;
+		required?: boolean;
+		disabled?: boolean;
+		searchable?: boolean;
+		error?: string;
+		helpText?: string;
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		id?: string;
+		name?: string;
+		clearSearchOnSelect?: boolean;
+		onchange?: (value: string | number, option: SelectOption | undefined) => void;
+	}
+
+	let {
+		label,
+		value = $bindable(''),
+		options = [],
+		placeholder = 'Select an option',
+		required = false,
+		disabled = false,
+		searchable = false,
+		error = '',
+		helpText = '',
+		size = 'md',
+		class: className = '',
+		id = `select-input-${Math.random().toString(36).substr(2, 9)}`,
+		name = '',
+		clearSearchOnSelect = true,
+		onchange
+	}: Props = $props();
+
+	let searchTerm = $state('');
+	let isOpen = $state(false);
+	let selectElement: HTMLElement | undefined = $state();
+
+	const sizeClass = $derived({ sm: 'select-sm', md: '', lg: 'select-lg' }[size]);
+
+	const selectClass = $derived(
+		['select select-bordered w-full', sizeClass, error ? 'select-error' : '', disabled ? 'select-disabled' : '', className]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const filteredOptions = $derived(
+		searchable && searchTerm
+			? options.filter((o) => o.label.toLowerCase().includes(searchTerm.toLowerCase()))
+			: options
+	);
+
+	const selectedOption = $derived(options.find((o) => o.value === value));
+
+	const groupedOptions = $derived(
+		filteredOptions.reduce(
+			(acc, option) => {
+				const group = option.group || 'default';
+				if (!acc[group]) acc[group] = [];
+				acc[group].push(option);
+				return acc;
+			},
+			{} as Record<string, SelectOption[]>
+		)
+	);
+
+	function handleSelect(option: SelectOption) {
+		if (option.disabled) return;
+		value = option.value;
+		onchange?.(value, option);
+		if (clearSearchOnSelect) searchTerm = '';
+		isOpen = false;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			isOpen = false;
+			searchTerm = '';
+		}
+	}
+
+	function handleClickOutside(event: Event) {
+		if (selectElement && !selectElement.contains(event.target as Node)) {
+			isOpen = false;
+			searchTerm = '';
+		}
+	}
+
+	function handleNativeChange(e: Event) {
+		const target = e.currentTarget as HTMLSelectElement;
+		const option = options.find((opt) => opt.value.toString() === target.value);
+		onchange?.(value!, option);
+	}
+
+	onMount(() => {
+		document.addEventListener('click', handleClickOutside);
+		return () => document.removeEventListener('click', handleClickOutside);
+	});
+</script>
+
+<div class="form-control w-full" bind:this={selectElement}>
+	<label for={id} class="label">
+		<span class="label-text font-medium">
+			{label}
+			{#if required}
+				<span class="text-error ml-1">*</span>
+			{/if}
+		</span>
+	</label>
+
+	{#if searchable}
+		<div class="dropdown w-full {isOpen ? 'dropdown-open' : ''}">
+			<div tabindex="0" role="button" class="btn btn-outline w-full justify-between {sizeClass}">
+				<input
+					{id}
+					{name}
+					type="text"
+					placeholder={selectedOption?.label || placeholder}
+					bind:value={searchTerm}
+					onfocus={() => (isOpen = true)}
+					onkeydown={handleKeydown}
+					class="input input-ghost w-full p-0 h-auto min-h-0 focus:outline-none"
+					{disabled}
+					{required}
+					aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+					aria-invalid={error ? 'true' : 'false'}
+				/>
+				<svg class="w-4 h-4 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+				</svg>
+			</div>
+
+			{#if isOpen}
+				<div class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-auto">
+					{#each Object.entries(groupedOptions) as [groupName, groupOpts]}
+						{#if groupName !== 'default'}
+							<div class="menu-title"><span>{groupName}</span></div>
+						{/if}
+						{#each groupOpts as option}
+							<li>
+								<button
+									type="button"
+									class="text-left {option.disabled ? 'disabled' : ''}"
+									class:active={option.value === value}
+									onclick={() => handleSelect(option)}
+									disabled={option.disabled}
+								>
+									{option.label}
+								</button>
+							</li>
+						{/each}
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<select
+			{id}
+			{name}
+			{required}
+			{disabled}
+			bind:value
+			class={selectClass}
+			aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+			aria-invalid={error ? 'true' : 'false'}
+			onchange={handleNativeChange}
+		>
+			{#if placeholder}
+				<option value="" disabled>{placeholder}</option>
+			{/if}
+			{#each Object.entries(groupedOptions) as [groupName, groupOpts]}
+				{#if groupName !== 'default'}
+					<optgroup label={groupName}>
+						{#each groupOpts as option}
+							<option value={option.value} disabled={option.disabled}>{option.label}</option>
+						{/each}
+					</optgroup>
+				{:else}
+					{#each groupOpts as option}
+						<option value={option.value} disabled={option.disabled}>{option.label}</option>
+					{/each}
+				{/if}
+			{/each}
+		</select>
+	{/if}
+
+	{#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}
+</div>

package/src/lib/components/SignaturePad.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	/**
+	 * SignaturePad — Canvas-based digital signature capture with mouse and touch support.
+	 *
+	 * Exports `clear()` and `isEmpty()` methods. Outputs signature as base64 PNG data URL
+	 * via the bindable `signatureData` prop or `onSignatureChange` callback.
+	 */
+	import { onMount } from 'svelte';
+
+	let {
+		signatureData = $bindable(''),
+		onSignatureChange,
+		width = 400,
+		height = 150,
+		strokeColor = '#000',
+		strokeWidth = 2,
+		label = 'Signature',
+		required = false,
+		placeholder = 'Sign here',
+	}: {
+		signatureData?: string;
+		onSignatureChange?: (data: string) => void;
+		width?: number;
+		height?: number;
+		strokeColor?: string;
+		strokeWidth?: number;
+		label?: string;
+		required?: boolean;
+		placeholder?: string;
+	} = $props();
+
+	let canvas: HTMLCanvasElement;
+	let isDrawing = false;
+	let lastX = 0;
+	let lastY = 0;
+	let hasDrawn = $state(false);
+
+	onMount(() => {
+		if (!canvas) return;
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+
+		ctx.strokeStyle = strokeColor;
+		ctx.lineWidth = strokeWidth;
+		ctx.lineCap = 'round';
+		ctx.lineJoin = 'round';
+
+		function getCoordinates(e: MouseEvent | TouchEvent) {
+			const rect = canvas.getBoundingClientRect();
+			const scaleX = canvas.width / rect.width;
+			const scaleY = canvas.height / rect.height;
+
+			if (e instanceof MouseEvent) {
+				return {
+					x: (e.clientX - rect.left) * scaleX,
+					y: (e.clientY - rect.top) * scaleY
+				};
+			} else {
+				return {
+					x: (e.touches[0].clientX - rect.left) * scaleX,
+					y: (e.touches[0].clientY - rect.top) * scaleY
+				};
+			}
+		}
+
+		function startDrawing(e: MouseEvent | TouchEvent) {
+			e.preventDefault();
+			isDrawing = true;
+			const coords = getCoordinates(e);
+			lastX = coords.x;
+			lastY = coords.y;
+		}
+
+		function draw(e: MouseEvent | TouchEvent) {
+			if (!isDrawing) return;
+			e.preventDefault();
+
+			const coords = getCoordinates(e);
+			ctx.beginPath();
+			ctx.moveTo(lastX, lastY);
+			ctx.lineTo(coords.x, coords.y);
+			ctx.stroke();
+			lastX = coords.x;
+			lastY = coords.y;
+			hasDrawn = true;
+		}
+
+		function stopDrawing() {
+			if (isDrawing && hasDrawn) {
+				isDrawing = false;
+				signatureData = canvas.toDataURL();
+				onSignatureChange?.(signatureData);
+			}
+			isDrawing = false;
+		}
+
+		canvas.addEventListener('mousedown', startDrawing);
+		canvas.addEventListener('mousemove', draw);
+		canvas.addEventListener('mouseup', stopDrawing);
+		canvas.addEventListener('mouseleave', stopDrawing);
+
+		canvas.addEventListener('touchstart', startDrawing, { passive: false });
+		canvas.addEventListener('touchmove', draw, { passive: false });
+		canvas.addEventListener('touchend', stopDrawing);
+		canvas.addEventListener('touchcancel', stopDrawing);
+
+		return () => {
+			canvas.removeEventListener('mousedown', startDrawing);
+			canvas.removeEventListener('mousemove', draw);
+			canvas.removeEventListener('mouseup', stopDrawing);
+			canvas.removeEventListener('mouseleave', stopDrawing);
+			canvas.removeEventListener('touchstart', startDrawing);
+			canvas.removeEventListener('touchmove', draw);
+			canvas.removeEventListener('touchend', stopDrawing);
+			canvas.removeEventListener('touchcancel', stopDrawing);
+		};
+	});
+
+	export function clear() {
+		if (!canvas) return;
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		signatureData = '';
+		hasDrawn = false;
+		onSignatureChange?.('');
+	}
+
+	export function isEmpty(): boolean {
+		return !hasDrawn || !signatureData;
+	}
+</script>
+
+<div class="signature-pad-container">
+	{#if label}
+		<div class="flex justify-between items-center mb-2">
+			<label class="text-sm text-base-content/70">
+				{label}
+				{#if required}
+					<span class="text-error">*</span>
+				{/if}
+			</label>
+			<button type="button" onclick={() => clear()} class="btn btn-ghost btn-xs">
+				Clear
+			</button>
+		</div>
+	{/if}
+
+	<div class="border-2 border-base-300 rounded-lg bg-white overflow-hidden relative">
+		<canvas
+			bind:this={canvas}
+			{width}
+			{height}
+			class="w-full touch-none cursor-crosshair"
+		></canvas>
+
+		{#if !hasDrawn}
+			<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+				<span class="text-base-content/30 text-sm">{placeholder}</span>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	canvas {
+		display: block;
+	}
+</style>

package/src/lib/components/SortDropdown.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	/**
+	 * SortDropdown Component - Reusable sort dropdown with optional filter input
+	 *
+	 * A standardized dropdown for sorting lists with:
+	 * - Sort button showing current option icon, label, and direction indicator
+	 * - Dropdown menu with configurable sort options
+	 * - Optional filter input for search/filtering
+	 */
+
+	type SortDirection = 'asc' | 'desc';
+
+	export interface SortOption {
+		value: string;
+		label: string;
+		icon: string;
+		defaultDir?: SortDirection;
+	}
+
+	interface Props {
+		/** Sort options array (required) */
+		options: SortOption[];
+		/** Current sort value */
+		sortBy: string;
+		/** Current sort direction */
+		sortDir: SortDirection;
+		/** Current filter input value */
+		filterValue?: string;
+		/** Whether to show the filter input */
+		showFilter?: boolean;
+		/** Placeholder text for filter input */
+		filterPlaceholder?: string;
+		/** Button size variant */
+		size?: 'xs' | 'sm' | 'md';
+		/** Show label on small screens */
+		showLabelOnMobile?: boolean;
+		/** Callback when sort changes */
+		onSortChange?: (value: string, dir: SortDirection) => void;
+		/** Callback when filter changes */
+		onFilterChange?: (value: string) => void;
+	}
+
+	let {
+		options,
+		sortBy,
+		sortDir,
+		filterValue = '',
+		showFilter = false,
+		filterPlaceholder = 'Filter...',
+		size = 'xs',
+		showLabelOnMobile = false,
+		onSortChange,
+		onFilterChange
+	}: Props = $props();
+
+	// Find current sort option
+	const currentOption = $derived(options.find(o => o.value === sortBy));
+	const currentIcon = $derived(currentOption?.icon || '');
+	const currentLabel = $derived(currentOption?.label || 'Sort');
+
+	// Handle sort option click
+	function handleSortClick(value: string) {
+		if (sortBy === value) {
+			onSortChange?.(value, sortDir === 'asc' ? 'desc' : 'asc');
+		} else {
+			const opt = options.find(o => o.value === value);
+			onSortChange?.(value, opt?.defaultDir ?? 'asc');
+		}
+	}
+
+	// Handle filter input change
+	function handleFilterInput(e: Event) {
+		const target = e.currentTarget as HTMLInputElement;
+		onFilterChange?.(target.value);
+	}
+
+	// Size classes
+	const buttonSizeClass = $derived({
+		xs: 'btn-xs',
+		sm: 'btn-sm',
+		md: ''
+	}[size]);
+
+	const menuSizeClass = $derived({
+		xs: 'menu-xs',
+		sm: 'menu-sm',
+		md: ''
+	}[size]);
+
+	const inputSizeClass = $derived({
+		xs: 'input-xs',
+		sm: 'input-sm',
+		md: ''
+	}[size]);
+
+	const inputWidthClass = $derived({
+		xs: 'w-20 focus:w-32',
+		sm: 'w-24 focus:w-36',
+		md: 'w-32 focus:w-44'
+	}[size]);
+</script>
+
+<div class="flex items-center gap-1">
+	<!-- Sort dropdown -->
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div class="dropdown dropdown-end flex-shrink-0" onclick={(e) => e.stopPropagation()}>
+		<button
+			tabindex="0"
+			class="btn {buttonSizeClass} btn-ghost gap-1 font-mono text-[10px] uppercase tracking-wider opacity-70 hover:opacity-100"
+			title="Sort"
+		>
+			<span>{currentIcon}</span>
+			<span class="{showLabelOnMobile ? '' : 'hidden sm:inline'}">{currentLabel}</span>
+			<span class="text-[9px]">{sortDir === 'asc' ? '▲' : '▼'}</span>
+		</button>
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<ul tabindex="0" class="dropdown-content menu {menuSizeClass} bg-base-200 rounded-box z-40 w-36 p-1 shadow-lg border border-base-300">
+			{#each options as opt (opt.value)}
+				<li>
+					<button
+						class="flex items-center gap-2 {sortBy === opt.value ? 'active' : ''}"
+						onclick={() => handleSortClick(opt.value)}
+					>
+						<span>{opt.icon}</span>
+						<span class="flex-1">{opt.label}</span>
+						{#if sortBy === opt.value}
+							<span class="text-[9px] opacity-70">{sortDir === 'asc' ? '▲' : '▼'}</span>
+						{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</div>
+
+	<!-- Filter input (optional) -->
+	{#if showFilter}
+		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+		<div class="flex-shrink-0" onclick={(e) => e.stopPropagation()}>
+			<input
+				type="text"
+				placeholder={filterPlaceholder}
+				value={filterValue}
+				oninput={handleFilterInput}
+				class="input {inputSizeClass} input-bordered {inputWidthClass} transition-all duration-200 bg-base-200/50"
+			/>
+		</div>
+	{/if}
+</div>

package/src/lib/components/Sparkline.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	/**
+	 * Sparkline — Lightweight D3 bar chart for trend visualization.
+	 * Animated entrance with staggered bars, configurable color and opacity gradient.
+	 *
+	 * Requires `d3` as a peer dependency.
+	 */
+	import * as d3 from 'd3';
+
+	let {
+		values,
+		width = 120,
+		height = 32,
+		color = 'oklch(var(--p))',
+		fillOpacity = 0.15,
+	}: {
+		values: number[];
+		width?: number | 'auto';
+		height?: number;
+		color?: string;
+		fillOpacity?: number;
+	} = $props();
+
+	let el: HTMLDivElement | undefined = $state();
+	let animated = false;
+
+	function getEffectiveWidth(): number {
+		if (width === 'auto' && el) return el.clientWidth;
+		if (typeof width === 'number') return width;
+		return 120;
+	}
+
+	$effect(() => {
+		if (!el || values.length < 2) return;
+
+		const w = getEffectiveWidth();
+		if (w <= 0) return;
+
+		d3.select(el).select('svg').remove();
+
+		const pad = 1;
+		const innerW = w - pad * 2;
+		const innerH = height - pad * 2;
+
+		if (innerW <= 0 || innerH <= 0) return;
+
+		const svg = d3
+			.select(el)
+			.append('svg')
+			.attr('width', w)
+			.attr('height', height);
+
+		const g = svg.append('g').attr('transform', `translate(${pad},${pad})`);
+
+		const x = d3
+			.scaleBand<number>()
+			.domain(values.map((_, i) => i))
+			.range([0, innerW])
+			.padding(0.15);
+
+		const yMin = d3.min(values)! * 0.95;
+		const yMax = d3.max(values)! * 1.05;
+		const y = d3.scaleLinear().domain([yMin, yMax]).range([innerH, 0]);
+
+		const n = Math.max(1, values.length - 1);
+		const shouldAnimate = !animated;
+		animated = true;
+
+		const bars = g
+			.selectAll('.bar')
+			.data(values)
+			.join('rect')
+			.attr('x', (_, i) => x(i)!)
+			.attr('width', x.bandwidth())
+			.attr('rx', Math.min(1, x.bandwidth() / 4))
+			.style('fill', color)
+			.style('fill-opacity', (_, i) => fillOpacity + (1 - fillOpacity) * (i / n));
+
+		if (shouldAnimate) {
+			bars
+				.attr('y', innerH)
+				.attr('height', 0)
+				.transition()
+				.duration(400)
+				.delay((_, i) => i * 15)
+				.ease(d3.easeCubicOut)
+				.attr('y', (d) => y(d))
+				.attr('height', (d) => innerH - y(d));
+		} else {
+			bars.attr('y', (d) => y(d)).attr('height', (d) => innerH - y(d));
+		}
+	});
+</script>
+
+{#if values.length >= 2}
+	<div
+		bind:this={el}
+		style="{width === 'auto' ? 'width: 100%' : `width: ${width}px`}; height: {height}px"
+	></div>
+{:else}
+	<div
+		class="flex items-center justify-center text-base-content/30 text-xs"
+		style="{width === 'auto' ? 'width: 100%' : `width: ${width}px`}; height: {height}px"
+	>
+		--
+	</div>
+{/if}