@synthaxai/ui 1.0.0

package/dist/feedback/Alert/Alert.svelte

@@ -0,0 +1,565 @@
+<!--
+  @component Alert
+  
+  A comprehensive alert/banner component for displaying important messages and notifications.
+  Critical for healthcare applications where users need to be aware of important information,
+  warnings, or errors. Follows WCAG 2.1 and VA.gov design system best practices.
+  
+  @example
+  <Alert type="warning" title="Allergy Alert">
+    Patient has documented penicillin allergy.
+  </Alert>
+  
+  @example
+  <Alert type="error" dismissible onclose={() => showAlert = false}>
+    Failed to save patient record. Please try again.
+  </Alert>
+  
+  @example
+  <Alert type="info" variant="slim">
+    Your changes have been saved.
+  </Alert>
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { X, AlertTriangle, AlertCircle, CheckCircle2, Info, Bell, ChevronDown, ChevronUp } from 'lucide-svelte';
+	import type { Status } from '../../types/index.js';
+
+	type AlertVariant = 'standard' | 'slim' | 'banner' | 'bordered';
+	type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+
+	interface Props {
+		/** Alert type/severity */
+		type?: Status | 'clinical';
+		/** Alert variant/style */
+		variant?: AlertVariant;
+		/** Optional title/heading */
+		title?: string;
+		/** Heading level for the title (for proper document structure) */
+		headingLevel?: HeadingLevel;
+		/** Whether the alert can be dismissed */
+		dismissible?: boolean;
+		/** Whether to show the icon */
+		showIcon?: boolean;
+		/** Whether the alert content is expandable (for longer content) */
+		expandable?: boolean;
+		/** Whether expandable alert starts expanded */
+		defaultExpanded?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Alert content */
+		children?: Snippet;
+		/** Action buttons slot */
+		actions?: Snippet;
+		/** Close handler - receives a callback to manage focus */
+		onclose?: () => void;
+		/** Custom close button aria-label */
+		closeBtnAriaLabel?: string;
+		/** ID for the alert element */
+		id?: string;
+	}
+
+	let {
+		type = 'info',
+		variant = 'standard',
+		title = '',
+		headingLevel = 'h3',
+		dismissible = false,
+		showIcon = true,
+		expandable = false,
+		defaultExpanded = true,
+		class: className = '',
+		children,
+		actions,
+		onclose,
+		closeBtnAriaLabel,
+		id
+	}: Props = $props();
+
+	// Expandable state - use a stable initial value
+	let isExpanded = $state(true);
+	
+	// Sync with defaultExpanded prop on mount
+	$effect(() => {
+		isExpanded = defaultExpanded;
+	});
+
+	// Generate a stable unique ID
+	const generatedId = `alert-${Math.random().toString(36).substr(2, 9)}`;
+	const alertId = $derived(id || generatedId);
+	const contentId = $derived(`${alertId}-content`);
+	const titleId = $derived(`${alertId}-title`);
+
+	// Type configurations using CSS custom properties
+	const typeStyles = {
+		success: 'alert-success',
+		error: 'alert-error',
+		warning: 'alert-warning',
+		info: 'alert-info',
+		neutral: 'alert-neutral',
+		clinical: 'alert-clinical'
+	};
+
+	// Determine ARIA attributes based on type
+	const ariaRole = $derived(type === 'error' || type === 'warning' ? 'alert' : 'status');
+	const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite');
+
+	// Compute close button aria-label
+	const closeLabel = $derived(
+		closeBtnAriaLabel || `Close ${title || type} notification`
+	);
+
+	function handleDismiss() {
+		onclose?.();
+	}
+
+	function toggleExpanded() {
+		isExpanded = !isExpanded;
+	}
+
+	// Icon component based on type
+	const iconSize = $derived(variant === 'slim' ? 16 : 20);
+</script>
+
+<div
+	{id}
+	class="alert alert-{variant} {typeStyles[type]} {className}"
+	class:alert-expandable={expandable}
+	class:alert-expanded={expandable && isExpanded}
+	role={ariaRole}
+	aria-live={ariaLive}
+	aria-labelledby={title ? titleId : undefined}
+>
+	<!-- Icon -->
+	{#if showIcon}
+		<span class="alert-icon" aria-hidden="true">
+			{#if type === 'success'}
+				<CheckCircle2 size={iconSize} />
+			{:else if type === 'error'}
+				<AlertCircle size={iconSize} />
+			{:else if type === 'warning'}
+				<AlertTriangle size={iconSize} />
+			{:else if type === 'clinical'}
+				<Bell size={iconSize} />
+			{:else}
+				<Info size={iconSize} />
+			{/if}
+		</span>
+	{/if}
+
+	<!-- Content -->
+	<div class="alert-content">
+		{#if title}
+			{#if expandable}
+				<button
+					type="button"
+					class="alert-title-button"
+					onclick={toggleExpanded}
+					aria-expanded={isExpanded}
+					aria-controls={contentId}
+				>
+					<svelte:element this={headingLevel} id={titleId} class="alert-title">
+						{title}
+					</svelte:element>
+					<span class="alert-expand-icon" aria-hidden="true">
+						{#if isExpanded}
+							<ChevronUp size={18} />
+						{:else}
+							<ChevronDown size={18} />
+						{/if}
+					</span>
+				</button>
+			{:else}
+				<svelte:element this={headingLevel} id={titleId} class="alert-title">
+					{title}
+				</svelte:element>
+			{/if}
+		{/if}
+
+		{#if children}
+			<div 
+				id={contentId} 
+				class="alert-body"
+				class:alert-body-hidden={expandable && !isExpanded}
+				aria-hidden={expandable && !isExpanded}
+			>
+				{@render children()}
+			</div>
+		{/if}
+
+		{#if actions && (!expandable || isExpanded)}
+			<div class="alert-actions">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Dismiss button -->
+	{#if dismissible}
+		<button
+			type="button"
+			class="alert-dismiss"
+			onclick={handleDismiss}
+			aria-label={closeLabel}
+		>
+			<X size={variant === 'slim' ? 16 : 18} />
+		</button>
+	{/if}
+</div>
+
+<style>
+	/* ========================================
+	   BASE ALERT STYLES
+	   ======================================== */
+	.alert {
+		display: flex;
+		gap: 0.75rem;
+		padding: 1rem;
+		border-radius: 12px;
+		border: 1px solid transparent;
+		transition: all 0.2s ease;
+	}
+
+	/* ========================================
+	   VARIANT STYLES
+	   ======================================== */
+	
+	/* Standard - rounded with subtle background */
+	.alert-standard {
+		border-radius: 12px;
+	}
+
+	/* Slim - compact for form feedback */
+	.alert-slim {
+		padding: 0.625rem 0.875rem;
+		gap: 0.5rem;
+		border-radius: 8px;
+	}
+
+	.alert-slim .alert-title {
+		font-size: 0.875rem;
+		margin-bottom: 0;
+	}
+
+	.alert-slim .alert-body {
+		font-size: 0.8125rem;
+	}
+
+	.alert-slim .alert-icon {
+		margin-top: 0;
+	}
+
+	/* Banner - full width, no rounded corners */
+	.alert-banner {
+		border-radius: 0;
+		border-left: none;
+		border-right: none;
+		border-top: none;
+	}
+
+	/* Bordered - left accent border */
+	.alert-bordered {
+		border-radius: 8px;
+		border-left-width: 4px;
+		background: var(--ui-bg-primary);
+	}
+
+	/* ========================================
+	   TYPE STYLES (Colors)
+	   ======================================== */
+	
+	/* Success */
+	.alert-success {
+		background-color: rgb(var(--ui-color-success) / 0.08);
+		border-color: rgb(var(--ui-color-success) / 0.25);
+	}
+
+	.alert-success .alert-icon {
+		color: rgb(var(--ui-color-success));
+	}
+
+	.alert-success .alert-title {
+		color: rgb(var(--ui-color-success-dark, var(--ui-color-success)));
+	}
+
+	.alert-bordered.alert-success {
+		border-left-color: rgb(var(--ui-color-success));
+		background: var(--ui-bg-primary);
+	}
+
+	/* Error */
+	.alert-error {
+		background-color: rgb(var(--ui-color-error) / 0.08);
+		border-color: rgb(var(--ui-color-error) / 0.25);
+	}
+
+	.alert-error .alert-icon {
+		color: rgb(var(--ui-color-error));
+	}
+
+	.alert-error .alert-title {
+		color: rgb(var(--ui-color-error));
+	}
+
+	.alert-bordered.alert-error {
+		border-left-color: rgb(var(--ui-color-error));
+		background: var(--ui-bg-primary);
+	}
+
+	/* Warning */
+	.alert-warning {
+		background-color: rgb(var(--ui-color-warning) / 0.08);
+		border-color: rgb(var(--ui-color-warning) / 0.25);
+	}
+
+	.alert-warning .alert-icon {
+		color: rgb(var(--ui-color-warning));
+	}
+
+	.alert-warning .alert-title {
+		color: rgb(var(--ui-color-warning-dark, var(--ui-color-warning)));
+	}
+
+	.alert-bordered.alert-warning {
+		border-left-color: rgb(var(--ui-color-warning));
+		background: var(--ui-bg-primary);
+	}
+
+	/* Info */
+	.alert-info {
+		background-color: rgb(var(--ui-color-info) / 0.08);
+		border-color: rgb(var(--ui-color-info) / 0.25);
+	}
+
+	.alert-info .alert-icon {
+		color: rgb(var(--ui-color-info));
+	}
+
+	.alert-info .alert-title {
+		color: rgb(var(--ui-color-info));
+	}
+
+	.alert-bordered.alert-info {
+		border-left-color: rgb(var(--ui-color-info));
+		background: var(--ui-bg-primary);
+	}
+
+	/* Neutral */
+	.alert-neutral {
+		background-color: var(--ui-bg-tertiary);
+		border-color: var(--ui-border-default);
+	}
+
+	.alert-neutral .alert-icon {
+		color: var(--ui-text-tertiary);
+	}
+
+	.alert-neutral .alert-title {
+		color: var(--ui-text-primary);
+	}
+
+	.alert-bordered.alert-neutral {
+		border-left-color: var(--ui-border-strong);
+		background: var(--ui-bg-primary);
+	}
+
+	/* Clinical - special healthcare type */
+	.alert-clinical {
+		background-color: rgb(var(--ui-color-primary) / 0.08);
+		border-color: rgb(var(--ui-color-primary) / 0.25);
+	}
+
+	.alert-clinical .alert-icon {
+		color: rgb(var(--ui-color-primary));
+	}
+
+	.alert-clinical .alert-title {
+		color: rgb(var(--ui-color-primary));
+	}
+
+	.alert-bordered.alert-clinical {
+		border-left-color: rgb(var(--ui-color-primary));
+		background: var(--ui-bg-primary);
+	}
+
+	/* ========================================
+	   DARK MODE ADJUSTMENTS
+	   ======================================== */
+	:global([data-theme='dark']) .alert-success .alert-title,
+	:global([data-theme='dark']) .alert-warning .alert-title {
+		color: rgb(var(--ui-color-success-light, var(--ui-color-success)));
+	}
+
+	:global([data-theme='dark']) .alert-warning .alert-title {
+		color: rgb(var(--ui-color-warning-light, var(--ui-color-warning)));
+	}
+
+	:global([data-theme='dark']) .alert-clinical .alert-icon,
+	:global([data-theme='dark']) .alert-clinical .alert-title {
+		color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .alert-success .alert-title {
+			color: rgb(var(--ui-color-success-light, var(--ui-color-success)));
+		}
+
+		:global(:root:not([data-theme='light'])) .alert-warning .alert-title {
+			color: rgb(var(--ui-color-warning-light, var(--ui-color-warning)));
+		}
+
+		:global(:root:not([data-theme='light'])) .alert-clinical .alert-icon,
+		:global(:root:not([data-theme='light'])) .alert-clinical .alert-title {
+			color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	/* ========================================
+	   ICON STYLES
+	   ======================================== */
+	.alert-icon {
+		flex-shrink: 0;
+		margin-top: 0.125rem;
+		display: flex;
+		align-items: flex-start;
+	}
+
+	/* ========================================
+	   CONTENT STYLES
+	   ======================================== */
+	.alert-content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.alert-title {
+		font-size: 0.9375rem;
+		font-weight: 600;
+		line-height: 1.4;
+		margin: 0 0 0.25rem 0;
+	}
+
+	/* Reset heading styles */
+	.alert-title:where(h2, h3, h4, h5, h6) {
+		font-size: inherit;
+		margin: inherit;
+	}
+
+	.alert-body {
+		font-size: 0.875rem;
+		color: var(--ui-text-secondary);
+		line-height: 1.5;
+	}
+
+	.alert-body-hidden {
+		display: none;
+	}
+
+	.alert-actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: 0.75rem;
+	}
+
+	/* ========================================
+	   EXPANDABLE STYLES
+	   ======================================== */
+	.alert-title-button {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		gap: 0.5rem;
+		padding: 0.125rem 0 0 0;
+		margin: 0 0 0.25rem 0;
+		background: none;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		color: inherit;
+	}
+
+	.alert-title-button:focus-visible {
+		outline: none;
+		border-radius: 4px;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	:global([data-theme='dark']) .alert-title-button:focus-visible {
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .alert-title-button:focus-visible {
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	.alert-title-button .alert-title {
+		margin-bottom: 0;
+	}
+
+	.alert-expand-icon {
+		flex-shrink: 0;
+		color: var(--ui-text-tertiary);
+		transition: transform 0.2s ease;
+	}
+
+	/* ========================================
+	   DISMISS BUTTON
+	   ======================================== */
+	.alert-dismiss {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.375rem;
+		margin: -0.25rem -0.25rem -0.25rem 0;
+		border: none;
+		border-radius: 8px;
+		background: transparent;
+		color: var(--ui-text-tertiary);
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.alert-dismiss:hover {
+		color: var(--ui-text-primary);
+		background: var(--ui-bg-tertiary);
+	}
+
+	.alert-dismiss:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	:global([data-theme='dark']) .alert-dismiss:focus-visible {
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .alert-dismiss:focus-visible {
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	/* Slim variant dismiss button adjustments */
+	.alert-slim .alert-dismiss {
+		padding: 0.25rem;
+		margin: -0.125rem -0.25rem -0.125rem 0;
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.alert,
+		.alert-dismiss,
+		.alert-title-button,
+		.alert-expand-icon {
+			transition: none;
+		}
+	}
+</style>

package/dist/feedback/Alert/Alert.svelte.d.ts

@@ -0,0 +1,60 @@
+import type { Snippet } from 'svelte';
+import type { Status } from '../../types/index.js';
+type AlertVariant = 'standard' | 'slim' | 'banner' | 'bordered';
+type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+interface Props {
+    /** Alert type/severity */
+    type?: Status | 'clinical';
+    /** Alert variant/style */
+    variant?: AlertVariant;
+    /** Optional title/heading */
+    title?: string;
+    /** Heading level for the title (for proper document structure) */
+    headingLevel?: HeadingLevel;
+    /** Whether the alert can be dismissed */
+    dismissible?: boolean;
+    /** Whether to show the icon */
+    showIcon?: boolean;
+    /** Whether the alert content is expandable (for longer content) */
+    expandable?: boolean;
+    /** Whether expandable alert starts expanded */
+    defaultExpanded?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Alert content */
+    children?: Snippet;
+    /** Action buttons slot */
+    actions?: Snippet;
+    /** Close handler - receives a callback to manage focus */
+    onclose?: () => void;
+    /** Custom close button aria-label */
+    closeBtnAriaLabel?: string;
+    /** ID for the alert element */
+    id?: string;
+}
+/**
+ * Alert
+ *
+ * A comprehensive alert/banner component for displaying important messages and notifications.
+ * Critical for healthcare applications where users need to be aware of important information,
+ * warnings, or errors. Follows WCAG 2.1 and VA.gov design system best practices.
+ *
+ * @example
+ * <Alert type="warning" title="Allergy Alert">
+ *   Patient has documented penicillin allergy.
+ * </Alert>
+ *
+ * @example
+ * <Alert type="error" dismissible onclose={() => showAlert = false}>
+ *   Failed to save patient record. Please try again.
+ * </Alert>
+ *
+ * @example
+ * <Alert type="info" variant="slim">
+ *   Your changes have been saved.
+ * </Alert>
+ */
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;
+//# sourceMappingURL=Alert.svelte.d.ts.map

package/dist/feedback/Alert/Alert.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Alert/Alert.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGlD,KAAK,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAChE,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;AAE3D,UAAU,KAAK;IACd,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B,0BAA0B;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qCAAqC;IACrC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AA0IF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/feedback/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/feedback/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/feedback/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/feedback/Alert/index.js

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