@aspect-ops/exon-ui 0.2.0 → 0.2.2

package/dist/components/DoughnutChart/DoughnutChart.svelte

@@ -0,0 +1,390 @@
+<script lang="ts">
+	interface DataItem {
+		label: string;
+		value: number;
+	}
+
+	interface Props {
+		/** Chart title */
+		title?: string;
+		/** Data items for the chart */
+		data: DataItem[];
+		/** Chart size in pixels */
+		size?: number;
+		/** Doughnut thickness as ratio (0-1) */
+		thickness?: number;
+		/** Custom color palette */
+		colors?: string[];
+		/** Whether to show legend */
+		showLegend?: boolean;
+		/** Whether to show center total */
+		showTotal?: boolean;
+		/** Custom class */
+		class?: string;
+	}
+
+	// Default color palette
+	const defaultColors = [
+		'#8FBE6D',
+		'#F5D76E',
+		'#F7CA4F',
+		'#E8945A',
+		'#E25D5D',
+		'#6B5B95',
+		'#4A90A4',
+		'#5FBFBF'
+	];
+
+	let {
+		title = '',
+		data = [],
+		size = 200,
+		thickness = 0.6,
+		colors = defaultColors,
+		showLegend = true,
+		showTotal = true,
+		class: className = ''
+	}: Props = $props();
+
+	// Calculate total
+	const total = $derived(data.reduce((sum, item) => sum + item.value, 0));
+
+	// Calculate arc data
+	interface ArcData extends DataItem {
+		percentage: number;
+		color: string;
+		startAngle: number;
+		endAngle: number;
+		path: string;
+	}
+
+	const arcs = $derived.by(() => {
+		if (total === 0) return [];
+
+		const result: ArcData[] = [];
+		let currentAngle = -90; // Start from top
+
+		data.forEach((item, index) => {
+			const percentage = (item.value / total) * 100;
+			const angle = (item.value / total) * 360;
+			const startAngle = currentAngle;
+			const endAngle = currentAngle + angle;
+
+			const path = describeArc(size / 2, size / 2, size / 2 - 10, startAngle, endAngle);
+
+			result.push({
+				...item,
+				percentage,
+				color: colors[index % colors.length],
+				startAngle,
+				endAngle,
+				path
+			});
+
+			currentAngle = endAngle;
+		});
+
+		return result;
+	});
+
+	// Calculate inner radius for doughnut
+	const innerRadius = $derived((size / 2 - 10) * (1 - thickness));
+	const outerRadius = $derived(size / 2 - 10);
+
+	// Helper to convert polar to cartesian coordinates
+	function polarToCartesian(
+		centerX: number,
+		centerY: number,
+		radius: number,
+		angleInDegrees: number
+	): { x: number; y: number } {
+		const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+		return {
+			x: centerX + radius * Math.cos(angleInRadians),
+			y: centerY + radius * Math.sin(angleInRadians)
+		};
+	}
+
+	// Helper to describe an arc path
+	function describeArc(
+		x: number,
+		y: number,
+		radius: number,
+		startAngle: number,
+		endAngle: number
+	): string {
+		// Adjust angles (add 90 to start from top)
+		const start = polarToCartesian(x, y, radius, endAngle + 90);
+		const end = polarToCartesian(x, y, radius, startAngle + 90);
+		const innerStart = polarToCartesian(x, y, innerRadius, endAngle + 90);
+		const innerEnd = polarToCartesian(x, y, innerRadius, startAngle + 90);
+
+		const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+
+		// Create doughnut arc path
+		const d = [
+			'M',
+			start.x,
+			start.y,
+			'A',
+			radius,
+			radius,
+			0,
+			largeArcFlag,
+			0,
+			end.x,
+			end.y,
+			'L',
+			innerEnd.x,
+			innerEnd.y,
+			'A',
+			innerRadius,
+			innerRadius,
+			0,
+			largeArcFlag,
+			1,
+			innerStart.x,
+			innerStart.y,
+			'Z'
+		].join(' ');
+
+		return d;
+	}
+
+	// Format number for display
+	function formatNumber(num: number): string {
+		if (num >= 1000000) {
+			return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+		}
+		if (num >= 1000) {
+			return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+		}
+		return num.toLocaleString();
+	}
+
+	// Hovered arc index
+	let hoveredIndex = $state<number | null>(null);
+</script>
+
+<div class="doughnut-chart {className}">
+	{#if title}
+		<h3 class="doughnut-chart__title">{title}</h3>
+	{/if}
+
+	<div class="doughnut-chart__content">
+		<!-- SVG Chart -->
+		<div class="doughnut-chart__svg-container">
+			<svg
+				width={size}
+				height={size}
+				viewBox="0 0 {size} {size}"
+				class="doughnut-chart__svg"
+				role="img"
+				aria-label={title || 'Doughnut chart'}
+			>
+				{#each arcs as arc, index}
+					<path
+						d={arc.path}
+						fill={arc.color}
+						class="doughnut-chart__arc"
+						class:doughnut-chart__arc--hovered={hoveredIndex === index}
+						onmouseenter={() => (hoveredIndex = index)}
+						onmouseleave={() => (hoveredIndex = null)}
+						role="presentation"
+					>
+						<title>{arc.label}: {formatNumber(arc.value)} ({arc.percentage.toFixed(1)}%)</title>
+					</path>
+
+					<!-- Percentage label on arc -->
+					{#if arc.percentage >= 5}
+						{@const midAngle = (arc.startAngle + arc.endAngle) / 2}
+						{@const labelRadius = (outerRadius + innerRadius) / 2}
+						{@const labelPos = polarToCartesian(size / 2, size / 2, labelRadius, midAngle + 90)}
+						<text
+							x={labelPos.x}
+							y={labelPos.y}
+							text-anchor="middle"
+							dominant-baseline="middle"
+							class="doughnut-chart__label"
+							fill="#ffffff"
+						>
+							{arc.percentage.toFixed(0)}%
+						</text>
+					{/if}
+				{/each}
+
+				<!-- Background circle for center content -->
+				{#if showTotal}
+					<circle
+						cx={size / 2}
+						cy={size / 2}
+						r={innerRadius * 0.95}
+						fill="var(--color-bg, #ffffff)"
+						class="doughnut-chart__center-bg"
+					/>
+				{/if}
+			</svg>
+
+			<!-- Center total -->
+			{#if showTotal}
+				<div class="doughnut-chart__center">
+					<span class="doughnut-chart__total">{formatNumber(total)}</span>
+					<span class="doughnut-chart__total-label">Total</span>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Legend -->
+		{#if showLegend}
+			<ul class="doughnut-chart__legend">
+				{#each arcs as arc, index}
+					<li
+						class="doughnut-chart__legend-item"
+						class:doughnut-chart__legend-item--hovered={hoveredIndex === index}
+						onmouseenter={() => (hoveredIndex = index)}
+						onmouseleave={() => (hoveredIndex = null)}
+					>
+						<span class="doughnut-chart__legend-color" style="background-color: {arc.color}"></span>
+						<span class="doughnut-chart__legend-label">{arc.label}</span>
+						<span class="doughnut-chart__legend-value">{formatNumber(arc.value)}</span>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.doughnut-chart {
+		font-family: inherit;
+	}
+
+	.doughnut-chart__title {
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: var(--font-semibold, 600);
+		color: var(--color-text, #1f2937);
+		margin: 0 0 var(--space-md, 1rem);
+	}
+
+	.doughnut-chart__content {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xl, 2rem);
+		flex-wrap: wrap;
+	}
+
+	/* SVG Container */
+	.doughnut-chart__svg-container {
+		position: relative;
+		flex-shrink: 0;
+	}
+
+	.doughnut-chart__svg {
+		display: block;
+	}
+
+	/* Arc */
+	.doughnut-chart__arc {
+		cursor: pointer;
+		transition: opacity var(--transition-fast, 150ms ease);
+	}
+
+	.doughnut-chart__arc--hovered {
+		opacity: 0.85;
+		filter: brightness(1.1);
+	}
+
+	/* Arc Label */
+	.doughnut-chart__label {
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: var(--font-semibold, 600);
+		pointer-events: none;
+	}
+
+	/* Center Background */
+	.doughnut-chart__center-bg {
+		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+	}
+
+	/* Center */
+	.doughnut-chart__center {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		text-align: center;
+		pointer-events: none;
+		z-index: 10;
+	}
+
+	.doughnut-chart__total {
+		display: block;
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: var(--font-semibold, 600);
+		color: var(--color-text, #1f2937);
+		line-height: 1.2;
+	}
+
+	.doughnut-chart__total-label {
+		display: block;
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-muted, #6b7280);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		margin-top: 2px;
+	}
+
+	/* Legend */
+	.doughnut-chart__legend {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	.doughnut-chart__legend-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		padding: var(--space-xs, 0.25rem) 0;
+		cursor: pointer;
+		transition: opacity var(--transition-fast, 150ms ease);
+	}
+
+	.doughnut-chart__legend-item--hovered {
+		opacity: 0.85;
+	}
+
+	.doughnut-chart__legend-color {
+		width: 12px;
+		height: 12px;
+		border-radius: 2px;
+		flex-shrink: 0;
+	}
+
+	.doughnut-chart__legend-label {
+		flex: 1;
+		font-size: var(--text-sm, 0.875rem);
+		color: var(--color-text, #1f2937);
+	}
+
+	.doughnut-chart__legend-value {
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: var(--font-medium, 500);
+		color: var(--color-text-muted, #6b7280);
+	}
+
+	/* Responsive */
+	@media (max-width: 480px) {
+		.doughnut-chart__content {
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.doughnut-chart__legend {
+			width: 100%;
+		}
+	}
+</style>

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

@@ -0,0 +1,25 @@
+interface DataItem {
+    label: string;
+    value: number;
+}
+interface Props {
+    /** Chart title */
+    title?: string;
+    /** Data items for the chart */
+    data: DataItem[];
+    /** Chart size in pixels */
+    size?: number;
+    /** Doughnut thickness as ratio (0-1) */
+    thickness?: number;
+    /** Custom color palette */
+    colors?: string[];
+    /** Whether to show legend */
+    showLegend?: boolean;
+    /** Whether to show center total */
+    showTotal?: boolean;
+    /** Custom class */
+    class?: string;
+}
+declare const DoughnutChart: import("svelte").Component<Props, {}, "">;
+type DoughnutChart = ReturnType<typeof DoughnutChart>;
+export default DoughnutChart;

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

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

package/dist/components/DoughnutChart/index.js

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

package/dist/components/FAB/FAB.svelte

@@ -176,8 +176,12 @@
 
 	/* Focus state */
 	.fab:focus-visible {
-		outline: 2px solid var(--color-primary, #3b82f6);
+		outline: 2px solid var(--color-text-inverse, #ffffff);
 		outline-offset: 2px;
+		box-shadow:
+			0 0 0 4px var(--color-primary-active, #1d4ed8),
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -2px rgba(0, 0, 0, 0.1);
 	}
 
 	/* Disabled state */

package/dist/components/FAB/FABGroup.svelte

@@ -240,8 +240,12 @@
 	}
 
 	.fab-group__trigger:focus-visible {
-		outline: 2px solid var(--color-primary, #3b82f6);
+		outline: 2px solid var(--color-text-inverse, #ffffff);
 		outline-offset: 2px;
+		box-shadow:
+			0 0 0 4px var(--color-primary-active, #1d4ed8),
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -2px rgba(0, 0, 0, 0.1);
 	}
 
 	/* Rotation when open */
@@ -364,8 +368,12 @@
 	}
 
 	.fab-group__action:focus-visible {
-		outline: 2px solid var(--color-primary, #3b82f6);
+		outline: 2px solid var(--color-primary, #0090ff);
 		outline-offset: 2px;
+		box-shadow:
+			0 0 0 4px rgba(0, 144, 255, 0.2),
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -2px rgba(0, 0, 0, 0.1);
 	}
 
 	/* Action icon */

package/dist/components/FileUpload/FileUpload.svelte

@@ -328,13 +328,13 @@
 		text-align: center;
 		cursor: pointer;
 		transition: all 0.2s ease;
-		background-color: var(--color-background, #ffffff);
+		background-color: var(--color-bg, #ffffff);
 		min-height: var(--touch-target-min, 44px);
 	}
 
 	.drop-zone:hover:not(.disabled) {
 		border-color: var(--color-primary, #3b82f6);
-		background-color: var(--color-background-hover, #f9fafb);
+		background-color: var(--color-bg-hover, #f9fafb);
 	}
 
 	.drop-zone:focus-visible {
@@ -344,7 +344,7 @@
 
 	.drop-zone.dragging {
 		border-color: var(--color-primary, #3b82f6);
-		background-color: var(--color-primary-light, #eff6ff);
+		background-color: var(--color-primary-bg, #eff6ff);
 	}
 
 	.drop-zone.has-files {
@@ -365,7 +365,7 @@
 	}
 
 	.upload-icon {
-		color: var(--color-text-secondary, #6b7280);
+		color: var(--color-text-muted, #6b7280);
 	}
 
 	.instructions {
@@ -378,7 +378,7 @@
 	.hint {
 		margin: 0;
 		font-size: var(--text-sm, 0.875rem);
-		color: var(--color-text-secondary, #6b7280);
+		color: var(--color-text-muted, #6b7280);
 	}
 
 	.file-list {
@@ -395,7 +395,7 @@
 		padding: var(--space-3, 0.75rem);
 		border: 1px solid var(--color-border, #e5e7eb);
 		border-radius: var(--radius-md, 8px);
-		background-color: var(--color-background, #ffffff);
+		background-color: var(--color-bg, #ffffff);
 	}
 
 	.file-preview {
@@ -406,7 +406,7 @@
 		align-items: center;
 		justify-content: center;
 		border-radius: var(--radius-sm, 4px);
-		background-color: var(--color-background-secondary, #f3f4f6);
+		background-color: var(--color-bg-muted, #f3f4f6);
 		overflow: hidden;
 	}
 
@@ -417,7 +417,7 @@
 	}
 
 	.file-icon {
-		color: var(--color-text-secondary, #6b7280);
+		color: var(--color-text-muted, #6b7280);
 	}
 
 	.file-info {
@@ -439,7 +439,7 @@
 
 	.file-size {
 		font-size: var(--text-xs, 0.75rem);
-		color: var(--color-text-secondary, #6b7280);
+		color: var(--color-text-muted, #6b7280);
 	}
 
 	.remove-btn {
@@ -451,15 +451,15 @@
 		justify-content: center;
 		border: none;
 		background: transparent;
-		color: var(--color-text-secondary, #6b7280);
+		color: var(--color-text-muted, #6b7280);
 		cursor: pointer;
 		border-radius: var(--radius-sm, 4px);
 		transition: all 0.2s ease;
 	}
 
 	.remove-btn:hover:not(:disabled) {
-		background-color: var(--color-error-light, #fef2f2);
-		color: var(--color-error, #ef4444);
+		background-color: var(--color-error-bg, #fef2f2);
+		color: var(--color-destructive, #ef4444);
 	}
 
 	.remove-btn:focus-visible {

package/dist/components/Icon/Icon.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { IconSize } from '../../types/index.js';
+	import type { ComponentType } from 'svelte';
 
 	interface Props {
-		name: string;
+		icon: ComponentType;
 		size?: IconSize;
 		class?: string;
 		'aria-label'?: string;
@@ -10,38 +11,34 @@
 	}
 
 	let {
-		name,
+		icon: IconComponent,
 		size = 'md',
 		class: className = '',
 		'aria-label': ariaLabel,
 		'aria-hidden': ariaHidden = !ariaLabel
 	}: Props = $props();
 
-	// Size map aligned with typography scale
-	const sizeMap: Record<IconSize, string> = {
-		xs: '0.75rem',
-		sm: '1rem',
-		md: '1.25rem',
-		lg: '1.5rem',
-		xl: '2rem'
+	// Size map aligned with typography scale (in pixels for Lucide)
+	const sizeMap: Record<IconSize, number> = {
+		xs: 12,
+		sm: 16,
+		md: 20,
+		lg: 24,
+		xl: 32
 	};
 </script>
 
-<svg
+<IconComponent
+	size={sizeMap[size]}
 	class="icon icon--{size} {className}"
-	style="--icon-size: {sizeMap[size]}"
 	aria-label={ariaLabel}
 	aria-hidden={ariaHidden}
 	role={ariaLabel ? 'img' : undefined}
->
-	<use href="#{name}" />
-</svg>
+/>
 
 <style>
-	.icon {
-		width: var(--icon-size);
-		height: var(--icon-size);
-		fill: currentColor;
+	:global(.icon) {
 		flex-shrink: 0;
+		color: currentColor;
 	}
 </style>

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

@@ -1,6 +1,7 @@
 import type { IconSize } from '../../types/index.js';
+import type { ComponentType } from 'svelte';
 interface Props {
-    name: string;
+    icon: ComponentType;
     size?: IconSize;
     class?: string;
     'aria-label'?: string;

package/dist/components/Menu/MenuContent.svelte

@@ -36,6 +36,7 @@
 		z-index: 50;
 		min-width: 8rem;
 		max-width: 20rem;
+		overflow: hidden;
 	}
 
 	/* Animation states */

package/dist/components/Menu/MenuSubContent.svelte

@@ -25,6 +25,7 @@
 		z-index: 51;
 		min-width: 8rem;
 		max-width: 20rem;
+		overflow: hidden;
 	}
 
 	/* Animation states */