@joewinke/jatui 0.1.25 → 0.1.27

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

@@ -0,0 +1,40 @@
+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;
+    /** 'chip' renders a compact TopBar-style pill instead of the full-width trigger */
+    variant?: 'default' | 'chip';
+    /** 'sm' renders a smaller trigger matching text-[11px] compact UIs */
+    size?: 'sm' | 'md';
+    /** Open the panel above the trigger instead of below */
+    dropup?: boolean;
+    /** Render panel with position:fixed using viewport coordinates — escapes table/overflow stacking contexts */
+    appendToBody?: boolean;
+    /** Show an × button on the trigger when a value is selected */
+    clearable?: boolean;
+    /** Extra attributes forwarded to the trigger button (e.g. data-rail-id) */
+    triggerAttrs?: Record<string, string>;
+    /** Render inline without a trigger button — panel content is always visible, no dropdown behavior */
+    embedded?: boolean;
+    onChange: (value: string) => void;
+};
+declare const SearchDropdown: import("svelte").Component<$$ComponentProps, {
+    openDropdown: () => void;
+}, "">;
+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;

package/dist/components/SidebarUserFooter.svelte

@@ -0,0 +1,34 @@
+<!--
+  SidebarUserFooter — avatar + name (links to account) + sign out button.
+  Placed at the bottom of app sidebar drawers (admin, facilitator, portal).
+  Used in JST template layouts.
+-->
+<script lang="ts">
+  import UserAvatar from './UserAvatar.svelte'
+
+  interface Props {
+    profile?: { full_name?: string | null; avatar_url?: string | null } | null
+    user?: { email?: string | null } | null
+    /** Where the avatar/name links to. Defaults to /account */
+    accountHref?: string
+    /** Sign out URL. Defaults to /account/sign_out */
+    signOutHref?: string
+  }
+
+  let {
+    profile,
+    user,
+    accountHref = '/account',
+    signOutHref = '/account/sign_out',
+  }: Props = $props()
+
+  let displayName = $derived(profile?.full_name || user?.email || '?')
+</script>
+
+<div class="flex items-center gap-2 px-2 py-1">
+  <a href={accountHref} class="flex items-center gap-2 flex-1 min-w-0" title="Account settings">
+    <UserAvatar name={profile?.full_name} email={user?.email} avatarUrl={profile?.avatar_url} size="sm" />
+    <span class="truncate text-[0.9375rem]">{displayName}</span>
+  </a>
+  <a href={signOutHref} class="btn btn-ghost btn-xs shrink-0">Sign out</a>
+</div>

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

@@ -0,0 +1,16 @@
+interface Props {
+    profile?: {
+        full_name?: string | null;
+        avatar_url?: string | null;
+    } | null;
+    user?: {
+        email?: string | null;
+    } | null;
+    /** Where the avatar/name links to. Defaults to /account */
+    accountHref?: string;
+    /** Sign out URL. Defaults to /account/sign_out */
+    signOutHref?: string;
+}
+declare const SidebarUserFooter: import("svelte").Component<Props, {}, "">;
+type SidebarUserFooter = ReturnType<typeof SidebarUserFooter>;
+export default SidebarUserFooter;

package/dist/components/SignaturePad.svelte

@@ -0,0 +1,175 @@
+<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 = '',
+		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;
+
+		const resolvedStroke = strokeColor ||
+			getComputedStyle(canvas).getPropertyValue('--color-base-content').trim() ||
+			'oklch(0.21 0 0)';
+		ctx.strokeStyle = resolvedStroke;
+		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 || !ctx) 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">
+			<span class="text-sm text-base-content/70">
+				{label}
+				{#if required}
+					<span class="text-error">*</span>
+				{/if}
+			</span>
+			<button type="button" onclick={() => clear()} class="btn btn-ghost btn-xs">
+				Clear
+			</button>
+		</div>
+	{/if}
+
+	<div class="rounded-lg bg-base-100 overflow-hidden relative transition-all duration-300
+		{hasDrawn ? 'border-2 border-success/60' : 'border-2 border-base-300'}">
+		<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/dist/components/SignaturePad.svelte.d.ts

@@ -0,0 +1,17 @@
+type $$ComponentProps = {
+    signatureData?: string;
+    onSignatureChange?: (data: string) => void;
+    width?: number;
+    height?: number;
+    strokeColor?: string;
+    strokeWidth?: number;
+    label?: string;
+    required?: boolean;
+    placeholder?: string;
+};
+declare const SignaturePad: import("svelte").Component<$$ComponentProps, {
+    clear: () => void;
+    isEmpty: () => boolean;
+}, "signatureData">;
+type SignaturePad = ReturnType<typeof SignaturePad>;
+export default SignaturePad;