@aspect-ops/exon-ui 0.1.0 → 0.2.1

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+	interface Props {
+		currentPage: number;
+		totalPages: number;
+		siblingCount?: number;
+		onPageChange?: (page: number) => void;
+		class?: string;
+	}
+
+	let {
+		currentPage,
+		totalPages,
+		siblingCount = 1,
+		onPageChange,
+		class: className = ''
+	}: Props = $props();
+
+	const canGoPrevious = $derived(currentPage > 1);
+	const canGoNext = $derived(currentPage < totalPages);
+
+	// Generate page numbers with ellipsis logic
+	const pageNumbers = $derived(() => {
+		const pages: (number | 'ellipsis-start' | 'ellipsis-end')[] = [];
+
+		// Always show first page
+		pages.push(1);
+
+		// Calculate the range around current page
+		const leftSibling = Math.max(currentPage - siblingCount, 2);
+		const rightSibling = Math.min(currentPage + siblingCount, totalPages - 1);
+
+		// Add ellipsis after first page if needed
+		if (leftSibling > 2) {
+			pages.push('ellipsis-start');
+		}
+
+		// Add sibling pages
+		for (let i = leftSibling; i <= rightSibling; i++) {
+			pages.push(i);
+		}
+
+		// Add ellipsis before last page if needed
+		if (rightSibling < totalPages - 1) {
+			pages.push('ellipsis-end');
+		}
+
+		// Always show last page (if more than 1 page)
+		if (totalPages > 1) {
+			pages.push(totalPages);
+		}
+
+		return pages;
+	});
+
+	function handlePageClick(page: number) {
+		if (page !== currentPage && page >= 1 && page <= totalPages) {
+			onPageChange?.(page);
+		}
+	}
+
+	function handlePrevious() {
+		if (canGoPrevious) {
+			onPageChange?.(currentPage - 1);
+		}
+	}
+
+	function handleNext() {
+		if (canGoNext) {
+			onPageChange?.(currentPage + 1);
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowLeft':
+				event.preventDefault();
+				handlePrevious();
+				break;
+			case 'ArrowRight':
+				event.preventDefault();
+				handleNext();
+				break;
+			case 'Home':
+				event.preventDefault();
+				handlePageClick(1);
+				break;
+			case 'End':
+				event.preventDefault();
+				handlePageClick(totalPages);
+				break;
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<nav class="pagination {className}" aria-label="Pagination">
+	<div class="pagination-wrapper" role="group" onkeydown={handleKeyDown}>
+		<button
+			class="pagination-button pagination-button--previous"
+			disabled={!canGoPrevious}
+			onclick={handlePrevious}
+			aria-label="Previous page"
+		>
+			Previous
+		</button>
+
+		<div class="pagination-pages">
+			{#each pageNumbers() as item}
+				{#if typeof item === 'number'}
+					<button
+						class="pagination-button pagination-button--page"
+						class:pagination-button--current={item === currentPage}
+						onclick={() => handlePageClick(item)}
+						aria-label={item === currentPage ? `Current page, page ${item}` : `Go to page ${item}`}
+						aria-current={item === currentPage ? 'page' : undefined}
+					>
+						{item}
+					</button>
+				{:else}
+					<span class="pagination-ellipsis" aria-hidden="true">...</span>
+				{/if}
+			{/each}
+		</div>
+
+		<button
+			class="pagination-button pagination-button--next"
+			disabled={!canGoNext}
+			onclick={handleNext}
+			aria-label="Next page"
+		>
+			Next
+		</button>
+	</div>
+</nav>
+
+<style>
+	.pagination {
+		font-family: inherit;
+	}
+
+	.pagination-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.pagination-pages {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.pagination-button {
+		min-width: 2.75rem;
+		min-height: 2.75rem; /* 44px minimum touch target */
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--pagination-border-color, #d1d5db);
+		border-radius: var(--pagination-border-radius, 0.375rem);
+		background-color: var(--pagination-bg-color, #ffffff);
+		color: var(--pagination-text-color, #374151);
+		font-family: inherit;
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.pagination-button:hover:not(:disabled) {
+		background-color: var(--pagination-hover-bg-color, #f3f4f6);
+		border-color: var(--pagination-hover-border-color, #9ca3af);
+	}
+
+	.pagination-button:focus-visible {
+		outline: 2px solid var(--pagination-focus-color, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.pagination-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.pagination-button--page {
+		min-width: 2.75rem;
+	}
+
+	.pagination-button--current {
+		background-color: var(--pagination-current-bg-color, #3b82f6);
+		color: var(--pagination-current-text-color, #ffffff);
+		border-color: var(--pagination-current-border-color, #3b82f6);
+	}
+
+	.pagination-button--current:hover {
+		background-color: var(--pagination-current-hover-bg-color, #2563eb);
+		border-color: var(--pagination-current-hover-border-color, #2563eb);
+	}
+
+	.pagination-button--previous,
+	.pagination-button--next {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	.pagination-ellipsis {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+		padding: 0.5rem;
+		color: var(--pagination-ellipsis-color, #6b7280);
+		font-size: 0.875rem;
+	}
+
+	/* Mobile responsive: hide some siblings on small screens */
+	@media (max-width: 640px) {
+		.pagination-wrapper {
+			gap: 0.25rem;
+		}
+
+		.pagination-pages {
+			gap: 0.125rem;
+		}
+
+		.pagination-button--previous,
+		.pagination-button--next {
+			padding-left: 0.75rem;
+			padding-right: 0.75rem;
+			font-size: 0.75rem;
+		}
+
+		.pagination-button--page {
+			min-width: 2.75rem;
+			padding: 0.5rem;
+			font-size: 0.75rem;
+		}
+
+		.pagination-ellipsis {
+			min-width: 2rem;
+			padding: 0.25rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    currentPage: number;
+    totalPages: number;
+    siblingCount?: number;
+    onPageChange?: (page: number) => void;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

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

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

package/dist/components/Pagination/index.js

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

package/dist/components/Popover/PopoverTrigger.svelte

@@ -9,6 +9,4 @@
 	let { class: className = '', children }: Props = $props();
 </script>
 
-<BitsPopover.Trigger class={className}>
-	{@render children?.()}
-</BitsPopover.Trigger>
+<BitsPopover.Trigger child={children}></BitsPopover.Trigger>

package/dist/components/ToggleGroup/ToggleGroup.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { ToggleGroupType, ToggleGroupOrientation } from '../../types/index.js';
+
+	interface Props {
+		type?: ToggleGroupType;
+		value?: string | string[];
+		onValueChange?: (value: string | string[]) => void;
+		disabled?: boolean;
+		orientation?: ToggleGroupOrientation;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		type = 'single',
+		value = $bindable(type === 'single' ? '' : []),
+		onValueChange,
+		disabled = false,
+		orientation = 'horizontal',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const handleToggle = (itemValue: string) => {
+		if (disabled) return;
+
+		let newValue: string | string[];
+
+		if (type === 'single') {
+			// Single mode: toggle or select new value
+			newValue = (value as string) === itemValue ? '' : itemValue;
+		} else {
+			// Multiple mode: toggle item in array
+			const currentArray = (value as string[]) || [];
+			if (currentArray.includes(itemValue)) {
+				newValue = currentArray.filter((v) => v !== itemValue);
+			} else {
+				newValue = [...currentArray, itemValue];
+			}
+		}
+
+		value = newValue;
+		onValueChange?.(newValue);
+	};
+
+	const isSelected = (itemValue: string): boolean => {
+		if (type === 'single') {
+			return (value as string) === itemValue;
+		} else {
+			return ((value as string[]) || []).includes(itemValue);
+		}
+	};
+
+	// Set context for child items
+	setContext('toggleGroup', {
+		get type() {
+			return type;
+		},
+		get disabled() {
+			return disabled;
+		},
+		onToggle: handleToggle,
+		isSelected
+	});
+</script>
+
+<div
+	class="toggle-group toggle-group--{orientation} {className}"
+	role={type === 'single' ? 'radiogroup' : 'group'}
+	aria-disabled={disabled}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.toggle-group {
+		display: inline-flex;
+		font-family: inherit;
+	}
+
+	.toggle-group--horizontal {
+		flex-direction: row;
+	}
+
+	.toggle-group--vertical {
+		flex-direction: column;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { ToggleGroupType, ToggleGroupOrientation } from '../../types/index.js';
+interface Props {
+    type?: ToggleGroupType;
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    disabled?: boolean;
+    orientation?: ToggleGroupOrientation;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const ToggleGroup: import("svelte").Component<Props, {}, "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/ToggleGroup/ToggleGroupItem.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+
+	interface Props {
+		value: string;
+		disabled?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { value, disabled = false, class: className = '', children }: Props = $props();
+
+	const context = getContext<{
+		type: 'single' | 'multiple';
+		disabled: boolean;
+		onToggle: (value: string) => void;
+		isSelected: (value: string) => boolean;
+	}>('toggleGroup');
+
+	const isGroupDisabled = context?.disabled ?? false;
+	const isDisabled = $derived(disabled || isGroupDisabled);
+	const isPressed = $derived(context?.isSelected(value) ?? false);
+
+	const handleClick = () => {
+		if (isDisabled) return;
+		context?.onToggle(value);
+	};
+
+	const handleKeydown = (e: KeyboardEvent) => {
+		const target = e.currentTarget as HTMLElement;
+		const group = target.parentElement;
+		if (!group) return;
+
+		const items = Array.from(group.querySelectorAll('[role="radio"], [role="button"]'));
+		const currentIndex = items.indexOf(target);
+
+		let nextIndex = currentIndex;
+
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowDown':
+				e.preventDefault();
+				nextIndex = (currentIndex + 1) % items.length;
+				break;
+			case 'ArrowLeft':
+			case 'ArrowUp':
+				e.preventDefault();
+				nextIndex = currentIndex - 1;
+				if (nextIndex < 0) nextIndex = items.length - 1;
+				break;
+			case ' ':
+			case 'Enter':
+				e.preventDefault();
+				handleClick();
+				return;
+			default:
+				return;
+		}
+
+		(items[nextIndex] as HTMLElement)?.focus();
+	};
+</script>
+
+<button
+	class="toggle-group-item {isPressed ? 'toggle-group-item--pressed' : ''} {className}"
+	role={context?.type === 'single' ? 'radio' : 'button'}
+	aria-pressed={isPressed}
+	aria-checked={context?.type === 'single' ? isPressed : undefined}
+	aria-disabled={isDisabled}
+	disabled={isDisabled}
+	tabindex={isDisabled ? -1 : 0}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</button>
+
+<style>
+	.toggle-group-item {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-height: var(--touch-target-min, 44px);
+		min-width: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		border: 1px solid var(--color-border, #e5e7eb);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+		margin-left: -1px;
+	}
+
+	.toggle-group-item:first-child {
+		margin-left: 0;
+		border-top-left-radius: var(--radius-md, 0.375rem);
+		border-bottom-left-radius: var(--radius-md, 0.375rem);
+	}
+
+	.toggle-group-item:last-child {
+		border-top-right-radius: var(--radius-md, 0.375rem);
+		border-bottom-right-radius: var(--radius-md, 0.375rem);
+	}
+
+	:global(.toggle-group--vertical) .toggle-group-item {
+		margin-left: 0;
+		margin-top: -1px;
+	}
+
+	:global(.toggle-group--vertical) .toggle-group-item:first-child {
+		margin-top: 0;
+		border-top-left-radius: var(--radius-md, 0.375rem);
+		border-top-right-radius: var(--radius-md, 0.375rem);
+		border-bottom-left-radius: 0;
+	}
+
+	:global(.toggle-group--vertical) .toggle-group-item:last-child {
+		border-top-right-radius: 0;
+		border-bottom-left-radius: var(--radius-md, 0.375rem);
+		border-bottom-right-radius: var(--radius-md, 0.375rem);
+	}
+
+	.toggle-group-item:hover:not(:disabled) {
+		background: var(--color-bg-muted, #f3f4f6);
+		z-index: 1;
+	}
+
+	.toggle-group-item:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+		z-index: 2;
+	}
+
+	.toggle-group-item--pressed {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		border-color: var(--color-primary, #3b82f6);
+		z-index: 1;
+	}
+
+	.toggle-group-item--pressed:hover:not(:disabled) {
+		background: var(--color-primary-hover, #2563eb);
+		border-color: var(--color-primary-hover, #2563eb);
+	}
+
+	.toggle-group-item:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+</style>

package/dist/components/ToggleGroup/ToggleGroupItem.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as ToggleGroup } from './ToggleGroup.svelte';
+export { default as ToggleGroupItem } from './ToggleGroupItem.svelte';
+export type { ToggleGroupType, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupItemProps } from '../../types/index.js';

package/dist/components/ToggleGroup/index.js

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

package/dist/components/ViewCounter/ViewCounter.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		/** Unique identifier for the content being viewed */
+		slug: string;
+		/** Whether to show the "views" label */
+		showLabel?: boolean;
+		/** Whether to track the view (POST to API) or just display */
+		trackView?: boolean;
+		/** Custom class */
+		class?: string;
+		/** Callback to get current view count */
+		onGetCount?: (slug: string) => Promise<number>;
+		/** Callback to track/increment view */
+		onTrackView?: (slug: string) => Promise<number>;
+	}
+
+	let {
+		slug,
+		showLabel = true,
+		trackView = true,
+		class: className = '',
+		onGetCount,
+		onTrackView
+	}: Props = $props();
+
+	let viewCount = $state<number | null>(null);
+	let isLoading = $state(true);
+	let hasError = $state(false);
+
+	// Format large numbers (1K, 1M, etc.)
+	function formatCount(count: number): string {
+		if (count >= 1000000) {
+			return (count / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+		}
+		if (count >= 1000) {
+			return (count / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+		}
+		return count.toString();
+	}
+
+	// Check if already viewed in this session
+	function hasViewedInSession(): boolean {
+		if (typeof window === 'undefined') return false;
+		const viewed = sessionStorage.getItem(`viewed_${slug}`);
+		return viewed === 'true';
+	}
+
+	// Mark as viewed in session
+	function markViewedInSession(): void {
+		if (typeof window !== 'undefined') {
+			sessionStorage.setItem(`viewed_${slug}`, 'true');
+		}
+	}
+
+	onMount(async () => {
+		try {
+			// If tracking is enabled and not already viewed
+			if (trackView && onTrackView && !hasViewedInSession()) {
+				viewCount = await onTrackView(slug);
+				markViewedInSession();
+			} else if (onGetCount) {
+				// Just get the count without tracking
+				viewCount = await onGetCount(slug);
+			} else {
+				// No callbacks provided, show 0
+				viewCount = 0;
+			}
+		} catch {
+			hasError = true;
+			viewCount = 0;
+		} finally {
+			isLoading = false;
+		}
+	});
+
+	const formattedCount = $derived(viewCount !== null ? formatCount(viewCount) : '—');
+</script>
+
+<span class="view-counter {className}" class:view-counter--loading={isLoading}>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="view-counter__icon"
+		aria-hidden="true"
+	>
+		<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+		<circle cx="12" cy="12" r="3" />
+	</svg>
+	<span class="view-counter__count">
+		{#if isLoading}
+			<span class="view-counter__skeleton"></span>
+		{:else}
+			{formattedCount}
+		{/if}
+	</span>
+	{#if showLabel}
+		<span class="view-counter__label">views</span>
+	{/if}
+</span>
+
+<style>
+	.view-counter {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		font-size: var(--text-sm, 0.875rem);
+		color: var(--color-text-muted, #6b7280);
+		font-family: inherit;
+	}
+
+	.view-counter__icon {
+		flex-shrink: 0;
+		opacity: 0.7;
+	}
+
+	.view-counter__count {
+		font-weight: var(--font-medium, 500);
+		min-width: 1.5rem;
+	}
+
+	.view-counter__label {
+		opacity: 0.8;
+	}
+
+	.view-counter__skeleton {
+		display: inline-block;
+		width: 2rem;
+		height: 1em;
+		background: linear-gradient(
+			90deg,
+			var(--color-bg-muted, #f3f4f6) 25%,
+			var(--color-border, #e5e7eb) 50%,
+			var(--color-bg-muted, #f3f4f6) 75%
+		);
+		background-size: 200% 100%;
+		animation: skeleton-pulse 1.5s ease-in-out infinite;
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	@keyframes skeleton-pulse {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+</style>