@aspect-ops/exon-ui 0.2.0 → 0.2.2

package/dist/components/ContactForm/ContactForm.svelte

@@ -0,0 +1,564 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	// Field configuration
+	interface FieldConfig {
+		name: string;
+		label: string;
+		type: 'text' | 'email' | 'tel' | 'textarea' | 'select';
+		placeholder?: string;
+		required?: boolean;
+		options?: { value: string; label: string }[];
+		rows?: number;
+		validation?: (value: string) => string | null;
+	}
+
+	interface FormData {
+		[key: string]: string;
+	}
+
+	interface FeedbackState {
+		type: 'success' | 'error' | 'warning' | 'info' | null;
+		message: string;
+	}
+
+	interface Props {
+		/** Form fields configuration */
+		fields?: FieldConfig[];
+		/** Initial form values */
+		initialValues?: FormData;
+		/** Submit button text */
+		submitText?: string;
+		/** Whether to show success message after submit */
+		showSuccessMessage?: boolean;
+		/** Success message text */
+		successMessage?: string;
+		/** Privacy notice text */
+		privacyNotice?: string;
+		/** Whether to extract UTM params from URL */
+		extractUtmParams?: boolean;
+		/** Custom class */
+		class?: string;
+		/** Called on form submit. Should return { success: boolean, error?: string } */
+		onSubmit?: (data: FormData) => Promise<{ success: boolean; error?: string }>;
+		/** Called when validation state changes */
+		onValidate?: (isValid: boolean, errors: Record<string, string>) => void;
+	}
+
+	// Default fields
+	const defaultFields: FieldConfig[] = [
+		{
+			name: 'firstName',
+			label: 'First Name',
+			type: 'text',
+			placeholder: 'John',
+			required: true
+		},
+		{
+			name: 'lastName',
+			label: 'Last Name',
+			type: 'text',
+			placeholder: 'Doe',
+			required: true
+		},
+		{
+			name: 'email',
+			label: 'Email',
+			type: 'email',
+			placeholder: 'john@company.com',
+			required: true,
+			validation: (value) => {
+				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+				return emailRegex.test(value) ? null : 'Please enter a valid email address';
+			}
+		},
+		{
+			name: 'phone',
+			label: 'Phone',
+			type: 'tel',
+			placeholder: '+1 (555) 123-4567'
+		},
+		{
+			name: 'company',
+			label: 'Company',
+			type: 'text',
+			placeholder: 'Acme Inc.'
+		},
+		{
+			name: 'message',
+			label: 'Message',
+			type: 'textarea',
+			placeholder: 'How can we help you?',
+			rows: 4,
+			required: true
+		}
+	];
+
+	let {
+		fields = defaultFields,
+		initialValues = {},
+		submitText = 'Submit',
+		showSuccessMessage = true,
+		successMessage = "Thank you! We'll be in touch soon.",
+		privacyNotice = 'By submitting this form, you agree to our privacy policy.',
+		extractUtmParams = true,
+		class: className = '',
+		onSubmit,
+		onValidate
+	}: Props = $props();
+
+	// State - intentionally capture initial values
+	// eslint-disable-next-line svelte/valid-compile
+	let formData = $state<FormData>({ ...initialValues });
+	let errors = $state<Record<string, string>>({});
+	let touched = $state<Record<string, boolean>>({});
+	let isSubmitting = $state(false);
+	let feedback = $state<FeedbackState>({ type: null, message: '' });
+	let utmParams = $state<Record<string, string>>({});
+
+	// Initialize form data with field defaults
+	$effect(() => {
+		fields.forEach((field) => {
+			if (formData[field.name] === undefined) {
+				formData[field.name] = initialValues[field.name] || '';
+			}
+		});
+	});
+
+	// Extract UTM params on mount
+	onMount(() => {
+		if (extractUtmParams && typeof window !== 'undefined') {
+			const params = new URLSearchParams(window.location.search);
+			const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
+			utmKeys.forEach((key) => {
+				const value = params.get(key);
+				if (value) {
+					utmParams[key] = value;
+				}
+			});
+		}
+	});
+
+	// Validate single field
+	function validateField(field: FieldConfig, value: string): string | null {
+		if (field.required && !value.trim()) {
+			return `${field.label} is required`;
+		}
+		if (field.validation) {
+			return field.validation(value);
+		}
+		return null;
+	}
+
+	// Validate all fields
+	function validateAll(): boolean {
+		const newErrors: Record<string, string> = {};
+		let isValid = true;
+
+		fields.forEach((field) => {
+			const error = validateField(field, formData[field.name] || '');
+			if (error) {
+				newErrors[field.name] = error;
+				isValid = false;
+			}
+		});
+
+		errors = newErrors;
+		onValidate?.(isValid, newErrors);
+		return isValid;
+	}
+
+	// Handle field blur
+	function handleBlur(field: FieldConfig) {
+		touched[field.name] = true;
+		const error = validateField(field, formData[field.name] || '');
+		if (error) {
+			errors[field.name] = error;
+		} else {
+			delete errors[field.name];
+			errors = { ...errors };
+		}
+	}
+
+	// Handle input change
+	function handleInput(field: FieldConfig, value: string) {
+		formData[field.name] = value;
+
+		// Clear error on input if field was touched
+		if (touched[field.name]) {
+			const error = validateField(field, value);
+			if (error) {
+				errors[field.name] = error;
+			} else {
+				delete errors[field.name];
+				errors = { ...errors };
+			}
+		}
+	}
+
+	// Handle form submit
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+
+		// Mark all fields as touched
+		fields.forEach((field) => {
+			touched[field.name] = true;
+		});
+
+		if (!validateAll()) {
+			feedback = {
+				type: 'error',
+				message: 'Please fix the errors above.'
+			};
+			return;
+		}
+
+		if (!onSubmit) {
+			feedback = {
+				type: 'warning',
+				message: 'No submit handler configured.'
+			};
+			return;
+		}
+
+		isSubmitting = true;
+		feedback = { type: null, message: '' };
+
+		try {
+			// Combine form data with UTM params
+			const submitData = {
+				...formData,
+				...utmParams
+			};
+
+			const result = await onSubmit(submitData);
+
+			if (result.success) {
+				if (showSuccessMessage) {
+					feedback = {
+						type: 'success',
+						message: successMessage
+					};
+				}
+				// Reset form
+				formData = { ...initialValues };
+				touched = {};
+				errors = {};
+			} else {
+				feedback = {
+					type: 'error',
+					message: result.error || 'Something went wrong. Please try again.'
+				};
+			}
+		} catch (error) {
+			feedback = {
+				type: 'error',
+				message: 'An unexpected error occurred. Please try again.'
+			};
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	// Check if form has errors
+	const hasErrors = $derived(Object.keys(errors).length > 0);
+</script>
+
+<form class="contact-form {className}" onsubmit={handleSubmit} novalidate>
+	{#if feedback.type}
+		<div class="contact-form__feedback contact-form__feedback--{feedback.type}" role="alert">
+			{#if feedback.type === 'success'}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="20"
+					height="20"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+				>
+					<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+					<polyline points="22 4 12 14.01 9 11.01" />
+				</svg>
+			{:else if feedback.type === 'error'}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="20"
+					height="20"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+				>
+					<circle cx="12" cy="12" r="10" />
+					<line x1="15" y1="9" x2="9" y2="15" />
+					<line x1="9" y1="9" x2="15" y2="15" />
+				</svg>
+			{/if}
+			<span>{feedback.message}</span>
+		</div>
+	{/if}
+
+	<div class="contact-form__fields">
+		{#each fields as field}
+			<div
+				class="contact-form__field"
+				class:contact-form__field--error={touched[field.name] && errors[field.name]}
+				class:contact-form__field--full={field.type === 'textarea'}
+			>
+				<label class="contact-form__label" for={field.name}>
+					{field.label}
+					{#if field.required}
+						<span class="contact-form__required">*</span>
+					{/if}
+				</label>
+
+				{#if field.type === 'textarea'}
+					<textarea
+						id={field.name}
+						name={field.name}
+						class="contact-form__input contact-form__textarea"
+						placeholder={field.placeholder}
+						rows={field.rows || 4}
+						value={formData[field.name] || ''}
+						oninput={(e) => handleInput(field, e.currentTarget.value)}
+						onblur={() => handleBlur(field)}
+						aria-invalid={touched[field.name] && !!errors[field.name]}
+						aria-describedby={errors[field.name] ? `${field.name}-error` : undefined}
+					></textarea>
+				{:else if field.type === 'select' && field.options}
+					<select
+						id={field.name}
+						name={field.name}
+						class="contact-form__input contact-form__select"
+						value={formData[field.name] || ''}
+						onchange={(e) => handleInput(field, e.currentTarget.value)}
+						onblur={() => handleBlur(field)}
+						aria-invalid={touched[field.name] && !!errors[field.name]}
+					>
+						<option value="">{field.placeholder || 'Select an option'}</option>
+						{#each field.options as option}
+							<option value={option.value}>{option.label}</option>
+						{/each}
+					</select>
+				{:else}
+					<input
+						id={field.name}
+						name={field.name}
+						type={field.type}
+						class="contact-form__input"
+						placeholder={field.placeholder}
+						value={formData[field.name] || ''}
+						oninput={(e) => handleInput(field, e.currentTarget.value)}
+						onblur={() => handleBlur(field)}
+						aria-invalid={touched[field.name] && !!errors[field.name]}
+						aria-describedby={errors[field.name] ? `${field.name}-error` : undefined}
+					/>
+				{/if}
+
+				{#if touched[field.name] && errors[field.name]}
+					<span id="{field.name}-error" class="contact-form__error" role="alert">
+						{errors[field.name]}
+					</span>
+				{/if}
+			</div>
+		{/each}
+	</div>
+
+	{#if privacyNotice}
+		<p class="contact-form__privacy">{privacyNotice}</p>
+	{/if}
+
+	<button type="submit" class="contact-form__submit" disabled={isSubmitting}>
+		{#if isSubmitting}
+			<span class="contact-form__spinner"></span>
+			Submitting...
+		{:else}
+			{submitText}
+		{/if}
+	</button>
+</form>
+
+<style>
+	.contact-form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-lg, 1.5rem);
+		font-family: inherit;
+	}
+
+	/* Feedback */
+	.contact-form__feedback {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		padding: var(--space-md, 1rem);
+		border-radius: var(--radius-md, 0.375rem);
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.contact-form__feedback--success {
+		background: var(--color-success-bg, #dcfce7);
+		color: var(--color-success, #16a34a);
+	}
+
+	.contact-form__feedback--error {
+		background: var(--color-error-bg, #fee2e2);
+		color: var(--color-error, #dc2626);
+	}
+
+	.contact-form__feedback--warning {
+		background: var(--color-warning-bg, #fef3c7);
+		color: var(--color-warning, #d97706);
+	}
+
+	.contact-form__feedback--info {
+		background: var(--color-primary-bg, #dbeafe);
+		color: var(--color-primary, #2563eb);
+	}
+
+	/* Fields Grid */
+	.contact-form__fields {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: var(--space-md, 1rem);
+	}
+
+	@media (max-width: 640px) {
+		.contact-form__fields {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	/* Field */
+	.contact-form__field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.contact-form__field--full {
+		grid-column: 1 / -1;
+	}
+
+	/* Label */
+	.contact-form__label {
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: var(--font-medium, 500);
+		color: var(--color-text, #1f2937);
+	}
+
+	.contact-form__required {
+		color: var(--color-error, #dc2626);
+	}
+
+	/* Input */
+	.contact-form__input {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border: 1px solid var(--color-border, #d1d5db);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+	}
+
+	.contact-form__input::placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.contact-form__input: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));
+	}
+
+	.contact-form__field--error .contact-form__input {
+		border-color: var(--color-error, #dc2626);
+	}
+
+	.contact-form__field--error .contact-form__input:focus {
+		box-shadow: 0 0 0 3px var(--color-error-alpha, rgba(220, 38, 38, 0.1));
+	}
+
+	/* Textarea */
+	.contact-form__textarea {
+		resize: vertical;
+		min-height: 100px;
+	}
+
+	/* Select */
+	.contact-form__select {
+		appearance: none;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: right 0.75rem center;
+		padding-right: 2.5rem;
+	}
+
+	/* Error message */
+	.contact-form__error {
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-error, #dc2626);
+	}
+
+	/* Privacy */
+	.contact-form__privacy {
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-muted, #6b7280);
+		margin: 0;
+	}
+
+	/* Submit */
+	.contact-form__submit {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-sm, 0.5rem);
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-lg, 1.5rem);
+		border: none;
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: var(--font-medium, 500);
+		cursor: pointer;
+		transition: background var(--transition-fast, 150ms ease);
+	}
+
+	.contact-form__submit:hover:not(:disabled) {
+		background: var(--color-primary-hover, #2563eb);
+	}
+
+	.contact-form__submit:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.contact-form__submit:disabled {
+		opacity: 0.7;
+		cursor: not-allowed;
+	}
+
+	/* Spinner */
+	.contact-form__spinner {
+		width: 1rem;
+		height: 1rem;
+		border: 2px solid transparent;
+		border-top-color: currentColor;
+		border-radius: var(--radius-full, 9999px);
+		animation: spin 0.75s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

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

@@ -0,0 +1,44 @@
+interface FieldConfig {
+    name: string;
+    label: string;
+    type: 'text' | 'email' | 'tel' | 'textarea' | 'select';
+    placeholder?: string;
+    required?: boolean;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    rows?: number;
+    validation?: (value: string) => string | null;
+}
+interface FormData {
+    [key: string]: string;
+}
+interface Props {
+    /** Form fields configuration */
+    fields?: FieldConfig[];
+    /** Initial form values */
+    initialValues?: FormData;
+    /** Submit button text */
+    submitText?: string;
+    /** Whether to show success message after submit */
+    showSuccessMessage?: boolean;
+    /** Success message text */
+    successMessage?: string;
+    /** Privacy notice text */
+    privacyNotice?: string;
+    /** Whether to extract UTM params from URL */
+    extractUtmParams?: boolean;
+    /** Custom class */
+    class?: string;
+    /** Called on form submit. Should return { success: boolean, error?: string } */
+    onSubmit?: (data: FormData) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    /** Called when validation state changes */
+    onValidate?: (isValid: boolean, errors: Record<string, string>) => void;
+}
+declare const ContactForm: import("svelte").Component<Props, {}, "">;
+type ContactForm = ReturnType<typeof ContactForm>;
+export default ContactForm;

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

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

package/dist/components/ContactForm/index.js

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

package/dist/components/Container/Container.svelte

@@ -22,6 +22,7 @@
 		width: 100%;
 		padding: var(--space-md, 1rem);
 		font-family: inherit;
+		box-sizing: border-box;
 	}
 
 	.container[data-centered='true'] {