@aspect-ops/exon-ui 0.0.2 → 0.0.3

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;

package/dist/components/Avatar/AvatarGroup.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import type { AvatarSize } from '../../types/index.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		max?: number;
+		size?: AvatarSize;
+		spacing?: string;
+		children: Snippet;
+		class?: string;
+	}
+
+	let { max, size = 'md', spacing = '-0.5rem', children, class: className = '' }: Props = $props();
+
+	// Reference to the wrapper div to count children
+	let wrapperRef: HTMLDivElement | undefined = $state();
+	let totalAvatars = $state(0);
+	let overflowCount = $derived(max && totalAvatars > max ? totalAvatars - max : 0);
+
+	// Count child avatars and hide excess ones after mount
+	$effect(() => {
+		if (wrapperRef) {
+			const avatars = wrapperRef.querySelectorAll('.avatar');
+			totalAvatars = avatars.length;
+
+			// Hide avatars beyond max
+			if (max !== undefined) {
+				avatars.forEach((avatar, index) => {
+					if (index >= max) {
+						(avatar as HTMLElement).style.display = 'none';
+					} else {
+						(avatar as HTMLElement).style.display = '';
+					}
+				});
+			}
+		}
+	});
+</script>
+
+<div
+	bind:this={wrapperRef}
+	class="avatar-group avatar-group--{size} {className}"
+	class:avatar-group--limited={max !== undefined}
+	style="--avatar-group-spacing: {spacing}; --avatar-group-max: {max ?? 999};"
+>
+	{@render children()}
+	{#if overflowCount > 0}
+		<div class="avatar-group__overflow" role="img" aria-label="+{overflowCount} more">
+			+{overflowCount}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.avatar-group {
+		display: inline-flex;
+		align-items: center;
+		flex-direction: row;
+	}
+
+	/* Apply size to all child avatars via custom property */
+	.avatar-group :global(.avatar) {
+		margin-left: var(--avatar-group-spacing);
+		border: 2px solid var(--color-bg, #ffffff);
+		position: relative;
+	}
+
+	.avatar-group :global(.avatar:first-child) {
+		margin-left: 0;
+	}
+
+	/* Hide avatars beyond max limit - using attribute selector for dynamic max */
+	/* Note: This will be handled by hiding avatars beyond the max count using JavaScript */
+
+	/* Override size on child avatars when group size is set */
+	.avatar-group--xs :global(.avatar) {
+		width: 1.5rem;
+		height: 1.5rem;
+		font-size: 0.625rem;
+	}
+
+	.avatar-group--sm :global(.avatar) {
+		width: 2rem;
+		height: 2rem;
+		font-size: 0.75rem;
+	}
+
+	.avatar-group--md :global(.avatar) {
+		width: 2.5rem;
+		height: 2.5rem;
+		font-size: 0.875rem;
+	}
+
+	.avatar-group--lg :global(.avatar) {
+		width: 3rem;
+		height: 3rem;
+		font-size: 1rem;
+	}
+
+	.avatar-group--xl :global(.avatar) {
+		width: 4rem;
+		height: 4rem;
+		font-size: 1.25rem;
+	}
+
+	/* Overflow indicator styling */
+	.avatar-group__overflow {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--radius-full, 9999px);
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-weight: 500;
+		flex-shrink: 0;
+		user-select: none;
+		margin-left: var(--avatar-group-spacing);
+		border: 2px solid var(--color-bg, #ffffff);
+		position: relative;
+	}
+
+	/* Size variants for overflow indicator */
+	.avatar-group--xs .avatar-group__overflow {
+		width: 1.5rem;
+		height: 1.5rem;
+		font-size: 0.625rem;
+	}
+
+	.avatar-group--sm .avatar-group__overflow {
+		width: 2rem;
+		height: 2rem;
+		font-size: 0.75rem;
+	}
+
+	.avatar-group--md .avatar-group__overflow {
+		width: 2.5rem;
+		height: 2.5rem;
+		font-size: 0.875rem;
+	}
+
+	.avatar-group--lg .avatar-group__overflow {
+		width: 3rem;
+		height: 3rem;
+		font-size: 1rem;
+	}
+
+	.avatar-group--xl .avatar-group__overflow {
+		width: 4rem;
+		height: 4rem;
+		font-size: 1.25rem;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { AvatarSize } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+interface Props {
+    max?: number;
+    size?: AvatarSize;
+    spacing?: string;
+    children: Snippet;
+    class?: string;
+}
+declare const AvatarGroup: import("svelte").Component<Props, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

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

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

package/dist/components/Avatar/index.js

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

package/dist/components/BottomSheet/BottomSheet.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+	import type { BottomSheetSnapPoint, BottomSheetProps } from '../../types/index.js';
+	import { Dialog } from 'bits-ui';
+
+	interface Props extends BottomSheetProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		snapPoints = ['half', 'full'],
+		defaultSnapPoint = 'half',
+		showHandle = true,
+		closeOnBackdrop = true,
+		closeOnEscape = true,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	function getSnapPointValue(point: BottomSheetSnapPoint): number {
+		if (typeof point === 'number') return point;
+		const vh = typeof window !== 'undefined' ? window.innerHeight : 800;
+		switch (point) {
+			case 'min':
+				return vh * 0.25;
+			case 'half':
+				return vh * 0.5;
+			case 'full':
+				return vh * 0.9;
+			default:
+				return vh * 0.5;
+		}
+	}
+
+	let sheetHeight = $state(0);
+	let isDragging = $state(false);
+	let startY = 0;
+	let startHeight = 0;
+
+	$effect(() => {
+		if (open && typeof window !== 'undefined') {
+			sheetHeight = getSnapPointValue(defaultSnapPoint);
+		}
+	});
+
+	function handleTouchStart(e: TouchEvent) {
+		isDragging = true;
+		startY = e.touches[0].clientY;
+		startHeight = sheetHeight;
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!isDragging) return;
+		const deltaY = startY - e.touches[0].clientY;
+		const maxHeight = typeof window !== 'undefined' ? window.innerHeight * 0.95 : 760;
+		const newHeight = Math.max(0, Math.min(maxHeight, startHeight + deltaY));
+		sheetHeight = newHeight;
+	}
+
+	function handleTouchEnd() {
+		isDragging = false;
+		const points = snapPoints.map(getSnapPointValue).sort((a, b) => a - b);
+		const minPoint = points[0] * 0.5;
+
+		if (sheetHeight < minPoint) {
+			open = false;
+			return;
+		}
+
+		let closest = points[0];
+		let minDiff = Math.abs(sheetHeight - closest);
+		for (const p of points) {
+			const diff = Math.abs(sheetHeight - p);
+			if (diff < minDiff) {
+				minDiff = diff;
+				closest = p;
+			}
+		}
+		sheetHeight = closest;
+	}
+
+	function handleOpenChange(value: boolean) {
+		if (!value && !closeOnEscape) return;
+		open = value;
+	}
+
+	function handleBackdropClick() {
+		if (closeOnBackdrop) open = false;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && !closeOnEscape) {
+			e.preventDefault();
+		}
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="bottom-sheet-overlay" onclick={handleBackdropClick} />
+		<Dialog.Content
+			class="bottom-sheet-content {className}"
+			style="height: {sheetHeight}px; transition: {isDragging
+				? 'none'
+				: 'height 0.3s cubic-bezier(0.32, 0.72, 0, 1)'};"
+			onkeydown={handleKeydown}
+		>
+			{#if showHandle}
+				<div
+					class="bottom-sheet-handle"
+					ontouchstart={handleTouchStart}
+					ontouchmove={handleTouchMove}
+					ontouchend={handleTouchEnd}
+					role="slider"
+					tabindex="0"
+					aria-label="Resize sheet"
+					aria-valuenow={sheetHeight}
+				>
+					<div class="bottom-sheet-handle-bar"></div>
+				</div>
+			{/if}
+			<div class="bottom-sheet-inner">
+				{@render children?.()}
+			</div>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+
+<style>
+	:global(.bottom-sheet-overlay) {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 100;
+	}
+
+	:global(.bottom-sheet-overlay[data-state='open']) {
+		animation: bs-fade-in 200ms ease-out;
+	}
+
+	:global(.bottom-sheet-overlay[data-state='closed']) {
+		animation: bs-fade-out 150ms ease-in;
+	}
+
+	@keyframes -global-bs-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-bs-fade-out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	:global(.bottom-sheet-content) {
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: var(--color-bg, #ffffff);
+		border-radius: 1rem 1rem 0 0;
+		z-index: 101;
+		display: flex;
+		flex-direction: column;
+		padding-bottom: env(safe-area-inset-bottom);
+		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+	}
+
+	:global(.bottom-sheet-content[data-state='open']) {
+		animation: bs-slide-up 300ms cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	:global(.bottom-sheet-content[data-state='closed']) {
+		animation: bs-slide-down 200ms ease-in;
+	}
+
+	@keyframes -global-bs-slide-up {
+		from {
+			transform: translateY(100%);
+		}
+		to {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes -global-bs-slide-down {
+		from {
+			transform: translateY(0);
+		}
+		to {
+			transform: translateY(100%);
+		}
+	}
+
+	.bottom-sheet-handle {
+		display: flex;
+		justify-content: center;
+		padding: 0.75rem;
+		cursor: grab;
+		touch-action: none;
+		min-height: 44px;
+		align-items: center;
+	}
+
+	.bottom-sheet-handle:active {
+		cursor: grabbing;
+	}
+
+	.bottom-sheet-handle-bar {
+		width: 2.5rem;
+		height: 0.25rem;
+		background: var(--color-border, #e5e7eb);
+		border-radius: 0.125rem;
+	}
+
+	.bottom-sheet-inner {
+		flex: 1;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+</style>

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

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

package/dist/components/BottomSheet/BottomSheetBody.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { BottomSheetBodyProps } from '../../types/index.js';
+
+	interface Props extends BottomSheetBodyProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="bottom-sheet-body {className}">
+	{@render children?.()}
+</div>
+
+<style>
+	.bottom-sheet-body {
+		padding: var(--space-md, 1rem);
+		flex: 1;
+	}
+</style>

package/dist/components/BottomSheet/BottomSheetBody.svelte.d.ts

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

package/dist/components/BottomSheet/BottomSheetHeader.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { BottomSheetHeaderProps } from '../../types/index.js';
+
+	interface Props extends BottomSheetHeaderProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { sticky = false, class: className = '', children }: Props = $props();
+</script>
+
+<div class="bottom-sheet-header {sticky ? 'bottom-sheet-header--sticky' : ''} {className}">
+	{@render children?.()}
+</div>
+
+<style>
+	.bottom-sheet-header {
+		padding: var(--space-md, 1rem);
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+	}
+
+	.bottom-sheet-header--sticky {
+		position: sticky;
+		top: 0;
+		background: var(--color-bg, #ffffff);
+		z-index: 1;
+	}
+</style>

package/dist/components/BottomSheet/BottomSheetHeader.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as BottomSheet } from './BottomSheet.svelte';
+export { default as BottomSheetHeader } from './BottomSheetHeader.svelte';
+export { default as BottomSheetBody } from './BottomSheetBody.svelte';

package/dist/components/BottomSheet/index.js

@@ -0,0 +1,3 @@
+export { default as BottomSheet } from './BottomSheet.svelte';
+export { default as BottomSheetHeader } from './BottomSheetHeader.svelte';
+export { default as BottomSheetBody } from './BottomSheetBody.svelte';

package/dist/components/Box/Box.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { BoxProps, SpacingToken } from '../../types/index.js';
+
+	interface Props extends BoxProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { padding, margin, radius, as = 'div', class: className = '', children }: Props = $props();
+
+	function getSpacing(token: SpacingToken | undefined): string | undefined {
+		if (!token) return undefined;
+		const map: Record<SpacingToken, string> = {
+			xs: 'var(--space-xs, 0.25rem)',
+			sm: 'var(--space-sm, 0.5rem)',
+			md: 'var(--space-md, 1rem)',
+			lg: 'var(--space-lg, 1.5rem)',
+			xl: 'var(--space-xl, 2rem)',
+			'2xl': 'var(--space-2xl, 3rem)',
+			'3xl': 'var(--space-3xl, 4rem)'
+		};
+		return map[token];
+	}
+</script>
+
+<svelte:element
+	this={as}
+	class="box {className}"
+	style:padding={getSpacing(padding)}
+	style:margin={getSpacing(margin)}
+	style:border-radius={getSpacing(radius)}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>
+
+<style>
+	.box {
+		font-family: inherit;
+	}
+</style>

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

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

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

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