@aspect-ops/exon-ui 0.0.2 → 0.0.3

package/dist/components/Tag/Tag.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import type { TagVariant, TagSize } from '../../types/index.js';
+
+	interface Props {
+		variant?: TagVariant;
+		size?: TagSize;
+		dismissible?: boolean;
+		ondismiss?: () => void;
+		class?: string;
+		children?: import('svelte').Snippet;
+		icon?: import('svelte').Snippet;
+	}
+
+	let {
+		variant = 'default',
+		size = 'md',
+		dismissible = false,
+		ondismiss,
+		class: className = '',
+		children,
+		icon
+	}: Props = $props();
+
+	function handleDismiss() {
+		ondismiss?.();
+	}
+</script>
+
+<span class="tag tag--{variant} tag--{size} {className}" role={dismissible ? undefined : 'status'}>
+	{#if icon}
+		<span class="tag__icon" aria-hidden="true">
+			{@render icon()}
+		</span>
+	{/if}
+	<span class="tag__label">
+		{#if children}
+			{@render children()}
+		{/if}
+	</span>
+	{#if dismissible}
+		<button type="button" class="tag__close" onclick={handleDismiss} aria-label="Remove tag">
+			×
+		</button>
+	{/if}
+</span>
+
+<style>
+	.tag {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		border-radius: var(--radius-full, 9999px);
+		font-family: inherit;
+		font-weight: 500;
+		line-height: 1;
+		white-space: nowrap;
+		transition: background-color 0.2s ease;
+	}
+
+	.tag__label {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.tag__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.tag__close {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 2.75rem;
+		height: 2.75rem;
+		margin: -0.25rem -0.25rem -0.25rem 0;
+		padding: 0;
+		border: none;
+		border-radius: var(--radius-full, 9999px);
+		background: transparent;
+		font-family: inherit;
+		font-size: 1.25rem;
+		line-height: 1;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.tag__close:hover {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.tag__close:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	/* Size variants */
+	.tag--sm {
+		font-size: var(--text-xs, 0.75rem);
+		padding: 0.125rem var(--space-xs, 0.25rem);
+	}
+
+	.tag--sm .tag__close {
+		width: 2rem;
+		height: 2rem;
+		font-size: 1rem;
+	}
+
+	.tag--md {
+		font-size: var(--text-sm, 0.875rem);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+	}
+
+	.tag--md .tag__close {
+		width: 2.75rem;
+		height: 2.75rem;
+		font-size: 1.25rem;
+	}
+
+	.tag--lg {
+		font-size: var(--text-base, 1rem);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 0.75rem);
+	}
+
+	.tag--lg .tag__close {
+		width: 2.75rem;
+		height: 2.75rem;
+		font-size: 1.5rem;
+	}
+
+	/* Color variants */
+	.tag--default {
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text, #1f2937);
+	}
+
+	.tag--default .tag__close:hover {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.tag--primary {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.tag--primary .tag__close:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.tag--secondary {
+		background: var(--color-secondary, #6b7280);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.tag--secondary .tag__close:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.tag--success {
+		background: var(--color-success, #10b981);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.tag--success .tag__close:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.tag--warning {
+		background: var(--color-warning, #f59e0b);
+		color: var(--color-text, #1f2937);
+	}
+
+	.tag--warning .tag__close:hover {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.tag--error {
+		background: var(--color-error, #ef4444);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.tag--error .tag__close:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { TagVariant, TagSize } from '../../types/index.js';
+interface Props {
+    variant?: TagVariant;
+    size?: TagSize;
+    dismissible?: boolean;
+    ondismiss?: () => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    icon?: import('svelte').Snippet;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

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

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

package/dist/components/Tag/index.js

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

package/dist/components/Toast/Toast.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ToastVariant } from '../../types/index.js';
+
+	interface Props {
+		id: string;
+		message: string;
+		variant?: ToastVariant;
+		dismissible?: boolean;
+		progress?: boolean;
+		duration?: number;
+		action?: {
+			label: string;
+			onClick: () => void;
+		};
+		onDismiss?: (id: string) => void;
+		class?: string;
+	}
+
+	let {
+		id,
+		message,
+		variant = 'info',
+		dismissible = true,
+		progress = true,
+		duration = 5000,
+		action,
+		onDismiss,
+		class: className = ''
+	}: Props = $props();
+
+	let visible = $state(false);
+	let progressValue = $state(100);
+	let timeoutId: number | undefined;
+	let intervalId: number | undefined;
+
+	onMount(() => {
+		// Trigger slide-in animation
+		visible = true;
+
+		// Start progress bar animation if enabled
+		if (progress && duration > 0) {
+			const startTime = Date.now();
+			intervalId = window.setInterval(() => {
+				const elapsed = Date.now() - startTime;
+				const remaining = Math.max(0, ((duration - elapsed) / duration) * 100);
+				progressValue = remaining;
+
+				if (remaining <= 0) {
+					clearInterval(intervalId);
+				}
+			}, 16); // ~60fps
+		}
+
+		// Auto-dismiss after duration
+		if (duration > 0) {
+			timeoutId = window.setTimeout(() => {
+				handleDismiss();
+			}, duration);
+		}
+
+		return () => {
+			if (timeoutId) clearTimeout(timeoutId);
+			if (intervalId) clearInterval(intervalId);
+		};
+	});
+
+	function handleDismiss() {
+		visible = false;
+		// Wait for animation to complete before calling onDismiss
+		setTimeout(() => {
+			onDismiss?.(id);
+		}, 300);
+	}
+
+	function handleAction() {
+		action?.onClick();
+		handleDismiss();
+	}
+</script>
+
+<div
+	class="toast toast--{variant} {visible ? 'toast--visible' : ''} {className}"
+	role="status"
+	aria-live="polite"
+>
+	<div class="toast__content">
+		<div class="toast__message">{message}</div>
+
+		{#if action}
+			<button type="button" class="toast__action" onclick={handleAction}>
+				{action.label}
+			</button>
+		{/if}
+	</div>
+
+	{#if dismissible}
+		<button type="button" class="toast__close" onclick={handleDismiss} aria-label="Dismiss toast">
+			×
+		</button>
+	{/if}
+
+	{#if progress && duration > 0}
+		<div class="toast__progress">
+			<div class="toast__progress-bar" style="width: {progressValue}%"></div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.toast {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		min-width: 18.75rem;
+		max-width: 25rem;
+		padding: var(--space-md, 1rem);
+		border-radius: var(--radius-md, 0.375rem);
+		box-shadow:
+			0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.1),
+			0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		opacity: 0;
+		transform: translateY(0.5rem);
+		transition:
+			opacity 0.3s ease,
+			transform 0.3s ease;
+	}
+
+	.toast--visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.toast__content {
+		display: flex;
+		align-items: center;
+		gap: var(--space-md, 1rem);
+		flex: 1;
+	}
+
+	.toast__message {
+		flex: 1;
+	}
+
+	.toast__action {
+		flex-shrink: 0;
+		padding: 0.25rem 0.75rem;
+		border: none;
+		border-radius: var(--radius-sm, 0.25rem);
+		background: rgba(255, 255, 255, 0.2);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 600;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+		min-height: 2.75rem;
+		min-width: 2.75rem;
+	}
+
+	.toast__action:hover {
+		background: rgba(255, 255, 255, 0.3);
+	}
+
+	.toast__action:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	.toast__close {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.75rem;
+		height: 2.75rem;
+		margin: -0.5rem -0.5rem -0.5rem 0.5rem;
+		padding: 0;
+		border: none;
+		border-radius: var(--radius-sm, 0.25rem);
+		background: transparent;
+		font-family: inherit;
+		font-size: 1.5rem;
+		line-height: 1;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.toast__close:hover {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.toast__close:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	.toast__progress {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 0.25rem;
+		background: rgba(0, 0, 0, 0.1);
+		border-radius: 0 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);
+		overflow: hidden;
+	}
+
+	.toast__progress-bar {
+		height: 100%;
+		background: currentColor;
+		transition: width 0.016s linear;
+	}
+
+	/* Info variant */
+	.toast--info {
+		background-color: var(--color-info, #3b82f6);
+		color: white;
+	}
+
+	/* Success variant */
+	.toast--success {
+		background-color: var(--color-success, #10b981);
+		color: white;
+	}
+
+	/* Warning variant */
+	.toast--warning {
+		background-color: var(--color-warning, #f59e0b);
+		color: white;
+	}
+
+	/* Error variant */
+	.toast--error {
+		background-color: var(--color-error, #ef4444);
+		color: white;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { ToastVariant } from '../../types/index.js';
+interface Props {
+    id: string;
+    message: string;
+    variant?: ToastVariant;
+    dismissible?: boolean;
+    progress?: boolean;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    onDismiss?: (id: string) => void;
+    class?: string;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/Toast/ToastContainer.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Toast from './Toast.svelte';
+	import { toast } from './toast.js';
+	import type { ToastPosition } from '../../types/index.js';
+
+	interface Props {
+		position?: ToastPosition;
+		class?: string;
+	}
+
+	let { position = 'bottom-right', class: className = '' }: Props = $props();
+
+	let mounted = $state(false);
+	let toasts = $state<typeof $toast>([]);
+
+	// Subscribe to toast store
+	const unsubscribe = toast.subscribe((value) => {
+		toasts = value;
+	});
+
+	onMount(() => {
+		mounted = true;
+
+		return () => {
+			unsubscribe();
+		};
+	});
+
+	function handleDismiss(id: string) {
+		toast.remove(id);
+	}
+</script>
+
+{#if mounted}
+	<div class="toast-container toast-container--{position} {className}">
+		{#each toasts as toastData (toastData.id)}
+			<Toast
+				id={toastData.id}
+				message={toastData.message}
+				variant={toastData.variant}
+				dismissible={toastData.dismissible}
+				progress={true}
+				duration={toastData.duration}
+				action={toastData.action}
+				onDismiss={handleDismiss}
+			/>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.toast-container {
+		position: fixed;
+		z-index: 9999;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-md, 1rem);
+		pointer-events: none;
+		font-family:
+			-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	}
+
+	.toast-container :global(*) {
+		pointer-events: auto;
+	}
+
+	/* Position variants */
+	.toast-container--top {
+		top: var(--space-lg, 1.5rem);
+		left: 50%;
+		transform: translateX(-50%);
+		padding-top: env(safe-area-inset-top, 0);
+	}
+
+	.toast-container--top-left {
+		top: var(--space-lg, 1.5rem);
+		left: var(--space-lg, 1.5rem);
+		padding-top: env(safe-area-inset-top, 0);
+		padding-left: env(safe-area-inset-left, 0);
+	}
+
+	.toast-container--top-right {
+		top: var(--space-lg, 1.5rem);
+		right: var(--space-lg, 1.5rem);
+		padding-top: env(safe-area-inset-top, 0);
+		padding-right: env(safe-area-inset-right, 0);
+	}
+
+	.toast-container--bottom {
+		bottom: var(--space-lg, 1.5rem);
+		left: 50%;
+		transform: translateX(-50%);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+	}
+
+	.toast-container--bottom-left {
+		bottom: var(--space-lg, 1.5rem);
+		left: var(--space-lg, 1.5rem);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+		padding-left: env(safe-area-inset-left, 0);
+	}
+
+	.toast-container--bottom-right {
+		bottom: var(--space-lg, 1.5rem);
+		right: var(--space-lg, 1.5rem);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+		padding-right: env(safe-area-inset-right, 0);
+	}
+</style>

package/dist/components/Toast/ToastContainer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ToastPosition } from '../../types/index.js';
+interface Props {
+    position?: ToastPosition;
+    class?: string;
+}
+declare const ToastContainer: import("svelte").Component<Props, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;

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

@@ -0,0 +1,3 @@
+export { default as Toast } from './Toast.svelte';
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { toast } from './toast.js';

package/dist/components/Toast/index.js

@@ -0,0 +1,3 @@
+export { default as Toast } from './Toast.svelte';
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { toast } from './toast.js';

package/dist/components/Toast/toast.d.ts

@@ -0,0 +1,13 @@
+import type { ToastData } from '../../types/index.js';
+export declare const toast: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ToastData[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    add: (options: Omit<ToastData, "id"> & {
+        id?: string;
+    }) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+    info: (message: string, options?: Partial<Omit<ToastData, "id" | "message" | "variant">>) => string;
+    success: (message: string, options?: Partial<Omit<ToastData, "id" | "message" | "variant">>) => string;
+    warning: (message: string, options?: Partial<Omit<ToastData, "id" | "message" | "variant">>) => string;
+    error: (message: string, options?: Partial<Omit<ToastData, "id" | "message" | "variant">>) => string;
+};

package/dist/components/Toast/toast.js

@@ -0,0 +1,55 @@
+import { writable } from 'svelte/store';
+// Create the toast store
+function createToastStore() {
+    const { subscribe, update } = writable([]);
+    // Generate unique ID
+    function generateId() {
+        return `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    // Add a toast
+    function add(options) {
+        const id = options.id || generateId();
+        const duration = options.duration ?? 5000;
+        const toastData = {
+            ...options,
+            id,
+            duration,
+            variant: options.variant || 'info',
+            dismissible: options.dismissible ?? true
+        };
+        update((toasts) => [...toasts, toastData]);
+        return id;
+    }
+    // Remove a specific toast
+    function remove(id) {
+        update((toasts) => toasts.filter((t) => t.id !== id));
+    }
+    // Clear all toasts
+    function clear() {
+        update(() => []);
+    }
+    // Convenience methods for different variants
+    function info(message, options) {
+        return add({ message, variant: 'info', ...options });
+    }
+    function success(message, options) {
+        return add({ message, variant: 'success', ...options });
+    }
+    function warning(message, options) {
+        return add({ message, variant: 'warning', ...options });
+    }
+    function error(message, options) {
+        return add({ message, variant: 'error', ...options });
+    }
+    return {
+        subscribe,
+        add,
+        remove,
+        clear,
+        info,
+        success,
+        warning,
+        error
+    };
+}
+export const toast = createToastStore();