@synthaxai/ui 1.0.0

package/dist/dialogs/ConfirmDialog/ConfirmDialog.svelte

@@ -0,0 +1,693 @@
+<!--
+  @component ConfirmDialog
+  
+  A world-class confirmation dialog for destructive or important actions in healthcare apps.
+  Features proper focus management, semantic variants, and full accessibility.
+  
+  Features:
+  - Multiple variants (default, danger, warning, success)
+  - Focus management per WCAG guidelines
+  - Loading state with spinner
+  - Error display
+  - Optional destructive confirmation (type to confirm)
+  - Custom content support
+  - Role-based semantics (dialog vs alertdialog)
+  
+  @example
+  <ConfirmDialog
+    open={showConfirm}
+    title="Delete Patient Record"
+    message="This action cannot be undone. Are you sure you want to delete this patient record?"
+    variant="danger"
+    confirmText="Delete"
+    onconfirm={handleDelete}
+    oncancel={() => showConfirm = false}
+  />
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { X, AlertTriangle, Info, CheckCircle, AlertCircle, Loader2 } from 'lucide-svelte';
+	import { createFocusTrap, Keys, generateId } from '../../utils/keyboard.js';
+
+	type DialogVariant = 'default' | 'danger' | 'warning' | 'success';
+
+	interface Props {
+		/** Whether the dialog is open */
+		open?: boolean;
+		/** Dialog title */
+		title?: string;
+		/** Dialog message */
+		message?: string;
+		/** Text for confirm button */
+		confirmText?: string;
+		/** Text for cancel button */
+		cancelText?: string;
+		/** Visual variant */
+		variant?: DialogVariant;
+		/** Whether the dialog is in loading state */
+		loading?: boolean;
+		/** Error message to display */
+		error?: string;
+		/** Focus confirm button on open (default: focus cancel for destructive actions) */
+		focusConfirm?: boolean;
+		/** Show close button in header */
+		showCloseButton?: boolean;
+		/** Require typing confirmation text for destructive actions */
+		requireConfirmation?: string;
+		/** Custom content instead of message */
+		children?: Snippet;
+		/** Custom icon snippet */
+		icon?: Snippet;
+		/** Additional CSS classes */
+		class?: string;
+		/** Confirm handler */
+		onconfirm?: () => void;
+		/** Cancel handler */
+		oncancel?: () => void;
+	}
+
+	let {
+		open = false,
+		title = 'Confirm',
+		message = 'Are you sure you want to proceed?',
+		confirmText = 'Confirm',
+		cancelText = 'Cancel',
+		variant = 'default',
+		loading = false,
+		error = '',
+		focusConfirm = false,
+		showCloseButton = true,
+		requireConfirmation = '',
+		children,
+		icon,
+		class: className = '',
+		onconfirm,
+		oncancel
+	}: Props = $props();
+
+	const dialogId = generateId('confirm-dialog');
+	const titleId = `${dialogId}-title`;
+	const descriptionId = `${dialogId}-description`;
+
+	let dialogElement = $state<HTMLDivElement | null>(null);
+	let cancelButtonElement = $state<HTMLButtonElement | null>(null);
+	let confirmButtonElement = $state<HTMLButtonElement | null>(null);
+	let confirmationInput = $state('');
+	let focusTrap: ReturnType<typeof createFocusTrap> | null = null;
+	let previouslyFocusedElement: HTMLElement | null = null;
+
+	// Check if confirmation is valid
+	const isConfirmationValid = $derived(
+		!requireConfirmation || confirmationInput === requireConfirmation
+	);
+
+	// Determine initial focus based on variant and props
+	const shouldFocusConfirm = $derived(
+		focusConfirm || (variant !== 'danger' && variant !== 'warning')
+	);
+
+	// Icon config based on variant
+	const iconConfig: Record<DialogVariant, { icon: typeof AlertTriangle; colorClass: string }> = {
+		default: { icon: Info, colorClass: 'confirm-dialog-icon-info' },
+		danger: { icon: AlertTriangle, colorClass: 'confirm-dialog-icon-danger' },
+		warning: { icon: AlertCircle, colorClass: 'confirm-dialog-icon-warning' },
+		success: { icon: CheckCircle, colorClass: 'confirm-dialog-icon-success' }
+	};
+
+	// Calculate scrollbar width to prevent layout shift
+	function getScrollbarWidth(): number {
+		return window.innerWidth - document.documentElement.clientWidth;
+	}
+
+	// Handle focus trap and focus management
+	$effect(() => {
+		if (open && dialogElement) {
+			previouslyFocusedElement = document.activeElement as HTMLElement;
+			confirmationInput = ''; // Reset on open
+
+			focusTrap = createFocusTrap(dialogElement);
+			
+			// Lock body scroll and prevent layout shift
+			const scrollbarWidth = getScrollbarWidth();
+			document.body.style.overflow = 'hidden';
+			if (scrollbarWidth > 0) {
+				document.body.style.paddingRight = `${scrollbarWidth}px`;
+			}
+
+			// Focus appropriate button
+			setTimeout(() => {
+				if (requireConfirmation) {
+					// Focus the input for destructive confirmation
+					dialogElement?.querySelector('input')?.focus();
+				} else if (shouldFocusConfirm) {
+					confirmButtonElement?.focus();
+				} else {
+					cancelButtonElement?.focus();
+				}
+			}, 0);
+		}
+
+		return () => {
+			focusTrap?.deactivate();
+			document.body.style.overflow = '';
+			document.body.style.paddingRight = '';
+
+			if (previouslyFocusedElement?.focus) {
+				setTimeout(() => {
+					previouslyFocusedElement?.focus();
+				}, 0);
+			}
+		};
+	});
+
+	function handleConfirm() {
+		if (isConfirmationValid && !loading) {
+			onconfirm?.();
+		}
+	}
+
+	function handleCancel() {
+		if (!loading) {
+			oncancel?.();
+		}
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget && !loading) {
+			handleCancel();
+		}
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === Keys.Escape && !loading) {
+			e.preventDefault();
+			handleCancel();
+		}
+
+		// Focus trap
+		if (e.key === Keys.Tab && dialogElement) {
+			const focusable = dialogElement.querySelectorAll<HTMLElement>(
+				'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+			);
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+
+			if (e.shiftKey && document.activeElement === first) {
+				e.preventDefault();
+				last?.focus();
+			} else if (!e.shiftKey && document.activeElement === last) {
+				e.preventDefault();
+				first?.focus();
+			}
+		}
+	}
+</script>
+
+<svelte:window onkeydown={open ? handleKeyDown : undefined} />
+
+{#if open}
+	<!-- Backdrop -->
+	<div
+		class="confirm-dialog-backdrop"
+		role="presentation"
+		onclick={handleBackdropClick}
+		onkeydown={() => {}}
+	>
+		<!-- Dialog -->
+		<div
+			bind:this={dialogElement}
+			id={dialogId}
+			class="confirm-dialog {className}"
+			role={variant === 'danger' || variant === 'warning' ? 'alertdialog' : 'dialog'}
+			aria-modal="true"
+			aria-labelledby={titleId}
+			aria-describedby={descriptionId}
+		>
+			<!-- Header -->
+			<div class="confirm-dialog-header">
+				<div class="confirm-dialog-header-content">
+					{#if icon}
+						<span class="confirm-dialog-icon {iconConfig[variant].colorClass}">
+							{@render icon()}
+						</span>
+					{:else}
+						{@const IconComponent = iconConfig[variant].icon}
+						<span class="confirm-dialog-icon {iconConfig[variant].colorClass}">
+							<IconComponent size={20} aria-hidden="true" />
+						</span>
+					{/if}
+					<h2 id={titleId} class="confirm-dialog-title">
+						{title}
+					</h2>
+				</div>
+
+				{#if showCloseButton && !loading}
+					<button
+						type="button"
+						class="confirm-dialog-close-btn"
+						onclick={handleCancel}
+						aria-label="Close"
+					>
+						<X size={18} aria-hidden="true" />
+					</button>
+				{/if}
+			</div>
+
+			<!-- Body -->
+			<div class="confirm-dialog-body">
+				<div id={descriptionId}>
+					{#if children}
+						{@render children()}
+					{:else}
+						<p class="confirm-dialog-message">{message}</p>
+					{/if}
+				</div>
+
+				{#if requireConfirmation}
+					<div class="confirm-dialog-confirmation">
+						<label for="{dialogId}-confirm-input" class="confirm-dialog-confirmation-label">
+							Type <strong>{requireConfirmation}</strong> to confirm:
+						</label>
+						<input
+							id="{dialogId}-confirm-input"
+							type="text"
+							class="confirm-dialog-confirmation-input"
+							bind:value={confirmationInput}
+							placeholder={requireConfirmation}
+							disabled={loading}
+							autocomplete="off"
+						/>
+					</div>
+				{/if}
+
+				{#if error}
+					<div class="confirm-dialog-error" role="alert">
+						<p>{error}</p>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Footer -->
+			<div class="confirm-dialog-footer">
+				<button
+					bind:this={cancelButtonElement}
+					type="button"
+					class="confirm-dialog-btn confirm-dialog-btn-secondary"
+					onclick={handleCancel}
+					disabled={loading}
+				>
+					{cancelText}
+				</button>
+
+				<button
+					bind:this={confirmButtonElement}
+					type="button"
+					class="confirm-dialog-btn confirm-dialog-btn-{variant}"
+					onclick={handleConfirm}
+					disabled={loading || !isConfirmationValid}
+				>
+					{#if loading}
+						<Loader2 size={16} class="confirm-dialog-spinner" aria-hidden="true" />
+						<span>Please wait...</span>
+					{:else}
+						{confirmText}
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* ========================================
+	   BACKDROP
+	   ======================================== */
+	.confirm-dialog-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 1000;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem;
+		background-color: var(--ui-backdrop);
+		backdrop-filter: blur(4px);
+		-webkit-backdrop-filter: blur(4px);
+		animation: confirm-fade-in 0.2s ease-out;
+	}
+
+	@keyframes confirm-fade-in {
+		from { opacity: 0; }
+		to { opacity: 1; }
+	}
+
+	/* ========================================
+	   DIALOG CONTAINER
+	   ======================================== */
+	.confirm-dialog {
+		width: 100%;
+		max-width: 26rem;
+		background-color: var(--ui-bg-primary);
+		border: 1px solid var(--ui-border-default);
+		border-radius: 1rem;
+		box-shadow:
+			0 20px 25px -5px rgb(0 0 0 / 0.1),
+			0 8px 10px -6px rgb(0 0 0 / 0.1);
+		animation: confirm-scale-in 0.3s ease-out;
+		overflow: hidden;
+	}
+
+	@keyframes confirm-scale-in {
+		from {
+			opacity: 0;
+			transform: scale(0.95) translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1) translateY(0);
+		}
+	}
+
+	/* ========================================
+	   HEADER
+	   ======================================== */
+	.confirm-dialog-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 1rem 1.5rem;
+		border-bottom: 1px solid var(--ui-border-default);
+		background-color: var(--ui-bg-secondary);
+	}
+
+	.confirm-dialog-header-content {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		min-width: 0;
+	}
+
+	.confirm-dialog-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.confirm-dialog-icon-info {
+		color: rgb(var(--ui-color-info));
+	}
+
+	.confirm-dialog-icon-danger {
+		color: rgb(var(--ui-color-error));
+	}
+
+	.confirm-dialog-icon-warning {
+		color: rgb(var(--ui-color-warning));
+	}
+
+	.confirm-dialog-icon-success {
+		color: rgb(var(--ui-color-success));
+	}
+
+	.confirm-dialog-title {
+		margin: 0;
+		font-size: 1rem;
+		font-weight: 600;
+		color: var(--ui-text-primary);
+		line-height: 1.4;
+	}
+
+	/* ========================================
+	   CLOSE BUTTON
+	   ======================================== */
+	.confirm-dialog-close-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.375rem;
+		background: transparent;
+		border: none;
+		border-radius: 0.5rem;
+		color: var(--ui-text-tertiary);
+		cursor: pointer;
+		transition: all 0.15s ease;
+		flex-shrink: 0;
+	}
+
+	.confirm-dialog-close-btn:hover {
+		background-color: var(--ui-bg-tertiary);
+		color: var(--ui-text-primary);
+	}
+
+	.confirm-dialog-close-btn:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	/* ========================================
+	   BODY
+	   ======================================== */
+	.confirm-dialog-body {
+		padding: 1.25rem 1.5rem;
+	}
+
+	.confirm-dialog-message {
+		margin: 0;
+		font-size: 0.875rem;
+		line-height: 1.6;
+		color: var(--ui-text-secondary);
+	}
+
+	/* ========================================
+	   CONFIRMATION INPUT
+	   ======================================== */
+	.confirm-dialog-confirmation {
+		margin-top: 1rem;
+	}
+
+	.confirm-dialog-confirmation-label {
+		display: block;
+		margin-bottom: 0.5rem;
+		font-size: 0.8125rem;
+		color: var(--ui-text-secondary);
+	}
+
+	.confirm-dialog-confirmation-label strong {
+		color: var(--ui-text-primary);
+		font-family: monospace;
+		background-color: var(--ui-bg-tertiary);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+	}
+
+	.confirm-dialog-confirmation-input {
+		width: 100%;
+		padding: 0.625rem 0.875rem;
+		font-size: 0.875rem;
+		font-family: monospace;
+		color: var(--ui-text-primary);
+		background-color: var(--ui-bg-primary);
+		border: 1px solid var(--ui-border-default);
+		border-radius: 0.5rem;
+		transition: all 0.15s ease;
+	}
+
+	.confirm-dialog-confirmation-input:focus {
+		outline: none;
+		border-color: rgb(var(--ui-color-primary));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.1);
+	}
+
+	.confirm-dialog-confirmation-input:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	/* ========================================
+	   ERROR
+	   ======================================== */
+	.confirm-dialog-error {
+		margin-top: 1rem;
+		padding: 0.75rem 1rem;
+		background-color: rgb(var(--ui-color-error) / 0.1);
+		border: 1px solid rgb(var(--ui-color-error) / 0.2);
+		border-radius: 0.5rem;
+	}
+
+	.confirm-dialog-error p {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .confirm-dialog-error p {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .confirm-dialog-error p {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	/* ========================================
+	   FOOTER
+	   ======================================== */
+	.confirm-dialog-footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 0.75rem;
+		padding: 1rem 1.5rem;
+		border-top: 1px solid var(--ui-border-default);
+		background-color: var(--ui-bg-secondary);
+	}
+
+	/* ========================================
+	   BUTTONS
+	   ======================================== */
+	.confirm-dialog-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.625rem 1.25rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		border-radius: 0.5rem;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		border: none;
+	}
+
+	.confirm-dialog-btn:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	/* Secondary button */
+	.confirm-dialog-btn-secondary {
+		background-color: var(--ui-bg-tertiary);
+		color: var(--ui-text-primary);
+		border: 1px solid var(--ui-border-default);
+	}
+
+	.confirm-dialog-btn-secondary:hover:not(:disabled) {
+		background-color: var(--ui-bg-secondary);
+		border-color: var(--ui-border-hover);
+	}
+
+	.confirm-dialog-btn-secondary:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	/* Default/Primary confirm button */
+	.confirm-dialog-btn-default {
+		background-color: rgb(var(--ui-color-primary));
+		color: white;
+	}
+
+	.confirm-dialog-btn-default:hover:not(:disabled) {
+		background-color: rgb(var(--ui-color-primary-hover));
+	}
+
+	.confirm-dialog-btn-default:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	/* Danger confirm button */
+	.confirm-dialog-btn-danger {
+		background-color: rgb(var(--ui-color-error));
+		color: white;
+	}
+
+	.confirm-dialog-btn-danger:hover:not(:disabled) {
+		background-color: rgb(var(--ui-color-error-light));
+	}
+
+	.confirm-dialog-btn-danger:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-error) / 0.4);
+	}
+
+	/* Warning confirm button */
+	.confirm-dialog-btn-warning {
+		background-color: rgb(var(--ui-color-warning));
+		color: white;
+	}
+
+	.confirm-dialog-btn-warning:hover:not(:disabled) {
+		filter: brightness(0.95);
+	}
+
+	.confirm-dialog-btn-warning:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-warning) / 0.4);
+	}
+
+	/* Success confirm button */
+	.confirm-dialog-btn-success {
+		background-color: rgb(var(--ui-color-success));
+		color: white;
+	}
+
+	.confirm-dialog-btn-success:hover:not(:disabled) {
+		filter: brightness(0.95);
+	}
+
+	.confirm-dialog-btn-success:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-success) / 0.4);
+	}
+
+	/* ========================================
+	   SPINNER
+	   ======================================== */
+	.confirm-dialog-spinner {
+		animation: confirm-spin 0.8s linear infinite;
+	}
+
+	@keyframes confirm-spin {
+		to { transform: rotate(360deg); }
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.confirm-dialog-backdrop,
+		.confirm-dialog,
+		.confirm-dialog-spinner {
+			animation: none;
+		}
+	}
+
+	/* ========================================
+	   DARK MODE ADJUSTMENTS
+	   ======================================== */
+	:global([data-theme='dark']) .confirm-dialog-close-btn:focus-visible,
+	:global([data-theme='dark']) .confirm-dialog-btn-secondary:focus-visible,
+	:global([data-theme='dark']) .confirm-dialog-btn-default:focus-visible {
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+	}
+
+	:global([data-theme='dark']) .confirm-dialog-btn-danger:focus-visible {
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-error-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .confirm-dialog-close-btn:focus-visible,
+		:global(:root:not([data-theme='light'])) .confirm-dialog-btn-secondary:focus-visible,
+		:global(:root:not([data-theme='light'])) .confirm-dialog-btn-default:focus-visible {
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+
+		:global(:root:not([data-theme='light'])) .confirm-dialog-btn-danger:focus-visible {
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-error-light) / 0.5);
+		}
+	}
+</style>