@joewinke/jatui 0.1.22 → 0.1.24

package/src/lib/components/PhoneInput.svelte

@@ -1,212 +0,0 @@
-<script lang="ts">
-	/**
-	 * PhoneInput Component — International phone number input.
-	 *
-	 * Country selector dropdown (flag + dial code + search) alongside a tel input.
-	 * Formats numbers with libphonenumber-js AsYouType as the user types.
-	 * Exposes the parsed E.164 value via `bind:value` and a hidden form field
-	 * named `name` so it submits cleanly with native `<form>` actions.
-	 *
-	 * Auto-detects country when the user's input begins with a `+` prefix.
-	 */
-	import { AsYouType, parsePhoneNumberFromString, type CountryCode } from "libphonenumber-js";
-	import { listCountries, PRIORITY_COUNTRIES, type CountryOption } from "../utils/phone";
-
-	type Props = {
-		name?: string;
-		value?: string;
-		defaultCountry?: CountryCode;
-		required?: boolean;
-		placeholder?: string;
-		id?: string;
-		class?: string;
-		disabled?: boolean;
-		autocomplete?: HTMLInputElement["autocomplete"];
-	};
-
-	let {
-		name = "",
-		value = $bindable(""),
-		defaultCountry = "US",
-		required = false,
-		placeholder = "Phone number",
-		id,
-		class: klass = "",
-		disabled = false,
-		autocomplete = "tel" as HTMLInputElement["autocomplete"],
-	}: Props = $props();
-
-	const all = listCountries();
-	const priorityOptions = PRIORITY_COUNTRIES.map((c) => all.find((o) => o.code === c)).filter(
-		(o): o is CountryOption => !!o,
-	);
-	const otherOptions = all.filter((o) => !PRIORITY_COUNTRIES.includes(o.code));
-
-	function initialFrom(e164: string): { country: CountryCode; national: string } {
-		if (e164) {
-			const parsed = parsePhoneNumberFromString(e164);
-			if (parsed?.country) {
-				return { country: parsed.country, national: parsed.formatNational() };
-			}
-		}
-		return { country: defaultCountry, national: "" };
-	}
-
-	const init = initialFrom(value ?? "");
-	let country = $state<CountryCode>(init.country);
-	let display = $state<string>(init.national);
-	let dropdownOpen = $state(false);
-	let search = $state("");
-
-	const current = $derived(all.find((o) => o.code === country) ?? all[0]);
-
-	const filteredOthers = $derived.by(() => {
-		const q = search.trim().toLowerCase();
-		if (!q) return otherOptions;
-		return otherOptions.filter(
-			(o) => o.name.toLowerCase().includes(q) || o.dialCode.includes(q) || o.code.toLowerCase().includes(q),
-		);
-	});
-
-	function updateE164(raw: string, cc: CountryCode) {
-		const parsed = parsePhoneNumberFromString(raw, cc);
-		value = parsed?.isValid() ? parsed.number : "";
-	}
-
-	function onInput(e: Event) {
-		const raw = (e.target as HTMLInputElement).value;
-		if (raw.startsWith("+")) {
-			const parsed = parsePhoneNumberFromString(raw);
-			if (parsed?.country) {
-				country = parsed.country;
-				display = parsed.formatNational();
-				value = parsed.isValid() ? parsed.number : "";
-				return;
-			}
-			display = raw;
-			value = "";
-			return;
-		}
-		const formatter = new AsYouType(country);
-		display = formatter.input(raw);
-		updateE164(raw, country);
-	}
-
-	function pickCountry(code: CountryCode) {
-		country = code;
-		dropdownOpen = false;
-		search = "";
-		updateE164(display, code);
-	}
-
-	function toggleDropdown() {
-		dropdownOpen = !dropdownOpen;
-		if (dropdownOpen) search = "";
-	}
-
-	function onBlur() {
-		setTimeout(() => (dropdownOpen = false), 150);
-	}
-
-	$effect(() => {
-		if (!value) return;
-		const parsed = parsePhoneNumberFromString(value);
-		if (parsed?.country && parsed.country !== country) {
-			country = parsed.country;
-			display = parsed.formatNational();
-		}
-	});
-</script>
-
-<div class="flex w-full {klass}">
-	<div class="relative">
-		<button
-			type="button"
-			class="btn btn-outline rounded-r-none border-r-0 px-3 min-w-[5.5rem] justify-start"
-			onclick={toggleDropdown}
-			{disabled}
-			aria-label="Select country code"
-			aria-expanded={dropdownOpen}
-			aria-haspopup="listbox"
-		>
-			<span class="text-lg leading-none">{current?.flag}</span>
-			<span class="text-sm font-mono">{current?.dialCode}</span>
-			<svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-				<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-			</svg>
-		</button>
-
-		{#if dropdownOpen}
-			<div
-				class="absolute z-50 mt-1 w-72 max-h-80 overflow-y-auto bg-base-200 border border-base-300 rounded-lg"
-				role="listbox"
-			>
-				<div class="sticky top-0 bg-base-100 p-2 border-b border-base-300">
-					<input
-						type="text"
-						class="input input-sm input-bordered w-full"
-						placeholder="Search country…"
-						bind:value={search}
-						aria-label="Search country"
-					/>
-				</div>
-				<ul class="py-1">
-					{#if !search}
-						{#each priorityOptions as opt (opt.code)}
-							<li>
-								<button
-									type="button"
-									class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 {opt.code === country ? 'bg-primary/10' : ''}"
-									onclick={() => pickCountry(opt.code)}
-									role="option"
-									aria-selected={opt.code === country}
-								>
-									<span class="text-lg leading-none">{opt.flag}</span>
-									<span class="flex-1 text-left">{opt.name}</span>
-									<span class="text-base-content/60 font-mono text-xs">{opt.dialCode}</span>
-								</button>
-							</li>
-						{/each}
-						<li><div class="border-t border-base-300 my-1"></div></li>
-					{/if}
-					{#each filteredOthers as opt (opt.code)}
-						<li>
-							<button
-								type="button"
-								class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 {opt.code === country ? 'bg-primary/10' : ''}"
-								onclick={() => pickCountry(opt.code)}
-								role="option"
-								aria-selected={opt.code === country}
-							>
-								<span class="text-lg leading-none">{opt.flag}</span>
-								<span class="flex-1 text-left">{opt.name}</span>
-								<span class="text-base-content/60 font-mono text-xs">{opt.dialCode}</span>
-							</button>
-						</li>
-					{/each}
-					{#if filteredOthers.length === 0}
-						<li class="px-3 py-2 text-sm text-base-content/60">No matches</li>
-					{/if}
-				</ul>
-			</div>
-		{/if}
-	</div>
-
-	<input
-		type="tel"
-		class="input input-bordered rounded-l-none flex-1 min-w-0"
-		{id}
-		{placeholder}
-		{required}
-		{disabled}
-		{autocomplete}
-		value={display}
-		oninput={onInput}
-		onblur={onBlur}
-		aria-describedby={id ? `${id}-help` : undefined}
-	/>
-
-	{#if name}
-		<input type="hidden" {name} {value} />
-	{/if}
-</div>

package/src/lib/components/ResizableDivider.svelte

@@ -1,307 +0,0 @@
-<script lang="ts">
-	/**
-	 * ResizableDivider Component
-	 * A draggable divider for resizing split panels.
-	 *
-	 * Features:
-	 * - Horizontal drag handle with grippy visual
-	 * - Mouse and touch support
-	 * - Emits percentage changes via callback
-	 * - Visual feedback on hover/drag
-	 * - Snap-to-collapse support with click-to-restore
-	 * - Proximity detection: grows larger when mouse approaches
-	 * - Glow effect on hover for better visibility
-	 */
-
-	interface Props {
-		onResize: (deltaY: number) => void;
-		class?: string;
-		/** Whether a panel is currently collapsed */
-		isCollapsed?: boolean;
-		/** Which direction the panel collapsed ('top' = top panel hidden, 'bottom' = bottom panel hidden) */
-		collapsedDirection?: 'top' | 'bottom' | null;
-		/** Callback when clicking the divider while collapsed (to restore) */
-		onCollapsedClick?: () => void;
-	}
-
-	let {
-		onResize,
-		class: className = '',
-		isCollapsed = false,
-		collapsedDirection = null,
-		onCollapsedClick
-	}: Props = $props();
-
-	let isDragging = $state(false);
-	let isNearby = $state(false);
-	let isHovering = $state(false);
-	let startY = $state(0);
-	let dividerElement: HTMLDivElement | undefined = $state();
-
-	// Proximity detection threshold in pixels
-	const PROXIMITY_THRESHOLD = 24;
-
-	function handleMouseDown(e: MouseEvent) {
-		if (isCollapsed && onCollapsedClick) {
-			onCollapsedClick();
-			return;
-		}
-
-		e.preventDefault();
-		isDragging = true;
-		startY = e.clientY;
-
-		document.addEventListener('mousemove', handleMouseMove);
-		document.addEventListener('mouseup', handleMouseUp);
-	}
-
-	function handleMouseMove(e: MouseEvent) {
-		if (!isDragging) return;
-		const deltaY = e.clientY - startY;
-		startY = e.clientY;
-		onResize(deltaY);
-	}
-
-	function handleMouseUp() {
-		isDragging = false;
-		document.removeEventListener('mousemove', handleMouseMove);
-		document.removeEventListener('mouseup', handleMouseUp);
-	}
-
-	function handleTouchStart(e: TouchEvent) {
-		if (isCollapsed && onCollapsedClick) {
-			onCollapsedClick();
-			return;
-		}
-
-		if (e.touches.length !== 1) return;
-		isDragging = true;
-		startY = e.touches[0].clientY;
-	}
-
-	function handleTouchMove(e: TouchEvent) {
-		if (!isDragging || e.touches.length !== 1) return;
-		const deltaY = e.touches[0].clientY - startY;
-		startY = e.touches[0].clientY;
-		onResize(deltaY);
-	}
-
-	function handleTouchEnd() {
-		isDragging = false;
-	}
-
-	function handleMouseEnter() {
-		isHovering = true;
-	}
-
-	function handleMouseLeave() {
-		isHovering = false;
-	}
-
-	function handleProximityMove(e: MouseEvent) {
-		if (!dividerElement || isDragging) return;
-
-		const rect = dividerElement.getBoundingClientRect();
-		const dividerCenterY = rect.top + rect.height / 2;
-		const distance = Math.abs(e.clientY - dividerCenterY);
-
-		isNearby = distance <= PROXIMITY_THRESHOLD;
-	}
-
-	$effect(() => {
-		if (typeof window === 'undefined') return;
-
-		document.addEventListener('mousemove', handleProximityMove);
-
-		return () => {
-			document.removeEventListener('mousemove', handleProximityMove);
-		};
-	});
-
-	const isExpanded = $derived(isDragging || isHovering || isNearby);
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-	bind:this={dividerElement}
-	class="divider-container flex items-center justify-center select-none {className} {isCollapsed ? 'cursor-pointer divider-collapsed' : 'cursor-row-resize'} {isDragging ? 'bg-primary/25' : isExpanded && isCollapsed ? 'bg-primary/40' : isExpanded ? 'bg-primary/15' : ''}"
-	class:expanded={isExpanded}
-	class:dragging={isDragging}
-	role="separator"
-	aria-orientation="horizontal"
-	aria-label={isCollapsed ? 'Expand panel' : 'Resize panel'}
-	tabindex="0"
-	onmousedown={handleMouseDown}
-	onmouseenter={handleMouseEnter}
-	onmouseleave={handleMouseLeave}
-	ontouchstart={handleTouchStart}
-	ontouchmove={handleTouchMove}
-	ontouchend={handleTouchEnd}
->
-	{#if isCollapsed}
-		<div class="collapsed-indicator">
-			<div class="indicator-line"></div>
-			<div class="indicator-dots">
-				<span></span>
-				<span></span>
-				<span></span>
-			</div>
-			<div class="indicator-line"></div>
-		</div>
-	{:else}
-		<div class="grippy-handle">
-			<div class="grip-line"></div>
-			<div class="grip-line"></div>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.divider-container {
-		height: 8px;
-		min-height: 8px;
-		transition:
-			height 200ms cubic-bezier(0.4, 0, 0.2, 1),
-			background 200ms ease,
-			box-shadow 200ms ease;
-	}
-
-	.divider-container.expanded {
-		height: 16px;
-		min-height: 16px;
-		box-shadow:
-			0 0 12px color-mix(in oklch, var(--color-primary) 40%, transparent),
-			inset 0 0 8px color-mix(in oklch, var(--color-primary) 20%, transparent);
-	}
-
-	.divider-container.dragging {
-		height: 16px;
-		min-height: 16px;
-		box-shadow:
-			0 0 20px color-mix(in oklch, var(--color-primary) 50%, transparent),
-			inset 0 0 12px color-mix(in oklch, var(--color-primary) 30%, transparent);
-	}
-
-	.grippy-handle {
-		display: flex;
-		flex-direction: column;
-		gap: 3px;
-		padding: 4px 32px;
-		border-radius: 4px;
-		transition:
-			opacity 200ms ease,
-			transform 200ms ease;
-		opacity: 0.4;
-	}
-
-	.divider-container.expanded .grippy-handle {
-		opacity: 1;
-		transform: scaleY(1.2);
-	}
-
-	.divider-container.dragging .grippy-handle {
-		opacity: 1;
-		transform: scaleY(1.3);
-	}
-
-	.grip-line {
-		width: 32px;
-		height: 2px;
-		border-radius: 1px;
-		background: var(--color-base-content);
-		opacity: 0.4;
-		transition: background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
-	}
-
-	.divider-container.expanded .grip-line {
-		background: var(--color-primary);
-		opacity: 0.8;
-		box-shadow: 0 0 6px color-mix(in oklch, var(--color-primary) 50%, transparent);
-	}
-
-	.divider-container.dragging .grip-line {
-		background: var(--color-primary);
-		opacity: 1;
-		box-shadow: 0 0 8px color-mix(in oklch, var(--color-primary) 60%, transparent);
-	}
-
-	.divider-collapsed {
-		height: 6px;
-		min-height: 6px;
-		background: var(--color-base-200);
-		border-color: var(--color-base-300) !important;
-	}
-
-	.divider-collapsed.expanded {
-		height: 20px;
-		min-height: 20px;
-		box-shadow:
-			0 0 16px color-mix(in oklch, var(--color-primary) 50%, transparent),
-			inset 0 0 10px color-mix(in oklch, var(--color-primary) 30%, transparent);
-	}
-
-	.collapsed-indicator {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-		padding: 0 16px;
-		transition: transform 200ms ease;
-	}
-
-	.divider-collapsed.expanded .collapsed-indicator {
-		transform: scaleY(1.5);
-	}
-
-	.indicator-line {
-		flex: 1;
-		height: 1px;
-		background: linear-gradient(
-			90deg,
-			transparent 0%,
-			color-mix(in oklch, var(--color-base-content) 30%, transparent) 20%,
-			color-mix(in oklch, var(--color-base-content) 30%, transparent) 80%,
-			transparent 100%
-		);
-		transition: background 200ms ease, height 200ms ease;
-	}
-
-	.divider-collapsed.expanded .indicator-line {
-		height: 2px;
-		background: linear-gradient(
-			90deg,
-			transparent 0%,
-			color-mix(in oklch, var(--color-primary) 70%, transparent) 15%,
-			color-mix(in oklch, var(--color-primary) 70%, transparent) 85%,
-			transparent 100%
-		);
-	}
-
-	.indicator-dots {
-		display: flex;
-		gap: 3px;
-		opacity: 0.5;
-		transition: opacity 200ms ease, transform 200ms ease, gap 200ms ease;
-	}
-
-	.indicator-dots span {
-		width: 3px;
-		height: 3px;
-		border-radius: 50%;
-		background: var(--color-base-content);
-		transition: width 200ms ease, height 200ms ease, background 200ms ease, box-shadow 200ms ease;
-	}
-
-	.divider-collapsed.expanded .indicator-dots {
-		opacity: 1;
-		gap: 5px;
-	}
-
-	.divider-collapsed.expanded .indicator-dots span {
-		width: 5px;
-		height: 5px;
-		background: var(--color-primary);
-		box-shadow: 0 0 8px color-mix(in oklch, var(--color-primary) 70%, transparent);
-	}
-</style>