@aspect-ops/exon-ui 0.0.2 → 0.0.3

package/dist/components/ActionSheet/ActionSheet.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+	import type { ActionSheetProps } from '../../types/index.js';
+	import { Dialog } from 'bits-ui';
+
+	interface Props extends ActionSheetProps {
+		/** Bindable open state */
+		open?: boolean;
+		/** Slot for ActionSheetItem children */
+		actions?: import('svelte').Snippet;
+		/** Default slot for custom content */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		cancelLabel = 'Cancel',
+		showCancel = true,
+		closeOnSelect = true,
+		class: className = '',
+		actions,
+		children
+	}: Props = $props();
+
+	function handleOpenChange(value: boolean) {
+		open = value;
+	}
+
+	function handleBackdropClick() {
+		open = false;
+	}
+
+	function handleCancel() {
+		open = false;
+	}
+
+	// Provide context for ActionSheetItem to access closeOnSelect
+	import { setContext } from 'svelte';
+
+	setContext('actionsheet', {
+		get closeOnSelect() {
+			return closeOnSelect;
+		},
+		close: () => {
+			open = false;
+		}
+	});
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="actionsheet-overlay" onclick={handleBackdropClick} />
+		<Dialog.Content
+			class="actionsheet-content {className}"
+			aria-labelledby={title ? 'actionsheet-title' : undefined}
+		>
+			<!-- Header section (optional) -->
+			{#if title || description}
+				<div class="actionsheet-header">
+					{#if title}
+						<Dialog.Title id="actionsheet-title" class="actionsheet-title">{title}</Dialog.Title>
+					{/if}
+					{#if description}
+						<Dialog.Description class="actionsheet-description">{description}</Dialog.Description>
+					{/if}
+				</div>
+			{/if}
+
+			<!-- Actions section -->
+			<div class="actionsheet-actions" role="group">
+				{#if actions}
+					{@render actions()}
+				{/if}
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+
+			<!-- Cancel button (separated) -->
+			{#if showCancel}
+				<div class="actionsheet-cancel-container">
+					<button
+						type="button"
+						class="actionsheet-cancel"
+						onclick={handleCancel}
+						aria-label="Cancel"
+					>
+						{cancelLabel}
+					</button>
+				</div>
+			{/if}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+
+<style>
+	/* Overlay */
+	:global(.actionsheet-overlay) {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.4);
+		z-index: 100;
+	}
+
+	:global(.actionsheet-overlay[data-state='open']) {
+		animation: actionsheet-fade-in 200ms ease-out;
+	}
+
+	:global(.actionsheet-overlay[data-state='closed']) {
+		animation: actionsheet-fade-out 150ms ease-in;
+	}
+
+	@keyframes -global-actionsheet-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-actionsheet-fade-out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	/* Content */
+	:global(.actionsheet-content) {
+		/* F33: Must set font-family explicitly - portal doesn't inherit */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 101;
+		display: flex;
+		flex-direction: column;
+		max-height: 90vh;
+		padding: var(--space-sm, 0.5rem);
+		padding-bottom: calc(var(--space-sm, 0.5rem) + env(safe-area-inset-bottom, 0px));
+	}
+
+	:global(.actionsheet-content[data-state='open']) {
+		animation: actionsheet-slide-up 250ms cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	:global(.actionsheet-content[data-state='closed']) {
+		animation: actionsheet-slide-down 200ms cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	@keyframes -global-actionsheet-slide-up {
+		from {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes -global-actionsheet-slide-down {
+		from {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+	}
+
+	/* Header */
+	:global(.actionsheet-header) {
+		text-align: center;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+		background: var(--color-bg, #ffffff);
+		border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
+		border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
+	}
+
+	:global(.actionsheet-title) {
+		margin: 0;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 600;
+		color: var(--color-text-secondary, #6b7280);
+	}
+
+	:global(.actionsheet-description) {
+		margin: var(--space-xs, 0.25rem) 0 0;
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	/* Actions container */
+	:global(.actionsheet-actions) {
+		display: flex;
+		flex-direction: column;
+		background: var(--color-bg, #ffffff);
+		border-radius: var(--radius-lg, 0.75rem);
+		overflow: hidden;
+	}
+
+	/* When there's a header, remove top border radius from actions */
+	:global(.actionsheet-header + .actionsheet-actions) {
+		border-radius: 0 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem);
+	}
+
+	/* Cancel button container */
+	:global(.actionsheet-cancel-container) {
+		margin-top: var(--space-sm, 0.5rem);
+	}
+
+	/* Cancel button - iOS style */
+	:global(.actionsheet-cancel) {
+		/* F33: Font inheritance for portal */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		width: 100%;
+		/* F20: Minimum touch target */
+		min-height: 56px;
+		padding: var(--space-md, 1rem);
+		border: none;
+		border-radius: var(--radius-lg, 0.75rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-primary, #3b82f6);
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: 600;
+		cursor: pointer;
+		transition: background-color var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:global(.actionsheet-cancel:hover) {
+		background: var(--color-bg-hover, #f9fafb);
+	}
+
+	:global(.actionsheet-cancel:active) {
+		background: var(--color-bg-active, #f3f4f6);
+	}
+
+	:global(.actionsheet-cancel:focus-visible) {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	/* Platform-specific styling */
+	:global([data-platform='ios']) :global(.actionsheet-content) {
+		padding: var(--space-sm, 0.5rem);
+	}
+
+	:global([data-platform='android']) :global(.actionsheet-content) {
+		padding: 0;
+		padding-bottom: env(safe-area-inset-bottom, 0px);
+	}
+
+	:global([data-platform='android']) :global(.actionsheet-actions),
+	:global([data-platform='android']) :global(.actionsheet-cancel) {
+		border-radius: 0;
+	}
+
+	:global([data-platform='android']) :global(.actionsheet-cancel-container) {
+		margin-top: 0;
+		border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { ActionSheetProps } from '../../types/index.js';
+interface Props extends ActionSheetProps {
+    /** Bindable open state */
+    open?: boolean;
+    /** Slot for ActionSheetItem children */
+    actions?: import('svelte').Snippet;
+    /** Default slot for custom content */
+    children?: import('svelte').Snippet;
+}
+declare const ActionSheet: import("svelte").Component<Props, {}, "open">;
+type ActionSheet = ReturnType<typeof ActionSheet>;
+export default ActionSheet;

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';