@aspect-ops/exon-ui 0.0.2 → 0.1.0

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

package/dist/components/Box/index.js

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

package/dist/components/Card/Card.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import type { CardVariant } from '../../types/index.js';
+
+	interface Props {
+		variant?: CardVariant;
+		clickable?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		variant = 'elevated',
+		clickable = false,
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+{#if clickable}
+	<button type="button" class="card card--{variant} card--clickable {className}">
+		{#if children}
+			{@render children()}
+		{/if}
+	</button>
+{:else}
+	<div class="card card--{variant} {className}">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.card {
+		display: flex;
+		flex-direction: column;
+		background: var(--color-bg-card, #ffffff);
+		border-radius: var(--radius-lg, 0.5rem);
+		overflow: hidden;
+		font-family: inherit;
+	}
+
+	/* Elevated variant (default) - uses shadow */
+	.card--elevated {
+		box-shadow: var(
+			--shadow-md,
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06)
+		);
+	}
+
+	/* Outlined variant - uses border */
+	.card--outlined {
+		border: 1px solid var(--color-border, #e5e7eb);
+	}
+
+	/* Filled variant - uses background color */
+	.card--filled {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	/* Clickable state */
+	.card--clickable {
+		width: 100%;
+		text-align: left;
+		padding: 0;
+		border: none;
+		cursor: pointer;
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
+		min-height: 2.75rem;
+	}
+
+	.card--clickable:hover {
+		transform: translateY(-2px);
+	}
+
+	.card--clickable.card--elevated:hover {
+		box-shadow: var(
+			--shadow-lg,
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05)
+		);
+	}
+
+	.card--clickable:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.card--clickable:active {
+		transform: translateY(0);
+	}
+</style>

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

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

package/dist/components/Card/CardBody.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="card__body {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.card__body {
+		flex: 1;
+		padding: var(--space-lg, 1.25rem);
+		font-family: inherit;
+		font-size: var(--text-base, 1rem);
+		line-height: 1.5;
+		color: var(--color-text, var(--gray-12, inherit));
+	}
+
+	/* Mobile-first: Adjust padding for smaller screens */
+	@media (max-width: 30rem) {
+		.card__body {
+			padding: var(--space-md, 1rem);
+		}
+	}
+</style>

package/dist/components/Card/CardBody.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const CardBody: import("svelte").Component<Props, {}, "">;
+type CardBody = ReturnType<typeof CardBody>;
+export default CardBody;