@joewinke/jatui 0.1.31 → 0.2.0

package/dist/components/PinInput.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	interface Props {
+		length?: number;
+		value?: string;
+		masked?: boolean;
+		numeric?: boolean;
+		error?: string;
+		disabled?: boolean;
+		label?: string;
+		oncomplete?: (value: string) => void;
+	}
+
+	let {
+		length = 6,
+		value = $bindable(''),
+		masked = false,
+		numeric = false,
+		error = '',
+		disabled = false,
+		label = '',
+		oncomplete
+	}: Props = $props();
+
+	let cells: string[] = $state(Array(length).fill(''));
+	let inputEls: HTMLInputElement[] = $state([]);
+	let poppingCells: boolean[] = $state(Array(length).fill(false));
+	let shaking = $state(false);
+	let hadError = false;
+
+	$effect(() => {
+		const hasError = !!error;
+		if (hasError && !hadError) {
+			const reduce = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+			if (!reduce) {
+				shaking = false;
+				// force reflow
+				void document.body?.offsetWidth;
+				shaking = true;
+			}
+		}
+		hadError = hasError;
+	});
+
+	function popCell(i: number) {
+		const reduce = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+		if (reduce) return;
+		poppingCells[i] = true;
+		setTimeout(() => { poppingCells[i] = false; }, 350);
+	}
+
+	function onInput(i: number, e: Event) {
+		const el = e.target as HTMLInputElement;
+		let char = el.value;
+
+		if (numeric) char = char.replace(/\D/g, '');
+
+		if (char.length > 1) {
+			// paste — split across cells
+			const chars = char.slice(0, length - i).split('');
+			chars.forEach((c, offset) => {
+				if (i + offset < length) {
+					cells[i + offset] = c;
+					if (c) popCell(i + offset);
+				}
+			});
+			const nextIdx = Math.min(i + chars.length, length - 1);
+			inputEls[nextIdx]?.focus();
+		} else {
+			cells[i] = char.slice(-1);
+			if (cells[i]) {
+				popCell(i);
+				inputEls[i + 1]?.focus();
+			}
+		}
+
+		value = cells.join('');
+		if (value.length === length && !value.includes('')) {
+			oncomplete?.(value);
+		}
+	}
+
+	function onKeydown(i: number, e: KeyboardEvent) {
+		if (e.key === 'Backspace') {
+			if (!cells[i]) {
+				inputEls[i - 1]?.focus();
+			} else {
+				cells[i] = '';
+				value = cells.join('');
+			}
+			e.preventDefault();
+		} else if (e.key === 'ArrowLeft') {
+			inputEls[i - 1]?.focus();
+		} else if (e.key === 'ArrowRight') {
+			inputEls[i + 1]?.focus();
+		}
+	}
+
+	function onFocus(el: HTMLInputElement) {
+		el.select();
+	}
+
+	const groupId = `pin-${Math.random().toString(36).slice(2, 9)}`;
+</script>
+
+<div class="pin-input-root" class:shaking>
+	{#if label}
+		<div class="label mb-1">
+			<span class="text-[0.8125rem] font-medium text-base-content/85">{label}</span>
+		</div>
+	{/if}
+
+	<div
+		class="flex gap-2"
+		role="group"
+		aria-label={label || 'PIN input'}
+		aria-describedby={error ? `${groupId}-error` : undefined}
+	>
+		{#each Array(length) as _, i}
+			<input
+				bind:this={inputEls[i]}
+				type={masked ? 'password' : 'text'}
+				inputmode={numeric ? 'numeric' : 'text'}
+				maxlength={1}
+				value={cells[i]}
+				{disabled}
+				aria-label={`Digit ${i + 1} of ${length}`}
+				class="pin-cell input input-bordered h-12 w-11 text-center text-lg font-semibold transition-[border-color] duration-[var(--motion-fast)]"
+				class:input-error={!!error}
+				class:pin-cell--filled={!!cells[i]}
+				class:pin-cell--pop={poppingCells[i]}
+				oninput={(e) => onInput(i, e)}
+				onkeydown={(e) => onKeydown(i, e)}
+				onfocus={(e) => onFocus(e.target as HTMLInputElement)}
+			/>
+		{/each}
+	</div>
+
+	{#if error}
+		<div class="label mt-1">
+			<span id="{groupId}-error" class="text-[0.8125rem] text-error" role="alert">{error}</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.pin-cell {
+		transform-origin: center;
+		transition:
+			transform var(--motion-fast) var(--motion-spring),
+			border-color var(--motion-fast) var(--motion-glide);
+	}
+
+	.pin-cell--filled {
+		border-color: oklch(var(--p));
+	}
+
+	.pin-cell--pop {
+		transform: scale(1.14);
+	}
+
+	@keyframes pin-shake {
+		0%, 100% { transform: translateX(0); }
+		15% { transform: translateX(-6px); }
+		30% { transform: translateX(6px); }
+		45% { transform: translateX(-4px); }
+		60% { transform: translateX(4px); }
+		75% { transform: translateX(-2px); }
+		90% { transform: translateX(2px); }
+	}
+
+	.shaking {
+		animation: pin-shake var(--motion-move) var(--motion-glide);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.pin-cell {
+			transition: border-color var(--motion-fast) var(--motion-glide);
+		}
+		.pin-cell--pop {
+			transform: none;
+		}
+		.shaking {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    length?: number;
+    value?: string;
+    masked?: boolean;
+    numeric?: boolean;
+    error?: string;
+    disabled?: boolean;
+    label?: string;
+    oncomplete?: (value: string) => void;
+}
+declare const PinInput: import("svelte").Component<Props, {}, "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/components/QuantityStepper.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	interface Props {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		label?: string;
+		size?: 'sm' | 'md' | 'lg';
+	}
+
+	let {
+		value = $bindable(1),
+		min = 0,
+		max = Infinity,
+		step = 1,
+		disabled = false,
+		label = '',
+		size = 'md'
+	}: Props = $props();
+
+	let bumping = $state(false);
+	let direction = $state<'up' | 'down'>('up');
+	let holdTimer: ReturnType<typeof setTimeout> | null = null;
+	let holdInterval: ReturnType<typeof setInterval> | null = null;
+
+	const atMin = $derived(value <= min);
+	const atMax = $derived(value >= max);
+
+	const sizeClasses = {
+		sm: { btn: 'btn-sm h-7 min-h-0 w-7 text-sm', val: 'min-w-[2ch] text-sm', wrap: 'gap-1' },
+		md: { btn: 'h-9 min-h-0 w-9 text-base', val: 'min-w-[3ch] text-base', wrap: 'gap-2' },
+		lg: { btn: 'btn-lg h-11 min-h-0 w-11 text-lg', val: 'min-w-[3ch] text-lg', wrap: 'gap-2' }
+	};
+
+	const sc = $derived(sizeClasses[size]);
+
+	function bump() {
+		const reduce = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+		if (reduce) return;
+		bumping = false;
+		void document.body?.offsetWidth;
+		bumping = true;
+	}
+
+	function change(delta: number) {
+		const next = Math.min(max, Math.max(min, value + delta));
+		if (next === value) return;
+		direction = delta > 0 ? 'up' : 'down';
+		value = next;
+		bump();
+	}
+
+	function startHold(delta: number) {
+		change(delta);
+		holdTimer = setTimeout(() => {
+			holdInterval = setInterval(() => change(delta), 80);
+		}, 400);
+	}
+
+	function stopHold() {
+		if (holdTimer) { clearTimeout(holdTimer); holdTimer = null; }
+		if (holdInterval) { clearInterval(holdInterval); holdInterval = null; }
+	}
+
+	function onValueInput(e: Event) {
+		const raw = (e.target as HTMLInputElement).value;
+		const parsed = parseFloat(raw);
+		if (!isNaN(parsed)) {
+			value = Math.min(max, Math.max(min, parsed));
+			bump();
+		}
+	}
+
+	const inputId = `qs-${Math.random().toString(36).slice(2, 9)}`;
+</script>
+
+<div class="quantity-stepper inline-flex flex-col gap-1">
+	{#if label}
+		<label for={inputId} class="text-[0.8125rem] font-medium text-base-content/85">{label}</label>
+	{/if}
+
+	<div class="inline-flex items-center {sc.wrap}">
+		<button
+			type="button"
+			class="stepper-btn btn btn-circle btn-outline {sc.btn}"
+			aria-label="Decrease"
+			disabled={disabled || atMin}
+			onpointerdown={() => startHold(-step)}
+			onpointerup={stopHold}
+			onpointerleave={stopHold}
+			onpointercancel={stopHold}
+		>
+			−
+		</button>
+
+		<input
+			id={inputId}
+			type="number"
+			class="stepper-val input input-ghost {sc.val} text-center font-semibold tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden"
+			class:bumping
+			class:bump-up={direction === 'up' && bumping}
+			class:bump-down={direction === 'down' && bumping}
+			{value}
+			{min}
+			{max}
+			{step}
+			{disabled}
+			aria-label={label || 'Quantity'}
+			oninput={onValueInput}
+			onblur={(e) => {
+				const parsed = parseFloat((e.target as HTMLInputElement).value);
+				if (isNaN(parsed)) value = min;
+			}}
+			onanimationend={() => { bumping = false; }}
+		/>
+
+		<button
+			type="button"
+			class="stepper-btn btn btn-circle btn-outline {sc.btn}"
+			aria-label="Increase"
+			disabled={disabled || atMax}
+			onpointerdown={() => startHold(step)}
+			onpointerup={stopHold}
+			onpointerleave={stopHold}
+			onpointercancel={stopHold}
+		>
+			+
+		</button>
+	</div>
+</div>
+
+<style>
+	.stepper-btn {
+		transition: transform var(--motion-instant) var(--motion-glide);
+		user-select: none;
+		touch-action: none;
+	}
+
+	.stepper-btn:active:not(:disabled) {
+		transform: scale(0.9);
+	}
+
+	.stepper-val {
+		display: inline-block;
+		transform-origin: center;
+		transition: transform var(--motion-fast) var(--motion-spring);
+	}
+
+	@keyframes bump-up {
+		0%   { transform: translateY(0) scale(1); }
+		40%  { transform: translateY(-4px) scale(1.18); }
+		100% { transform: translateY(0) scale(1); }
+	}
+
+	@keyframes bump-down {
+		0%   { transform: translateY(0) scale(1); }
+		40%  { transform: translateY(4px) scale(1.18); }
+		100% { transform: translateY(0) scale(1); }
+	}
+
+	.bump-up {
+		animation: bump-up var(--motion-enter) var(--motion-spring);
+	}
+
+	.bump-down {
+		animation: bump-down var(--motion-enter) var(--motion-spring);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.stepper-btn {
+			transition: none;
+		}
+		.stepper-btn:active:not(:disabled) {
+			transform: none;
+		}
+		.stepper-val {
+			transition: none;
+		}
+		.bump-up,
+		.bump-down {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,12 @@
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const QuantityStepper: import("svelte").Component<Props, {}, "value">;
+type QuantityStepper = ReturnType<typeof QuantityStepper>;
+export default QuantityStepper;

package/dist/components/Skeleton.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { fly, fade } from 'svelte/transition';
+
+	interface Props {
+		variant?: 'text' | 'avatar' | 'block';
+		loaded?: boolean;
+		width?: string;
+		height?: string;
+		lines?: number;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		variant = 'text',
+		loaded = false,
+		width,
+		height,
+		lines = 3,
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+{#if !loaded}
+	<div
+		class="skeleton-wrap {className}"
+		aria-busy="true"
+		aria-label="Loading"
+		role="status"
+	>
+		{#if variant === 'avatar'}
+			<div class="skel-avatar" style={width ? `width:${width};height:${height ?? width}` : ''}></div>
+		{:else if variant === 'block'}
+			<div
+				class="skel-block"
+				style={[width && `width:${width}`, height && `height:${height}`].filter(Boolean).join(';')}
+			></div>
+		{:else}
+			{#each { length: lines } as _, i}
+				<div class="skel-line" class:skel-line--short={i === lines - 1 && lines > 1}></div>
+			{/each}
+		{/if}
+	</div>
+{:else if children}
+	<div
+		in:fly={{ y: 6, duration: 200, delay: 0 }}
+		style="animation-timing-function: var(--motion-glide)"
+	>
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	.skeleton-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.skel-line {
+		height: 0.875rem;
+		border-radius: 0.375rem;
+		background: linear-gradient(
+			90deg,
+			oklch(var(--b2) / 1) 0%,
+			oklch(var(--b3) / 1) 25%,
+			oklch(var(--b2) / 1) 50%
+		);
+		background-size: 280% 100%;
+		animation: skel-shimmer 1.5s linear infinite;
+	}
+
+	.skel-line--short {
+		width: 60%;
+	}
+
+	.skel-avatar {
+		width: 3rem;
+		height: 3rem;
+		border-radius: 9999px;
+		background: linear-gradient(
+			90deg,
+			oklch(var(--b2) / 1) 0%,
+			oklch(var(--b3) / 1) 25%,
+			oklch(var(--b2) / 1) 50%
+		);
+		background-size: 280% 100%;
+		animation: skel-shimmer 1.5s linear infinite;
+		flex-shrink: 0;
+	}
+
+	.skel-block {
+		width: 100%;
+		height: 8rem;
+		border-radius: 0.5rem;
+		background: linear-gradient(
+			90deg,
+			oklch(var(--b2) / 1) 0%,
+			oklch(var(--b3) / 1) 25%,
+			oklch(var(--b2) / 1) 50%
+		);
+		background-size: 280% 100%;
+		animation: skel-shimmer 1.5s linear infinite;
+	}
+
+	@keyframes skel-shimmer {
+		0% {
+			background-position: 140% 0;
+		}
+		100% {
+			background-position: -140% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.skel-line,
+		.skel-avatar,
+		.skel-block {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,12 @@
+interface Props {
+    variant?: 'text' | 'avatar' | 'block';
+    loaded?: boolean;
+    width?: string;
+    height?: string;
+    lines?: number;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/SpeechForm.svelte

@@ -36,6 +36,7 @@
   }>()
 
   let remaining = $derived(maxLength - (text?.length || 0))
+  // `isCreating` doubles as "recording/processing" state for the breathing orb indicator
 
   $effect(() => {
     return () => {
@@ -91,6 +92,15 @@
       <p class="text-sm">{infoText}</p>
     </div>
   {/if}
+
+
+  <!-- Breathing orb status row — visible while processing -->
+  {#if isCreating}
+    <div class="flex items-center gap-3 py-1" aria-live="polite">
+      <span class="sf-orb" aria-hidden="true"></span>
+      <span class="text-sm text-base-content/70 sf-orb-label">Converting your text to speech…</span>
+    </div>
+  {/if}
 </div>
 
 <div class="flex justify-end gap-2 mt-6">
@@ -112,3 +122,30 @@
     {/if}
   </button>
 </div>
+
+<style>
+  /* Breathing orb — slow 2s scale/opacity breathe (functional status). */
+  .sf-orb {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: currentColor;
+    flex-shrink: 0;
+    animation: sf-breathe 2s ease-in-out infinite;
+  }
+
+  @keyframes sf-breathe {
+    0%, 100% { transform: scale(0.85); opacity: 0.55; }
+    50%       { transform: scale(1.15); opacity: 1; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sf-orb {
+      animation: none;
+      /* Static affordance: solid dot at rest size */
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+</style>

package/dist/components/StatusBadge.svelte

@@ -21,7 +21,9 @@
 	 * StatusBadge Component
 	 *
 	 * Predefined status badge with semantic colors, icons, and dot indicators.
+	 * Morphs between statuses with a crossfade label + tint transition.
 	 */
+	import { fade } from 'svelte/transition';
 
 	interface Props {
 		status: StatusValue;
@@ -108,7 +110,7 @@
 	);
 
 	const badgeClass = $derived(
-		['badge', variantClass, sizeClass, clickable ? 'cursor-pointer hover:opacity-80' : '', className]
+		['badge', variantClass, sizeClass, 'status-badge-morph', clickable ? 'cursor-pointer hover:opacity-80' : '', className]
 			.filter(Boolean)
 			.join(' ')
 	);
@@ -142,7 +144,9 @@
 		{#if showIcon}
 			<span class="mr-1">{config.icon}</span>
 		{/if}
-		{displayText}
+		{#key status}
+			<span class="status-label" in:fade={{ duration: 150 }} out:fade={{ duration: 80 }}>{displayText}</span>
+		{/key}
 	</span>
 {:else}
 	<span class={badgeClass} aria-label={ariaLabel || `Status: ${displayText}`}>
@@ -152,6 +156,30 @@
 		{#if showIcon}
 			<span class="mr-1">{config.icon}</span>
 		{/if}
-		{displayText}
+		{#key status}
+			<span class="status-label" in:fade={{ duration: 150 }} out:fade={{ duration: 80 }}>{displayText}</span>
+		{/key}
 	</span>
 {/if}
+
+<style>
+	/* Wrap the badge so position:relative doesn't affect badge layout */
+	.status-badge-morph {
+		position: relative;
+		/* Smooth the background/color tint change when variant class changes */
+		transition:
+			background-color var(--motion-fast) var(--motion-glide),
+			color var(--motion-fast) var(--motion-glide),
+			border-color var(--motion-fast) var(--motion-glide);
+	}
+
+	.status-label {
+		display: inline;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.status-badge-morph {
+			transition: none;
+		}
+	}
+</style>

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

@@ -1,9 +1,4 @@
 export type StatusValue = 'active' | 'inactive' | 'pending' | 'completed' | 'cancelled' | 'draft' | 'scheduled' | 'in-progress' | 'overdue' | 'paid' | 'unpaid' | 'partial' | 'assigned' | 'available';
-/**
- * StatusBadge Component
- *
- * Predefined status badge with semantic colors, icons, and dot indicators.
- */
 interface Props {
     status: StatusValue;
     size?: 'xs' | 'sm' | 'md' | 'lg';