@aspect-ops/exon-ui 0.0.3 → 0.2.0

package/dist/components/Image/Image.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+	interface Props {
+		src: string;
+		alt: string;
+		width?: number | string;
+		height?: number | string;
+		loading?: 'lazy' | 'eager';
+		objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+		objectPosition?: string;
+		placeholder?: string;
+		fallback?: string;
+		rounded?: boolean | 'sm' | 'md' | 'lg' | 'full';
+		aspectRatio?: string;
+		class?: string;
+		onload?: () => void;
+		onerror?: () => void;
+	}
+
+	let {
+		src,
+		alt,
+		width,
+		height,
+		loading = 'lazy',
+		objectFit = 'cover',
+		objectPosition = 'center',
+		placeholder,
+		fallback,
+		rounded = false,
+		aspectRatio,
+		class: className = '',
+		onload,
+		onerror
+	}: Props = $props();
+
+	let status = $state<'loading' | 'loaded' | 'error'>('loading');
+
+	const currentSrc = $derived(status === 'error' && fallback ? fallback : src);
+
+	const roundedClass = $derived(() => {
+		if (rounded === false) return '';
+		if (rounded === true) return 'image-container--rounded-md';
+		return `image-container--rounded-${rounded}`;
+	});
+
+	const containerStyle = $derived(() => {
+		const styles: string[] = [];
+		if (aspectRatio) {
+			styles.push(`aspect-ratio: ${aspectRatio}`);
+		}
+		if (width) {
+			styles.push(`width: ${typeof width === 'number' ? `${width}px` : width}`);
+		}
+		if (height && !aspectRatio) {
+			styles.push(`height: ${typeof height === 'number' ? `${height}px` : height}`);
+		}
+		return styles.join('; ');
+	});
+
+	const imageStyle = $derived(() => {
+		const styles: string[] = [];
+		styles.push(`object-fit: ${objectFit}`);
+		styles.push(`object-position: ${objectPosition}`);
+		return styles.join('; ');
+	});
+
+	function handleLoad() {
+		status = 'loaded';
+		onload?.();
+	}
+
+	function handleError() {
+		status = 'error';
+		onerror?.();
+	}
+
+	// Reset status when src changes
+	$effect(() => {
+		src;
+		status = 'loading';
+	});
+</script>
+
+<div
+	class="image-container {roundedClass()} {className}"
+	style={containerStyle()}
+	role="img"
+	aria-label={alt}
+>
+	{#if status === 'loading' && placeholder}
+		<div
+			class="image-placeholder"
+			style={typeof placeholder === 'string' && placeholder.startsWith('#')
+				? `background-color: ${placeholder}`
+				: `background-image: url(${placeholder})`}
+		></div>
+	{/if}
+
+	<img
+		class="image image--{status}"
+		src={currentSrc}
+		{alt}
+		{loading}
+		style={imageStyle()}
+		onload={handleLoad}
+		onerror={handleError}
+	/>
+
+	{#if status === 'error' && !fallback}
+		<div class="image-error">
+			<svg
+				class="image-error__icon"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				aria-hidden="true"
+			>
+				<path
+					d="M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.51L14.5 12L19 18H5L8.5 13.5Z"
+					fill="currentColor"
+				/>
+				<line
+					x1="4"
+					y1="4"
+					x2="20"
+					y2="20"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+				/>
+			</svg>
+			<span class="image-error__text">{alt}</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.image-container {
+		position: relative;
+		overflow: hidden;
+		display: inline-block;
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.image {
+		width: 100%;
+		height: 100%;
+		display: block;
+		transition: opacity var(--transition-base, 0.2s ease);
+	}
+
+	.image--loading {
+		opacity: 0;
+	}
+
+	.image--loaded {
+		opacity: 1;
+	}
+
+	.image--error {
+		opacity: 0;
+	}
+
+	/* Rounded variants */
+	.image-container--rounded-sm {
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.image-container--rounded-md {
+		border-radius: var(--radius-md, 0.375rem);
+	}
+
+	.image-container--rounded-lg {
+		border-radius: var(--radius-lg, 0.5rem);
+	}
+
+	.image-container--rounded-full {
+		border-radius: var(--radius-full, 9999px);
+	}
+
+	/* Placeholder */
+	.image-placeholder {
+		position: absolute;
+		inset: 0;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+		z-index: 1;
+	}
+
+	/* Error state */
+	.image-error {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text-muted, #6b7280);
+		padding: 1rem;
+		text-align: center;
+		z-index: 2;
+	}
+
+	.image-error__icon {
+		width: 3rem;
+		height: 3rem;
+		margin-bottom: 0.5rem;
+		opacity: 0.5;
+	}
+
+	.image-error__text {
+		font-size: 0.875rem;
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		line-clamp: 2;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+interface Props {
+    src: string;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    loading?: 'lazy' | 'eager';
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    objectPosition?: string;
+    placeholder?: string;
+    fallback?: string;
+    rounded?: boolean | 'sm' | 'md' | 'lg' | 'full';
+    aspectRatio?: string;
+    class?: string;
+    onload?: () => void;
+    onerror?: () => void;
+}
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

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

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

package/dist/components/Image/index.js

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

package/dist/components/NumberInput/NumberInput.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+	interface Props {
+		value?: number | null;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		placeholder?: string;
+		name?: string;
+		id?: string;
+		error?: boolean;
+		class?: string;
+		onValueChange?: (value: number | null) => void;
+	}
+
+	let {
+		value = $bindable(null),
+		min,
+		max,
+		step = 1,
+		disabled = false,
+		placeholder,
+		name,
+		id,
+		error = false,
+		class: className = '',
+		onValueChange
+	}: Props = $props();
+
+	let inputValue = $state(value?.toString() ?? '');
+
+	// Sync internal state with external value prop
+	$effect(() => {
+		inputValue = value?.toString() ?? '';
+	});
+
+	const isDecrementDisabled = $derived(
+		disabled || (min !== undefined && value !== null && value <= min)
+	);
+	const isIncrementDisabled = $derived(
+		disabled || (max !== undefined && value !== null && value >= max)
+	);
+
+	function handleIncrement() {
+		if (isIncrementDisabled) return;
+
+		const currentVal = value ?? 0;
+		const newValue = currentVal + step;
+		const clampedValue = max !== undefined ? Math.min(newValue, max) : newValue;
+
+		value = clampedValue;
+		onValueChange?.(clampedValue);
+	}
+
+	function handleDecrement() {
+		if (isDecrementDisabled) return;
+
+		const currentVal = value ?? 0;
+		const newValue = currentVal - step;
+		const clampedValue = min !== undefined ? Math.max(newValue, min) : newValue;
+
+		value = clampedValue;
+		onValueChange?.(clampedValue);
+	}
+
+	function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+		inputValue = e.currentTarget.value;
+
+		if (inputValue === '') {
+			value = null;
+			onValueChange?.(null);
+			return;
+		}
+
+		const parsed = parseFloat(inputValue);
+		if (!isNaN(parsed)) {
+			value = parsed;
+			onValueChange?.(parsed);
+		}
+	}
+
+	function handleBlur() {
+		if (value === null) {
+			inputValue = '';
+			return;
+		}
+
+		// Clamp value to min/max on blur
+		let clampedValue = value;
+		if (min !== undefined && clampedValue < min) {
+			clampedValue = min;
+		}
+		if (max !== undefined && clampedValue > max) {
+			clampedValue = max;
+		}
+
+		if (clampedValue !== value) {
+			value = clampedValue;
+			onValueChange?.(clampedValue);
+		}
+
+		inputValue = clampedValue.toString();
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			handleIncrement();
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			handleDecrement();
+		}
+	}
+</script>
+
+<div
+	class="number-input {error ? 'number-input--error' : ''} {disabled
+		? 'number-input--disabled'
+		: ''} {className}"
+>
+	<button
+		type="button"
+		class="number-input__button number-input__button--decrement"
+		disabled={isDecrementDisabled}
+		onclick={handleDecrement}
+		aria-label="Decrement value"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<line x1="5" y1="12" x2="19" y2="12"></line>
+		</svg>
+	</button>
+
+	<input
+		type="text"
+		inputmode="decimal"
+		class="number-input__field"
+		role="spinbutton"
+		aria-valuemin={min}
+		aria-valuemax={max}
+		aria-valuenow={value ?? undefined}
+		{name}
+		{id}
+		{placeholder}
+		{disabled}
+		aria-invalid={error}
+		value={inputValue}
+		oninput={handleInput}
+		onblur={handleBlur}
+		onkeydown={handleKeyDown}
+	/>
+
+	<button
+		type="button"
+		class="number-input__button number-input__button--increment"
+		disabled={isIncrementDisabled}
+		onclick={handleIncrement}
+		aria-label="Increment value"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<line x1="12" y1="5" x2="12" y2="19"></line>
+			<line x1="5" y1="12" x2="19" y2="12"></line>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.number-input {
+		display: flex;
+		align-items: stretch;
+		width: 100%;
+		gap: 0;
+	}
+
+	.number-input--disabled {
+		opacity: 0.5;
+	}
+
+	.number-input__button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		padding: 0;
+		border: 1px solid var(--color-border, #e5e7eb);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.number-input__button:hover:not(:disabled) {
+		background: var(--color-bg-muted, #f3f4f6);
+		border-color: var(--color-border-hover, #d1d5db);
+	}
+
+	.number-input__button:active:not(:disabled) {
+		background: var(--color-border, #e5e7eb);
+	}
+
+	.number-input__button:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+		z-index: 1;
+	}
+
+	.number-input__button:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	.number-input__button--decrement {
+		border-top-left-radius: var(--radius-md, 0.375rem);
+		border-bottom-left-radius: var(--radius-md, 0.375rem);
+		border-right: none;
+	}
+
+	.number-input__button--increment {
+		border-top-right-radius: var(--radius-md, 0.375rem);
+		border-bottom-right-radius: var(--radius-md, 0.375rem);
+		border-left: none;
+	}
+
+	.number-input__field {
+		flex: 1;
+		min-width: 0;
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-left: none;
+		border-right: none;
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		text-align: center;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.number-input__field::placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.number-input__field:focus {
+		outline: none;
+		border-color: var(--color-primary, #3b82f6);
+		box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+		z-index: 1;
+	}
+
+	.number-input__field:disabled {
+		background: var(--color-bg-muted, #f3f4f6);
+		cursor: not-allowed;
+	}
+
+	/* Error state */
+	.number-input--error .number-input__field,
+	.number-input--error .number-input__button {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.number-input--error .number-input__field:focus {
+		border-color: var(--color-error, #ef4444);
+		box-shadow: 0 0 0 3px var(--color-error-alpha, rgba(239, 68, 68, 0.1));
+	}
+</style>

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

@@ -0,0 +1,16 @@
+interface Props {
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    id?: string;
+    error?: boolean;
+    class?: string;
+    onValueChange?: (value: number | null) => void;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

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

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

package/dist/components/NumberInput/index.js

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