@joewinke/jatui 0.1.0

package/src/lib/components/SpeechForm.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  /**
+   * SpeechForm — Text-to-speech generation form with voice selection, character limit, and audio preview.
+   *
+   * Voice options are configurable via the `voiceOptions` prop. Includes a textarea with character counter,
+   * voice selector dropdown, optional audio preview player, and submit/cancel buttons.
+   */
+
+  let {
+    text = $bindable(""),
+    voice = $bindable("en-US-female-27"),
+    previewUrl = null,
+    isCreating = false,
+    maxLength = 1000,
+    voiceOptions = [
+      { id: "en-US-female-27", label: "US Female (Clear)" },
+      { id: "en-US-male-27", label: "US Male (Clear)" },
+      { id: "en-GB-female-11", label: "UK Female" },
+      { id: "en-GB-male-10", label: "UK Male" },
+      { id: "en-US-female-24", label: "US Female (Warm)" },
+      { id: "en-US-male-24", label: "US Male (Deep)" },
+    ],
+    infoText = "The system will convert your text to natural-sounding speech which you can download and use.",
+    onSubmit,
+    onCancel,
+  } = $props<{
+    text?: string
+    voice?: string
+    previewUrl?: string | null
+    isCreating?: boolean
+    maxLength?: number
+    voiceOptions?: { id: string; label: string }[]
+    infoText?: string
+    onSubmit: () => void
+    onCancel: () => void
+  }>()
+
+  let remaining = $derived(maxLength - (text?.length || 0))
+
+  $effect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl)
+      }
+    }
+  })
+</script>
+
+<div class="space-y-4">
+  <div class="form-control">
+    <label class="label" for="speech-text-input">
+      <span class="label-text font-medium">Text to Convert</span>
+      <span class="label-text-alt">{remaining} characters left</span>
+    </label>
+    <textarea
+      id="speech-text-input"
+      bind:value={text}
+      placeholder="Enter the text you want to convert to speech..."
+      class="textarea min-h-32"
+      maxlength={maxLength}
+      disabled={isCreating}
+    ></textarea>
+  </div>
+
+  <div class="form-control">
+    <label class="label" for="speech-voice-select">
+      <span class="label-text font-medium">Voice</span>
+    </label>
+    <select id="speech-voice-select" bind:value={voice} class="select" disabled={isCreating}>
+      {#each voiceOptions as option}
+        <option value={option.id}>{option.label}</option>
+      {/each}
+    </select>
+  </div>
+
+  {#if previewUrl}
+    <div class="form-control">
+      <div class="label">
+        <span class="label-text font-medium">Preview</span>
+      </div>
+      <audio src={previewUrl} controls class="w-full" aria-label="Generated speech preview">
+        Your browser does not support the audio element.
+      </audio>
+    </div>
+  {/if}
+
+  {#if infoText}
+    <div class="flex items-center gap-2 text-info bg-info/10 p-3 rounded">
+      <!-- Info icon -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+      <p class="text-sm">{infoText}</p>
+    </div>
+  {/if}
+</div>
+
+<div class="flex justify-end gap-2 mt-6">
+  <button class="btn btn-ghost" onclick={onCancel} disabled={isCreating}>
+    Cancel
+  </button>
+  <button
+    class="btn btn-primary gap-2"
+    onclick={onSubmit}
+    disabled={isCreating || !text}
+  >
+    {#if isCreating}
+      <span class="loading loading-spinner loading-sm"></span>
+      Converting...
+    {:else}
+      <!-- Mic icon -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
+      Generate Speech
+    {/if}
+  </button>
+</div>

package/src/lib/components/StatusBadge.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	/**
+	 * StatusBadge Component
+	 *
+	 * Predefined status badge with semantic colors, icons, and dot indicators.
+	 */
+
+	export type StatusValue =
+		| 'active'
+		| 'inactive'
+		| 'pending'
+		| 'completed'
+		| 'cancelled'
+		| 'draft'
+		| 'scheduled'
+		| 'in-progress'
+		| 'overdue'
+		| 'paid'
+		| 'unpaid'
+		| 'partial'
+		| 'assigned'
+		| 'available';
+
+	interface Props {
+		status: StatusValue;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		showIcon?: boolean;
+		showDot?: boolean;
+		customText?: string;
+		clickable?: boolean;
+		outlined?: boolean;
+		class?: string;
+		ariaLabel?: string;
+		onclick?: (event: { event: MouseEvent; status: string }) => void;
+	}
+
+	let {
+		status,
+		size = 'md',
+		showIcon = false,
+		showDot = false,
+		customText = '',
+		clickable = false,
+		outlined = false,
+		class: className = '',
+		ariaLabel = '',
+		onclick
+	}: Props = $props();
+
+	const statusConfig: Record<string, { text: string; variant: string; icon: string }> = {
+		active: { text: 'Active', variant: 'success', icon: '✓' },
+		inactive: { text: 'Inactive', variant: 'error', icon: '✗' },
+		pending: { text: 'Pending', variant: 'warning', icon: '⏳' },
+		completed: { text: 'Completed', variant: 'success', icon: '✓' },
+		cancelled: { text: 'Cancelled', variant: 'error', icon: '✗' },
+		draft: { text: 'Draft', variant: 'default', icon: '📝' },
+		scheduled: { text: 'Scheduled', variant: 'info', icon: '📅' },
+		'in-progress': { text: 'In Progress', variant: 'primary', icon: '⏱️' },
+		overdue: { text: 'Overdue', variant: 'error', icon: '⚠️' },
+		paid: { text: 'Paid', variant: 'success', icon: '💰' },
+		unpaid: { text: 'Unpaid', variant: 'warning', icon: '💸' },
+		partial: { text: 'Partial', variant: 'warning', icon: '📊' },
+		assigned: { text: 'Assigned', variant: 'success', icon: '✓' },
+		available: { text: 'Available', variant: 'info', icon: '⭕' }
+	};
+
+	const config = $derived(statusConfig[status] || { text: status || 'Unknown', variant: 'default', icon: '?' });
+	const displayText = $derived(customText || config.text);
+
+	const variantMap: Record<string, string> = {
+		default: 'badge-ghost',
+		primary: 'badge-primary',
+		secondary: 'badge-secondary',
+		accent: 'badge-accent',
+		success: 'badge-success',
+		warning: 'badge-warning',
+		error: 'badge-error',
+		info: 'badge-info'
+	};
+
+	const outlinedVariantMap: Record<string, string> = {
+		default: 'badge-outline',
+		primary: 'badge-primary badge-outline',
+		secondary: 'badge-secondary badge-outline',
+		accent: 'badge-accent badge-outline',
+		success: 'badge-success badge-outline',
+		warning: 'badge-warning badge-outline',
+		error: 'badge-error badge-outline',
+		info: 'badge-info badge-outline'
+	};
+
+	const variantClass = $derived(outlined ? outlinedVariantMap[config.variant] : variantMap[config.variant]);
+	const sizeClass = $derived({ xs: 'badge-xs', sm: 'badge-sm', md: 'badge-md', lg: 'badge-lg' }[size]);
+
+	const dotColor = $derived(
+		{
+			default: 'bg-base-content',
+			primary: 'bg-primary',
+			secondary: 'bg-secondary',
+			accent: 'bg-accent',
+			success: 'bg-success',
+			warning: 'bg-warning',
+			error: 'bg-error',
+			info: 'bg-info'
+		}[config.variant]
+	);
+
+	const badgeClass = $derived(
+		['badge', variantClass, sizeClass, clickable ? 'cursor-pointer hover:opacity-80' : '', className]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	function handleClick(event: MouseEvent) {
+		if (clickable && onclick) {
+			onclick({ event, status });
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (clickable && onclick && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			onclick({ event: event as any, status });
+		}
+	}
+</script>
+
+{#if clickable}
+	<span
+		class={badgeClass}
+		role="button"
+		tabindex="0"
+		aria-label={ariaLabel || `Status: ${displayText}`}
+		onclick={handleClick}
+		onkeydown={handleKeyDown}
+	>
+		{#if showDot}
+			<span class="w-2 h-2 rounded-full {dotColor} mr-1.5"></span>
+		{/if}
+		{#if showIcon}
+			<span class="mr-1">{config.icon}</span>
+		{/if}
+		{displayText}
+	</span>
+{:else}
+	<span class={badgeClass} aria-label={ariaLabel || `Status: ${displayText}`}>
+		{#if showDot}
+			<span class="w-2 h-2 rounded-full {dotColor} mr-1.5"></span>
+		{/if}
+		{#if showIcon}
+			<span class="mr-1">{config.icon}</span>
+		{/if}
+		{displayText}
+	</span>
+{/if}

package/src/lib/components/TextArea.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	/**
+	 * TextArea Component
+	 *
+	 * Multi-line text input with validation, auto-resize, and character count.
+	 * Converted from Svelte 4 to Svelte 5 runes.
+	 */
+
+	interface Props {
+		label?: string;
+		value?: string;
+		placeholder?: string;
+		rows?: number;
+		maxlength?: number;
+		minlength?: number;
+		required?: boolean;
+		disabled?: boolean;
+		readonly?: boolean;
+		autoResize?: boolean;
+		error?: string;
+		helpText?: string;
+		showCount?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		id?: string;
+		name?: string;
+		resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+		oninput?: (value: string) => void;
+	}
+
+	let {
+		label = '',
+		value = $bindable(''),
+		placeholder = '',
+		rows = 3,
+		maxlength,
+		minlength,
+		required = false,
+		disabled = false,
+		readonly = false,
+		autoResize = false,
+		error = '',
+		helpText = '',
+		showCount = false,
+		size = 'md',
+		class: className = '',
+		id = `textarea-${Math.random().toString(36).substr(2, 9)}`,
+		name = '',
+		resize = 'vertical',
+		oninput
+	}: Props = $props();
+
+	let textareaElement: HTMLTextAreaElement | undefined = $state();
+
+	const sizeClass = $derived({ sm: 'textarea-sm', md: '', lg: 'textarea-lg' }[size]);
+	const resizeClass = $derived(
+		{ none: 'resize-none', vertical: 'resize-y', horizontal: 'resize-x', both: 'resize' }[resize]
+	);
+
+	const textareaClass = $derived(
+		[
+			'textarea textarea-bordered w-full',
+			sizeClass,
+			resizeClass,
+			error ? 'textarea-error' : '',
+			disabled ? 'textarea-disabled' : '',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const characterCount = $derived(value?.length || 0);
+	const isOverLimit = $derived(maxlength ? characterCount > maxlength : false);
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLTextAreaElement;
+		value = target.value;
+		if (autoResize) autoResizeTextarea(target);
+		oninput?.(value);
+	}
+
+	function autoResizeTextarea(textarea: HTMLTextAreaElement) {
+		textarea.style.height = 'auto';
+		textarea.style.height = textarea.scrollHeight + 'px';
+	}
+
+	$effect(() => {
+		if (autoResize && textareaElement && value !== undefined) {
+			autoResizeTextarea(textareaElement);
+		}
+	});
+</script>
+
+<div class="form-control w-full">
+	{#if label}
+		<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}
+
+	<textarea
+		bind:this={textareaElement}
+		{id}
+		{name}
+		{placeholder}
+		{rows}
+		{maxlength}
+		{minlength}
+		{required}
+		{disabled}
+		{readonly}
+		bind:value
+		oninput={handleInput}
+		class={textareaClass}
+		aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+		aria-invalid={error ? 'true' : 'false'}
+		style={autoResize ? `min-height: calc(1.5em * ${rows} + 1rem);` : ''}
+	></textarea>
+
+	{#if showCount && maxlength}
+		<div class="label">
+			<span class="label-text-alt {isOverLimit ? 'text-error' : 'text-base-content/70'}">
+				{characterCount}/{maxlength}
+			</span>
+		</div>
+	{/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/TextInput.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	/**
+	 * TextInput Component
+	 *
+	 * Labeled text input with validation, error state, help text, and character count.
+	 * Converted from Svelte 4 to Svelte 5 runes.
+	 */
+
+	interface Props {
+		label: string;
+		value?: string;
+		placeholder?: string;
+		type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+		required?: boolean;
+		disabled?: boolean;
+		readonly?: boolean;
+		error?: string;
+		helpText?: string;
+		size?: 'sm' | 'md' | 'lg';
+		maxlength?: number;
+		minlength?: number;
+		pattern?: string;
+		showCount?: boolean;
+		class?: string;
+		id?: string;
+		name?: string;
+		autocomplete?: string;
+	}
+
+	let {
+		label,
+		value = $bindable(''),
+		placeholder = '',
+		type = 'text',
+		required = false,
+		disabled = false,
+		readonly = false,
+		error = '',
+		helpText = '',
+		size = 'md',
+		maxlength,
+		minlength,
+		pattern,
+		showCount = false,
+		class: className = '',
+		id = `text-input-${Math.random().toString(36).substr(2, 9)}`,
+		name = '',
+		autocomplete = ''
+	}: Props = $props();
+
+	const sizeClass = $derived({ sm: 'input-sm', md: '', lg: 'input-lg' }[size]);
+
+	const inputClass = $derived(
+		['input input-bordered w-full', sizeClass, error ? 'input-error' : '', disabled ? 'input-disabled' : '', className]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const characterCount = $derived(value?.length || 0);
+	const isOverLimit = $derived(maxlength ? characterCount > maxlength : false);
+</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}
+		{placeholder}
+		{required}
+		{disabled}
+		{readonly}
+		{maxlength}
+		{minlength}
+		{pattern}
+		{autocomplete}
+		bind:value
+		class={inputClass}
+		aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+		aria-invalid={error ? 'true' : 'false'}
+	/>
+
+	{#if showCount && maxlength}
+		<div class="label">
+			<span class="label-text-alt {isOverLimit ? 'text-error' : 'text-base-content/70'}">
+				{characterCount}/{maxlength}
+			</span>
+		</div>
+	{/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>