@joewinke/jatui 0.1.33 → 0.2.0

package/dist/components/Button.svelte

@@ -3,17 +3,27 @@
 	 * Button Component
 	 *
 	 * Generic DaisyUI button with variant, size, loading state, and optional href.
+	 * Adds: press squish, submit state machine (idle/loading/success/error),
+	 * success check animation, error shake → auto-idle.
 	 */
 
+	type SubmitState = 'idle' | 'loading' | 'success' | 'error';
+
 	interface Props {
 		variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'error' | 'warning' | 'success' | 'info';
 		size?: 'xs' | 'sm' | 'md' | 'lg';
 		href?: string;
 		type?: 'button' | 'submit' | 'reset';
 		disabled?: boolean;
+		/** @deprecated Use `state="loading"` instead. */
 		loading?: boolean;
-		/** When true, show an animated success check before the label (transitions.dev "Success check"). */
+		/** @deprecated Use `state="success"` instead. */
 		success?: boolean;
+		/**
+		 * Submit state machine. Drives loading dots, success check draw-on, error shake.
+		 * Error auto-returns to idle after the shake animation completes.
+		 */
+		state?: SubmitState;
 		class?: string;
 		onclick?: (e: MouseEvent) => void;
 		children?: import('svelte').Snippet;
@@ -27,21 +37,33 @@
 		disabled = false,
 		loading = false,
 		success = false,
+		state: submitStateProp = 'idle',
 		class: className = '',
 		onclick,
 		children
 	}: Props = $props();
 
+	// Merge legacy boolean props into the state machine
+	const effectiveState = $derived<SubmitState>(
+		loading ? 'loading' :
+		success ? 'success' :
+		submitStateProp
+	);
+
+	const isLoading  = $derived(effectiveState === 'loading');
+	const isSuccess  = $derived(effectiveState === 'success');
+	const isError    = $derived(effectiveState === 'error');
+
 	const variantClass = $derived(
 		{
-			primary: 'btn-primary',
+			primary:   'btn-primary',
 			secondary: 'btn-secondary',
-			outline: 'btn-outline',
-			ghost: 'btn-ghost',
-			error: 'btn-error',
-			warning: 'btn-warning',
-			success: 'btn-success',
-			info: 'btn-info'
+			outline:   'btn-outline',
+			ghost:     'btn-ghost',
+			error:     'btn-error',
+			warning:   'btn-warning',
+			success:   'btn-success',
+			info:      'btn-info'
 		}[variant] || 'btn-primary'
 	);
 
@@ -54,28 +76,181 @@
 		}[size]
 	);
 
-	const buttonClass = $derived(`btn ${variantClass} ${sizeClass} ${className}`.trim());
+	const buttonClass = $derived(
+		[
+			'btn jatui-btn',
+			variantClass,
+			sizeClass,
+			isError ? 'jatui-btn-shake' : '',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	let btnEl: HTMLButtonElement | undefined = $state();
+	let prevError = false;
+
+	// Re-trigger shake when state transitions back to error repeatedly
+	$effect(() => {
+		const nowError = isError;
+		if (nowError && !prevError && btnEl) {
+			const reduce =
+				typeof window !== 'undefined' &&
+				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+			if (!reduce) {
+				btnEl.classList.remove('jatui-btn-shake');
+				void btnEl.offsetWidth;
+				btnEl.classList.add('jatui-btn-shake');
+			}
+		}
+		prevError = nowError;
+	});
+
+	function onShakeEnd(e: AnimationEvent) {
+		if (e.animationName === 'jatui-shake-x' && isError) {
+			// Auto-return to idle via the parent's state binding is not possible
+			// from inside the component — we fire a custom event so the parent can react.
+			btnEl?.dispatchEvent(new CustomEvent('errorshakeend', { bubbles: true }));
+		}
+	}
 </script>
 
 {#if href}
 	<a {href} class={buttonClass} role="button" tabindex="0">
-		{#if children}
-			{@render children()}
-		{/if}
+		{#if children}{@render children()}{/if}
 	</a>
 {:else}
-	<button {type} disabled={disabled || loading} aria-busy={loading || undefined} class={buttonClass} {onclick}>
-		{#if loading}
-			<span class="loading loading-spinner loading-xs"></span>
-		{:else if success}
-			<span class="t-success-check" data-state="in" aria-hidden="true">
+	<button
+		bind:this={btnEl}
+		{type}
+		disabled={disabled || isLoading}
+		aria-busy={isLoading || undefined}
+		class={buttonClass}
+		{onclick}
+		onanimationend={onShakeEnd}
+	>
+		{#if isLoading}
+			<span class="jatui-btn-dots" aria-hidden="true">
+				<i></i><i></i><i></i>
+			</span>
+		{:else if isSuccess}
+			<span class="jatui-btn-check" aria-hidden="true">
 				<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-					<path pathLength="1" d="M5 13l4 4L19 7" />
+					<path class="jatui-check-path" pathLength="1" d="M5 13l4 4L19 7" />
+				</svg>
+			</span>
+		{:else if isError}
+			<span class="jatui-btn-icon-error" aria-hidden="true">
+				<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+					<path d="M18 6L6 18M6 6l12 12"/>
 				</svg>
 			</span>
 		{/if}
-		{#if children}
-			{@render children()}
-		{/if}
+		{#if children}{@render children()}{/if}
 	</button>
 {/if}
+
+<style>
+	/* ── Press Squish ─────────────────────────────────────────────
+	   Quick down on :active, spring back on release. Transform-only.
+	   Local @media guard — motion.css is the backstop but not guaranteed. */
+	.jatui-btn {
+		transition: transform var(--motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) 500ms;
+		will-change: transform;
+	}
+	.jatui-btn:active:not(:disabled) {
+		transform: scale(0.97);
+		transition: transform var(--motion-instant, 80ms) ease-out;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-btn {
+			transition: none;
+		}
+		.jatui-btn:active:not(:disabled) {
+			transform: none;
+			transition: none;
+		}
+	}
+
+	/* ── Loading dots ─────────────────────────────────────────────
+	   Three dots bounce with staggered delays. Transform-only. */
+	.jatui-btn-dots {
+		display: inline-flex;
+		align-items: center;
+		gap: 3px;
+	}
+	.jatui-btn-dots i {
+		display: inline-block;
+		width: 0.3em;
+		height: 0.3em;
+		border-radius: 50%;
+		background: currentColor;
+		animation: jatui-bounce var(--motion-move, 300ms) ease-in-out infinite;
+	}
+	.jatui-btn-dots i:nth-child(2) { animation-delay: 0.12s; }
+	.jatui-btn-dots i:nth-child(3) { animation-delay: 0.24s; }
+
+	@keyframes jatui-bounce {
+		0%, 100% { transform: translateY(0); }
+		50%       { transform: translateY(-4px); }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-btn-dots i {
+			animation: none;
+		}
+	}
+
+	/* ── Success check draw-on ────────────────────────────────────
+	   stroke-dashoffset 1→0 using --motion-glide + --motion-fast.
+	   Confirm spring on the check itself: --motion-spring. */
+	.jatui-btn-check {
+		display: inline-flex;
+		align-items: center;
+	}
+	.jatui-check-path {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 1;
+		transition:
+			stroke-dashoffset var(--motion-fast, 150ms) var(--motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+	}
+	/* Trigger the draw-in as soon as the element is rendered (data-state handled via Svelte) */
+	.jatui-btn-check .jatui-check-path {
+		stroke-dashoffset: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-check-path {
+			transition: none;
+			stroke-dashoffset: 0;
+		}
+	}
+
+	/* ── Error shake ──────────────────────────────────────────────
+	   Decaying horizontal oscillation, retriggerable via class remove+add.
+	   Width is reserved — no layout shift. */
+	@keyframes jatui-shake-x {
+		10%, 90% { transform: translateX(-1px) scale(1); }
+		20%, 80% { transform: translateX(2px) scale(1); }
+		30%, 50%, 70% { transform: translateX(-4px) scale(1); }
+		40%, 60% { transform: translateX(4px) scale(1); }
+		100% { transform: translateX(0) scale(1); }
+	}
+	.jatui-btn-shake {
+		animation: jatui-shake-x 450ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-btn-shake {
+			animation: none;
+		}
+	}
+
+	/* Error icon */
+	.jatui-btn-icon-error {
+		display: inline-flex;
+		align-items: center;
+	}
+</style>

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

@@ -2,16 +2,25 @@
  * Button Component
  *
  * Generic DaisyUI button with variant, size, loading state, and optional href.
+ * Adds: press squish, submit state machine (idle/loading/success/error),
+ * success check animation, error shake → auto-idle.
  */
+type SubmitState = 'idle' | 'loading' | 'success' | 'error';
 interface Props {
     variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'error' | 'warning' | 'success' | 'info';
     size?: 'xs' | 'sm' | 'md' | 'lg';
     href?: string;
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
+    /** @deprecated Use `state="loading"` instead. */
     loading?: boolean;
-    /** When true, show an animated success check before the label (transitions.dev "Success check"). */
+    /** @deprecated Use `state="success"` instead. */
     success?: boolean;
+    /**
+     * Submit state machine. Drives loading dots, success check draw-on, error shake.
+     * Error auto-returns to idle after the shake animation completes.
+     */
+    state?: SubmitState;
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children?: import('svelte').Snippet;

package/dist/components/Carousel.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">
+	import emblaCarouselSvelte from 'embla-carousel-svelte';
+	import type { EmblaCarouselType } from 'embla-carousel';
+	import Button from './Button.svelte';
+
+	interface Props {
+		/** Gap between slides (CSS value, e.g. "1rem", "16px") */
+		gap?: string;
+		/** Number of slides visible at a time */
+		slidesPerView?: number;
+		/** Whether the carousel loops infinitely */
+		loop?: boolean;
+		/** Alignment of selected slide within the viewport */
+		align?: 'start' | 'center' | 'end';
+		/** Enable autoplay; pauses on hover/focus/reduced-motion */
+		autoplay?: boolean;
+		/** Autoplay interval in ms */
+		autoplayInterval?: number;
+		/** Accessible label for the carousel landmark */
+		label?: string;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		gap = '1rem',
+		slidesPerView = 1,
+		loop = false,
+		align = 'start',
+		autoplay = false,
+		autoplayInterval = 4000,
+		label = 'Carousel',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let emblaApi = $state<EmblaCarouselType | null>(null);
+	let selectedIndex = $state(0);
+	let slideCount = $state(0);
+	let canScrollPrev = $state(false);
+	let canScrollNext = $state(false);
+	let autoplayTimer = $state<ReturnType<typeof setInterval> | null>(null);
+	let isHovered = $state(false);
+	let isFocused = $state(false);
+
+	const reducedMotion =
+		typeof window !== 'undefined'
+			? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			: false;
+
+	const emblaOptions = $derived({
+		loop,
+		align,
+		duration: reducedMotion ? 0 : 25
+	});
+
+	function onEmblaInit(evt: CustomEvent<EmblaCarouselType>) {
+		emblaApi = evt.detail;
+		slideCount = emblaApi.slideNodes().length;
+		updateState();
+		emblaApi.on('select', updateState);
+		emblaApi.on('reInit', updateState);
+		if (autoplay && !reducedMotion) startAutoplay();
+	}
+
+	function updateState() {
+		if (!emblaApi) return;
+		selectedIndex = emblaApi.selectedScrollSnap();
+		canScrollPrev = emblaApi.canScrollPrev();
+		canScrollNext = emblaApi.canScrollNext();
+	}
+
+	function scrollPrev() {
+		emblaApi?.scrollPrev();
+	}
+
+	function scrollNext() {
+		emblaApi?.scrollNext();
+	}
+
+	function scrollTo(index: number) {
+		emblaApi?.scrollTo(index);
+	}
+
+	function startAutoplay() {
+		stopAutoplay();
+		autoplayTimer = setInterval(() => {
+			if (!emblaApi) return;
+			if (loop || emblaApi.canScrollNext()) {
+				emblaApi.scrollNext();
+			} else {
+				emblaApi.scrollTo(0);
+			}
+		}, autoplayInterval);
+	}
+
+	function stopAutoplay() {
+		if (autoplayTimer !== null) {
+			clearInterval(autoplayTimer);
+			autoplayTimer = null;
+		}
+	}
+
+	$effect(() => {
+		if (!autoplay || reducedMotion || !emblaApi) return;
+		if (isHovered || isFocused) {
+			stopAutoplay();
+		} else {
+			startAutoplay();
+		}
+		return stopAutoplay;
+	});
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'ArrowLeft') {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === 'ArrowRight') {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<section
+	aria-label={label}
+	aria-roledescription="carousel"
+	class="jatui-carousel {className}"
+	onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
+	onfocusin={() => (isFocused = true)}
+	onfocusout={() => (isFocused = false)}
+	onkeydown={handleKeyDown}
+>
+	<div
+		class="jatui-carousel-viewport"
+		use:emblaCarouselSvelte={{ options: emblaOptions, plugins: [] }}
+		onemblaInit={onEmblaInit}
+	>
+		<div
+			class="jatui-carousel-track"
+			style:gap
+			style:--jatui-carousel-spv={slidesPerView}
+			style:--jatui-carousel-gap={gap}
+		>
+			{#if children}{@render children()}{/if}
+		</div>
+	</div>
+
+	{#if slideCount > 1}
+		<div class="jatui-carousel-controls" aria-label="Carousel controls">
+			<Button
+				variant="ghost"
+				size="sm"
+				onclick={scrollPrev}
+				disabled={!loop && !canScrollPrev}
+			>
+				<span class="sr-only">Previous slide</span>
+				<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<path d="M15 18l-6-6 6-6"/>
+				</svg>
+			</Button>
+
+			<div class="jatui-carousel-dots" role="tablist" aria-label="Slides">
+				{#each Array(slideCount) as _, i}
+					<button
+						type="button"
+						role="tab"
+						aria-selected={selectedIndex === i}
+						aria-label="Go to slide {i + 1}"
+						class="jatui-carousel-dot"
+						class:jatui-carousel-dot--active={selectedIndex === i}
+						onclick={() => scrollTo(i)}
+					></button>
+				{/each}
+			</div>
+
+			<Button
+				variant="ghost"
+				size="sm"
+				onclick={scrollNext}
+				disabled={!loop && !canScrollNext}
+			>
+				<span class="sr-only">Next slide</span>
+				<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<path d="M9 18l6-6-6-6"/>
+				</svg>
+			</Button>
+		</div>
+	{/if}
+</section>
+
+<style>
+	.jatui-carousel {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-lg);
+	}
+
+	.jatui-carousel-viewport {
+		overflow: hidden;
+		border-radius: var(--jatui-radius-box);
+	}
+
+	.jatui-carousel-track {
+		display: flex;
+		touch-action: pan-y pinch-zoom;
+		/* gap is set via inline style from the gap prop */
+	}
+
+	/* ── Slide sizing ─────────────────────────────────────────────
+	   Each direct child of the track is a slide. We let consumers
+	   wrap content in whatever element they like; we size them via
+	   the CSS custom property that the component owner sets via
+	   slidesPerView. Because slidesPerView is a prop, we compute
+	   the flex-basis here via an inline var. We expose it as a
+	   CSS var on the track so slides can inherit it. */
+	.jatui-carousel-track > :global(*) {
+		flex: 0 0 calc((100% - (var(--jatui-carousel-spv, 1) - 1) * var(--jatui-carousel-gap, 1rem)) / var(--jatui-carousel-spv, 1));
+		min-width: 0;
+	}
+
+	/* ── Controls ─────────────────────────────────────────────────*/
+	.jatui-carousel-controls {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--jatui-space-lg);
+	}
+
+	/* ── Dot indicators ───────────────────────────────────────────*/
+	.jatui-carousel-dots {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm);
+	}
+
+	.jatui-carousel-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 9999px;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		background: oklch(from var(--color-base-content, currentColor) l c h / 0.25);
+		transition:
+			width var(--motion-move) var(--motion-glide),
+			background var(--motion-fast) var(--motion-glide);
+	}
+
+	.jatui-carousel-dot--active {
+		width: 18px;
+		background: oklch(from var(--color-base-content, currentColor) l c h / 0.75);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-carousel-dot {
+			transition: none;
+		}
+		.jatui-carousel-dot--active {
+			outline: 2px solid currentColor;
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+interface Props {
+    /** Gap between slides (CSS value, e.g. "1rem", "16px") */
+    gap?: string;
+    /** Number of slides visible at a time */
+    slidesPerView?: number;
+    /** Whether the carousel loops infinitely */
+    loop?: boolean;
+    /** Alignment of selected slide within the viewport */
+    align?: 'start' | 'center' | 'end';
+    /** Enable autoplay; pauses on hover/focus/reduced-motion */
+    autoplay?: boolean;
+    /** Autoplay interval in ms */
+    autoplayInterval?: number;
+    /** Accessible label for the carousel landmark */
+    label?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Carousel: import("svelte").Component<Props, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/components/ChipInput.svelte

@@ -317,10 +317,10 @@
 			sel.removeAllRanges();
 			sel.addRange(newRange);
 		} else {
-			// Create chip element
+			// Create chip element — spring pop on add
 			const chip = document.createElement('span');
 			chip.contentEditable = 'false';
-			chip.className = chipInfo.className;
+			chip.className = chipInfo.className + ' chip-enter';
 			chip.dataset.chipValue = suggestion.value;
 			for (const [key, val] of Object.entries(chipInfo.dataAttrs)) {
 				chip.dataset[key] = val;
@@ -399,6 +399,41 @@
 
 	import { fly } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
+
+	// Animate chip removal: add exit class, wait for animation, then remove node
+	function animateChipRemove(chip: HTMLElement) {
+		chip.classList.add('chip-exit');
+		chip.addEventListener('animationend', () => chip.remove(), { once: true });
+	}
+
+	// Override Backspace to animate chip removal before DOM removal
+	function handleKeydownWithChipAnim(e: KeyboardEvent) {
+		if (e.key === 'Backspace' && editableRef) {
+			const sel = window.getSelection();
+			if (sel && sel.rangeCount > 0) {
+				const range = sel.getRangeAt(0);
+				if (range.collapsed) {
+					const container = range.startContainer;
+					const offset = range.startOffset;
+					// Check if cursor is right after a chip span
+					let prevNode: Node | null = null;
+					if (container.nodeType === Node.TEXT_NODE && offset === 0) {
+						prevNode = container.previousSibling;
+					} else if (container.nodeType !== Node.TEXT_NODE) {
+						prevNode = (container as Element).childNodes[offset - 1] ?? null;
+					}
+					if (prevNode instanceof HTMLElement && prevNode.dataset.chipValue !== undefined) {
+						e.preventDefault();
+						animateChipRemove(prevNode);
+						// Defer value sync until after animation
+						setTimeout(() => syncValue(), 250);
+						return;
+					}
+				}
+			}
+		}
+		handleKeydown(e);
+	}
 </script>
 
 <div class="chip-input-wrapper relative">
@@ -417,7 +452,7 @@
 			{disabled ? 'opacity: 0.5; cursor: not-allowed;' : ''}
 		"
 		oninput={handleInput}
-		onkeydown={handleKeydown}
+		onkeydown={handleKeydownWithChipAnim}
 		onpaste={handlePaste}
 		onfocus={onfocus}
 		onblur={handleBlur}
@@ -606,4 +641,29 @@
 		border-radius: 2px;
 		font-size: 10px;
 	}
+
+	/* Chip kinetics: spring pop on add, glide exit on remove */
+	:global(.chip-enter) {
+		animation: chip-pop var(--motion-fast) var(--motion-spring);
+	}
+
+	:global(.chip-exit) {
+		animation: chip-out var(--motion-fast) var(--motion-glide) forwards;
+		pointer-events: none;
+	}
+
+	@keyframes chip-pop {
+		from { transform: scale(0.4); opacity: 0; }
+		to   { transform: scale(1);   opacity: 1; }
+	}
+
+	@keyframes chip-out {
+		from { transform: scale(1); opacity: 1; }
+		to   { transform: scale(0.4); opacity: 0; }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(.chip-enter) { animation: none; }
+		:global(.chip-exit)  { animation: none; opacity: 0; }
+	}
 </style>