@joewinke/jatui 0.1.0

package/src/lib/components/ColorSelector.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { slide } from "svelte/transition"
+
+  let {
+    selectedColor = null,
+    onSelect = (color: string | null) => {},
+    colorLabel = "Collection Color",
+    compact = false,
+  } = $props<{
+    selectedColor: string | null
+    onSelect?: (color: string | null) => void
+    colorLabel?: string
+    compact?: boolean
+  }>()
+
+  let showSelector = $state(false)
+  let lastSelectedColor = $state(selectedColor)
+  let selectionAnimating = $state(false)
+
+  const colorOptions = [
+    { name: "Primary", value: "primary", bgClass: "bg-primary", textClass: "text-primary-content" },
+    { name: "Secondary", value: "secondary", bgClass: "bg-secondary", textClass: "text-secondary-content" },
+    { name: "Accent", value: "accent", bgClass: "bg-accent", textClass: "text-accent-content" },
+    { name: "Neutral", value: "neutral", bgClass: "bg-neutral", textClass: "text-neutral-content" },
+    { name: "Info", value: "info", bgClass: "bg-info", textClass: "text-info-content" },
+    { name: "Success", value: "success", bgClass: "bg-success", textClass: "text-success-content" },
+    { name: "Warning", value: "warning", bgClass: "bg-warning", textClass: "text-warning-content" },
+    { name: "Error", value: "error", bgClass: "bg-error", textClass: "text-error-content" },
+  ]
+
+  function isSelected(colorValue: string): boolean {
+    if (!selectedColor) return false
+    return selectedColor === colorValue
+  }
+
+  function handleColorSelect(colorValue: string) {
+    if (colorValue !== selectedColor) {
+      lastSelectedColor = colorValue
+      selectionAnimating = true
+      onSelect(colorValue)
+
+      setTimeout(() => {
+        selectionAnimating = false
+        if (compact) {
+          setTimeout(() => { showSelector = false }, 800)
+        }
+      }, 500)
+    } else {
+      onSelect(colorValue)
+    }
+  }
+</script>
+
+<div class="form-control">
+  <button
+    type="button"
+    class="flex w-full items-center justify-between px-2 py-3 hover:bg-base-200 rounded-lg transition-colors"
+    onclick={() => (showSelector = !showSelector)}
+  >
+    <div class="label flex items-center gap-2 cursor-pointer">
+      <span class="label-text font-medium">{colorLabel}</span>
+      {#if selectedColor}
+        <div class="ml-4">
+          <div class="color-preview {selectedColor}"></div>
+        </div>
+      {/if}
+    </div>
+    <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" class="transition-transform duration-300 {showSelector ? 'rotate-180' : ''}">
+      <polyline points="6 9 12 15 18 9"></polyline>
+    </svg>
+  </button>
+
+  {#if showSelector}
+    <div class="color-selector-wrapper transition-all" transition:slide={{ duration: 200 }}>
+      <div class="grid grid-cols-4 gap-3 p-4 bg-base-200 rounded-lg">
+        {#each colorOptions as option}
+          <button
+            type="button"
+            class="tooltip tooltip-top color-btn {option.bgClass} border-2 border-base-300
+              {isSelected(option.value) ? 'selected' : ''}
+              {selectionAnimating && lastSelectedColor === option.value ? 'selecting' : ''}"
+            data-tip={option.name}
+            onclick={() => handleColorSelect(option.value)}
+            aria-label="Select {option.name} color"
+          >
+            {#if isSelected(option.value) || (selectionAnimating && lastSelectedColor === option.value)}
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="{option.textClass} {selectionAnimating && lastSelectedColor === option.value ? 'animate-checkmark' : ''}">
+                <polyline points="20 6 9 17 4 12"></polyline>
+              </svg>
+            {/if}
+          </button>
+        {/each}
+      </div>
+
+      {#if selectedColor}
+        <div class="flex justify-end mt-2">
+          <button
+            class="text-xs text-base-content/60 hover:text-base-content transition-colors px-2 py-1 rounded hover:bg-base-200"
+            onclick={() => onSelect(null)}
+          >
+            Clear color
+          </button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .color-selector-wrapper { padding-top: 0.5rem; }
+
+  .color-btn {
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .color-btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .color-btn.selected {
+    border-color: white;
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .color-btn.selecting {
+    transform: scale(1.15);
+    border-color: white;
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.5);
+    animation: pulse 0.5s ease;
+  }
+
+  .color-preview {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    border: 1px solid hsla(var(--bc) / 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  @keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.15); }
+    100% { transform: scale(1.1); }
+  }
+
+  .animate-checkmark {
+    animation: zoom-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  @keyframes zoom-in {
+    0% { transform: scale(0); opacity: 0; }
+    100% { transform: scale(1); opacity: 1; }
+  }
+</style>

package/src/lib/components/ConfirmModal.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  let {
+    title = "Confirm Action",
+    message = "Are you sure you want to proceed?",
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    confirmButtonClass = "btn-primary",
+    isLoading = false,
+    iconClass = "text-warning",
+    onconfirm,
+    oncancel,
+  } = $props<{
+    title?: string
+    message?: string
+    confirmText?: string
+    cancelText?: string
+    confirmButtonClass?: string
+    isLoading?: boolean
+    iconClass?: string
+    onconfirm?: () => void
+    oncancel?: () => void
+  }>()
+
+  function confirm() {
+    onconfirm?.()
+  }
+
+  function cancel() {
+    oncancel?.()
+  }
+</script>
+
+<div class="modal modal-open">
+  <div class="modal-box max-w-md">
+    <div class="flex justify-between items-center mb-4">
+      <h3 class="font-bold text-lg">{title}</h3>
+      <button class="btn btn-ghost btn-sm" onclick={cancel}>
+        <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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
+    </div>
+
+    <div class="py-4">
+      <div class="flex justify-center mb-4">
+        <div class="p-4 rounded-full bg-base-200">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={iconClass}><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+        </div>
+      </div>
+
+      <p class="text-center mb-6">{message}</p>
+
+      <div class="flex gap-2">
+        <button type="button" class="btn btn-outline flex-1" onclick={cancel} disabled={isLoading}>
+          {cancelText}
+        </button>
+        <button type="button" class={`btn ${confirmButtonClass} flex-1`} onclick={confirm} disabled={isLoading}>
+          {#if isLoading}
+            <span class="loading loading-spinner loading-xs"></span>
+            Processing...
+          {:else}
+            {confirmText}
+          {/if}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="modal-backdrop"
+    onclick={cancel}
+    onkeydown={(e) => { if (e.key === 'Escape') cancel() }}
+    role="button"
+    tabindex="0"
+    aria-label="Close modal"
+  ></div>
+</div>

package/src/lib/components/CountdownTimer.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { fade } from "svelte/transition"
+
+  type TimerProps = {
+    targetDate?: string | null
+    minutesToAdd?: number
+    onComplete?: () => void
+    size?: "sm" | "md" | "lg"
+    completionMessage?: string
+  }
+
+  let {
+    targetDate = null,
+    minutesToAdd = 1,
+    onComplete = () => {},
+    size = "sm",
+    completionMessage = "Complete",
+  } = $props<TimerProps>()
+
+  let minutes = $state(0)
+  let seconds = $state(0)
+  let countdownInterval: number | null = null
+  let startTime: Date | null = null
+  let isComplete = $state(false)
+
+  const sizeClasses: Record<"sm" | "md" | "lg", string> = {
+    sm: "text-lg",
+    md: "text-2xl",
+    lg: "text-4xl",
+  }
+  let sizeClass = $derived(sizeClasses[size])
+
+  function updateCountdown() {
+    const now = new Date()
+    let targetTime: Date
+
+    if (targetDate) {
+      const finishTime = new Date(targetDate)
+      targetTime = new Date(finishTime.getTime() + minutesToAdd * 60 * 1000)
+    } else {
+      if (!startTime) {
+        startTime = now
+      }
+      targetTime = new Date(startTime.getTime() + minutesToAdd * 60 * 1000)
+    }
+
+    const diff = targetTime.getTime() - now.getTime()
+
+    if (diff <= 0) {
+      if (countdownInterval) {
+        clearInterval(countdownInterval)
+        countdownInterval = null
+      }
+      minutes = 0
+      seconds = 0
+      isComplete = true
+      onComplete()
+      return
+    }
+
+    minutes = Math.floor(diff / (1000 * 60))
+    seconds = Math.floor((diff % (1000 * 60)) / 1000)
+  }
+
+  $effect(() => {
+    if (targetDate || minutesToAdd > 0) {
+      updateCountdown()
+      countdownInterval = setInterval(updateCountdown, 1000) as unknown as number
+    }
+
+    return () => {
+      if (countdownInterval) {
+        clearInterval(countdownInterval)
+        countdownInterval = null
+      }
+    }
+  })
+</script>
+
+<div class="text-info">
+  {#if !isComplete}
+    EST.&nbsp;
+    <span class="countdown font-mono {sizeClass}" transition:fade>
+      <span style="--value:{minutes};"></span>:
+      <span style="--value:{seconds};"></span>
+      &nbsp;REMAINING
+    </span>
+  {:else}
+    <span class="countdown {sizeClass}" transition:fade>
+      <span class="loading loading-dots loading-md mr-3"></span>
+      {completionMessage}
+    </span>
+  {/if}
+</div>

package/src/lib/components/DateRangePicker.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	/**
+	 * DateRangePicker Component
+	 * DaisyUI dropdown for filtering by date range with quick presets
+	 */
+
+	import { formatShortDate } from '../utils/dateFormatters';
+
+	interface Props {
+		selectedRange: string; // 'today' | 'yesterday' | 'week' | 'month' | 'all' | 'custom'
+		customFrom?: string | null; // ISO date for custom range
+		customTo?: string | null; // ISO date for custom range
+		onRangeChange: (range: string, from?: string, to?: string) => void;
+		compact?: boolean;
+	}
+
+	let {
+		selectedRange = 'all',
+		customFrom = null,
+		customTo = null,
+		onRangeChange,
+		compact = false
+	}: Props = $props();
+
+	// Local state for custom date inputs
+	let localFrom = $state(customFrom || '');
+	let localTo = $state(customTo || '');
+	let showCustom = $state(false);
+
+	// Preset options
+	const presets = [
+		{ value: 'today', label: 'Today', icon: '1' },
+		{ value: 'yesterday', label: 'Yesterday', icon: '-1' },
+		{ value: 'week', label: 'Last 7 days', icon: '7' },
+		{ value: 'month', label: 'Last 30 days', icon: '30' },
+		{ value: 'all', label: 'All time', icon: '*' }
+	];
+
+	// Get display label for current selection
+	const displayLabel = $derived.by(() => {
+		if (selectedRange === 'custom' && customFrom && customTo) {
+			return `${formatShortDate(customFrom)} - ${formatShortDate(customTo)}`;
+		}
+		if (selectedRange === 'custom' && customFrom) {
+			return `From ${formatShortDate(customFrom)}`;
+		}
+		if (selectedRange === 'custom' && customTo) {
+			return `Until ${formatShortDate(customTo)}`;
+		}
+		return presets.find(p => p.value === selectedRange)?.label || 'All time';
+	});
+
+	function handlePresetSelect(preset: string) {
+		showCustom = false;
+		localFrom = '';
+		localTo = '';
+		onRangeChange(preset);
+
+		// Close dropdown
+		if (document.activeElement instanceof HTMLElement) {
+			document.activeElement.blur();
+		}
+	}
+
+	function handleCustomApply() {
+		if (localFrom || localTo) {
+			onRangeChange('custom', localFrom || undefined, localTo || undefined);
+
+			// Close dropdown
+			if (document.activeElement instanceof HTMLElement) {
+				document.activeElement.blur();
+			}
+		}
+	}
+
+	function toggleCustom() {
+		showCustom = !showCustom;
+	}
+</script>
+
+<!-- Date Range Picker -->
+<div class="dropdown dropdown-end">
+	<!-- Trigger Button -->
+	<div
+		tabindex="0"
+		role="button"
+		class="{compact ? 'px-2 py-1 text-[10px]' : 'px-2.5 py-1.5 text-xs'} rounded cursor-pointer transition-all flex items-center gap-1.5 font-mono tracking-wider whitespace-nowrap bg-base-200 border border-base-300 text-base-content/60"
+	>
+		<!-- Calendar icon -->
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="w-4 h-4 text-primary"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+		</svg>
+		<span class="hidden sm:inline">{displayLabel}</span>
+		<span class="sm:hidden">
+			{#if selectedRange === 'today'}
+				1d
+			{:else if selectedRange === 'yesterday'}
+				-1d
+			{:else if selectedRange === 'week'}
+				7d
+			{:else if selectedRange === 'month'}
+				30d
+			{:else if selectedRange === 'all'}
+				All
+			{:else}
+				Custom
+			{/if}
+		</span>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="w-3 h-3 text-base-content/50"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+		</svg>
+	</div>
+
+	<!-- Dropdown Content -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		tabindex="0"
+		class="dropdown-content rounded-box z-40 w-72 p-3 shadow-lg mt-1 bg-base-200 border border-base-300"
+	>
+		<!-- Quick Presets -->
+		<div class="flex flex-wrap gap-1.5 mb-3">
+			{#each presets as preset}
+				<button
+					type="button"
+					class="px-2 py-1 rounded cursor-pointer transition-all duration-200 font-mono text-xs border {selectedRange === preset.value ? 'bg-primary/20 border-primary text-primary' : 'bg-base-300 border-base-content/20 text-base-content opacity-60 hover:opacity-100'}"
+					onclick={() => handlePresetSelect(preset.value)}
+				>
+					{preset.label}
+				</button>
+			{/each}
+		</div>
+
+		<!-- Divider -->
+		<div class="my-2 flex items-center gap-2">
+			<div class="flex-1 h-px bg-base-300"></div>
+			<span class="text-xs font-mono uppercase tracking-wider text-base-content/40">or custom</span>
+			<div class="flex-1 h-px bg-base-300"></div>
+		</div>
+
+		<!-- Custom Range Section -->
+		<div class="space-y-2">
+			<div class="flex gap-2">
+				<div class="form-control flex-1">
+					<label class="label py-0.5" for="date-range-from">
+						<span class="label-text text-xs font-mono uppercase tracking-wider text-base-content/50">From</span>
+					</label>
+					<input
+						id="date-range-from"
+						type="date"
+						class="input input-sm w-full font-mono bg-base-300 border border-base-300 text-base-content"
+						bind:value={localFrom}
+						max={localTo || undefined}
+					/>
+				</div>
+				<div class="form-control flex-1">
+					<label class="label py-0.5" for="date-range-to">
+						<span class="label-text text-xs font-mono uppercase tracking-wider text-base-content/50">To</span>
+					</label>
+					<input
+						id="date-range-to"
+						type="date"
+						class="input input-sm w-full font-mono bg-base-300 border border-base-300 text-base-content"
+						bind:value={localTo}
+						min={localFrom || undefined}
+					/>
+				</div>
+			</div>
+			<button
+				type="button"
+				class="btn btn-sm btn-primary w-full font-mono"
+				onclick={handleCustomApply}
+				disabled={!localFrom && !localTo}
+			>
+				Apply Custom Range
+			</button>
+		</div>
+	</div>
+</div>

package/src/lib/components/Drawer.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	/**
+	 * Drawer Component
+	 *
+	 * Sliding panel overlay with backdrop, escape key, and header actions.
+	 */
+
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		open?: boolean;
+		title?: string;
+		position?: 'left' | 'right';
+		size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+		showCloseButton?: boolean;
+		contentClass?: string;
+		onclose?: () => void;
+		class?: string;
+		headerActions?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title = '',
+		position = 'right',
+		size = 'md',
+		showCloseButton = true,
+		contentClass = '',
+		onclose,
+		class: className = '',
+		headerActions,
+		children
+	}: Props = $props();
+
+	const sizeClasses: Record<string, string> = {
+		sm: 'w-80',
+		md: 'w-96',
+		lg: 'w-[640px]',
+		xl: 'w-[800px]',
+		'2xl': 'w-[960px]',
+		'3xl': 'w-[1024px] max-w-[calc(100vw-2rem)]',
+		full: 'w-full'
+	};
+
+	function handleClose() {
+		open = false;
+		onclose?.();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && open) {
+			e.stopImmediatePropagation();
+			handleClose();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div
+	class="fixed inset-0 bg-black/50 transition-opacity duration-300 {open
+		? 'z-[100] opacity-100'
+		: 'opacity-0 pointer-events-none -z-10'}"
+	onclick={open ? handleClose : undefined}
+	role={open ? 'presentation' : undefined}
+></div>
+
+<div
+	class="fixed top-0 {position === 'right'
+		? 'right-0'
+		: 'left-0'} h-full bg-base-100 shadow-xl {sizeClasses[size]} flex flex-col transition-all duration-300 {open
+		? 'z-[101] translate-x-0'
+		: '-z-10 ' + (position === 'right' ? 'translate-x-full' : '-translate-x-full')} {className}"
+	role="dialog"
+	aria-modal={open}
+	aria-label={title}
+	aria-hidden={!open}
+>
+	{#if title || showCloseButton || headerActions}
+		<div class="flex items-center justify-between p-6 border-b border-base-200 flex-shrink-0">
+			{#if title}
+				<h2 class="text-xl font-semibold">{title}</h2>
+			{/if}
+			<div class="flex items-center gap-2 ml-auto">
+				{#if headerActions}
+					{@render headerActions()}
+				{/if}
+				{#if showCloseButton}
+					<button
+						type="button"
+						class="btn btn-sm btn-circle btn-ghost"
+						onclick={handleClose}
+						aria-label="Close drawer"
+					>
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+						</svg>
+					</button>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<div class="flex-1 overflow-y-auto {contentClass}">
+		{#if open && children}
+			{@render children()}
+		{/if}
+	</div>
+</div>