@aspect-ops/exon-ui 0.0.2 → 0.1.0

package/dist/components/ActionSheet/ActionSheetItem.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import type { ActionSheetItemProps } from '../../types/index.js';
+	import { getContext } from 'svelte';
+	import Icon from '../Icon/Icon.svelte';
+
+	interface Props extends ActionSheetItemProps {
+		/** Click handler */
+		onclick?: (e: MouseEvent) => void;
+		/** Button content */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		destructive = false,
+		disabled = false,
+		icon,
+		class: className = '',
+		onclick,
+		children
+	}: Props = $props();
+
+	// Get context from parent ActionSheet
+	const actionsheet = getContext<{
+		closeOnSelect: boolean;
+		close: () => void;
+	}>('actionsheet');
+
+	function handleClick(e: MouseEvent) {
+		if (disabled) return;
+
+		onclick?.(e);
+
+		// Close action sheet if closeOnSelect is enabled
+		if (actionsheet?.closeOnSelect) {
+			actionsheet.close();
+		}
+	}
+</script>
+
+<button
+	type="button"
+	class="actionsheet-item {destructive ? 'actionsheet-item--destructive' : ''} {disabled
+		? 'actionsheet-item--disabled'
+		: ''} {className}"
+	{disabled}
+	aria-disabled={disabled}
+	onclick={handleClick}
+>
+	{#if icon}
+		<span class="actionsheet-item__icon">
+			<Icon name={icon} size="md" />
+		</span>
+	{/if}
+	<span class="actionsheet-item__label">
+		{#if children}
+			{@render children()}
+		{/if}
+	</span>
+</button>
+
+<style>
+	.actionsheet-item {
+		/* F33: Font inheritance for portal */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-sm, 0.5rem);
+		width: 100%;
+		/* F20: Minimum 48px touch target */
+		min-height: 48px;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+		border: none;
+		background: transparent;
+		color: var(--color-primary, #3b82f6);
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: 400;
+		text-align: center;
+		cursor: pointer;
+		transition: background-color var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	/* Divider between items */
+	.actionsheet-item:not(:last-child) {
+		border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
+	}
+
+	/* Hover state */
+	.actionsheet-item:hover:not(:disabled) {
+		background: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
+	}
+
+	/* Active/pressed state */
+	.actionsheet-item:active:not(:disabled) {
+		background: var(--color-bg-active, rgba(0, 0, 0, 0.08));
+	}
+
+	/* Focus state - F15 accessibility */
+	.actionsheet-item:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+		z-index: 1;
+	}
+
+	/* Destructive variant */
+	.actionsheet-item--destructive {
+		color: var(--color-error, #ef4444);
+	}
+
+	.actionsheet-item--destructive:focus-visible {
+		outline-color: var(--color-error, #ef4444);
+	}
+
+	/* Disabled state */
+	.actionsheet-item--disabled,
+	.actionsheet-item:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	/* Icon */
+	.actionsheet-item__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	/* Label */
+	.actionsheet-item__label {
+		flex: 1;
+		text-align: center;
+	}
+
+	/* When icon present, left-align content */
+	.actionsheet-item__icon + .actionsheet-item__label {
+		text-align: left;
+	}
+
+	/* Platform-specific styling */
+	:global([data-platform='android']) .actionsheet-item {
+		justify-content: flex-start;
+		font-weight: 500;
+	}
+
+	:global([data-platform='android']) .actionsheet-item__label {
+		text-align: left;
+	}
+</style>

package/dist/components/ActionSheet/ActionSheetItem.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ActionSheetItemProps } from '../../types/index.js';
+interface Props extends ActionSheetItemProps {
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    /** Button content */
+    children?: import('svelte').Snippet;
+}
+declare const ActionSheetItem: import("svelte").Component<Props, {}, "">;
+type ActionSheetItem = ReturnType<typeof ActionSheetItem>;
+export default ActionSheetItem;

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

@@ -0,0 +1,3 @@
+export { default as ActionSheet } from './ActionSheet.svelte';
+export { default as ActionSheetItem } from './ActionSheetItem.svelte';
+export type { ActionSheetAction, ActionSheetProps, ActionSheetItemProps } from '../../types/index.js';

package/dist/components/ActionSheet/index.js

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

package/dist/components/Alert/Alert.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import type { AlertVariant } from '../../types/index.js';
+
+	interface Props {
+		variant?: AlertVariant;
+		dismissible?: boolean;
+		icon?: string;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		variant = 'info',
+		dismissible = false,
+		icon,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let dismissed = $state(false);
+
+	function handleDismiss() {
+		dismissed = true;
+	}
+</script>
+
+{#if !dismissed}
+	<div class="alert alert--{variant} {className}" role="alert">
+		<div class="alert__content">
+			{#if icon}
+				<span class="alert__icon" aria-hidden="true">{icon}</span>
+			{/if}
+			<div class="alert__message">
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+		</div>
+		{#if dismissible}
+			<button type="button" class="alert__close" onclick={handleDismiss} aria-label="Dismiss alert">
+				×
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.alert {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		padding: var(--space-md, 1rem);
+		border-radius: var(--radius-md, 0.375rem);
+		border-left: 0.25rem solid;
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+	}
+
+	.alert__content {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--space-sm, 0.5rem);
+		flex: 1;
+	}
+
+	.alert__icon {
+		flex-shrink: 0;
+		font-size: var(--text-lg, 1.125rem);
+		line-height: 1;
+	}
+
+	.alert__message {
+		flex: 1;
+	}
+
+	.alert__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;
+	}
+
+	.alert__close:hover {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+
+	.alert__close:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	/* Info variant */
+	.alert--info {
+		background-color: var(--color-info-bg, #eff6ff);
+		border-left-color: var(--color-info-border, #3b82f6);
+		color: var(--color-info, #3b82f6);
+	}
+
+	.alert--info .alert__message {
+		color: var(--color-text, #1f2937);
+	}
+
+	.alert--info .alert__close {
+		color: var(--color-info, #3b82f6);
+	}
+
+	/* Success variant */
+	.alert--success {
+		background-color: var(--color-success-bg, #ecfdf5);
+		border-left-color: var(--color-success-border, #10b981);
+		color: var(--color-success, #10b981);
+	}
+
+	.alert--success .alert__message {
+		color: var(--color-text, #1f2937);
+	}
+
+	.alert--success .alert__close {
+		color: var(--color-success, #10b981);
+	}
+
+	/* Warning variant */
+	.alert--warning {
+		background-color: var(--color-warning-bg, #fffbeb);
+		border-left-color: var(--color-warning-border, #f59e0b);
+		color: var(--color-warning, #f59e0b);
+	}
+
+	.alert--warning .alert__message {
+		color: var(--color-text, #1f2937);
+	}
+
+	.alert--warning .alert__close {
+		color: var(--color-warning, #f59e0b);
+	}
+
+	/* Error variant */
+	.alert--error {
+		background-color: var(--color-error-bg, #fef2f2);
+		border-left-color: var(--color-error-border, #ef4444);
+		color: var(--color-error, #ef4444);
+	}
+
+	.alert--error .alert__message {
+		color: var(--color-text, #1f2937);
+	}
+
+	.alert--error .alert__close {
+		color: var(--color-error, #ef4444);
+	}
+</style>

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

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

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

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

package/dist/components/Alert/index.js

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

package/dist/components/AspectRatio/AspectRatio.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { AspectRatioPreset } from '../../types/index.js';
+
+	interface Props {
+		ratio?: number | AspectRatioPreset;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { ratio = 16 / 9, class: className = '', children }: Props = $props();
+
+	function parseRatio(r: number | AspectRatioPreset): number {
+		if (typeof r === 'number') return r;
+		const [w, h] = r.split(':').map(Number);
+		return w / h;
+	}
+
+	const computedRatio = $derived(parseRatio(ratio));
+</script>
+
+<div class="aspect-ratio {className}" style="aspect-ratio: {computedRatio}">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.aspect-ratio {
+		position: relative;
+		width: 100%;
+		font-family: inherit;
+	}
+
+	.aspect-ratio > :global(*) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { AspectRatioPreset } from '../../types/index.js';
+interface Props {
+    ratio?: number | AspectRatioPreset;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const AspectRatio: import("svelte").Component<Props, {}, "">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;

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

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

package/dist/components/AspectRatio/index.js

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

package/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import type { AvatarSize, AvatarShape } from '../../types/index.js';
+
+	interface Props {
+		src?: string;
+		alt?: string;
+		name?: string;
+		size?: AvatarSize;
+		shape?: AvatarShape;
+		class?: string;
+	}
+
+	let {
+		src,
+		alt = '',
+		name,
+		size = 'md',
+		shape = 'circle',
+		class: className = ''
+	}: Props = $props();
+
+	let imageLoaded = $state(false);
+	let imageFailed = $state(false);
+
+	// Generate initials from name (first letter of first and last word)
+	function getInitials(name: string): string {
+		const words = name.trim().split(/\s+/);
+		if (words.length === 0) return '';
+		if (words.length === 1) return words[0].charAt(0).toUpperCase();
+		return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
+	}
+
+	// Determine what to display based on fallback chain
+	const showImage = $derived(src && !imageFailed);
+	const showInitials = $derived(!showImage && name);
+	const showIcon = $derived(!showImage && !showInitials);
+	const initials = $derived(name ? getInitials(name) : '');
+
+	function handleImageLoad() {
+		imageLoaded = true;
+		imageFailed = false;
+	}
+
+	function handleImageError() {
+		imageLoaded = false;
+		imageFailed = true;
+	}
+</script>
+
+<div
+	class="avatar avatar--{size} avatar--{shape} {className}"
+	role="img"
+	aria-label={alt || name || 'Avatar'}
+>
+	{#if showImage}
+		<img class="avatar__image" {src} {alt} onload={handleImageLoad} onerror={handleImageError} />
+	{:else if showInitials}
+		<span class="avatar__initials">{initials}</span>
+	{:else}
+		<svg
+			class="avatar__icon"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+		>
+			<path
+				d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z"
+				fill="currentColor"
+			/>
+		</svg>
+	{/if}
+</div>
+
+<style>
+	.avatar {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-weight: 500;
+		flex-shrink: 0;
+		user-select: none;
+	}
+
+	/* Size variants */
+	.avatar--xs {
+		width: 1.5rem;
+		height: 1.5rem;
+		font-size: 0.625rem;
+	}
+
+	.avatar--sm {
+		width: 2rem;
+		height: 2rem;
+		font-size: 0.75rem;
+	}
+
+	.avatar--md {
+		width: 2.5rem;
+		height: 2.5rem;
+		font-size: 0.875rem;
+	}
+
+	.avatar--lg {
+		width: 3rem;
+		height: 3rem;
+		font-size: 1rem;
+	}
+
+	.avatar--xl {
+		width: 4rem;
+		height: 4rem;
+		font-size: 1.25rem;
+	}
+
+	/* Shape variants */
+	.avatar--circle {
+		border-radius: var(--radius-full, 9999px);
+	}
+
+	.avatar--square {
+		border-radius: var(--radius-md, 0.375rem);
+	}
+
+	/* Image */
+	.avatar__image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	/* Initials */
+	.avatar__initials {
+		line-height: 1;
+	}
+
+	/* Icon */
+	.avatar__icon {
+		width: 60%;
+		height: 60%;
+		color: var(--color-text-muted, #6b7280);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { AvatarSize, AvatarShape } from '../../types/index.js';
+interface Props {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    class?: string;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;