@r2digisolutions/components 0.1.1

package/dist/components/molecules/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface ContextMenuItem {
+		id: string;
+		label: string;
+		disabled?: boolean;
+		destructive?: boolean;
+		separator?: boolean;
+		shortcut?: string;
+	}
+
+	interface ContextMenuProps {
+		items?: ContextMenuItem[];
+		open?: boolean;
+		children?: Snippet;
+		onselect?: (id: string, item: ContextMenuItem) => void;
+	}
+
+	let {
+		items = [],
+		open = $bindable(false),
+		children,
+		onselect
+	}: ContextMenuProps = $props();
+
+	let menuX = $state(0);
+	let menuY = $state(0);
+	let menuEl = $state<HTMLDivElement | null>(null);
+	let containerEl = $state<HTMLDivElement | null>(null);
+	let highlighted = $state(-1);
+
+	const enabledIndexes = $derived(
+		items.map((item, i) => (item.separator || item.disabled ? -1 : i)).filter((i) => i !== -1)
+	);
+
+	function openAt(x: number, y: number) {
+		open = true;
+		highlighted = -1;
+
+		// Defer to measure menu dimensions after render
+		requestAnimationFrame(() => {
+			if (!menuEl) return;
+			const vw = window.innerWidth;
+			const vh = window.innerHeight;
+			const { offsetWidth: mw, offsetHeight: mh } = menuEl;
+			menuX = x + mw > vw - 8 ? Math.max(8, x - mw) : x;
+			menuY = y + mh > vh - 8 ? Math.max(8, y - mh) : y;
+		});
+
+		// Optimistically position (will be corrected by rAF)
+		menuX = x;
+		menuY = y;
+	}
+
+	function close() {
+		open = false;
+		highlighted = -1;
+	}
+
+	function selectItem(item: ContextMenuItem) {
+		if (item.disabled || item.separator) return;
+		onselect?.(item.id, item);
+		close();
+	}
+
+	function handleContextMenu(event: MouseEvent) {
+		event.preventDefault();
+		openAt(event.clientX, event.clientY);
+	}
+
+	function handleOutsideClick(event: MouseEvent) {
+		if (!open) return;
+		if (menuEl && menuEl.contains(event.target as Node)) return;
+		close();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (!open) return;
+		switch (event.key) {
+			case 'Escape':
+				event.preventDefault();
+				close();
+				break;
+			case 'ArrowDown':
+				event.preventDefault();
+				move(1);
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				move(-1);
+				break;
+			case 'Enter':
+			case ' ': {
+				event.preventDefault();
+				const item = highlighted >= 0 ? items[highlighted] : undefined;
+				if (item) selectItem(item);
+				break;
+			}
+		}
+	}
+
+	function move(dir: 1 | -1) {
+		const pos = enabledIndexes.indexOf(highlighted);
+		if (pos === -1) {
+			highlighted = enabledIndexes[dir === 1 ? 0 : enabledIndexes.length - 1] ?? -1;
+		} else {
+			const next = (pos + dir + enabledIndexes.length) % enabledIndexes.length;
+			highlighted = enabledIndexes[next];
+		}
+	}
+</script>
+
+<svelte:window onclick={handleOutsideClick} onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={containerEl}
+	class="contents"
+	oncontextmenu={handleContextMenu}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+{#if open}
+	<div
+		bind:this={menuEl}
+		role="menu"
+		tabindex={-1}
+		aria-label="Context menu"
+		style="position:fixed;top:{menuY}px;left:{menuX}px;z-index:9999;"
+		class="min-w-44 rounded-xl border border-border bg-surface-elevated p-1.5 shadow-xl outline-none animate-in fade-in zoom-in-95 duration-100"
+	>
+		{#each items as item, index (item.id)}
+			{#if item.separator}
+				<div class="my-1 h-px bg-border" role="separator"></div>
+			{:else}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					role="menuitem"
+					tabindex={-1}
+					aria-disabled={item.disabled || undefined}
+					onclick={() => selectItem(item)}
+					onpointerenter={() => { if (!item.disabled) highlighted = index; }}
+					onpointerleave={() => { highlighted = -1; }}
+					class={[
+						'flex cursor-pointer items-center justify-between gap-4 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors',
+						item.disabled && 'cursor-not-allowed opacity-40',
+						highlighted === index && !item.disabled && 'bg-surface-overlay',
+						item.destructive ? 'text-red-600 dark:text-red-400' : 'text-primary'
+					]}
+				>
+					<span class="truncate">{item.label}</span>
+					{#if item.shortcut}
+						<kbd class="shrink-0 rounded border border-border bg-surface-overlay px-1.5 py-0.5 text-[10px] font-mono text-secondary">
+							{item.shortcut}
+						</kbd>
+					{/if}
+				</div>
+			{/if}
+		{/each}
+	</div>
+{/if}

package/dist/components/molecules/ContextMenu/ContextMenu.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    destructive?: boolean;
+    separator?: boolean;
+    shortcut?: string;
+}
+interface ContextMenuProps {
+    items?: ContextMenuItem[];
+    open?: boolean;
+    children?: Snippet;
+    onselect?: (id: string, item: ContextMenuItem) => void;
+}
+declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/molecules/ContextMenu/ContextMenuStory.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import ContextMenu from './ContextMenu.svelte';
+	import type { ContextMenuItem } from './ContextMenu.svelte';
+
+	const items: ContextMenuItem[] = [
+		{ id: 'open', label: 'Open', shortcut: '⏎' },
+		{ id: 'copy', label: 'Copy', shortcut: '⌘C' },
+		{ id: 'paste', label: 'Paste', shortcut: '⌘V' },
+		{ id: 'sep1', label: '', separator: true },
+		{ id: 'rename', label: 'Rename', shortcut: 'F2' },
+		{ id: 'share', label: 'Share…' },
+		{ id: 'sep2', label: '', separator: true },
+		{ id: 'delete', label: 'Delete', destructive: true, shortcut: '⌫' }
+	];
+
+	let lastAction = $state<string | null>(null);
+</script>
+
+<div class="flex flex-col items-center gap-4 p-8">
+	<p class="text-sm text-secondary">Right-click on the area below</p>
+
+	<ContextMenu {items} onselect={(id) => (lastAction = id)}>
+		<div class="flex h-40 w-80 items-center justify-center rounded-xl border-2 border-dashed border-border bg-surface-elevated text-sm text-muted select-none">
+			Right-click me
+		</div>
+	</ContextMenu>
+
+	{#if lastAction}
+		<p class="text-sm text-secondary">
+			Action: <span class="font-semibold text-primary">{lastAction}</span>
+		</p>
+	{/if}
+</div>

package/dist/components/molecules/ContextMenu/ContextMenuStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ContextMenuStory: import("svelte").Component<Record<string, never>, {}, "">;
+type ContextMenuStory = ReturnType<typeof ContextMenuStory>;
+export default ContextMenuStory;

package/dist/components/molecules/ContributionGraph/ContributionGraph.stories.d.ts

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        palette?: import("./ContributionGraph.svelte.ts").ContributionPalette;
+        weeks?: number;
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        palette: {
+            control: "select";
+            options: string[];
+        };
+        weeks: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+    args: {
+        palette: "green";
+        weeks: number;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Brand: Story;

package/dist/components/molecules/ContributionGraph/ContributionGraph.stories.js

@@ -0,0 +1,16 @@
+import ContributionGraphStory from './ContributionGraphStory.svelte';
+const meta = {
+    title: 'Molecules/ContributionGraph',
+    component: ContributionGraphStory,
+    tags: ['autodocs'],
+    argTypes: {
+        palette: { control: 'select', options: ['green', 'brand', 'blue', 'orange'] },
+        weeks: { control: { type: 'range', min: 12, max: 53, step: 1 } }
+    },
+    args: { palette: 'green', weeks: 53 }
+};
+export default meta;
+export const Default = {};
+export const Brand = {
+    args: { palette: 'brand', weeks: 26 }
+};

package/dist/components/molecules/ContributionGraph/ContributionGraph.svelte

@@ -0,0 +1,222 @@
+<script module lang="ts">
+	export interface ContributionDay {
+		/** ISO date `YYYY-MM-DD` */
+		date: string;
+		count: number;
+		/** Optional tooltip override */
+		label?: string;
+	}
+
+	export type ContributionPalette = 'green' | 'brand' | 'blue' | 'orange';
+</script>
+
+<script lang="ts">
+	interface ContributionGraphProps {
+		data?: ContributionDay[];
+		/** Weeks to show (default ~1 year) */
+		weeks?: number;
+		palette?: ContributionPalette;
+		cellSize?: number;
+		cellGap?: number;
+		showMonthLabels?: boolean;
+		showLegend?: boolean;
+		showWeekdayLabels?: boolean;
+		ariaLabel?: string;
+		class?: string;
+		onselect?: (day: ContributionDay) => void;
+	}
+
+	const LEVELS: Record<ContributionPalette, string[]> = {
+		green: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39'],
+		brand: [
+			'var(--color-surface-muted, #ebedf0)',
+			'var(--color-brand-200, #c7d2fe)',
+			'var(--color-brand-400, #818cf8)',
+			'var(--color-brand-500, #6366f1)',
+			'var(--color-brand-700, #4338ca)'
+		],
+		blue: ['#ebedf0', '#9ecbff', '#54a3ff', '#2188ff', '#005cc5'],
+		orange: ['#ebedf0', '#ffd8a8', '#ffa94d', '#fd7e14', '#e8590c']
+	};
+
+	const WEEKDAYS = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
+	const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+	let {
+		data = [],
+		weeks = 53,
+		palette = 'green',
+		cellSize = 11,
+		cellGap = 3,
+		showMonthLabels = true,
+		showLegend = true,
+		showWeekdayLabels = true,
+		ariaLabel = 'Contribution activity',
+		class: className = '',
+		onselect
+	}: ContributionGraphProps = $props();
+
+	let tip = $state<{ label: string; x: number; y: number } | null>(null);
+
+	const byDate = $derived(new Map(data.map((d) => [d.date, d])));
+
+	const colors = $derived(LEVELS[palette]);
+
+	const grid = $derived.by(() => {
+		const today = new Date();
+		today.setHours(0, 0, 0, 0);
+		const end = new Date(today);
+		// Align to Saturday end of week (like GitHub: Sun–Sat columns)
+		const day = end.getDay(); // 0=Sun
+		const start = new Date(end);
+		start.setDate(end.getDate() - day - (weeks - 1) * 7);
+
+		const columns: { date: string; count: number; label?: string; level: number }[][] = [];
+		const cursor = new Date(start);
+		const maxCount = Math.max(1, ...data.map((d) => d.count));
+
+		for (let w = 0; w < weeks; w++) {
+			const col: (typeof columns)[number] = [];
+			for (let d = 0; d < 7; d++) {
+				const iso = toIso(cursor);
+				const entry = byDate.get(iso);
+				const count = entry?.count ?? 0;
+				const level =
+					count <= 0 ? 0 : Math.min(4, Math.ceil((count / maxCount) * 4) || 1);
+				col.push({
+					date: iso,
+					count,
+					label: entry?.label,
+					level
+				});
+				cursor.setDate(cursor.getDate() + 1);
+			}
+			columns.push(col);
+		}
+		return columns;
+	});
+
+	const monthLabels = $derived.by(() => {
+		const labels: { week: number; label: string }[] = [];
+		let lastMonth = -1;
+		for (let w = 0; w < grid.length; w++) {
+			const first = grid[w]?.[0];
+			if (!first) continue;
+			const month = new Date(first.date + 'T12:00:00').getMonth();
+			if (month !== lastMonth) {
+				labels.push({ week: w, label: MONTHS[month] });
+				lastMonth = month;
+			}
+		}
+		return labels;
+	});
+
+	function toIso(d: Date) {
+		const y = d.getFullYear();
+		const m = String(d.getMonth() + 1).padStart(2, '0');
+		const day = String(d.getDate()).padStart(2, '0');
+		return `${y}-${m}-${day}`;
+	}
+
+	function levelLabel(count: number) {
+		if (count === 0) return 'No contributions';
+		return `${count} contribution${count === 1 ? '' : 's'}`;
+	}
+
+	function showTip(e: MouseEvent, day: { date: string; count: number; label?: string }) {
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		const parent = (e.currentTarget as HTMLElement).closest('[data-cg]') as HTMLElement;
+		const parentRect = parent.getBoundingClientRect();
+		tip = {
+			label: day.label ?? `${levelLabel(day.count)} on ${day.date}`,
+			x: rect.left - parentRect.left + rect.width / 2,
+			y: rect.top - parentRect.top - 8
+		};
+	}
+
+	const step = $derived(cellSize + cellGap);
+	const labelW = $derived(showWeekdayLabels ? 28 : 0);
+	const monthH = $derived(showMonthLabels ? 18 : 0);
+</script>
+
+<div
+	class={['relative inline-flex flex-col gap-2', className]}
+	data-cg
+	role="img"
+	aria-label={ariaLabel}
+>
+	{#if tip}
+		<div
+			class="pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-full whitespace-nowrap rounded-md bg-zinc-900 px-2 py-1 text-[11px] text-white shadow-md"
+			style:left={`${tip.x}px`}
+			style:top={`${tip.y}px`}
+		>
+			{tip.label}
+		</div>
+	{/if}
+
+	<svg
+		width={labelW + weeks * step}
+		height={monthH + 7 * step}
+		class="overflow-visible"
+		role="presentation"
+		onmouseleave={() => (tip = null)}
+	>
+		{#if showMonthLabels}
+			{#each monthLabels as m (m.week)}
+				<text
+					x={labelW + m.week * step}
+					y={12}
+					class="fill-muted text-[10px]"
+					style="font-size: 10px; fill: var(--text-muted, #71717a)"
+				>
+					{m.label}
+				</text>
+			{/each}
+		{/if}
+
+		{#if showWeekdayLabels}
+			{#each WEEKDAYS as label, i (i)}
+				{#if label}
+					<text
+						x={0}
+						y={monthH + i * step + cellSize - 1}
+						style="font-size: 9px; fill: var(--text-muted, #71717a)"
+					>
+						{label}
+					</text>
+				{/if}
+			{/each}
+		{/if}
+
+		{#each grid as col, wi (wi)}
+			{#each col as day, di (day.date)}
+				<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+				<rect
+					x={labelW + wi * step}
+					y={monthH + di * step}
+					width={cellSize}
+					height={cellSize}
+					rx={2}
+					ry={2}
+					fill={colors[day.level]}
+					class={onselect ? 'cursor-pointer' : undefined}
+					onmouseenter={(e) => showTip(e, day)}
+					onclick={() => onselect?.(day)}
+				>
+					<title>{day.label ?? `${levelLabel(day.count)} on ${day.date}`}</title>
+				</rect>
+			{/each}
+		{/each}
+	</svg>
+
+	{#if showLegend}
+		<div class="flex items-center justify-end gap-1 text-[10px] text-muted">
+			<span>Less</span>
+			{#each colors as c, i (i)}
+				<span class="inline-block rounded-sm" style:width={`${cellSize}px`} style:height={`${cellSize}px`} style:background={c}></span>
+			{/each}
+			<span>More</span>
+		</div>
+	{/if}
+</div>

package/dist/components/molecules/ContributionGraph/ContributionGraph.svelte.d.ts

@@ -0,0 +1,25 @@
+export interface ContributionDay {
+    /** ISO date `YYYY-MM-DD` */
+    date: string;
+    count: number;
+    /** Optional tooltip override */
+    label?: string;
+}
+export type ContributionPalette = 'green' | 'brand' | 'blue' | 'orange';
+interface ContributionGraphProps {
+    data?: ContributionDay[];
+    /** Weeks to show (default ~1 year) */
+    weeks?: number;
+    palette?: ContributionPalette;
+    cellSize?: number;
+    cellGap?: number;
+    showMonthLabels?: boolean;
+    showLegend?: boolean;
+    showWeekdayLabels?: boolean;
+    ariaLabel?: string;
+    class?: string;
+    onselect?: (day: ContributionDay) => void;
+}
+declare const ContributionGraph: import("svelte").Component<ContributionGraphProps, {}, "">;
+type ContributionGraph = ReturnType<typeof ContributionGraph>;
+export default ContributionGraph;

package/dist/components/molecules/ContributionGraph/ContributionGraphStory.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import ContributionGraph from './ContributionGraph.svelte';
+	import type { ContributionDay, ContributionPalette } from './ContributionGraph.svelte';
+
+	let {
+		palette = 'green' as ContributionPalette,
+		weeks = 53
+	} = $props<{ palette?: ContributionPalette; weeks?: number }>();
+
+	const data: ContributionDay[] = (() => {
+		const out: ContributionDay[] = [];
+		const today = new Date();
+		for (let i = 0; i < 365; i++) {
+			const d = new Date(today);
+			d.setDate(today.getDate() - i);
+			const iso = d.toISOString().slice(0, 10);
+			// Sparse activity with bursts
+			const count =
+				Math.random() > 0.55 ? 0 : Math.floor(Math.random() ** 1.6 * 12);
+			if (count > 0) out.push({ date: iso, count });
+		}
+		return out;
+	})();
+</script>
+
+<div class="overflow-x-auto rounded-2xl border border-border bg-surface-elevated p-4">
+	<p class="mb-3 text-sm font-semibold text-primary">365 contributions in the last year</p>
+	<ContributionGraph {data} {palette} {weeks} />
+</div>

package/dist/components/molecules/ContributionGraph/ContributionGraphStory.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ContributionPalette } from './ContributionGraph.svelte';
+type $$ComponentProps = {
+    palette?: ContributionPalette;
+    weeks?: number;
+};
+declare const ContributionGraphStory: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContributionGraphStory = ReturnType<typeof ContributionGraphStory>;
+export default ContributionGraphStory;

package/dist/components/molecules/CopyButton/CopyButton.stories.d.ts

@@ -0,0 +1,40 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive";
+    }, {}, "">;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            source: {
+                transformArgs: boolean;
+                componentName: string;
+                language: string;
+                extraProps: string[];
+            };
+        };
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        variant: {
+            control: "select";
+            options: string[];
+        };
+    };
+    args: {
+        size: "sm";
+        variant: "secondary";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Primary: Story;

package/dist/components/molecules/CopyButton/CopyButton.stories.js

@@ -0,0 +1,29 @@
+import CopyButtonStory from './CopyButtonStory.svelte';
+const meta = {
+    title: 'Molecules/CopyButton',
+    component: CopyButtonStory,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Show code includes the props from Controls for each story.'
+            },
+            source: {
+                transformArgs: true,
+                componentName: 'CopyButton',
+                language: 'svelte',
+                extraProps: ['value="npm i @r2digisolutions/components"', 'label="Copy"']
+            }
+        }
+    },
+    argTypes: {
+        size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+        variant: { control: 'select', options: ['primary', 'secondary', 'ghost', 'outline', 'destructive'] }
+    },
+    args: { size: 'sm', variant: 'secondary' }
+};
+export default meta;
+export const Default = {};
+export const Primary = {
+    args: { size: 'md', variant: 'primary' }
+};

package/dist/components/molecules/CopyButton/CopyButton.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+
+	interface CopyButtonProps {
+		value: string;
+		label?: string;
+		copiedLabel?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'destructive';
+		class?: string;
+		oncopy?: () => void;
+	}
+
+	let {
+		value,
+		label = 'Copy',
+		copiedLabel = 'Copied',
+		size = 'sm',
+		variant = 'secondary',
+		class: className = '',
+		oncopy
+	}: CopyButtonProps = $props();
+
+	let copied = $state(false);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(value);
+			copied = true;
+			oncopy?.();
+			clearTimeout(timer);
+			timer = setTimeout(() => (copied = false), 1600);
+		} catch {
+			copied = false;
+		}
+	}
+</script>
+
+<Button {variant} {size} class={className} onclick={copy}>
+	{#if copied}
+		<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+		</svg>
+		{copiedLabel}
+	{:else}
+		<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+			<rect x="9" y="9" width="13" height="13" rx="2" />
+			<path stroke-linecap="round" stroke-linejoin="round" d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+		</svg>
+		{label}
+	{/if}
+</Button>