@aspect-ops/exon-ui 0.0.3 → 0.2.0

package/dist/components/OTPInput/OTPInput.svelte

@@ -0,0 +1,312 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		/**
+		 * The OTP value (bindable)
+		 * @default ''
+		 */
+		value?: string;
+
+		/**
+		 * Number of OTP digits
+		 * @default 6
+		 */
+		length?: number;
+
+		/**
+		 * Input type validation
+		 * @default 'numeric'
+		 */
+		type?: 'numeric' | 'alphanumeric';
+
+		/**
+		 * Show dots instead of characters
+		 * @default false
+		 */
+		masked?: boolean;
+
+		/**
+		 * Disabled state
+		 * @default false
+		 */
+		disabled?: boolean;
+
+		/**
+		 * Error state
+		 * @default false
+		 */
+		error?: boolean;
+
+		/**
+		 * Component size
+		 * @default 'md'
+		 */
+		size?: 'sm' | 'md' | 'lg';
+
+		/**
+		 * Auto-focus first input on mount
+		 * @default false
+		 */
+		autoFocus?: boolean;
+
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+
+		/**
+		 * Callback when all digits are entered
+		 */
+		oncomplete?: (value: string) => void;
+
+		/**
+		 * Callback on value change
+		 */
+		onchange?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		length = 6,
+		type = 'numeric',
+		masked = false,
+		disabled = false,
+		error = false,
+		size = 'md',
+		autoFocus = false,
+		class: className = '',
+		oncomplete,
+		onchange
+	}: Props = $props();
+
+	// Track individual input elements
+	let inputs: (HTMLInputElement | null)[] = $state([]);
+
+	// Split value into individual characters
+	let chars = $derived(value.padEnd(length, ' ').slice(0, length).split(''));
+
+	onMount(() => {
+		if (autoFocus && inputs[0]) {
+			inputs[0].focus();
+		}
+	});
+
+	function handleInput(index: number, e: Event) {
+		const input = e.target as HTMLInputElement;
+		const char = input.value.slice(-1); // Get last character entered
+
+		// Validate based on type
+		if (type === 'numeric' && char && !/^\d$/.test(char)) {
+			input.value = '';
+			return;
+		}
+
+		if (type === 'alphanumeric' && char && !/^[a-zA-Z0-9]$/.test(char)) {
+			input.value = '';
+			return;
+		}
+
+		// Update value
+		const newChars = chars.map((c, i) => (i === index ? char : c));
+		const newValue = newChars.join('').trim();
+		value = newValue;
+
+		// Call onchange callback
+		onchange?.(newValue);
+
+		// Move to next input if character was entered
+		if (char && index < length - 1) {
+			inputs[index + 1]?.focus();
+		}
+
+		// Check completion
+		if (newValue.length === length) {
+			oncomplete?.(newValue);
+		}
+	}
+
+	function handleKeydown(index: number, e: KeyboardEvent) {
+		const input = e.target as HTMLInputElement;
+
+		switch (e.key) {
+			case 'Backspace':
+				// If input is empty, move to previous input
+				if (!input.value && index > 0) {
+					e.preventDefault();
+					inputs[index - 1]?.focus();
+					// Clear previous input
+					const newChars = chars.map((c, i) => (i === index - 1 ? '' : c));
+					value = newChars.join('').trim();
+					onchange?.(value);
+				}
+				break;
+
+			case 'ArrowLeft':
+				e.preventDefault();
+				if (index > 0) {
+					inputs[index - 1]?.focus();
+				}
+				break;
+
+			case 'ArrowRight':
+				e.preventDefault();
+				if (index < length - 1) {
+					inputs[index + 1]?.focus();
+				}
+				break;
+
+			case 'ArrowUp':
+			case 'ArrowDown':
+				// Prevent default to avoid number spinner in numeric inputs
+				e.preventDefault();
+				break;
+		}
+	}
+
+	function handlePaste(e: ClipboardEvent) {
+		e.preventDefault();
+		const pastedData = e.clipboardData?.getData('text') || '';
+
+		// Filter based on type
+		let filteredData = pastedData;
+		if (type === 'numeric') {
+			filteredData = pastedData.replace(/\D/g, '');
+		} else if (type === 'alphanumeric') {
+			filteredData = pastedData.replace(/[^a-zA-Z0-9]/g, '');
+		}
+
+		// Trim to length and update value
+		const newValue = filteredData.slice(0, length);
+		value = newValue;
+		onchange?.(newValue);
+
+		// Focus the next empty input or the last input
+		const nextEmptyIndex = newValue.length < length ? newValue.length : length - 1;
+		setTimeout(() => {
+			inputs[nextEmptyIndex]?.focus();
+		}, 0);
+
+		// Check completion
+		if (newValue.length === length) {
+			oncomplete?.(newValue);
+		}
+	}
+
+	function handleFocus(index: number, e: FocusEvent) {
+		const input = e.target as HTMLInputElement;
+		// Select content on focus for easy replacement
+		input.select();
+	}
+</script>
+
+<div
+	class="otp-input otp-input--{size} {error ? 'otp-input--error' : ''} {disabled
+		? 'otp-input--disabled'
+		: ''} {className}"
+	role="group"
+	aria-label="One-time password input"
+>
+	{#each Array(length) as _, index (index)}
+		<input
+			bind:this={inputs[index]}
+			class="otp-input__field"
+			type={masked ? 'password' : 'text'}
+			inputmode={type === 'numeric' ? 'numeric' : 'text'}
+			autocomplete="one-time-code"
+			maxlength="1"
+			value={chars[index]?.trim() || ''}
+			aria-label="Digit {index + 1} of {length}"
+			aria-invalid={error}
+			{disabled}
+			oninput={(e) => handleInput(index, e)}
+			onkeydown={(e) => handleKeydown(index, e)}
+			onpaste={(e) => handlePaste(e)}
+			onfocus={(e) => handleFocus(index, e)}
+		/>
+	{/each}
+</div>
+
+<style>
+	.otp-input {
+		display: flex;
+		gap: var(--space-sm, 0.5rem);
+		align-items: center;
+		width: 100%;
+	}
+
+	.otp-input--disabled {
+		opacity: 0.5;
+	}
+
+	.otp-input__field {
+		flex: 1;
+		min-width: 0;
+		min-height: var(--touch-target-min, 44px);
+		max-width: 3rem;
+		padding: var(--space-sm, 0.5rem);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: var(--font-semibold, 600);
+		text-align: center;
+		line-height: 1;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.otp-input__field:focus {
+		outline: none;
+		border-color: var(--color-primary, #3b82f6);
+		box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+	}
+
+	.otp-input__field:disabled {
+		background: var(--color-bg-muted, #f3f4f6);
+		cursor: not-allowed;
+	}
+
+	/* Size variants */
+	.otp-input--sm .otp-input__field {
+		min-height: var(--touch-target-min, 44px);
+		max-width: 2.5rem;
+		padding: var(--space-xs, 0.25rem);
+		font-size: var(--text-base, 1rem);
+	}
+
+	.otp-input--md .otp-input__field {
+		min-height: var(--touch-target-min, 44px);
+		max-width: 3rem;
+		padding: var(--space-sm, 0.5rem);
+		font-size: var(--text-lg, 1.125rem);
+	}
+
+	.otp-input--lg .otp-input__field {
+		min-height: 3.25rem;
+		max-width: 3.5rem;
+		padding: var(--space-md, 1rem);
+		font-size: var(--text-xl, 1.25rem);
+	}
+
+	/* Error state */
+	.otp-input--error .otp-input__field {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.otp-input--error .otp-input__field:focus {
+		border-color: var(--color-error, #ef4444);
+		box-shadow: 0 0 0 3px var(--color-error-alpha, rgba(239, 68, 68, 0.1));
+	}
+
+	/* Remove number spinner for numeric inputs */
+	.otp-input__field::-webkit-outer-spin-button,
+	.otp-input__field::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+</style>

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

@@ -0,0 +1,57 @@
+interface Props {
+    /**
+     * The OTP value (bindable)
+     * @default ''
+     */
+    value?: string;
+    /**
+     * Number of OTP digits
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Input type validation
+     * @default 'numeric'
+     */
+    type?: 'numeric' | 'alphanumeric';
+    /**
+     * Show dots instead of characters
+     * @default false
+     */
+    masked?: boolean;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Component size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Auto-focus first input on mount
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Callback when all digits are entered
+     */
+    oncomplete?: (value: string) => void;
+    /**
+     * Callback on value change
+     */
+    onchange?: (value: string) => void;
+}
+declare const OTPInput: import("svelte").Component<Props, {}, "value">;
+type OTPInput = ReturnType<typeof OTPInput>;
+export default OTPInput;

package/dist/components/OTPInput/index.d.ts

@@ -0,0 +1 @@
+export { default as OTPInput } from './OTPInput.svelte';

package/dist/components/OTPInput/index.js

@@ -0,0 +1 @@
+export { default as OTPInput } from './OTPInput.svelte';

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+	interface Props {
+		currentPage: number;
+		totalPages: number;
+		siblingCount?: number;
+		onPageChange?: (page: number) => void;
+		class?: string;
+	}
+
+	let {
+		currentPage,
+		totalPages,
+		siblingCount = 1,
+		onPageChange,
+		class: className = ''
+	}: Props = $props();
+
+	const canGoPrevious = $derived(currentPage > 1);
+	const canGoNext = $derived(currentPage < totalPages);
+
+	// Generate page numbers with ellipsis logic
+	const pageNumbers = $derived(() => {
+		const pages: (number | 'ellipsis-start' | 'ellipsis-end')[] = [];
+
+		// Always show first page
+		pages.push(1);
+
+		// Calculate the range around current page
+		const leftSibling = Math.max(currentPage - siblingCount, 2);
+		const rightSibling = Math.min(currentPage + siblingCount, totalPages - 1);
+
+		// Add ellipsis after first page if needed
+		if (leftSibling > 2) {
+			pages.push('ellipsis-start');
+		}
+
+		// Add sibling pages
+		for (let i = leftSibling; i <= rightSibling; i++) {
+			pages.push(i);
+		}
+
+		// Add ellipsis before last page if needed
+		if (rightSibling < totalPages - 1) {
+			pages.push('ellipsis-end');
+		}
+
+		// Always show last page (if more than 1 page)
+		if (totalPages > 1) {
+			pages.push(totalPages);
+		}
+
+		return pages;
+	});
+
+	function handlePageClick(page: number) {
+		if (page !== currentPage && page >= 1 && page <= totalPages) {
+			onPageChange?.(page);
+		}
+	}
+
+	function handlePrevious() {
+		if (canGoPrevious) {
+			onPageChange?.(currentPage - 1);
+		}
+	}
+
+	function handleNext() {
+		if (canGoNext) {
+			onPageChange?.(currentPage + 1);
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowLeft':
+				event.preventDefault();
+				handlePrevious();
+				break;
+			case 'ArrowRight':
+				event.preventDefault();
+				handleNext();
+				break;
+			case 'Home':
+				event.preventDefault();
+				handlePageClick(1);
+				break;
+			case 'End':
+				event.preventDefault();
+				handlePageClick(totalPages);
+				break;
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<nav class="pagination {className}" aria-label="Pagination">
+	<div class="pagination-wrapper" role="group" onkeydown={handleKeyDown}>
+		<button
+			class="pagination-button pagination-button--previous"
+			disabled={!canGoPrevious}
+			onclick={handlePrevious}
+			aria-label="Previous page"
+		>
+			Previous
+		</button>
+
+		<div class="pagination-pages">
+			{#each pageNumbers() as item}
+				{#if typeof item === 'number'}
+					<button
+						class="pagination-button pagination-button--page"
+						class:pagination-button--current={item === currentPage}
+						onclick={() => handlePageClick(item)}
+						aria-label={item === currentPage ? `Current page, page ${item}` : `Go to page ${item}`}
+						aria-current={item === currentPage ? 'page' : undefined}
+					>
+						{item}
+					</button>
+				{:else}
+					<span class="pagination-ellipsis" aria-hidden="true">...</span>
+				{/if}
+			{/each}
+		</div>
+
+		<button
+			class="pagination-button pagination-button--next"
+			disabled={!canGoNext}
+			onclick={handleNext}
+			aria-label="Next page"
+		>
+			Next
+		</button>
+	</div>
+</nav>
+
+<style>
+	.pagination {
+		font-family: inherit;
+	}
+
+	.pagination-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.pagination-pages {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.pagination-button {
+		min-width: 2.75rem;
+		min-height: 2.75rem; /* 44px minimum touch target */
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--pagination-border-color, #d1d5db);
+		border-radius: var(--pagination-border-radius, 0.375rem);
+		background-color: var(--pagination-bg-color, #ffffff);
+		color: var(--pagination-text-color, #374151);
+		font-family: inherit;
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.pagination-button:hover:not(:disabled) {
+		background-color: var(--pagination-hover-bg-color, #f3f4f6);
+		border-color: var(--pagination-hover-border-color, #9ca3af);
+	}
+
+	.pagination-button:focus-visible {
+		outline: 2px solid var(--pagination-focus-color, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.pagination-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.pagination-button--page {
+		min-width: 2.75rem;
+	}
+
+	.pagination-button--current {
+		background-color: var(--pagination-current-bg-color, #3b82f6);
+		color: var(--pagination-current-text-color, #ffffff);
+		border-color: var(--pagination-current-border-color, #3b82f6);
+	}
+
+	.pagination-button--current:hover {
+		background-color: var(--pagination-current-hover-bg-color, #2563eb);
+		border-color: var(--pagination-current-hover-border-color, #2563eb);
+	}
+
+	.pagination-button--previous,
+	.pagination-button--next {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	.pagination-ellipsis {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+		padding: 0.5rem;
+		color: var(--pagination-ellipsis-color, #6b7280);
+		font-size: 0.875rem;
+	}
+
+	/* Mobile responsive: hide some siblings on small screens */
+	@media (max-width: 640px) {
+		.pagination-wrapper {
+			gap: 0.25rem;
+		}
+
+		.pagination-pages {
+			gap: 0.125rem;
+		}
+
+		.pagination-button--previous,
+		.pagination-button--next {
+			padding-left: 0.75rem;
+			padding-right: 0.75rem;
+			font-size: 0.75rem;
+		}
+
+		.pagination-button--page {
+			min-width: 2.75rem;
+			padding: 0.5rem;
+			font-size: 0.75rem;
+		}
+
+		.pagination-ellipsis {
+			min-width: 2rem;
+			padding: 0.25rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    currentPage: number;
+    totalPages: number;
+    siblingCount?: number;
+    onPageChange?: (page: number) => void;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination.svelte';

package/dist/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination.svelte';