@ewanc26/ui 0.1.0

package/dist/components/ui/Card.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { ExternalLink } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+
+	export interface Badge {
+		text: string;
+		color?: 'mint' | 'sage' | 'jade' | 'ink';
+		variant?: 'solid' | 'soft';
+	}
+
+	interface Props {
+		variant?: 'default' | 'elevated' | 'flat' | 'button' | 'outline';
+		padding?: 'sm' | 'md' | 'lg' | 'none';
+		interactive?: boolean;
+		href?: string;
+		target?: string;
+		rel?: string;
+		showExternalIcon?: boolean;
+		badges?: Badge[];
+		loading?: boolean;
+		error?: boolean;
+		errorMessage?: string;
+		class?: string;
+		ariaLabel?: string;
+		children?: Snippet;
+		skeleton?: Snippet;
+	}
+
+	let {
+		variant = 'default',
+		padding = 'md',
+		interactive = false,
+		href,
+		target = '_blank',
+		rel = 'noopener noreferrer',
+		showExternalIcon = false,
+		badges = [],
+		loading = false,
+		error = false,
+		errorMessage = 'Something went wrong',
+		class: customClass = '',
+		ariaLabel,
+		children,
+		skeleton
+	}: Props = $props();
+
+	let isLink = $derived(!!href);
+	const baseClasses = 'rounded-xl transition-all duration-300';
+	const variantClasses = {
+		default: 'bg-canvas-100 dark:bg-canvas-900 shadow-md',
+		elevated: 'bg-canvas-100 dark:bg-canvas-900 shadow-lg hover:shadow-xl',
+		flat: 'bg-canvas-200 dark:bg-canvas-800',
+		button:
+			'bg-canvas-200 dark:bg-canvas-800 hover:bg-canvas-300 dark:hover:bg-canvas-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600',
+		outline:
+			'bg-transparent border-2 border-canvas-300 dark:border-canvas-700 hover:border-primary-400 dark:hover:border-primary-600'
+	};
+	const paddingClasses = { none: '', sm: 'p-4', md: 'p-6', lg: 'p-8' };
+	let interactiveClasses = $derived(interactive || isLink ? 'cursor-pointer' : '');
+	let cardClasses = $derived(
+		`${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${interactiveClasses} ${customClass}`
+	);
+
+	function getBadgeClasses(badge: Badge): string {
+		const baseStyle =
+			badge.variant === 'soft'
+				? 'px-2 py-0.5 text-xs font-medium rounded'
+				: 'px-2 py-0.5 text-xs font-semibold uppercase rounded';
+		const colorClasses = {
+			mint:
+				badge.variant === 'soft'
+					? 'bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-200'
+					: 'bg-secondary-500 text-white dark:bg-secondary-600',
+			sage:
+				badge.variant === 'soft'
+					? 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200'
+					: 'bg-primary-500 text-white dark:bg-primary-600',
+			jade:
+				badge.variant === 'soft'
+					? 'bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200'
+					: 'bg-accent-500 text-white dark:bg-accent-600',
+			ink:
+				badge.variant === 'soft'
+					? 'bg-ink-100 text-ink-800 dark:bg-ink-800 dark:text-ink-100'
+					: 'bg-ink-700 text-white dark:bg-ink-300 dark:text-ink-900'
+		};
+		return `${baseStyle} ${colorClasses[badge.color || 'ink']}`;
+	}
+</script>
+
+{#if loading}
+	<div class="{cardClasses} animate-pulse" aria-label="Loading content" role="status">
+		{#if skeleton}
+			{@render skeleton()}
+		{:else}
+			<div class="space-y-3">
+				<div class="h-4 w-3/4 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+				<div class="h-4 w-full rounded bg-canvas-300 dark:bg-canvas-700"></div>
+				<div class="h-4 w-5/6 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+			</div>
+		{/if}
+		<span class="sr-only">Loading...</span>
+	</div>
+{:else if error}
+	<div
+		class="{cardClasses} border-2 border-red-300 bg-red-50 dark:border-red-700 dark:bg-red-900/20"
+		role="alert"
+		aria-live="polite"
+	>
+		<p class="text-red-600 dark:text-red-400">{errorMessage}</p>
+	</div>
+{:else if isLink}
+	<a {href} {target} {rel} class={cardClasses} aria-label={ariaLabel || `Link to ${href}`}>
+		{#if badges.length > 0}
+			<div class="mb-3 flex flex-wrap items-center gap-2">
+				{#each badges as badge}
+					<span class={getBadgeClasses(badge)}>{badge.text}</span>
+				{/each}
+			</div>
+		{/if}
+		<div class="flex items-start justify-between gap-3">
+			<div class="flex-1">
+				{#if children}{@render children()}{/if}
+			</div>
+			{#if showExternalIcon}
+				<ExternalLink
+					class="h-4 w-4 shrink-0 text-ink-700 transition-colors group-hover:text-primary-600 dark:text-ink-200 dark:group-hover:text-primary-400"
+					aria-hidden="true"
+				/>
+			{/if}
+		</div>
+	</a>
+{:else}
+	<div class={cardClasses} role={ariaLabel ? 'region' : undefined} aria-label={ariaLabel}>
+		{#if badges.length > 0}
+			<div class="mb-3 flex flex-wrap items-center gap-2">
+				{#each badges as badge}
+					<span class={getBadgeClasses(badge)}>{badge.text}</span>
+				{/each}
+			</div>
+		{/if}
+		{#if children}{@render children()}{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export interface Badge {
+    text: string;
+    color?: 'mint' | 'sage' | 'jade' | 'ink';
+    variant?: 'solid' | 'soft';
+}
+interface Props {
+    variant?: 'default' | 'elevated' | 'flat' | 'button' | 'outline';
+    padding?: 'sm' | 'md' | 'lg' | 'none';
+    interactive?: boolean;
+    href?: string;
+    target?: string;
+    rel?: string;
+    showExternalIcon?: boolean;
+    badges?: Badge[];
+    loading?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    class?: string;
+    ariaLabel?: string;
+    children?: Snippet;
+    skeleton?: Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;
+//# sourceMappingURL=Card.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ui/Card.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,MAAM,WAAW,KAAK;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC3B;AAED,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IACjE,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAuHF,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/ui/DocumentCard.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { ExternalLink, Tag } from '@lucide/svelte';
+	import type { StandardSiteDocument } from '@ewanc26/atproto';
+	import InternalCard from './InternalCard.svelte';
+	import { formatLocalizedDate } from '../../utils/locale.js';
+
+	interface Props { document: StandardSiteDocument; locale?: string; }
+	let { document, locale }: Props = $props();
+</script>
+
+<InternalCard href={document.url}>
+	{#snippet children()}
+		{#if document.coverImage}
+			<div class="mb-3 overflow-hidden rounded-lg">
+				<img src={document.coverImage} alt={document.title} class="h-48 w-full object-cover transition-transform duration-300 hover:scale-105" />
+			</div>
+		{/if}
+		<div class="relative min-w-0 flex-1 space-y-2">
+			{#if document.publicationName}
+				<div class="flex flex-wrap items-center gap-2">
+					<span class="rounded bg-accent-500 px-2 py-0.5 text-xs font-semibold text-white uppercase dark:bg-accent-600">{document.publicationName}</span>
+				</div>
+			{/if}
+			<h4 class="overflow-wrap-anywhere font-semibold wrap-break-word text-ink-900 dark:text-ink-50">{document.title}</h4>
+			{#if document.description}
+				<p class="overflow-wrap-anywhere line-clamp-2 text-sm wrap-break-word text-ink-700 dark:text-ink-200">{document.description}</p>
+			{/if}
+			<div class="pt-1">
+				<p class="text-xs font-medium text-ink-800 dark:text-ink-100">{formatLocalizedDate(document.publishedAt, locale)}</p>
+			</div>
+		</div>
+		<div class="flex shrink-0 flex-col items-end justify-between gap-2 self-stretch">
+			<ExternalLink class="h-4 w-4 text-ink-700 transition-colors dark:text-ink-200" aria-hidden="true" />
+			{#if document.tags && document.tags.length > 0}
+				<div class="flex items-center gap-1.5 rounded bg-ink-100 px-2 py-0.5 dark:bg-ink-800">
+					<Tag class="h-3 w-3 text-ink-700 dark:text-ink-200" aria-hidden="true" />
+					<span class="text-xs font-medium text-ink-800 dark:text-ink-100">{document.tags.length}</span>
+				</div>
+			{/if}
+		</div>
+	{/snippet}
+</InternalCard>

package/dist/components/ui/DocumentCard.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { StandardSiteDocument } from '@ewanc26/atproto';
+interface Props {
+    document: StandardSiteDocument;
+    locale?: string;
+}
+declare const DocumentCard: import("svelte").Component<Props, {}, "">;
+type DocumentCard = ReturnType<typeof DocumentCard>;
+export default DocumentCard;
+//# sourceMappingURL=DocumentCard.svelte.d.ts.map

package/dist/components/ui/DocumentCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ui/DocumentCard.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAK5D,UAAU,KAAK;IAAG,QAAQ,EAAE,oBAAoB,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAAE;AA6CrE,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/ui/Dropdown.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { ChevronDown } from '@lucide/svelte';
+
+	interface Option { value: string; label: string; }
+	interface Props {
+		options: Option[];
+		value: string;
+		label?: string;
+		placeholder?: string;
+		id?: string;
+	}
+
+	let { options, value = $bindable(), label, placeholder = 'Select...', id = 'dropdown' }: Props = $props();
+</script>
+
+<div class="relative">
+	{#if label}
+		<label for={id} class="mb-2 block text-sm font-medium text-ink-700 dark:text-ink-200">{label}</label>
+	{/if}
+	<div class="relative">
+		<select
+			{id}
+			bind:value
+			class="w-full appearance-none rounded-lg border-2 border-canvas-300 bg-canvas-100 py-2 pr-10 pl-3 text-ink-900 transition-colors focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none dark:border-canvas-700 dark:bg-canvas-900 dark:text-ink-50 dark:focus:border-primary-400"
+			aria-label={label || 'Select an option'}
+		>
+			<option value="" disabled>{placeholder}</option>
+			{#each options as option}
+				<option value={option.value}>{option.label}</option>
+			{/each}
+		</select>
+		<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-ink-500 dark:text-ink-400" aria-hidden="true">
+			<ChevronDown class="h-5 w-5" />
+		</div>
+	</div>
+</div>

package/dist/components/ui/Dropdown.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Option {
+    value: string;
+    label: string;
+}
+interface Props {
+    options: Option[];
+    value: string;
+    label?: string;
+    placeholder?: string;
+    id?: string;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "value">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;
+//# sourceMappingURL=Dropdown.svelte.d.ts.map

package/dist/components/ui/Dropdown.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ui/Dropdown.svelte.ts"],"names":[],"mappings":"AAMC,UAAU,MAAM;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;CAAE;AAClD,UAAU,KAAK;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AA4BF,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/ui/InternalCard.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		href?: string;
+		target?: string;
+		rel?: string;
+		onclick?: () => void;
+		class?: string;
+		ariaLabel?: string;
+		children?: Snippet;
+	}
+
+	let {
+		href,
+		target = '_blank',
+		rel = 'noopener noreferrer',
+		onclick,
+		class: customClass = '',
+		ariaLabel,
+		children
+	}: Props = $props();
+
+	const baseClasses =
+		'flex items-start gap-3 rounded-lg bg-canvas-200 p-4 transition-colors hover:bg-canvas-300 dark:bg-canvas-800 dark:hover:bg-canvas-700 self-start';
+	let combinedClasses = $derived(`${baseClasses} ${customClass}`);
+</script>
+
+{#if href}
+	<a {href} {target} {rel} class={combinedClasses} aria-label={ariaLabel}>
+		{#if children}{@render children()}{/if}
+	</a>
+{:else if onclick}
+	<button type="button" {onclick} class={combinedClasses} aria-label={ariaLabel}>
+		{#if children}{@render children()}{/if}
+	</button>
+{:else}
+	<div class={combinedClasses} role={ariaLabel ? 'region' : undefined} aria-label={ariaLabel}>
+		{#if children}{@render children()}{/if}
+	</div>
+{/if}

package/dist/components/ui/InternalCard.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    href?: string;
+    target?: string;
+    rel?: string;
+    onclick?: () => void;
+    class?: string;
+    ariaLabel?: string;
+    children?: Snippet;
+}
+declare const InternalCard: import("svelte").Component<Props, {}, "">;
+type InternalCard = ReturnType<typeof InternalCard>;
+export default InternalCard;
+//# sourceMappingURL=InternalCard.svelte.d.ts.map

package/dist/components/ui/InternalCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ui/InternalCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAoCF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/ui/Pagination.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+
+	interface Props {
+		currentPage: number;
+		totalPages: number;
+		totalItems: number;
+		itemsPerPage: number;
+		onPageChange: (page: number) => void;
+	}
+
+	let { currentPage, totalPages, totalItems, itemsPerPage, onPageChange }: Props = $props();
+
+	function getPageNumbers(current: number, total: number): (number | string)[] {
+		if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+		const pages: (number | string)[] = [1];
+		if (current > 3) pages.push('...');
+		const start = Math.max(2, current - 1);
+		const end = Math.min(total - 1, current + 1);
+		for (let i = start; i <= end; i++) pages.push(i);
+		if (current < total - 2) pages.push('...');
+		if (total > 1) pages.push(total);
+		return pages;
+	}
+
+	const pageNumbers = $derived(getPageNumbers(currentPage, totalPages));
+	const startItem = $derived((currentPage - 1) * itemsPerPage + 1);
+	const endItem = $derived(Math.min(currentPage * itemsPerPage, totalItems));
+</script>
+
+{#if totalPages > 1}
+	<nav class="mt-12" aria-label="Pagination navigation">
+		<div class="flex items-center justify-center gap-2" role="navigation">
+			<button
+				onclick={() => currentPage > 1 && onPageChange(currentPage - 1)}
+				disabled={currentPage === 1}
+				class="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-canvas-300 bg-canvas-100 text-ink-700 transition-colors hover:bg-canvas-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-canvas-700 dark:bg-canvas-900 dark:text-ink-200 dark:hover:bg-canvas-800"
+				aria-label="Go to previous page"
+			>
+				<ChevronLeft class="h-5 w-5" aria-hidden="true" />
+			</button>
+
+			{#each pageNumbers as page}
+				{#if page === '...'}
+					<span class="px-2 text-ink-500 dark:text-ink-400" aria-hidden="true">...</span>
+				{:else}
+					<button
+						onclick={() => onPageChange(page as number)}
+						class="flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg border-2 px-3 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 {currentPage === page
+							? 'border-primary-500 bg-primary-500 text-white dark:border-primary-400 dark:bg-primary-400'
+							: 'border-canvas-300 bg-canvas-100 text-ink-700 hover:bg-canvas-200 dark:border-canvas-700 dark:bg-canvas-900 dark:text-ink-200 dark:hover:bg-canvas-800'}"
+						aria-label="Go to page {page}"
+						aria-current={currentPage === page ? 'page' : undefined}
+					>
+						{page}
+					</button>
+				{/if}
+			{/each}
+
+			<button
+				onclick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
+				disabled={currentPage === totalPages}
+				class="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-canvas-300 bg-canvas-100 text-ink-700 transition-colors hover:bg-canvas-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-canvas-700 dark:bg-canvas-900 dark:text-ink-200 dark:hover:bg-canvas-800"
+				aria-label="Go to next page"
+			>
+				<ChevronRight class="h-5 w-5" aria-hidden="true" />
+			</button>
+		</div>
+		<p class="mt-4 text-center text-sm text-ink-600 dark:text-ink-300" role="status" aria-live="polite" aria-atomic="true">
+			Page {currentPage} of {totalPages} &middot; Showing {startItem}–{endItem} of {totalItems}
+			{totalItems === 1 ? 'item' : 'items'}
+		</p>
+	</nav>
+{/if}

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

@@ -0,0 +1,11 @@
+interface Props {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    itemsPerPage: number;
+    onPageChange: (page: number) => void;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;
+//# sourceMappingURL=Pagination.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ui/Pagination.svelte.ts"],"names":[],"mappings":"AAMC,UAAU,KAAK;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAwDF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/ui/PostsGroupedView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { BlogPost } from '@ewanc26/atproto';
+	import BlogPostCard from './BlogPostCard.svelte';
+	import { getUserLocale } from '../../utils/locale.js';
+	import { groupPostsByDate, getSortedMonths, getSortedYears } from '../../helper/posts.js';
+
+	interface Props { posts: BlogPost[]; locale?: string; filterYear?: string | null; }
+	let { posts, locale, filterYear }: Props = $props();
+	let userLocale = $derived(locale || getUserLocale());
+	const groupedPosts = $derived(groupPostsByDate(posts, userLocale));
+	const sortedYears = $derived(
+		filterYear && filterYear !== 'all'
+			? [parseInt(filterYear)].filter((year) => groupedPosts.has(year))
+			: getSortedYears(groupedPosts)
+	);
+</script>
+
+<div class="space-y-12">
+	{#each sortedYears as year}
+		{@const yearGroup = groupedPosts.get(year)}
+		{#if yearGroup}
+			{@const sortedMonths = getSortedMonths(yearGroup)}
+			<section>
+				<h2 class="mb-6 text-3xl font-bold text-ink-900 dark:text-ink-50">{year}</h2>
+				<div class="space-y-8">
+					{#each sortedMonths as [_, monthData]}
+						<div>
+							<h3 class="mb-4 text-xl font-semibold text-ink-800 dark:text-ink-100">{monthData.monthName}</h3>
+							<div class="space-y-3">
+								{#each monthData.posts as post}
+									<BlogPostCard {post} locale={userLocale} />
+								{/each}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</section>
+		{/if}
+	{/each}
+</div>

package/dist/components/ui/PostsGroupedView.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BlogPost } from '@ewanc26/atproto';
+interface Props {
+    posts: BlogPost[];
+    locale?: string;
+    filterYear?: string | null;
+}
+declare const PostsGroupedView: import("svelte").Component<Props, {}, "">;
+type PostsGroupedView = ReturnType<typeof PostsGroupedView>;
+export default PostsGroupedView;
+//# sourceMappingURL=PostsGroupedView.svelte.d.ts.map

package/dist/components/ui/PostsGroupedView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostsGroupedView.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ui/PostsGroupedView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMhD,UAAU,KAAK;IAAG,KAAK,EAAE,QAAQ,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAAE;AA2CpF,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/ui/SearchBar.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Search } from '@lucide/svelte';
+	interface Props { value: string; placeholder?: string; resultCount?: number; }
+	let { value = $bindable(), placeholder = 'Search...', resultCount }: Props = $props();
+</script>
+
+<div role="search">
+	<label for="search-input" class="sr-only">Search</label>
+	<div class="relative">
+		<Search class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-ink-500 dark:text-ink-400" aria-hidden="true" />
+		<input
+			id="search-input"
+			type="search"
+			{placeholder}
+			bind:value
+			class="w-full rounded-lg border-2 border-canvas-300 bg-canvas-100 py-3 pr-4 pl-11 text-ink-900 placeholder-ink-500 transition-colors focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none dark:border-canvas-700 dark:bg-canvas-900 dark:text-ink-50 dark:placeholder-ink-400 dark:focus:border-primary-400"
+			aria-label="Search"
+			autocomplete="off"
+		/>
+	</div>
+	{#if value && resultCount !== undefined}
+		<p class="mt-2 text-sm text-ink-600 dark:text-ink-300" role="status" aria-live="polite">
+			Found {resultCount} {resultCount === 1 ? 'result' : 'results'}
+		</p>
+	{/if}
+</div>

package/dist/components/ui/SearchBar.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    value: string;
+    placeholder?: string;
+    resultCount?: number;
+}
+declare const SearchBar: import("svelte").Component<Props, {}, "value">;
+type SearchBar = ReturnType<typeof SearchBar>;
+export default SearchBar;
+//# sourceMappingURL=SearchBar.svelte.d.ts.map

package/dist/components/ui/SearchBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ui/SearchBar.svelte.ts"],"names":[],"mappings":"AAKC,UAAU,KAAK;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAAE;AAsB/E,QAAA,MAAM,SAAS,gDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/ui/Tabs.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	interface Tab { id: string; label: string; }
+	interface Props { tabs: Tab[]; activeTab: string; onTabChange: (tabId: string) => void; }
+	let { tabs, activeTab, onTabChange }: Props = $props();
+</script>
+
+<div class="mb-8" role="tablist" aria-label="Content tabs">
+	<div class="flex flex-wrap gap-2">
+		{#each tabs as tab}
+			<button
+				onclick={() => onTabChange(tab.id)}
+				role="tab"
+				aria-selected={activeTab === tab.id}
+				aria-controls="{tab.id}-panel"
+				id="{tab.id}-tab"
+				tabindex={activeTab === tab.id ? 0 : -1}
+				class="rounded-full px-4 py-2 text-sm font-medium transition-all focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 {activeTab === tab.id
+					? 'bg-primary-500 text-white shadow-md dark:bg-primary-400'
+					: 'bg-canvas-200 text-ink-700 hover:bg-canvas-300 dark:bg-canvas-800 dark:text-ink-200 dark:hover:bg-canvas-700'}"
+			>
+				{tab.label}
+			</button>
+		{/each}
+	</div>
+</div>

package/dist/components/ui/Tabs.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Tab {
+    id: string;
+    label: string;
+}
+interface Props {
+    tabs: Tab[];
+    activeTab: string;
+    onTabChange: (tabId: string) => void;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;
+//# sourceMappingURL=Tabs.svelte.d.ts.map

package/dist/components/ui/Tabs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ui/Tabs.svelte.ts"],"names":[],"mappings":"AAGC,UAAU,GAAG;IAAG,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;CAAE;AAC5C,UAAU,KAAK;IAAG,IAAI,EAAE,GAAG,EAAE,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAAE;AAqB1F,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,11 @@
+export { default as Card } from './Card.svelte';
+export { default as InternalCard } from './InternalCard.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as SearchBar } from './SearchBar.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as PostsGroupedView } from './PostsGroupedView.svelte';
+export { default as DocumentCard } from './DocumentCard.svelte';
+/** @deprecated Use DocumentCard instead */
+export { default as BlogPostCard } from './BlogPostCard.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,2CAA2C;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/ui/index.js

@@ -0,0 +1,10 @@
+export { default as Card } from './Card.svelte';
+export { default as InternalCard } from './InternalCard.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as SearchBar } from './SearchBar.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as PostsGroupedView } from './PostsGroupedView.svelte';
+export { default as DocumentCard } from './DocumentCard.svelte';
+/** @deprecated Use DocumentCard instead */
+export { default as BlogPostCard } from './BlogPostCard.svelte';

package/dist/config/themes.config.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Central theme configuration
+ * Add new themes here and they'll automatically appear in the dropdown and type system
+ */
+export interface ThemeDefinition {
+    value: string;
+    label: string;
+    description: string;
+    color: string;
+    category: 'neutral' | 'warm' | 'cool' | 'vibrant';
+}
+export declare const THEMES: readonly ThemeDefinition[];
+export type ColorTheme = (typeof THEMES)[number]['value'];
+export declare const DEFAULT_THEME: ColorTheme;
+export declare const CATEGORY_LABELS: {
+    readonly neutral: "Neutral";
+    readonly warm: "Warm";
+    readonly cool: "Cool";
+    readonly vibrant: "Vibrant";
+};
+export declare const getThemesByCategory: () => Record<"neutral" | "warm" | "cool" | "vibrant", ThemeDefinition[]>;
+export declare const getTheme: (value: string) => ThemeDefinition | undefined;
+//# sourceMappingURL=themes.config.d.ts.map

package/dist/config/themes.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.config.d.ts","sourceRoot":"","sources":["../../src/lib/config/themes.config.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,eAAe;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,EAAE,SAAS,eAAe,EAyFnC,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;AAC1D,eAAO,MAAM,aAAa,EAAE,UAAoB,CAAC;AAEjD,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX,eAAO,MAAM,mBAAmB,0EAW/B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,MAAM,KAAG,eAAe,GAAG,SAE1D,CAAC"}