@aspect-ops/exon-ui 0.0.2 → 0.1.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/List/List.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { ListProps } from '../../types/data-display.js';
+
+	interface Props {
+		/**
+		 * Show dividers between list items
+		 * @default false
+		 */
+		dividers?: boolean;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * List item content
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let { dividers = false, class: className = '', children }: Props = $props();
+</script>
+
+<ul class="list {dividers ? 'list--dividers' : ''} {className}" role="list">
+	{#if children}
+		{@render children()}
+	{/if}
+</ul>
+
+<style>
+	.list {
+		/* Reset default list styles */
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		font-family: inherit;
+	}
+
+	/* Divider styles - applied to list items */
+	.list--dividers :global(> li:not(:last-child)) {
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+interface Props {
+    /**
+     * Show dividers between list items
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * List item content
+     */
+    children?: import('svelte').Snippet;
+}
+declare const List: import("svelte").Component<Props, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/components/List/ListItem.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * Makes the list item interactive with hover/active states
+		 * @default false
+		 */
+		clickable?: boolean;
+		/**
+		 * Marks the list item as selected
+		 * @default false
+		 */
+		selected?: boolean;
+		/**
+		 * Disables the list item
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Leading content slot (icons/avatars)
+		 */
+		leading?: import('svelte').Snippet;
+		/**
+		 * Trailing content slot (actions/badges)
+		 */
+		trailing?: import('svelte').Snippet;
+		/**
+		 * Main content
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		clickable = false,
+		selected = false,
+		disabled = false,
+		class: className = '',
+		leading,
+		trailing,
+		children
+	}: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<li
+	class="list-item {clickable ? 'list-item--clickable' : ''} {selected
+		? 'list-item--selected'
+		: ''} {disabled ? 'list-item--disabled' : ''} {className}"
+	role={clickable ? 'button' : undefined}
+	aria-selected={selected ? 'true' : undefined}
+	aria-disabled={disabled ? 'true' : undefined}
+	tabindex={clickable && !disabled ? 0 : -1}
+>
+	{#if leading}
+		<div class="list-item__leading">
+			{@render leading()}
+		</div>
+	{/if}
+
+	<div class="list-item__content">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if trailing}
+		<div class="list-item__trailing">
+			{@render trailing()}
+		</div>
+	{/if}
+</li>
+
+<style>
+	.list-item {
+		display: flex;
+		align-items: center;
+		min-height: 3rem; /* 48px for touch targets */
+		padding: 0.75rem 1rem;
+		font-family: inherit;
+		transition: background-color var(--transition-fast, 150ms ease);
+	}
+
+	.list-item__leading {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		margin-right: 0.75rem;
+	}
+
+	.list-item__content {
+		flex: 1;
+		min-width: 0; /* Allows text truncation */
+	}
+
+	.list-item__trailing {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		margin-left: 0.75rem;
+	}
+
+	/* Clickable state */
+	.list-item--clickable {
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.list-item--clickable:hover:not(.list-item--disabled) {
+		background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
+	}
+
+	.list-item--clickable:active:not(.list-item--disabled) {
+		background-color: var(--color-bg-active, rgba(0, 0, 0, 0.08));
+	}
+
+	.list-item--clickable:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	/* Selected state */
+	.list-item--selected {
+		background-color: var(--color-primary-bg, rgba(59, 130, 246, 0.1));
+	}
+
+	.list-item--selected.list-item--clickable:hover:not(.list-item--disabled) {
+		background-color: var(--color-primary-bg-hover, rgba(59, 130, 246, 0.15));
+	}
+
+	/* Disabled state */
+	.list-item--disabled {
+		opacity: 0.5;
+		pointer-events: none;
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/List/ListItem.svelte.d.ts

@@ -0,0 +1,36 @@
+interface Props {
+    /**
+     * Makes the list item interactive with hover/active states
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Marks the list item as selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Disables the list item
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Leading content slot (icons/avatars)
+     */
+    leading?: import('svelte').Snippet;
+    /**
+     * Trailing content slot (actions/badges)
+     */
+    trailing?: import('svelte').Snippet;
+    /**
+     * Main content
+     */
+    children?: import('svelte').Snippet;
+}
+declare const ListItem: import("svelte").Component<Props, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

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

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

package/dist/components/List/index.js

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

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import type { ModalProps } from '../../types/index.js';
+	import { Dialog } from 'bits-ui';
+
+	interface Props extends ModalProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		size = 'md',
+		closeOnEscape = true,
+		closeOnBackdrop = true,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	function handleOpenChange(value: boolean) {
+		// Only close if escape is allowed or if it's not an escape key event
+		if (!value && !closeOnEscape) {
+			return;
+		}
+		open = value;
+	}
+
+	function handleBackdropClick() {
+		if (closeOnBackdrop) {
+			open = false;
+		}
+	}
+
+	function handleEscapeKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && !closeOnEscape) {
+			event.preventDefault();
+		}
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="modal-overlay" onclick={handleBackdropClick} />
+		<Dialog.Content class="modal-content modal-{size} {className}" onkeydown={handleEscapeKeyDown}>
+			{@render children?.()}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+
+<style>
+	/* Overlay */
+	:global(.modal-overlay) {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 100;
+	}
+
+	:global(.modal-overlay[data-state='open']) {
+		animation: fade-in 200ms ease-out;
+	}
+
+	:global(.modal-overlay[data-state='closed']) {
+		animation: fade-out 150ms ease-in;
+	}
+
+	@keyframes -global-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-fade-out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	/* Content */
+	:global(.modal-content) {
+		/* MUST set font-family explicitly - portal doesn't inherit (F33) */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: var(--color-bg, #ffffff);
+		border-radius: var(--radius-md, 0.5rem);
+		box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.2));
+		z-index: 101;
+		max-height: 90vh;
+		display: flex;
+		flex-direction: column;
+		/* Safe area handling (F21) */
+		padding-top: env(safe-area-inset-top, 0);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+	}
+
+	:global(.modal-content[data-state='open']) {
+		animation: modal-in 200ms ease-out;
+	}
+
+	:global(.modal-content[data-state='closed']) {
+		animation: modal-out 150ms ease-in;
+	}
+
+	@keyframes -global-modal-in {
+		from {
+			opacity: 0;
+			transform: translate(-50%, -50%) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translate(-50%, -50%) scale(1);
+		}
+	}
+
+	@keyframes -global-modal-out {
+		from {
+			opacity: 1;
+			transform: translate(-50%, -50%) scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: translate(-50%, -50%) scale(0.95);
+		}
+	}
+
+	/* Size variants (F32: rem units) */
+	:global(.modal-sm) {
+		width: 25rem;
+		max-width: calc(100vw - 2rem);
+	}
+
+	:global(.modal-md) {
+		width: 31.25rem;
+		max-width: calc(100vw - 2rem);
+	}
+
+	:global(.modal-lg) {
+		width: 43.75rem;
+		max-width: calc(100vw - 2rem);
+	}
+
+	:global(.modal-full) {
+		width: 100%;
+		max-width: 100%;
+		height: 100vh;
+		max-height: 100vh;
+		border-radius: 0;
+		top: 0;
+		left: 0;
+		transform: none;
+	}
+
+	/* Mobile responsive */
+	@media (max-width: 640px) {
+		:global(.modal-content:not(.modal-full)) {
+			width: 100% !important;
+			max-width: 100% !important;
+			max-height: 90vh;
+			top: auto;
+			bottom: 0;
+			left: 0;
+			transform: none;
+			border-radius: 1rem 1rem 0 0;
+			margin: 0;
+		}
+
+		:global(.modal-content:not(.modal-full)[data-state='open']) {
+			animation: modal-slide-up 250ms ease-out;
+		}
+
+		:global(.modal-content:not(.modal-full)[data-state='closed']) {
+			animation: modal-slide-down 200ms ease-in;
+		}
+	}
+
+	@keyframes -global-modal-slide-up {
+		from {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes -global-modal-slide-down {
+		from {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+	}
+</style>

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

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