@aspect-ops/exon-ui 0.2.1 → 0.3.0

package/dist/components/StatusBadge/StatusBadge.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+	/**
+	 * StatusBadge - A color-coded badge for displaying status values
+	 * Automatically maps common status strings to semantic colors
+	 */
+
+	type ColorVariant = 'success' | 'warning' | 'error' | 'info' | 'default';
+
+	interface Props {
+		/** The status text to display */
+		status: string;
+		/** Custom color mapping from status strings to color variants */
+		colorMap?: Record<string, ColorVariant>;
+		/** Size of the badge */
+		size?: 'sm' | 'md' | 'lg';
+		/** Show a dot indicator before the text */
+		dot?: boolean;
+		/** Transform text to uppercase */
+		uppercase?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		status,
+		colorMap,
+		size = 'md',
+		dot = false,
+		uppercase = false,
+		class: className = ''
+	}: Props = $props();
+
+	// Default color mappings (case-insensitive)
+	const defaultColorMap: Record<string, ColorVariant> = {
+		// Success states
+		active: 'success',
+		approved: 'success',
+		completed: 'success',
+		success: 'success',
+		done: 'success',
+		verified: 'success',
+		confirmed: 'success',
+
+		// Warning states
+		pending: 'warning',
+		'in progress': 'warning',
+		in_progress: 'warning',
+		'on hold': 'warning',
+		on_hold: 'warning',
+		processing: 'warning',
+		draft: 'warning',
+
+		// Error states
+		rejected: 'error',
+		failed: 'error',
+		error: 'error',
+		cancelled: 'error',
+		inactive: 'error',
+		expired: 'error',
+		overdue: 'error',
+
+		// Info states
+		applied: 'info',
+		new: 'info',
+		'to do': 'info',
+		todo: 'info',
+		open: 'info',
+		submitted: 'info'
+	};
+
+	// Compute the color variant based on status
+	const colorVariant = $derived(() => {
+		const normalizedStatus = status.toLowerCase().trim();
+
+		// Check custom colorMap first (case-insensitive)
+		if (colorMap) {
+			const customKey = Object.keys(colorMap).find((key) => key.toLowerCase() === normalizedStatus);
+			if (customKey) return colorMap[customKey];
+		}
+
+		// Fall back to default mappings
+		return defaultColorMap[normalizedStatus] || 'default';
+	});
+
+	const displayText = $derived(uppercase ? status.toUpperCase() : status);
+</script>
+
+<span
+	class="status-badge status-badge--{colorVariant()} status-badge--{size} {className}"
+	class:status-badge--uppercase={uppercase}
+>
+	{#if dot}
+		<span class="status-badge__dot"></span>
+	{/if}
+	<span class="status-badge__text">{displayText}</span>
+</span>
+
+<style>
+	.status-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		border-radius: var(--radius-full, 9999px);
+		font-family: inherit;
+		font-weight: 600;
+		line-height: 1;
+		white-space: nowrap;
+	}
+
+	/* Sizes */
+	.status-badge--sm {
+		padding: var(--space-xs, 0.125rem) var(--space-sm, 0.375rem);
+		font-size: var(--text-xs, 0.625rem);
+	}
+
+	.status-badge--md {
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		font-size: var(--text-xs, 0.75rem);
+	}
+
+	.status-badge--lg {
+		padding: var(--space-sm, 0.375rem) var(--space-md, 0.75rem);
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	/* Color variants - using soft/muted backgrounds */
+	.status-badge--default {
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text-muted, #6b7280);
+	}
+
+	.status-badge--success {
+		background: var(--color-success-soft, #dcfce7);
+		color: var(--color-success-text, #166534);
+	}
+
+	.status-badge--warning {
+		background: var(--color-warning-soft, #fef3c7);
+		color: var(--color-warning-text, #92400e);
+	}
+
+	.status-badge--error {
+		background: var(--color-error-soft, #fee2e2);
+		color: var(--color-error-text, #991b1b);
+	}
+
+	.status-badge--info {
+		background: var(--color-info-soft, #dbeafe);
+		color: var(--color-info-text, #1e40af);
+	}
+
+	/* Dot indicator */
+	.status-badge__dot {
+		width: 0.375rem;
+		height: 0.375rem;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+
+	.status-badge--sm .status-badge__dot {
+		width: 0.25rem;
+		height: 0.25rem;
+	}
+
+	.status-badge--lg .status-badge__dot {
+		width: 0.5rem;
+		height: 0.5rem;
+	}
+
+	.status-badge--default .status-badge__dot {
+		background: var(--color-text-muted, #6b7280);
+	}
+
+	.status-badge--success .status-badge__dot {
+		background: var(--color-success, #22c55e);
+	}
+
+	.status-badge--warning .status-badge__dot {
+		background: var(--color-warning, #f59e0b);
+	}
+
+	.status-badge--error .status-badge__dot {
+		background: var(--color-error, #ef4444);
+	}
+
+	.status-badge--info .status-badge__dot {
+		background: var(--color-info, #3b82f6);
+	}
+
+	/* Uppercase modifier */
+	.status-badge--uppercase .status-badge__text {
+		text-transform: uppercase;
+		letter-spacing: 0.025em;
+	}
+
+	/* Dark mode support */
+	:global([data-theme='dark']) .status-badge--default {
+		background: var(--color-bg-muted-dark, #374151);
+		color: var(--color-text-muted-dark, #9ca3af);
+	}
+
+	:global([data-theme='dark']) .status-badge--success {
+		background: var(--color-success-soft-dark, #064e3b);
+		color: var(--color-success-text-dark, #6ee7b7);
+	}
+
+	:global([data-theme='dark']) .status-badge--warning {
+		background: var(--color-warning-soft-dark, #78350f);
+		color: var(--color-warning-text-dark, #fcd34d);
+	}
+
+	:global([data-theme='dark']) .status-badge--error {
+		background: var(--color-error-soft-dark, #7f1d1d);
+		color: var(--color-error-text-dark, #fca5a5);
+	}
+
+	:global([data-theme='dark']) .status-badge--info {
+		background: var(--color-info-soft-dark, #1e3a8a);
+		color: var(--color-info-text-dark, #93c5fd);
+	}
+</style>

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

@@ -0,0 +1,22 @@
+/**
+ * StatusBadge - A color-coded badge for displaying status values
+ * Automatically maps common status strings to semantic colors
+ */
+type ColorVariant = 'success' | 'warning' | 'error' | 'info' | 'default';
+interface Props {
+    /** The status text to display */
+    status: string;
+    /** Custom color mapping from status strings to color variants */
+    colorMap?: Record<string, ColorVariant>;
+    /** Size of the badge */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show a dot indicator before the text */
+    dot?: boolean;
+    /** Transform text to uppercase */
+    uppercase?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const StatusBadge: import("svelte").Component<Props, {}, "">;
+type StatusBadge = ReturnType<typeof StatusBadge>;
+export default StatusBadge;

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

@@ -0,0 +1,2 @@
+export { default as StatusBadge } from './StatusBadge.svelte';
+export type { StatusBadgeProps, StatusBadgeColor, StatusBadgeSize } from '../../types/index.js';

package/dist/components/StatusBadge/index.js

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

package/dist/components/StatusBanner/StatusBanner.svelte

@@ -0,0 +1,325 @@
+<script lang="ts">
+	import type { StatusBannerStatus, StatusBannerPosition } from '../../types/index.js';
+
+	interface Props {
+		status: StatusBannerStatus;
+		message?: string;
+		description?: string;
+		dismissible?: boolean;
+		position?: StatusBannerPosition;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		status,
+		message,
+		description,
+		dismissible = false,
+		position = 'sticky',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let dismissed = $state(false);
+	let visible = $state(true);
+
+	function handleDismiss() {
+		visible = false;
+		setTimeout(() => {
+			dismissed = true;
+		}, 300); // Match animation duration
+	}
+
+	// Default icons for each status
+	const statusIcons: Record<StatusBannerStatus, string> = {
+		online: '✓',
+		offline: '⚠',
+		warning: '⚠',
+		error: '✕',
+		reconnecting: '↻'
+	};
+
+	// Default messages if not provided
+	const statusMessages: Record<StatusBannerStatus, string> = {
+		online: 'Online',
+		offline: 'Offline',
+		warning: 'Warning',
+		error: 'Error',
+		reconnecting: 'Reconnecting'
+	};
+</script>
+
+{#if !dismissed}
+	<div
+		class="status-banner status-banner--{status} status-banner--{position} {className}"
+		class:status-banner--visible={visible}
+		role="status"
+		aria-live="polite"
+	>
+		<div class="status-banner__content">
+			<span class="status-banner__icon" aria-hidden="true">
+				{statusIcons[status]}
+			</span>
+			<div class="status-banner__text">
+				<span class="status-banner__message">
+					{message || statusMessages[status]}
+				</span>
+				{#if description}
+					<span class="status-banner__description">
+						{description}
+					</span>
+				{/if}
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+		</div>
+		{#if dismissible}
+			<button
+				type="button"
+				class="status-banner__close"
+				onclick={handleDismiss}
+				aria-label="Dismiss status banner"
+			>
+				×
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.status-banner {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		padding: 0.75rem 1rem;
+		font-family: inherit;
+		font-size: 0.875rem;
+		line-height: 1.5;
+		opacity: 0;
+		transform: translateY(-100%);
+		transition:
+			transform 0.3s ease,
+			opacity 0.3s ease;
+		z-index: 1000;
+	}
+
+	.status-banner--visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.status-banner--fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+
+	.status-banner--sticky {
+		position: sticky;
+		top: 0;
+	}
+
+	.status-banner--static {
+		position: static;
+	}
+
+	/* Support for mobile safe areas */
+	@supports (padding-top: env(safe-area-inset-top)) {
+		.status-banner--fixed,
+		.status-banner--sticky {
+			padding-top: calc(0.75rem + env(safe-area-inset-top));
+		}
+	}
+
+	.status-banner__content {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		flex: 1;
+	}
+
+	.status-banner__icon {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		font-size: 1rem;
+		font-weight: 600;
+		line-height: 1;
+	}
+
+	.status-banner__text {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		flex: 1;
+	}
+
+	.status-banner__message {
+		font-weight: 600;
+		letter-spacing: 0.025em;
+	}
+
+	.status-banner__description {
+		font-size: 0.8125rem;
+		opacity: 0.9;
+	}
+
+	.status-banner__close {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		margin: -0.25rem -0.25rem -0.25rem 0.5rem;
+		padding: 0;
+		border: none;
+		border-radius: var(--radius-sm, 0.25rem);
+		background: transparent;
+		font-family: inherit;
+		font-size: 1.25rem;
+		line-height: 1;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.status-banner__close:hover {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.status-banner__close:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	/* Online variant */
+	.status-banner--online {
+		background-color: var(--color-success-bg, #ecfdf5);
+		color: var(--color-success, #10b981);
+	}
+
+	.status-banner--online .status-banner__message,
+	.status-banner--online .status-banner__description {
+		color: var(--color-success-text, #065f46);
+	}
+
+	/* Offline variant */
+	.status-banner--offline {
+		background-color: var(--color-warning-bg, #fffbeb);
+		color: var(--color-warning, #f59e0b);
+	}
+
+	.status-banner--offline .status-banner__message,
+	.status-banner--offline .status-banner__description {
+		color: var(--color-warning-text, #92400e);
+	}
+
+	/* Warning variant */
+	.status-banner--warning {
+		background-color: var(--color-warning-bg, #fffbeb);
+		color: var(--color-warning, #f59e0b);
+	}
+
+	.status-banner--warning .status-banner__message,
+	.status-banner--warning .status-banner__description {
+		color: var(--color-warning-text, #92400e);
+	}
+
+	/* Error variant */
+	.status-banner--error {
+		background-color: var(--color-error-bg, #fef2f2);
+		color: var(--color-error, #ef4444);
+	}
+
+	.status-banner--error .status-banner__message,
+	.status-banner--error .status-banner__description {
+		color: var(--color-error-text, #991b1b);
+	}
+
+	/* Reconnecting variant */
+	.status-banner--reconnecting {
+		background-color: var(--color-info-bg, #eff6ff);
+		color: var(--color-info, #3b82f6);
+	}
+
+	.status-banner--reconnecting .status-banner__message,
+	.status-banner--reconnecting .status-banner__description {
+		color: var(--color-info-text, #1e3a8a);
+	}
+
+	.status-banner--reconnecting .status-banner__icon {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Dark mode support */
+	:global([data-theme='dark']) .status-banner--online {
+		background-color: var(--color-success-bg-dark, #064e3b);
+		color: var(--color-success-dark, #6ee7b7);
+	}
+
+	:global([data-theme='dark']) .status-banner--online .status-banner__message,
+	:global([data-theme='dark']) .status-banner--online .status-banner__description {
+		color: var(--color-success-text-dark, #d1fae5);
+	}
+
+	:global([data-theme='dark']) .status-banner--offline {
+		background-color: var(--color-warning-bg-dark, #78350f);
+		color: var(--color-warning-dark, #fcd34d);
+	}
+
+	:global([data-theme='dark']) .status-banner--offline .status-banner__message,
+	:global([data-theme='dark']) .status-banner--offline .status-banner__description {
+		color: var(--color-warning-text-dark, #fef3c7);
+	}
+
+	:global([data-theme='dark']) .status-banner--warning {
+		background-color: var(--color-warning-bg-dark, #78350f);
+		color: var(--color-warning-dark, #fcd34d);
+	}
+
+	:global([data-theme='dark']) .status-banner--warning .status-banner__message,
+	:global([data-theme='dark']) .status-banner--warning .status-banner__description {
+		color: var(--color-warning-text-dark, #fef3c7);
+	}
+
+	:global([data-theme='dark']) .status-banner--error {
+		background-color: var(--color-error-bg-dark, #7f1d1d);
+		color: var(--color-error-dark, #fca5a5);
+	}
+
+	:global([data-theme='dark']) .status-banner--error .status-banner__message,
+	:global([data-theme='dark']) .status-banner--error .status-banner__description {
+		color: var(--color-error-text-dark, #fee2e2);
+	}
+
+	:global([data-theme='dark']) .status-banner--reconnecting {
+		background-color: var(--color-info-bg-dark, #1e3a8a);
+		color: var(--color-info-dark, #93c5fd);
+	}
+
+	:global([data-theme='dark']) .status-banner--reconnecting .status-banner__message,
+	:global([data-theme='dark']) .status-banner--reconnecting .status-banner__description {
+		color: var(--color-info-text-dark, #dbeafe);
+	}
+
+	:global([data-theme='dark']) .status-banner__close:hover {
+		background-color: rgba(255, 255, 255, 0.1);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { StatusBannerStatus, StatusBannerPosition } from '../../types/index.js';
+interface Props {
+    status: StatusBannerStatus;
+    message?: string;
+    description?: string;
+    dismissible?: boolean;
+    position?: StatusBannerPosition;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const StatusBanner: import("svelte").Component<Props, {}, "">;
+type StatusBanner = ReturnType<typeof StatusBanner>;
+export default StatusBanner;

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

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

package/dist/components/StatusBanner/index.js

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