@joewinke/jatui 0.1.31 → 0.2.0

package/dist/components/Tabs.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface TabItem {
+		id: string;
+		label: string;
+		disabled?: boolean;
+	}
+
+	interface Props {
+		items: TabItem[];
+		active?: string;
+		variant?: 'pill' | 'underline';
+		children?: Snippet<[string]>;
+	}
+
+	let { items, active = $bindable(items[0]?.id ?? ''), variant = 'pill', children }: Props = $props();
+
+	let tabRefs: Record<string, HTMLButtonElement> = {};
+	let indicatorEl: HTMLElement | null = $state(null);
+	let listEl: HTMLElement | null = $state(null);
+
+	function moveIndicator(targetId: string) {
+		const btn = tabRefs[targetId];
+		if (!btn || !indicatorEl || !listEl) return;
+
+		const listRect = listEl.getBoundingClientRect();
+		const btnRect = btn.getBoundingClientRect();
+
+		const x = btnRect.left - listRect.left;
+		const w = btnRect.width;
+
+		if (variant === 'pill') {
+			indicatorEl.style.transform = `translateX(${x}px)`;
+			indicatorEl.style.width = `${w}px`;
+			indicatorEl.style.height = `${btn.offsetHeight}px`;
+		} else {
+			// underline: position under the button
+			indicatorEl.style.transform = `translateX(${x}px) scaleX(${w})`;
+		}
+	}
+
+	// Sync indicator after DOM settles on mount and whenever active changes
+	$effect(() => {
+		if (!listEl) return;
+		// Tick to allow DOM to paint button dimensions
+		requestAnimationFrame(() => moveIndicator(active));
+	});
+
+	function select(id: string) {
+		if (items.find((t) => t.id === id)?.disabled) return;
+		active = id;
+		moveIndicator(id);
+	}
+
+	function handleKeydown(e: KeyboardEvent, currentId: string) {
+		const enabled = items.filter((t) => !t.disabled);
+		const idx = enabled.findIndex((t) => t.id === currentId);
+		if (idx === -1) return;
+
+		let next = -1;
+		if (e.key === 'ArrowRight') next = (idx + 1) % enabled.length;
+		else if (e.key === 'ArrowLeft') next = (idx - 1 + enabled.length) % enabled.length;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = enabled.length - 1;
+		else return;
+
+		e.preventDefault();
+		const nextTab = enabled[next];
+		select(nextTab.id);
+		tabRefs[nextTab.id]?.focus();
+	}
+</script>
+
+<div class="jatui-tabs" class:tabs-pill={variant === 'pill'} class:tabs-underline={variant === 'underline'}>
+	<!-- Tab list -->
+	<div
+		role="tablist"
+		aria-label="Tab navigation"
+		class="tab-list"
+		bind:this={listEl}
+	>
+		<!-- Gliding indicator -->
+		{#if variant === 'pill'}
+			<span
+				class="tab-indicator tab-indicator-pill"
+				aria-hidden="true"
+				bind:this={indicatorEl}
+			></span>
+		{:else}
+			<span
+				class="tab-indicator tab-indicator-underline"
+				aria-hidden="true"
+				bind:this={indicatorEl}
+			></span>
+		{/if}
+
+		{#each items as item (item.id)}
+			<button
+				type="button"
+				role="tab"
+				aria-selected={active === item.id}
+				aria-controls={`tab-panel-${item.id}`}
+				id={`tab-${item.id}`}
+				tabindex={active === item.id ? 0 : -1}
+				disabled={item.disabled}
+				class="tab-btn"
+				class:tab-active={active === item.id}
+				bind:this={tabRefs[item.id]}
+				onclick={() => select(item.id)}
+				onkeydown={(e) => handleKeydown(e, item.id)}
+			>
+				{item.label}
+			</button>
+		{/each}
+	</div>
+
+	<!-- Tab panels -->
+	{#each items as item (item.id)}
+		<div
+			role="tabpanel"
+			id={`tab-panel-${item.id}`}
+			aria-labelledby={`tab-${item.id}`}
+			hidden={active !== item.id}
+			class="tab-panel"
+		>
+			{@render children?.(item.id)}
+		</div>
+	{/each}
+</div>
+
+<style>
+	@layer components {
+		.jatui-tabs {
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
+		}
+
+		/* ── Tab list ─────────────────────────────────────────── */
+		.tab-list {
+			position: relative;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 0;
+		}
+
+		/* ── Pill variant ─────────────────────────────────────── */
+		.tabs-pill .tab-list {
+			background-color: oklch(var(--b2, 93% 0 0) / 1);
+			border-radius: 0.75rem;
+			padding: 3px;
+			gap: 0;
+		}
+
+		.tab-indicator-pill {
+			position: absolute;
+			top: 0;
+			left: 0;
+			background-color: oklch(var(--b1, 100% 0 0) / 1);
+			border-radius: 0.6rem;
+			box-shadow: 0 1px 3px oklch(0% 0 0 / 10%);
+			transition:
+				transform var(--motion-move, 300ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1)),
+				width var(--motion-move, 300ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1)),
+				height var(--motion-move, 300ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
+			pointer-events: none;
+			z-index: 0;
+			will-change: transform, width;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.tab-indicator-pill {
+				transition: none;
+			}
+		}
+
+		/* ── Underline variant ────────────────────────────────── */
+		.tabs-underline .tab-list {
+			border-bottom: 1px solid oklch(var(--b3, 88% 0 0) / 1);
+			padding-bottom: 0;
+			gap: 0;
+		}
+
+		.tab-indicator-underline {
+			position: absolute;
+			bottom: -1px;
+			left: 0;
+			width: 1px;
+			height: 2px;
+			background-color: oklch(var(--p, 55% 0.2 270) / 1);
+			transform-origin: left center;
+			border-radius: 1px;
+			transition:
+				transform var(--motion-move, 300ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
+			pointer-events: none;
+			z-index: 1;
+			will-change: transform;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.tab-indicator-underline {
+				transition: none;
+			}
+		}
+
+		/* ── Tab buttons ──────────────────────────────────────── */
+		.tab-btn {
+			position: relative;
+			z-index: 1;
+			padding: 0.375rem 0.875rem;
+			font-size: 0.875rem;
+			font-weight: 500;
+			border-radius: 0.5rem;
+			border: none;
+			background: transparent;
+			cursor: pointer;
+			color: oklch(var(--bc, 20% 0 0) / 0.6);
+			transition:
+				color var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
+			white-space: nowrap;
+			flex-shrink: 0;
+		}
+
+		.tab-btn:hover:not(:disabled) {
+			color: oklch(var(--bc, 20% 0 0) / 0.85);
+		}
+
+		.tab-btn.tab-active {
+			color: oklch(var(--bc, 20% 0 0) / 1);
+		}
+
+		.tab-btn:disabled {
+			opacity: 0.4;
+			cursor: not-allowed;
+		}
+
+		.tab-btn:focus-visible {
+			outline: 2px solid oklch(var(--p, 55% 0.2 270) / 1);
+			outline-offset: 2px;
+		}
+
+		/* Underline: active tab gets primary color */
+		.tabs-underline .tab-btn.tab-active {
+			color: oklch(var(--p, 55% 0.2 270) / 1);
+		}
+
+		/* Underline: button bottom padding so indicator aligns */
+		.tabs-underline .tab-btn {
+			border-radius: 0.375rem 0.375rem 0 0;
+			padding-bottom: 0.625rem;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.tab-btn {
+				transition: none;
+			}
+		}
+
+		/* ── Panel ────────────────────────────────────────────── */
+		.tab-panel[hidden] {
+			display: none;
+		}
+
+		.tab-panel {
+			outline: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export interface TabItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+interface Props {
+    items: TabItem[];
+    active?: string;
+    variant?: 'pill' | 'underline';
+    children?: Snippet<[string]>;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "active">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/TextInput.svelte

@@ -3,7 +3,8 @@
 	 * TextInput Component
 	 *
 	 * Labeled text input with validation, error state, help text, and character count.
-	 * Converted from Svelte 4 to Svelte 5 runes.
+	 * Adds: motion-token error shake (embedded keyframe, no host-app dependency),
+	 * opt-in floatingLabel prop (label translates/scales on focus-or-filled, pure CSS).
 	 */
 
 	interface Props {
@@ -21,6 +22,13 @@
 		minlength?: number;
 		pattern?: string;
 		showCount?: boolean;
+		/**
+		 * When true, the label floats inside the field at rest and lifts up on
+		 * focus or when filled (kinetics "Floating Label"). Works alongside the
+		 * existing `label` and `error` props. Backwards-compatible: existing
+		 * consumers are unaffected when this prop is absent/false.
+		 */
+		floatingLabel?: boolean;
 		class?: string;
 		id?: string;
 		name?: string;
@@ -42,6 +50,7 @@
 		minlength,
 		pattern,
 		showCount = false,
+		floatingLabel = false,
 		class: className = '',
 		id = `text-input-${Math.random().toString(36).substr(2, 9)}`,
 		name = '',
@@ -51,7 +60,13 @@
 	const sizeClass = $derived({ sm: 'input-sm', md: '', lg: 'input-lg' }[size]);
 
 	const inputClass = $derived(
-		['input input-bordered w-full transition-shadow duration-200', sizeClass, error ? 'input-error' : '', disabled ? 'input-disabled' : '', className]
+		[
+			'input input-bordered w-full transition-shadow duration-200',
+			sizeClass,
+			error ? 'input-error' : '',
+			disabled ? 'input-disabled' : '',
+			className
+		]
 			.filter(Boolean)
 			.join(' ')
 	);
@@ -59,12 +74,12 @@
 	const characterCount = $derived(value?.length || 0);
 	const isOverLimit = $derived(maxlength ? characterCount > maxlength : false);
 
-	// Error-state shake (transitions.dev "Error state shake"). When `error`
-	// transitions from empty to set, replay the `t-input-shake` keyframe from the
-	// host app's transitions.css. Self-contained reflow-restart so a repeat error
-	// re-shakes. Colour stays on the `input-error` class; this owns only motion.
 	let inputEl: HTMLInputElement | undefined = $state();
 	let hadError = false;
+
+	// Error shake: embedded keyframe (jatui-shake-x), no host-app dependency.
+	// Motion tokens: cubic-bezier from kinetics reference, duration ~450ms.
+	// Self-contained reflow-restart so repeat errors re-shake.
 	$effect(() => {
 		const hasError = !!error;
 		if (hasError && !hadError && inputEl) {
@@ -72,44 +87,57 @@
 				typeof window !== 'undefined' &&
 				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 			if (!reduce) {
-				inputEl.classList.remove('t-input-shake');
-				void inputEl.offsetWidth; // force reflow to restart the animation
-				inputEl.classList.add('t-input-shake');
+				inputEl.classList.remove('jatui-input-shake');
+				void inputEl.offsetWidth;
+				inputEl.classList.add('jatui-input-shake');
 			}
 		}
 		hadError = hasError;
 	});
 </script>
 
-<div class="form-control w-full">
-	<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>
-
-	<input
-		bind:this={inputEl}
-		{id}
-		{name}
-		{type}
-		{placeholder}
-		{required}
-		{disabled}
-		{readonly}
-		{maxlength}
-		{minlength}
-		{pattern}
-		autocomplete={autocomplete as AutoFill}
-		bind:value
-		class={inputClass}
-		aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
-		aria-invalid={error ? 'true' : 'false'}
-		onanimationend={() => inputEl?.classList.remove('t-input-shake')}
-	/>
+<div class="form-control w-full" class:jatui-float-wrap={floatingLabel}>
+	{#if !floatingLabel}
+		<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}
+
+	<div class:jatui-float-field={floatingLabel}>
+		<input
+			bind:this={inputEl}
+			{id}
+			{name}
+			{type}
+			placeholder={floatingLabel ? ' ' : placeholder}
+			{required}
+			{disabled}
+			{readonly}
+			{maxlength}
+			{minlength}
+			{pattern}
+			autocomplete={autocomplete as AutoFill}
+			bind:value
+			class={inputClass}
+			aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+			aria-invalid={error ? 'true' : 'false'}
+			onanimationend={() => inputEl?.classList.remove('jatui-input-shake')}
+		/>
+
+		{#if floatingLabel}
+			<label for={id} class="jatui-float-label">
+				{label}
+				{#if required}
+					<span class="text-error ml-1" aria-hidden="true">*</span>
+				{/if}
+			</label>
+		{/if}
+	</div>
 
 	{#if showCount && maxlength}
 		<div class="label">
@@ -129,3 +157,75 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	/* ── Error shake ──────────────────────────────────────────────
+	   Decaying horizontal oscillation on error onset, retriggerable.
+	   Uses the kinetics cubic-bezier for authenticity; transform-only. */
+	@keyframes jatui-shake-x {
+		10%, 90% { transform: translateX(-1px); }
+		20%, 80% { transform: translateX(2px); }
+		30%, 50%, 70% { transform: translateX(-4px); }
+		40%, 60% { transform: translateX(4px); }
+		100% { transform: translateX(0); }
+	}
+
+	:global(.jatui-input-shake) {
+		animation: jatui-shake-x 450ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(.jatui-input-shake) {
+			animation: none;
+		}
+	}
+
+	/* ── Floating Label ───────────────────────────────────────────
+	   Label sits inside the field at rest, lifts + scales on focus or filled.
+	   Pure CSS: uses :placeholder-shown to detect empty state (input must have
+	   placeholder=" " — enforced in the template when floatingLabel=true).
+	   Transform-only: translateY + scale, no layout shift.
+	   Easing: --motion-glide (ease-out-expo), duration --motion-fast (150ms). */
+	.jatui-float-wrap {
+		position: relative;
+	}
+
+	.jatui-float-field {
+		position: relative;
+	}
+
+	/* Nudge input padding to make room for the floating label */
+	.jatui-float-field input {
+		padding-top: 1.125rem;
+		padding-bottom: 0.25rem;
+	}
+
+	.jatui-float-label {
+		position: absolute;
+		left: 1rem;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 0.875rem;
+		color: oklch(var(--bc) / 0.55);
+		pointer-events: none;
+		transform-origin: left center;
+		transition:
+			transform var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1)),
+			color var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1)),
+			font-size var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
+	}
+
+	/* Lift label: on focus or when field has a value (:not(:placeholder-shown)) */
+	.jatui-float-field input:focus ~ .jatui-float-label,
+	.jatui-float-field input:not(:placeholder-shown) ~ .jatui-float-label {
+		transform: translateY(-130%) scale(0.82);
+		color: oklch(var(--p, var(--bc)));
+		font-size: 0.75rem;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-float-label {
+			transition: none;
+		}
+	}
+</style>

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

@@ -2,7 +2,8 @@
  * TextInput Component
  *
  * Labeled text input with validation, error state, help text, and character count.
- * Converted from Svelte 4 to Svelte 5 runes.
+ * Adds: motion-token error shake (embedded keyframe, no host-app dependency),
+ * opt-in floatingLabel prop (label translates/scales on focus-or-filled, pure CSS).
  */
 interface Props {
     label: string;
@@ -19,6 +20,13 @@ interface Props {
     minlength?: number;
     pattern?: string;
     showCount?: boolean;
+    /**
+     * When true, the label floats inside the field at rest and lifts up on
+     * focus or when filled (kinetics "Floating Label"). Works alongside the
+     * existing `label` and `error` props. Backwards-compatible: existing
+     * consumers are unaffected when this prop is absent/false.
+     */
+    floatingLabel?: boolean;
     class?: string;
     id?: string;
     name?: string;

package/dist/components/VoicePlayer.svelte

@@ -279,6 +279,14 @@
             {/if}
           </button>
 
+          <!-- Equalizer bars — functional status: visible while playing, static on pause/reduced-motion -->
+          <div class="vp-eq" aria-hidden="true">
+            <span class="vp-eq-bar" class:vp-eq-playing={isPlaying && !isPaused} style="--vp-eq-delay: -0.45s"></span>
+            <span class="vp-eq-bar" class:vp-eq-playing={isPlaying && !isPaused} style="--vp-eq-delay: -0.15s"></span>
+            <span class="vp-eq-bar" class:vp-eq-playing={isPlaying && !isPaused} style="--vp-eq-delay: -0.62s"></span>
+            <span class="vp-eq-bar" class:vp-eq-playing={isPlaying && !isPaused} style="--vp-eq-delay: -0.30s"></span>
+          </div>
+
           <!-- Volume slider -->
           <input
             type="range"
@@ -420,3 +428,46 @@
     </div>
   </div>
 {/if}
+
+<style>
+  /* Equalizer bars — 4 bars, phase-offset scaleY loop (functional status). */
+  .vp-eq {
+    display: flex;
+    align-items: flex-end;
+    gap: 2px;
+    height: 14px;
+    padding: 0 2px;
+  }
+
+  .vp-eq-bar {
+    display: block;
+    width: 3px;
+    height: 100%;
+    border-radius: 2px;
+    background-color: currentColor;
+    opacity: 0.45;
+    transform: scaleY(0.25);
+    transform-origin: bottom;
+    transition: opacity 150ms var(--motion-glide), transform 150ms var(--motion-glide);
+  }
+
+  .vp-eq-bar.vp-eq-playing {
+    opacity: 0.75;
+    animation: vp-eq-pump 1s ease-in-out infinite;
+    animation-delay: var(--vp-eq-delay, 0s);
+  }
+
+  @keyframes vp-eq-pump {
+    0%, 100% { transform: scaleY(0.25); }
+    50%      { transform: scaleY(1); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vp-eq-bar.vp-eq-playing {
+      animation: none;
+      /* Static affordance: taller bars + accent color when playing */
+      transform: scaleY(0.6);
+      opacity: 1;
+    }
+  }
+</style>

package/dist/components/basic/Alert.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	interface Props {
+		type?: 'info' | 'success' | 'warning' | 'error';
+		title?: string;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { type = 'info', title, class: className = '', children }: Props = $props();
+
+	const typeClass = $derived(
+		{ info: 'alert-info', success: 'alert-success', warning: 'alert-warning', error: 'alert-error' }[type]
+	);
+
+	const icons: Record<string, string> = {
+		info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+		success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+		warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+		error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'
+	};
+</script>
+
+<div
+	class="alert {typeClass} {className}"
+	role={type === 'error' ? 'alert' : 'status'}
+>
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[type]} />
+	</svg>
+	<div>
+		{#if title}
+			<h3 class="font-bold">{title}</h3>
+		{/if}
+		{#if children}{@render children()}{/if}
+	</div>
+</div>

package/dist/components/basic/Alert.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/basic/Breadcrumb.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	export interface BreadcrumbItem {
+		label: string;
+		href?: string;
+	}
+
+	interface Props {
+		items: BreadcrumbItem[];
+		class?: string;
+	}
+
+	let { items, class: className = '' }: Props = $props();
+</script>
+
+<div class="breadcrumbs text-sm {className}">
+	<ul>
+		{#each items as item, i}
+			<li>
+				{#if item.href && i < items.length - 1}
+					<a href={item.href}>{item.label}</a>
+				{:else}
+					<span>{item.label}</span>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</div>

package/dist/components/basic/Breadcrumb.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface Props {
+    items: BreadcrumbItem[];
+    class?: string;
+}
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;