@aspect-ops/exon-ui 0.0.3 → 0.1.0

package/dist/components/Image/Image.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+	interface Props {
+		src: string;
+		alt: string;
+		width?: number | string;
+		height?: number | string;
+		loading?: 'lazy' | 'eager';
+		objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+		objectPosition?: string;
+		placeholder?: string;
+		fallback?: string;
+		rounded?: boolean | 'sm' | 'md' | 'lg' | 'full';
+		aspectRatio?: string;
+		class?: string;
+		onload?: () => void;
+		onerror?: () => void;
+	}
+
+	let {
+		src,
+		alt,
+		width,
+		height,
+		loading = 'lazy',
+		objectFit = 'cover',
+		objectPosition = 'center',
+		placeholder,
+		fallback,
+		rounded = false,
+		aspectRatio,
+		class: className = '',
+		onload,
+		onerror
+	}: Props = $props();
+
+	let status = $state<'loading' | 'loaded' | 'error'>('loading');
+
+	const currentSrc = $derived(status === 'error' && fallback ? fallback : src);
+
+	const roundedClass = $derived(() => {
+		if (rounded === false) return '';
+		if (rounded === true) return 'image-container--rounded-md';
+		return `image-container--rounded-${rounded}`;
+	});
+
+	const containerStyle = $derived(() => {
+		const styles: string[] = [];
+		if (aspectRatio) {
+			styles.push(`aspect-ratio: ${aspectRatio}`);
+		}
+		if (width) {
+			styles.push(`width: ${typeof width === 'number' ? `${width}px` : width}`);
+		}
+		if (height && !aspectRatio) {
+			styles.push(`height: ${typeof height === 'number' ? `${height}px` : height}`);
+		}
+		return styles.join('; ');
+	});
+
+	const imageStyle = $derived(() => {
+		const styles: string[] = [];
+		styles.push(`object-fit: ${objectFit}`);
+		styles.push(`object-position: ${objectPosition}`);
+		return styles.join('; ');
+	});
+
+	function handleLoad() {
+		status = 'loaded';
+		onload?.();
+	}
+
+	function handleError() {
+		status = 'error';
+		onerror?.();
+	}
+
+	// Reset status when src changes
+	$effect(() => {
+		src;
+		status = 'loading';
+	});
+</script>
+
+<div
+	class="image-container {roundedClass()} {className}"
+	style={containerStyle()}
+	role="img"
+	aria-label={alt}
+>
+	{#if status === 'loading' && placeholder}
+		<div
+			class="image-placeholder"
+			style={typeof placeholder === 'string' && placeholder.startsWith('#')
+				? `background-color: ${placeholder}`
+				: `background-image: url(${placeholder})`}
+		></div>
+	{/if}
+
+	<img
+		class="image image--{status}"
+		src={currentSrc}
+		{alt}
+		{loading}
+		style={imageStyle()}
+		onload={handleLoad}
+		onerror={handleError}
+	/>
+
+	{#if status === 'error' && !fallback}
+		<div class="image-error">
+			<svg
+				class="image-error__icon"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				aria-hidden="true"
+			>
+				<path
+					d="M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.51L14.5 12L19 18H5L8.5 13.5Z"
+					fill="currentColor"
+				/>
+				<line
+					x1="4"
+					y1="4"
+					x2="20"
+					y2="20"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+				/>
+			</svg>
+			<span class="image-error__text">{alt}</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.image-container {
+		position: relative;
+		overflow: hidden;
+		display: inline-block;
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.image {
+		width: 100%;
+		height: 100%;
+		display: block;
+		transition: opacity var(--transition-base, 0.2s ease);
+	}
+
+	.image--loading {
+		opacity: 0;
+	}
+
+	.image--loaded {
+		opacity: 1;
+	}
+
+	.image--error {
+		opacity: 0;
+	}
+
+	/* Rounded variants */
+	.image-container--rounded-sm {
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.image-container--rounded-md {
+		border-radius: var(--radius-md, 0.375rem);
+	}
+
+	.image-container--rounded-lg {
+		border-radius: var(--radius-lg, 0.5rem);
+	}
+
+	.image-container--rounded-full {
+		border-radius: var(--radius-full, 9999px);
+	}
+
+	/* Placeholder */
+	.image-placeholder {
+		position: absolute;
+		inset: 0;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+		z-index: 1;
+	}
+
+	/* Error state */
+	.image-error {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text-muted, #6b7280);
+		padding: 1rem;
+		text-align: center;
+		z-index: 2;
+	}
+
+	.image-error__icon {
+		width: 3rem;
+		height: 3rem;
+		margin-bottom: 0.5rem;
+		opacity: 0.5;
+	}
+
+	.image-error__text {
+		font-size: 0.875rem;
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		line-clamp: 2;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+interface Props {
+    src: string;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    loading?: 'lazy' | 'eager';
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    objectPosition?: string;
+    placeholder?: string;
+    fallback?: string;
+    rounded?: boolean | 'sm' | 'md' | 'lg' | 'full';
+    aspectRatio?: string;
+    class?: string;
+    onload?: () => void;
+    onerror?: () => void;
+}
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

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

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

package/dist/components/Image/index.js

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

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';