@aspect-ops/exon-ui 0.0.2 → 0.1.0

package/dist/components/FileUpload/FileUpload.svelte

@@ -0,0 +1,484 @@
+<script lang="ts">
+	interface Props {
+		files?: File[];
+		accept?: string;
+		multiple?: boolean;
+		maxSize?: number;
+		maxFiles?: number;
+		disabled?: boolean;
+		showPreview?: boolean;
+		class?: string;
+		onchange?: (files: File[]) => void;
+		onerror?: (error: string) => void;
+		onremove?: (file: File) => void;
+	}
+
+	let {
+		files = $bindable([]),
+		accept = '',
+		multiple = false,
+		maxSize = 10 * 1024 * 1024, // 10MB
+		maxFiles = 10,
+		disabled = false,
+		showPreview = true,
+		class: className = '',
+		onchange,
+		onerror,
+		onremove
+	}: Props = $props();
+
+	let isDragging = $state(false);
+	let fileInput: HTMLInputElement;
+	let previewUrls = $state<Map<File, string>>(new Map());
+
+	const hasFiles = $derived(files.length > 0);
+
+	function formatFileSize(bytes: number): string {
+		if (bytes < 1024) return bytes + ' B';
+		if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+		return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+	}
+
+	function isImageFile(file: File): boolean {
+		return file.type.startsWith('image/');
+	}
+
+	function validateFile(file: File): string | null {
+		if (file.size > maxSize) {
+			return `File "${file.name}" exceeds maximum size of ${formatFileSize(maxSize)}`;
+		}
+
+		if (accept) {
+			const acceptedTypes = accept.split(',').map((t) => t.trim());
+			const isAccepted = acceptedTypes.some((type) => {
+				if (type.startsWith('.')) {
+					return file.name.toLowerCase().endsWith(type.toLowerCase());
+				}
+				if (type.endsWith('/*')) {
+					return file.type.startsWith(type.slice(0, -2));
+				}
+				return file.type === type;
+			});
+
+			if (!isAccepted) {
+				return `File "${file.name}" is not an accepted file type`;
+			}
+		}
+
+		return null;
+	}
+
+	function createPreview(file: File) {
+		if (isImageFile(file) && showPreview) {
+			const url = URL.createObjectURL(file);
+			previewUrls.set(file, url);
+		}
+	}
+
+	function revokePreview(file: File) {
+		const url = previewUrls.get(file);
+		if (url) {
+			URL.revokeObjectURL(url);
+			previewUrls.delete(file);
+		}
+	}
+
+	function handleFiles(newFiles: FileList | File[]) {
+		if (disabled) return;
+
+		const fileArray = Array.from(newFiles);
+		const remainingSlots = maxFiles - files.length;
+
+		if (fileArray.length > remainingSlots) {
+			onerror?.(`Can only add ${remainingSlots} more file(s). Maximum is ${maxFiles} files.`);
+			return;
+		}
+
+		const validFiles: File[] = [];
+		let hasErrors = false;
+
+		for (const file of fileArray) {
+			const error = validateFile(file);
+			if (error) {
+				onerror?.(error);
+				hasErrors = true;
+			} else {
+				validFiles.push(file);
+				createPreview(file);
+			}
+		}
+
+		if (validFiles.length > 0) {
+			files = [...files, ...validFiles];
+			onchange?.(files);
+		}
+	}
+
+	function handleDragEnter(e: DragEvent) {
+		e.preventDefault();
+		if (disabled) return;
+		isDragging = true;
+	}
+
+	function handleDragOver(e: DragEvent) {
+		e.preventDefault();
+		if (disabled) return;
+		isDragging = true;
+	}
+
+	function handleDragLeave(e: DragEvent) {
+		e.preventDefault();
+		if (disabled) return;
+		// Only set isDragging to false if we're leaving the drop zone itself
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		const x = e.clientX;
+		const y = e.clientY;
+		if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
+			isDragging = false;
+		}
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		isDragging = false;
+		if (disabled) return;
+
+		const droppedFiles = e.dataTransfer?.files;
+		if (droppedFiles && droppedFiles.length > 0) {
+			if (!multiple && droppedFiles.length > 1) {
+				onerror?.('Only one file can be selected');
+				return;
+			}
+			handleFiles(droppedFiles);
+		}
+	}
+
+	function handleInputChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (input.files && input.files.length > 0) {
+			handleFiles(input.files);
+		}
+		// Reset input value to allow selecting the same file again
+		input.value = '';
+	}
+
+	function handleClick() {
+		if (!disabled) {
+			fileInput?.click();
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (disabled) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			handleClick();
+		}
+	}
+
+	function removeFile(file: File) {
+		if (disabled) return;
+		revokePreview(file);
+		files = files.filter((f) => f !== file);
+		onremove?.(file);
+		onchange?.(files);
+	}
+
+	$effect(() => {
+		// Cleanup previews when component unmounts
+		return () => {
+			previewUrls.forEach((url) => URL.revokeObjectURL(url));
+		};
+	});
+</script>
+
+<div class="file-upload {className}" class:disabled>
+	<div
+		class="drop-zone"
+		class:dragging={isDragging}
+		class:has-files={hasFiles}
+		role="button"
+		tabindex={disabled ? -1 : 0}
+		aria-label="File upload area"
+		aria-describedby="upload-instructions"
+		ondragenter={handleDragEnter}
+		ondragover={handleDragOver}
+		ondragleave={handleDragLeave}
+		ondrop={handleDrop}
+		onclick={handleClick}
+		onkeydown={handleKeydown}
+	>
+		<input
+			bind:this={fileInput}
+			type="file"
+			{accept}
+			{multiple}
+			{disabled}
+			onchange={handleInputChange}
+			aria-label="File input"
+			style="display: none;"
+		/>
+
+		{#if !hasFiles}
+			<div class="drop-zone-content">
+				<svg
+					class="upload-icon"
+					width="48"
+					height="48"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+					<polyline points="17 8 12 3 7 8"></polyline>
+					<line x1="12" y1="3" x2="12" y2="15"></line>
+				</svg>
+				<p id="upload-instructions" class="instructions">
+					{isDragging ? 'Drop files here' : 'Drop files here or click to browse'}
+				</p>
+				<p class="hint">
+					{#if accept}
+						Accepted: {accept}
+						{#if maxSize}
+							• Max size: {formatFileSize(maxSize)}
+						{/if}
+					{:else if maxSize}
+						Max size: {formatFileSize(maxSize)}
+					{/if}
+				</p>
+			</div>
+		{/if}
+	</div>
+
+	{#if hasFiles}
+		<div class="file-list" role="list">
+			{#each files as file (file)}
+				<div class="file-item" role="listitem">
+					<div class="file-preview">
+						{#if isImageFile(file) && showPreview && previewUrls.has(file)}
+							<img src={previewUrls.get(file)} alt={file.name} class="preview-image" />
+						{:else}
+							<svg
+								class="file-icon"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								aria-hidden="true"
+							>
+								<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
+								<polyline points="13 2 13 9 20 9"></polyline>
+							</svg>
+						{/if}
+					</div>
+					<div class="file-info">
+						<span class="file-name" title={file.name}>{file.name}</span>
+						<span class="file-size">{formatFileSize(file.size)}</span>
+					</div>
+					<button
+						class="remove-btn"
+						type="button"
+						onclick={() => removeFile(file)}
+						{disabled}
+						aria-label="Remove {file.name}"
+					>
+						<svg
+							width="20"
+							height="20"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							aria-hidden="true"
+						>
+							<line x1="18" y1="6" x2="6" y2="18"></line>
+							<line x1="6" y1="6" x2="18" y2="18"></line>
+						</svg>
+					</button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.file-upload {
+		width: 100%;
+	}
+
+	.file-upload.disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.drop-zone {
+		border: 2px dashed var(--color-border, #d1d5db);
+		border-radius: var(--radius-md, 8px);
+		padding: var(--space-6, 1.5rem);
+		text-align: center;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		background-color: var(--color-background, #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);
+	}
+
+	.drop-zone:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.drop-zone.dragging {
+		border-color: var(--color-primary, #3b82f6);
+		background-color: var(--color-primary-light, #eff6ff);
+	}
+
+	.drop-zone.has-files {
+		border-style: solid;
+		padding: var(--space-4, 1rem);
+		cursor: default;
+	}
+
+	.drop-zone.disabled {
+		cursor: not-allowed;
+	}
+
+	.drop-zone-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-3, 0.75rem);
+	}
+
+	.upload-icon {
+		color: var(--color-text-secondary, #6b7280);
+	}
+
+	.instructions {
+		margin: 0;
+		font-size: var(--text-base, 1rem);
+		color: var(--color-text, #1f2937);
+		font-weight: 500;
+	}
+
+	.hint {
+		margin: 0;
+		font-size: var(--text-sm, 0.875rem);
+		color: var(--color-text-secondary, #6b7280);
+	}
+
+	.file-list {
+		margin-top: var(--space-4, 1rem);
+		display: grid;
+		gap: var(--space-3, 0.75rem);
+		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	}
+
+	.file-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3, 0.75rem);
+		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);
+	}
+
+	.file-preview {
+		flex-shrink: 0;
+		width: 48px;
+		height: 48px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--radius-sm, 4px);
+		background-color: var(--color-background-secondary, #f3f4f6);
+		overflow: hidden;
+	}
+
+	.preview-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.file-icon {
+		color: var(--color-text-secondary, #6b7280);
+	}
+
+	.file-info {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1, 0.25rem);
+	}
+
+	.file-name {
+		font-size: var(--text-sm, 0.875rem);
+		color: var(--color-text, #1f2937);
+		font-weight: 500;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.file-size {
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-secondary, #6b7280);
+	}
+
+	.remove-btn {
+		flex-shrink: 0;
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: transparent;
+		color: var(--color-text-secondary, #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);
+	}
+
+	.remove-btn:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.remove-btn:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	@media (max-width: 640px) {
+		.file-list {
+			grid-template-columns: 1fr;
+		}
+
+		.drop-zone {
+			padding: var(--space-4, 1rem);
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+interface Props {
+    files?: File[];
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    showPreview?: boolean;
+    class?: string;
+    onchange?: (files: File[]) => void;
+    onerror?: (error: string) => void;
+    onremove?: (file: File) => void;
+}
+declare const FileUpload: import("svelte").Component<Props, {}, "files">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

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

package/dist/components/FileUpload/index.js

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

package/dist/components/Grid/Grid.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { SpacingToken, GridAlign, GridJustify } from '../../types/index.js';
+
+	interface Props {
+		columns?: number;
+		gap?: SpacingToken;
+		align?: GridAlign;
+		justify?: GridJustify;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		columns = 12,
+		gap = 'md',
+		align = 'stretch',
+		justify = 'start',
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<div
+	class="grid {className}"
+	data-columns={columns}
+	data-gap={gap}
+	data-align={align}
+	data-justify={justify}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.grid {
+		display: grid;
+		width: 100%;
+		font-family: inherit;
+	}
+
+	/* Columns */
+	.grid[data-columns='1'] {
+		grid-template-columns: repeat(1, 1fr);
+	}
+	.grid[data-columns='2'] {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	.grid[data-columns='3'] {
+		grid-template-columns: repeat(3, 1fr);
+	}
+	.grid[data-columns='4'] {
+		grid-template-columns: repeat(4, 1fr);
+	}
+	.grid[data-columns='5'] {
+		grid-template-columns: repeat(5, 1fr);
+	}
+	.grid[data-columns='6'] {
+		grid-template-columns: repeat(6, 1fr);
+	}
+	.grid[data-columns='7'] {
+		grid-template-columns: repeat(7, 1fr);
+	}
+	.grid[data-columns='8'] {
+		grid-template-columns: repeat(8, 1fr);
+	}
+	.grid[data-columns='9'] {
+		grid-template-columns: repeat(9, 1fr);
+	}
+	.grid[data-columns='10'] {
+		grid-template-columns: repeat(10, 1fr);
+	}
+	.grid[data-columns='11'] {
+		grid-template-columns: repeat(11, 1fr);
+	}
+	.grid[data-columns='12'] {
+		grid-template-columns: repeat(12, 1fr);
+	}
+
+	/* Gap sizes using CSS custom properties */
+	.grid[data-gap='xs'] {
+		gap: var(--space-xs, 0.25rem);
+	}
+	.grid[data-gap='sm'] {
+		gap: var(--space-sm, 0.5rem);
+	}
+	.grid[data-gap='md'] {
+		gap: var(--space-md, 1rem);
+	}
+	.grid[data-gap='lg'] {
+		gap: var(--space-lg, 1.5rem);
+	}
+	.grid[data-gap='xl'] {
+		gap: var(--space-xl, 2rem);
+	}
+	.grid[data-gap='2xl'] {
+		gap: var(--space-2xl, 3rem);
+	}
+	.grid[data-gap='3xl'] {
+		gap: var(--space-3xl, 4rem);
+	}
+
+	/* Align items */
+	.grid[data-align='start'] {
+		align-items: start;
+	}
+	.grid[data-align='center'] {
+		align-items: center;
+	}
+	.grid[data-align='end'] {
+		align-items: end;
+	}
+	.grid[data-align='stretch'] {
+		align-items: stretch;
+	}
+
+	/* Justify items */
+	.grid[data-justify='start'] {
+		justify-items: start;
+	}
+	.grid[data-justify='center'] {
+		justify-items: center;
+	}
+	.grid[data-justify='end'] {
+		justify-items: end;
+	}
+	.grid[data-justify='space-between'] {
+		justify-items: space-between;
+	}
+	.grid[data-justify='space-around'] {
+		justify-items: space-around;
+	}
+	.grid[data-justify='space-evenly'] {
+		justify-items: space-evenly;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { SpacingToken, GridAlign, GridJustify } from '../../types/index.js';
+interface Props {
+    columns?: number;
+    gap?: SpacingToken;
+    align?: GridAlign;
+    justify?: GridJustify;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/Grid/GridItem.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { GridItemProps } from '../../types/index.js';
+
+	interface Props extends GridItemProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { colSpan = 1, rowSpan = 1, class: className = '', children }: Props = $props();
+</script>
+
+<div class="grid-item {className}" style="grid-column: span {colSpan}; grid-row: span {rowSpan};">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.grid-item {
+		font-family: inherit;
+	}
+</style>

package/dist/components/Grid/GridItem.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { GridItemProps } from '../../types/index.js';
+interface Props extends GridItemProps {
+    children?: import('svelte').Snippet;
+}
+declare const GridItem: import("svelte").Component<Props, {}, "">;
+type GridItem = ReturnType<typeof GridItem>;
+export default GridItem;

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

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

package/dist/components/Grid/index.js

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