@aspect-ops/exon-ui 0.2.1 → 0.2.2

package/dist/components/StatsCard/StatsCard.svelte

@@ -0,0 +1,301 @@
+<script lang="ts">
+	/**
+	 * StatsCard - A clickable card for displaying statistics with optional trends
+	 * Commonly used for dashboard stat summaries and filter toggles
+	 */
+
+	type ColorVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
+
+	interface TrendData {
+		value: number;
+		direction: 'up' | 'down';
+	}
+
+	interface Props {
+		/** Label text displayed above the value */
+		label: string;
+		/** The numeric or string value to display */
+		value: number | string;
+		/** Color variant for the value text */
+		color?: ColorVariant;
+		/** Optional icon snippet rendered before the value */
+		icon?: import('svelte').Snippet;
+		/** Whether this card is in selected/active state */
+		selected?: boolean;
+		/** Click handler - makes the card interactive */
+		onclick?: (event: MouseEvent) => void;
+		/** Optional trend indicator showing change direction and percentage */
+		trend?: TrendData;
+		/** Show loading skeleton instead of content */
+		loading?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		label,
+		value,
+		color = 'default',
+		icon,
+		selected = false,
+		onclick,
+		trend,
+		loading = false,
+		class: className = ''
+	}: Props = $props();
+
+	const isClickable = $derived(!!onclick);
+</script>
+
+{#if loading}
+	<div class="stats-card stats-card--loading {className}">
+		<div class="stats-card__skeleton-label"></div>
+		<div class="stats-card__skeleton-value"></div>
+	</div>
+{:else}
+	<button
+		type="button"
+		class="stats-card stats-card--{color} {className}"
+		class:stats-card--selected={selected}
+		class:stats-card--clickable={isClickable}
+		{onclick}
+		disabled={!isClickable}
+	>
+		<div class="stats-card__label">{label}</div>
+		<div class="stats-card__content">
+			{#if icon}
+				<span class="stats-card__icon">
+					{@render icon()}
+				</span>
+			{/if}
+			<span class="stats-card__value">{value}</span>
+			{#if trend}
+				<span
+					class="stats-card__trend"
+					class:stats-card__trend--up={trend.direction === 'up'}
+					class:stats-card__trend--down={trend.direction === 'down'}
+				>
+					<svg
+						class="stats-card__trend-icon"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						aria-hidden="true"
+					>
+						{#if trend.direction === 'up'}
+							<path
+								fill-rule="evenodd"
+								d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
+								clip-rule="evenodd"
+							/>
+						{:else}
+							<path
+								fill-rule="evenodd"
+								d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
+								clip-rule="evenodd"
+							/>
+						{/if}
+					</svg>
+					<span class="stats-card__trend-value">{trend.value}%</span>
+				</span>
+			{/if}
+		</div>
+	</button>
+{/if}
+
+<style>
+	.stats-card {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		padding: var(--space-lg, 1rem);
+		background: var(--color-bg-card, #ffffff);
+		border-radius: var(--radius-lg, 0.5rem);
+		border: 2px solid transparent;
+		box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+		font-family: inherit;
+		text-align: left;
+		width: 100%;
+		transition:
+			box-shadow 0.2s ease,
+			border-color 0.2s ease,
+			transform 0.1s ease;
+	}
+
+	/* Reset button styles */
+	button.stats-card {
+		cursor: default;
+	}
+
+	button.stats-card:disabled {
+		opacity: 1;
+	}
+
+	/* Clickable state */
+	.stats-card--clickable {
+		cursor: pointer;
+	}
+
+	.stats-card--clickable:hover {
+		box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+	}
+
+	.stats-card--clickable:active {
+		transform: scale(0.98);
+	}
+
+	/* Selected state */
+	.stats-card--selected {
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	/* Label */
+	.stats-card__label {
+		font-size: var(--text-sm, 0.875rem);
+		color: var(--color-text-muted, #6b7280);
+		margin-bottom: var(--space-xs, 0.25rem);
+	}
+
+	/* Content wrapper */
+	.stats-card__content {
+		display: flex;
+		align-items: baseline;
+		gap: var(--space-sm, 0.5rem);
+		flex-wrap: wrap;
+	}
+
+	/* Icon */
+	.stats-card__icon {
+		display: flex;
+		align-items: center;
+		color: inherit;
+	}
+
+	.stats-card__icon :global(svg) {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	/* Value */
+	.stats-card__value {
+		font-size: var(--text-2xl, 1.5rem);
+		font-weight: 700;
+		line-height: 1.2;
+	}
+
+	/* Color variants for value */
+	.stats-card--default .stats-card__value {
+		color: var(--color-text, #1f2937);
+	}
+
+	.stats-card--primary .stats-card__value {
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.stats-card--success .stats-card__value {
+		color: var(--color-success, #22c55e);
+	}
+
+	.stats-card--warning .stats-card__value {
+		color: var(--color-warning, #f59e0b);
+	}
+
+	.stats-card--error .stats-card__value {
+		color: var(--color-error, #ef4444);
+	}
+
+	/* Trend indicator */
+	.stats-card__trend {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.125rem;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+	}
+
+	.stats-card__trend--up {
+		color: var(--color-success, #22c55e);
+	}
+
+	.stats-card__trend--down {
+		color: var(--color-error, #ef4444);
+	}
+
+	.stats-card__trend-icon {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	/* Loading skeleton */
+	.stats-card--loading {
+		pointer-events: none;
+	}
+
+	.stats-card__skeleton-label,
+	.stats-card__skeleton-value {
+		background: linear-gradient(
+			90deg,
+			var(--color-bg-muted, #e5e7eb) 25%,
+			var(--color-bg-skeleton-shine, #f3f4f6) 50%,
+			var(--color-bg-muted, #e5e7eb) 75%
+		);
+		background-size: 200% 100%;
+		animation: skeleton-shimmer 1.5s ease-in-out infinite;
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.stats-card__skeleton-label {
+		width: 60%;
+		height: 0.875rem;
+		margin-bottom: var(--space-sm, 0.5rem);
+	}
+
+	.stats-card__skeleton-value {
+		width: 40%;
+		height: 1.75rem;
+	}
+
+	@keyframes skeleton-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	/* Dark mode support */
+	:global([data-theme='dark']) .stats-card {
+		background: var(--color-bg-card-dark, #1f2937);
+		box-shadow: var(--shadow-sm-dark, 0 1px 2px 0 rgb(0 0 0 / 0.2));
+	}
+
+	:global([data-theme='dark']) .stats-card--clickable:hover {
+		box-shadow: var(--shadow-md-dark, 0 4px 6px -1px rgb(0 0 0 / 0.3));
+	}
+
+	:global([data-theme='dark']) .stats-card__label {
+		color: var(--color-text-muted-dark, #9ca3af);
+	}
+
+	:global([data-theme='dark']) .stats-card--default .stats-card__value {
+		color: var(--color-text-dark, #f9fafb);
+	}
+
+	:global([data-theme='dark']) .stats-card__skeleton-label,
+	:global([data-theme='dark']) .stats-card__skeleton-value {
+		background: linear-gradient(
+			90deg,
+			var(--color-bg-muted-dark, #374151) 25%,
+			var(--color-bg-skeleton-shine-dark, #4b5563) 50%,
+			var(--color-bg-muted-dark, #374151) 75%
+		);
+		background-size: 200% 100%;
+	}
+
+	/* Touch target for mobile - ensure 44px minimum */
+	@media (pointer: coarse) {
+		.stats-card {
+			min-height: 2.75rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,32 @@
+/**
+ * StatsCard - A clickable card for displaying statistics with optional trends
+ * Commonly used for dashboard stat summaries and filter toggles
+ */
+type ColorVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
+interface TrendData {
+    value: number;
+    direction: 'up' | 'down';
+}
+interface Props {
+    /** Label text displayed above the value */
+    label: string;
+    /** The numeric or string value to display */
+    value: number | string;
+    /** Color variant for the value text */
+    color?: ColorVariant;
+    /** Optional icon snippet rendered before the value */
+    icon?: import('svelte').Snippet;
+    /** Whether this card is in selected/active state */
+    selected?: boolean;
+    /** Click handler - makes the card interactive */
+    onclick?: (event: MouseEvent) => void;
+    /** Optional trend indicator showing change direction and percentage */
+    trend?: TrendData;
+    /** Show loading skeleton instead of content */
+    loading?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const StatsCard: import("svelte").Component<Props, {}, "">;
+type StatsCard = ReturnType<typeof StatsCard>;
+export default StatsCard;

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

@@ -0,0 +1,2 @@
+export { default as StatsCard } from './StatsCard.svelte';
+export type { StatsCardProps, StatsCardColor, StatsCardTrend } from '../../types/index.js';

package/dist/components/StatsCard/index.js

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

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