@aspect-ops/exon-ui 0.2.1 → 0.3.0

package/dist/components/StatCircle/StatCircle.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	interface Props {
+		/** The numeric value or string to display inside the circle */
+		value: number | string;
+		/** Label text displayed below the circle */
+		label: string;
+		/** Color variant for the value text */
+		color?: 'default' | 'primary' | 'warning' | 'error' | 'success';
+		/** Size of the circle */
+		size?: 'sm' | 'md' | 'lg';
+		/** Makes the circle clickable with hover effects */
+		clickable?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Click handler */
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let {
+		value,
+		label,
+		color = 'default',
+		size = 'md',
+		clickable = false,
+		class: className = '',
+		onclick
+	}: Props = $props();
+</script>
+
+{#if clickable}
+	<button
+		class="stat-circle stat-circle--{color} stat-circle--{size} stat-circle--clickable {className}"
+		{onclick}
+		type="button"
+	>
+		<div class="stat-circle__circle">
+			<div class="stat-circle__value">{value}</div>
+		</div>
+		<div class="stat-circle__label">{label}</div>
+	</button>
+{:else}
+	<div class="stat-circle stat-circle--{color} stat-circle--{size} {className}">
+		<div class="stat-circle__circle">
+			<div class="stat-circle__value">{value}</div>
+		</div>
+		<div class="stat-circle__label">{label}</div>
+	</div>
+{/if}
+
+<style>
+	.stat-circle {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		font-family: inherit;
+	}
+
+	.stat-circle--clickable {
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.stat-circle--clickable:hover .stat-circle__circle {
+		transform: scale(1.05);
+	}
+
+	.stat-circle--clickable:active .stat-circle__circle {
+		transform: scale(0.98);
+	}
+
+	.stat-circle__circle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--radius-full, 9999px);
+		background: var(--color-bg-subtle, #f9fafb);
+		border: 1px solid var(--color-border-subtle, #e5e7eb);
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
+	}
+
+	.stat-circle--clickable:focus-visible .stat-circle__circle {
+		outline: 2px solid var(--color-focus, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.stat-circle__value {
+		font-weight: 700;
+		line-height: 1;
+	}
+
+	.stat-circle__label {
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+		color: var(--color-text-muted, #6b7280);
+		text-align: center;
+	}
+
+	/* Size variants */
+	.stat-circle--sm .stat-circle__circle {
+		width: 3rem;
+		height: 3rem;
+		min-width: 3rem;
+		min-height: 3rem;
+	}
+
+	.stat-circle--sm .stat-circle__value {
+		font-size: var(--text-lg, 1.125rem);
+	}
+
+	.stat-circle--md .stat-circle__circle {
+		width: 4rem;
+		height: 4rem;
+		min-width: 4rem;
+		min-height: 4rem;
+	}
+
+	.stat-circle--md .stat-circle__value {
+		font-size: var(--text-2xl, 1.5rem);
+	}
+
+	.stat-circle--lg .stat-circle__circle {
+		width: 5rem;
+		height: 5rem;
+		min-width: 5rem;
+		min-height: 5rem;
+	}
+
+	.stat-circle--lg .stat-circle__value {
+		font-size: var(--text-3xl, 1.875rem);
+	}
+
+	/* Color variants */
+	.stat-circle--default .stat-circle__value {
+		color: var(--color-text, #1f2937);
+	}
+
+	.stat-circle--primary .stat-circle__value {
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.stat-circle--warning .stat-circle__value {
+		color: var(--color-warning, #f59e0b);
+	}
+
+	.stat-circle--error .stat-circle__value {
+		color: var(--color-error, #ef4444);
+	}
+
+	.stat-circle--success .stat-circle__value {
+		color: var(--color-success, #10b981);
+	}
+
+	/* Dark mode support */
+	:global([data-theme='dark']) .stat-circle__circle {
+		background: var(--color-bg-subtle-dark, #1f2937);
+		border-color: var(--color-border-subtle-dark, #374151);
+	}
+
+	:global([data-theme='dark']) .stat-circle__label {
+		color: var(--color-text-muted-dark, #9ca3af);
+	}
+
+	:global([data-theme='dark']) .stat-circle--default .stat-circle__value {
+		color: var(--color-text-dark, #f9fafb);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+interface Props {
+    /** The numeric value or string to display inside the circle */
+    value: number | string;
+    /** Label text displayed below the circle */
+    label: string;
+    /** Color variant for the value text */
+    color?: 'default' | 'primary' | 'warning' | 'error' | 'success';
+    /** Size of the circle */
+    size?: 'sm' | 'md' | 'lg';
+    /** Makes the circle clickable with hover effects */
+    clickable?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (event: MouseEvent) => void;
+}
+declare const StatCircle: import("svelte").Component<Props, {}, "">;
+type StatCircle = ReturnType<typeof StatCircle>;
+export default StatCircle;

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

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

package/dist/components/StatCircle/index.js

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

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