@joewinke/jatui 0.1.25 → 0.1.26

package/dist/components/SearchDropdown.svelte

@@ -0,0 +1,421 @@
+<script module lang="ts">
+	export type SearchDropdownOption = {
+		value: string;
+		label: string;
+		icon?: string;
+		image?: string;  // URL for avatar/thumbnail image
+	};
+
+	export type SearchDropdownGroup = {
+		label: string;
+		options: SearchDropdownOption[];
+	};
+</script>
+
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { slide } from 'svelte/transition';
+
+	import type { Snippet } from 'svelte';
+
+	let {
+		value = '',
+		groups = [],
+		placeholder = 'Filter...',
+		disabled = false,
+		displayValue,
+		colorFn,
+		footer,
+		onChange,
+	}: {
+		value: string;
+		groups: SearchDropdownGroup[];
+		placeholder?: string;
+		disabled?: boolean;
+		displayValue?: string;
+		colorFn?: (value: string) => string | undefined;
+		footer?: Snippet;
+		onChange: (value: string) => void;
+	} = $props();
+
+	let open = $state(false);
+	let searchQuery = $state('');
+	let searchInput = $state<HTMLInputElement | undefined>(undefined);
+	let containerRef: HTMLDivElement | undefined;
+
+	// Find the currently selected option across all groups
+	const selectedOption = $derived.by(() => {
+		for (const group of groups) {
+			const found = group.options.find(o => o.value === value);
+			if (found) return found;
+		}
+		return null;
+	});
+
+	const triggerLabel = $derived(displayValue || selectedOption?.label || value || placeholder);
+	const triggerIcon = $derived(selectedOption?.icon || '');
+	const triggerImage = $derived(selectedOption?.image || '');
+	const activeColor = $derived(colorFn ? colorFn(value) : undefined);
+
+	const filteredGroups = $derived.by(() => {
+		if (!searchQuery.trim()) return groups;
+		const q = searchQuery.toLowerCase();
+		const result: SearchDropdownGroup[] = [];
+		for (const group of groups) {
+			const filtered = group.options.filter(o =>
+				o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q) || (o.icon && o.icon.toLowerCase().includes(q))
+			);
+			if (filtered.length > 0) result.push({ label: group.label, options: filtered });
+		}
+		return result;
+	});
+
+	// Generate a deterministic hue from a string for initials avatars
+	function nameHue(s: string): number {
+		let h = 0;
+		for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) & 0xffff;
+		return h % 360;
+	}
+
+	function select(optionValue: string) {
+		open = false;
+		searchQuery = '';
+		onChange(optionValue);
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		if (containerRef && !containerRef.contains(e.target as Node)) {
+			open = false;
+			searchQuery = '';
+		}
+	}
+
+	$effect(() => {
+		if (open) {
+			document.addEventListener('mousedown', handleClickOutside);
+			tick().then(() => searchInput?.focus());
+			return () => document.removeEventListener('mousedown', handleClickOutside);
+		}
+	});
+</script>
+
+<div class="search-dropdown" bind:this={containerRef}>
+	<button
+		type="button"
+		class="sd-trigger"
+		class:sd-disabled={disabled}
+		style={activeColor ? `color: ${activeColor};` : ''}
+		onclick={() => { if (!disabled) open = !open; }}
+		{disabled}
+	>
+		<span class="sd-trigger-label">
+			{#if triggerImage}
+				<img src={triggerImage} alt="" class="sd-avatar" />
+			{:else if triggerIcon}
+				<span class="sd-trigger-icon">{triggerIcon}</span>
+			{:else if selectedOption && selectedOption.value}
+				<span class="sd-avatar sd-avatar-initials" style="background:oklch(0.55 0.15 {nameHue(selectedOption.label)})">
+					{selectedOption.label.charAt(0).toUpperCase()}
+				</span>
+			{/if}
+			<span class="truncate">{triggerLabel}</span>
+		</span>
+		<svg class="sd-chevron" class:sd-chevron-open={open} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+		</svg>
+	</button>
+
+	{#if open}
+		<div
+			class="sd-panel"
+			transition:slide={{ duration: 120 }}
+		>
+			<!-- Search input -->
+			<div class="sd-search">
+				<div class="sd-search-inner">
+					<svg class="sd-search-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+					</svg>
+					<input
+						bind:this={searchInput}
+						bind:value={searchQuery}
+						onkeydown={(e) => {
+							if (e.key === 'Escape') { e.stopPropagation(); open = false; searchQuery = ''; }
+						}}
+						type="text"
+						{placeholder}
+						class="sd-search-input"
+						autocomplete="off"
+					/>
+					{#if searchQuery}
+						<button type="button" onclick={() => { searchQuery = ''; searchInput?.focus(); }} class="sd-search-clear" aria-label="Clear search">
+							<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+						</button>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Options list -->
+			<ul class="sd-list">
+				{#if filteredGroups.length > 0}
+					{#each filteredGroups as group}
+						<li class="sd-group-label">
+							<span>{group.label}</span>
+						</li>
+						{#each group.options as option}
+							<li>
+								<button
+									type="button"
+									onclick={() => select(option.value)}
+									class="sd-option"
+									class:sd-option-selected={value === option.value}
+									style={colorFn && colorFn(option.value) ? `color: ${colorFn(option.value)};` : ''}
+								>
+									{#if option.image}
+										<img src={option.image} alt="" class="sd-avatar" />
+									{:else if option.icon}
+										<span class="sd-option-icon">{option.icon}</span>
+									{:else if option.value}
+										<span class="sd-avatar sd-avatar-initials" style="background:oklch(0.55 0.15 {nameHue(option.label)})">
+											{option.label.charAt(0).toUpperCase()}
+										</span>
+									{/if}
+									<span class="truncate">{option.label}</span>
+									{#if value === option.value}
+										<svg class="sd-check" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+									{/if}
+								</button>
+							</li>
+						{/each}
+					{/each}
+				{:else}
+					<li class="sd-empty">
+							<svg class="sd-empty-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803 7.5 7.5 0 0015.803 15.803z" />
+							</svg>
+							No matches for "{searchQuery}"
+						</li>
+				{/if}
+			</ul>
+			{#if footer}
+				<div class="sd-footer">
+					{@render footer()}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.search-dropdown {
+		position: relative;
+		--sd-bg: var(--sd-color-bg, var(--color-base-100, Canvas));
+		--sd-bg-hover: var(--sd-color-bg-hover, var(--color-base-200, color-mix(in oklch, Canvas 90%, CanvasText)));
+		--sd-bg-selected: var(--sd-color-bg-selected, var(--color-base-300, color-mix(in oklch, Canvas 80%, CanvasText)));
+		--sd-border: var(--sd-color-border, color-mix(in oklch, var(--color-base-content, CanvasText) 20%, transparent));
+		--sd-text: var(--sd-color-text, var(--color-base-content, CanvasText));
+		--sd-text-muted: var(--sd-color-text-muted, color-mix(in oklch, var(--color-base-content, CanvasText) 50%, transparent));
+		--sd-text-label: var(--sd-color-text-label, color-mix(in oklch, var(--color-base-content, CanvasText) 45%, transparent));
+		--sd-accent: var(--sd-color-accent, var(--color-primary, LinkText));
+		--sd-success: var(--sd-color-success, var(--color-success, green));
+	}
+
+	/* Trigger button */
+	.sd-trigger {
+		width: 100%;
+		padding: 0.25rem 0.5rem;
+		border-radius: var(--rounded-btn, 0.5rem);
+		font-family: inherit;
+		font-size: inherit;
+		text-align: left;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.375rem;
+		transition: background 0.15s, border-color 0.15s;
+		min-height: 2rem;
+		cursor: pointer;
+		background: var(--sd-bg);
+		border: 1px solid var(--sd-border);
+		color: var(--sd-text);
+	}
+	.sd-trigger:hover:not(:disabled) {
+		background: var(--sd-bg-hover);
+	}
+	.sd-trigger:disabled, .sd-disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.sd-trigger-label {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		min-width: 0;
+	}
+	.sd-trigger-icon {
+		flex-shrink: 0;
+		font-size: 0.75rem;
+	}
+	.sd-avatar {
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: 50%;
+		object-fit: cover;
+		flex-shrink: 0;
+	}
+	.sd-avatar-initials {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.6rem;
+		font-weight: 700;
+		color: oklch(1 0 0);
+		line-height: 1;
+	}
+
+	.sd-chevron {
+		width: 0.75rem;
+		height: 0.75rem;
+		flex-shrink: 0;
+		transition: transform 0.15s;
+		color: var(--sd-text-muted);
+	}
+	.sd-chevron-open {
+		transform: rotate(180deg);
+	}
+
+	/* Dropdown panel */
+	.sd-panel {
+		position: absolute;
+		z-index: 50;
+		margin-top: 0.25rem;
+		width: 100%;
+		min-width: 12rem;
+		border-radius: var(--rounded-box, 0.5rem);
+		overflow: hidden;
+		box-shadow: 0 4px 24px oklch(0 0 0 / 0.15);
+		background: var(--sd-bg);
+		border: 1px solid var(--sd-border);
+	}
+
+	/* Search section */
+	.sd-search {
+		padding: 0.375rem 0.625rem;
+		border-bottom: 1px solid var(--sd-border);
+	}
+	.sd-search-inner {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+	.sd-search-icon {
+		width: 0.75rem;
+		height: 0.75rem;
+		flex-shrink: 0;
+		color: var(--sd-text-muted);
+	}
+	.sd-search-input {
+		width: 100%;
+		background: transparent;
+		font-size: inherit;
+		font-family: inherit;
+		color: var(--sd-text);
+		border: none;
+		outline: none;
+	}
+	.sd-search-input::placeholder {
+		color: var(--sd-text-muted);
+	}
+	.sd-search-clear {
+		color: var(--sd-text-muted);
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0;
+		display: flex;
+	}
+	.sd-search-clear:hover {
+		opacity: 0.8;
+	}
+
+	/* Options list */
+	.sd-list {
+		padding: 0.125rem 0;
+		max-height: 280px;
+		overflow-y: auto;
+		list-style: none;
+		margin: 0;
+	}
+
+	.sd-group-label {
+		padding: 0.375rem 0.75rem 0.125rem;
+	}
+	.sd-group-label span {
+		font-size: 0.8125rem;
+		font-family: inherit;
+		font-weight: 400;
+		letter-spacing: 0.005em;
+		color: var(--sd-text-label);
+	}
+
+	.sd-option {
+		width: 100%;
+		padding: 0.375rem 0.75rem;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		text-align: left;
+		font-size: inherit;
+		font-family: inherit;
+		transition: background 0.1s;
+		cursor: pointer;
+		background: transparent;
+		border: none;
+		color: var(--sd-text);
+	}
+	.sd-option:hover {
+		background: var(--sd-bg-hover);
+	}
+	.sd-option-selected {
+		background: var(--sd-bg-selected);
+		font-weight: 600;
+	}
+
+	.sd-option-icon {
+		flex-shrink: 0;
+		width: 1.25rem;
+		text-align: center;
+		font-size: 0.75rem;
+	}
+
+	.sd-check {
+		width: 0.75rem;
+		height: 0.75rem;
+		flex-shrink: 0;
+		margin-left: auto;
+		color: var(--sd-success);
+	}
+
+	.sd-footer {
+		border-top: 1px solid var(--sd-border);
+	}
+
+	.sd-empty {
+		padding: 1rem 0.75rem;
+		text-align: center;
+		font-size: inherit;
+		font-family: inherit;
+		color: var(--sd-text-muted);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.sd-empty-icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		opacity: 0.35;
+	}
+</style>

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

@@ -0,0 +1,24 @@
+export type SearchDropdownOption = {
+    value: string;
+    label: string;
+    icon?: string;
+    image?: string;
+};
+export type SearchDropdownGroup = {
+    label: string;
+    options: SearchDropdownOption[];
+};
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    value: string;
+    groups: SearchDropdownGroup[];
+    placeholder?: string;
+    disabled?: boolean;
+    displayValue?: string;
+    colorFn?: (value: string) => string | undefined;
+    footer?: Snippet;
+    onChange: (value: string) => void;
+};
+declare const SearchDropdown: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchDropdown = ReturnType<typeof SearchDropdown>;
+export default SearchDropdown;

package/dist/components/SelectInput.svelte

@@ -0,0 +1,237 @@
+<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);
+	});
+
+	// Error-state shake (transitions.dev). Shakes the whole control wrapper when
+	// `error` becomes set. See TextInput for the rationale.
+	let hadError = false;
+	$effect(() => {
+		const hasError = !!error;
+		if (hasError && !hadError && selectElement) {
+			const reduce =
+				typeof window !== 'undefined' &&
+				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+			if (!reduce) {
+				selectElement.classList.remove('t-input-shake');
+				void selectElement.offsetWidth;
+				selectElement.classList.add('t-input-shake');
+			}
+		}
+		hadError = hasError;
+	});
+</script>
+
+<div
+	class="form-control w-full"
+	bind:this={selectElement}
+	onanimationend={() => selectElement?.classList.remove('t-input-shake')}
+>
+	<label for={id} class="label">
+		<span class="text-[0.8125rem] font-medium text-base-content/85">
+			{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="text-[0.8125rem] text-error" role="alert">{error}</span>
+		</div>
+	{:else if helpText}
+		<div class="label">
+			<span id="{id}-help" class="text-[0.8125rem] text-base-content/45">{helpText}</span>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,26 @@
+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;
+}
+declare const SelectInput: import("svelte").Component<Props, {}, "value">;
+type SelectInput = ReturnType<typeof SelectInput>;
+export default SelectInput;