@r2digisolutions/components 0.5.0 → 0.6.1

package/dist/components/atoms/Button/Button.stories.d.ts

@@ -7,6 +7,7 @@ declare const meta: {
         loading?: boolean;
         disabled?: boolean;
         fullWidth?: boolean;
+        href?: string;
         label?: string;
     }, {}, "">;
     tags: string[];
@@ -33,6 +34,10 @@ declare const meta: {
             control: "boolean";
             description: string;
         };
+        href: {
+            control: "text";
+            description: string;
+        };
         label: {
             control: "text";
             description: string;
@@ -59,3 +64,4 @@ export declare const Disabled: Story;
 export declare const ExtraSmall: Story;
 export declare const Large: Story;
 export declare const FullWidth: Story;
+export declare const AsLink: Story;

package/dist/components/atoms/Button/Button.stories.js

@@ -26,6 +26,10 @@ const meta = {
             control: 'boolean',
             description: 'Makes the button take full container width'
         },
+        href: {
+            control: 'text',
+            description: 'If set, renders as an anchor instead of a button'
+        },
         label: {
             control: 'text',
             description: 'Button text content'
@@ -71,3 +75,6 @@ export const Large = {
 export const FullWidth = {
     args: { fullWidth: true, label: 'Full Width' }
 };
+export const AsLink = {
+    args: { href: '#', label: 'Go to page' }
+};

package/dist/components/atoms/Button/Button.svelte

@@ -10,6 +10,7 @@
 		loading?: boolean;
 		disabled?: boolean;
 		fullWidth?: boolean;
+		href?: string;
 		type?: 'button' | 'submit' | 'reset';
 		class?: string;
 		children?: Snippet;
@@ -23,6 +24,7 @@
 		loading = false,
 		disabled = false,
 		fullWidth = false,
+		href,
 		type = 'button',
 		class: className = '',
 		children,
@@ -31,6 +33,7 @@
 	}: ButtonProps = $props();
 
 	const isDisabled = $derived(disabled || loading);
+	const tag = $derived(href ? 'a' : 'button');
 
 	const baseClasses =
 		'relative inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 select-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 overflow-hidden';
@@ -65,24 +68,28 @@
 	};
 </script>
 
-<button
-	{type}
+<svelte:element
+	this={tag}
+	href={isDisabled ? undefined : href}
+	type={href ? undefined : type}
+	disabled={href ? undefined : isDisabled}
+	aria-disabled={href && isDisabled ? true : undefined}
+	aria-busy={loading}
 	class={[
 		baseClasses,
 		variantClasses[variant],
 		sizeClasses[size],
 		(size === 'md' || size === 'lg' || size === 'xl') && 'touch-target',
 		fullWidth && 'w-full',
+		href && isDisabled && 'pointer-events-none cursor-not-allowed opacity-50',
 		className
 	]}
-	disabled={isDisabled}
-	aria-busy={loading}
 	{onclick}
 	{...rest}
 >
 	{#if loading}
 		<!-- Spinner overlay -->
-		<span class="absolute inset-0 flex items-center justify-center">
+		<span class="inset-0 absolute flex items-center justify-center">
 			<svg
 				class={['animate-spin', iconSizeClasses[size]]}
 				xmlns="http://www.w3.org/2000/svg"
@@ -90,18 +97,9 @@
 				viewBox="0 0 24 24"
 				aria-hidden="true"
 			>
-				<circle
-					class="opacity-25"
-					cx="12"
-					cy="12"
-					r="10"
-					stroke="currentColor"
-					stroke-width="4"
+				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
 				></circle>
-				<path
-					class="opacity-75"
-					fill="currentColor"
-					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
 				></path>
 			</svg>
 		</span>
@@ -112,4 +110,4 @@
 	{:else}
 		{@render children?.()}
 	{/if}
-</button>
+</svelte:element>

package/dist/components/atoms/Button/Button.svelte.d.ts

@@ -7,6 +7,7 @@ interface ButtonProps {
     loading?: boolean;
     disabled?: boolean;
     fullWidth?: boolean;
+    href?: string;
     type?: 'button' | 'submit' | 'reset';
     class?: string;
     children?: Snippet;

package/dist/components/atoms/Button/ButtonStory.svelte

@@ -7,6 +7,7 @@
 		loading?: boolean;
 		disabled?: boolean;
 		fullWidth?: boolean;
+		href?: string;
 		label?: string;
 	}>();
 </script>
@@ -18,6 +19,7 @@
 		loading={props.loading ?? false}
 		disabled={props.disabled ?? false}
 		fullWidth={props.fullWidth ?? false}
+		href={props.href}
 	>
 		{props.label ?? 'Button'}
 	</Button>

package/dist/components/atoms/Button/ButtonStory.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     loading?: boolean;
     disabled?: boolean;
     fullWidth?: boolean;
+    href?: string;
     label?: string;
 };
 declare const ButtonStory: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -5,6 +5,7 @@ declare const meta: {
         creatable?: boolean;
         label?: string;
         disabled?: boolean;
+        compound?: boolean;
     }, {}, "">;
     tags: string[];
     argTypes: {
@@ -14,11 +15,15 @@ declare const meta: {
         disabled: {
             control: "boolean";
         };
+        compound: {
+            control: "boolean";
+        };
     };
     args: {
         creatable: false;
         label: string;
         disabled: false;
+        compound: false;
     };
 };
 export default meta;
@@ -26,3 +31,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Creatable: Story;
 export declare const Disabled: Story;
+export declare const WithComboboxItem: Story;

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

@@ -5,15 +5,18 @@ const meta = {
     tags: ['autodocs'],
     argTypes: {
         creatable: { control: 'boolean' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        compound: { control: 'boolean' }
     },
     args: {
         creatable: false,
         label: 'Framework',
-        disabled: false
+        disabled: false,
+        compound: false
     }
 };
 export default meta;
 export const Default = {};
 export const Creatable = { args: { creatable: true } };
 export const Disabled = { args: { disabled: true } };
+export const WithComboboxItem = { args: { compound: true } };

package/dist/components/molecules/Combobox/Combobox.svelte

@@ -1,10 +1,24 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ComboboxItem from '../ComboboxItem/ComboboxItem.svelte';
+	import {
+		COMBOBOX_CREATE_KEY,
+		setComboboxContext,
+		type ComboboxContext
+	} from './combobox-context.js';
+
 	export interface ComboboxOption {
 		value: string;
 		label: string;
 		disabled?: boolean;
 	}
 
+	export interface ComboboxItemState {
+		selected: boolean;
+		highlighted: boolean;
+		index: number;
+	}
+
 	interface ComboboxProps {
 		options?: ComboboxOption[];
 		value?: string;
@@ -19,6 +33,15 @@
 		emptyText?: string;
 		createText?: (query: string) => string;
 		class?: string;
+		/**
+		 * Custom row for each `options` entry. If omitted, rows use `ComboboxItem`.
+		 */
+		item?: Snippet<[ComboboxOption, ComboboxItemState]>;
+		/**
+		 * Extra (or fully custom) `ComboboxItem` rows rendered in the listbox.
+		 * Nested items register for keyboard nav and filter against `query`.
+		 */
+		children?: Snippet;
 		onchange?: (value: string) => void;
 		oncreate?: (value: string) => void;
 	}
@@ -35,6 +58,8 @@
 		emptyText = 'No results',
 		createText = (q) => `Create “${q}”`,
 		class: className = '',
+		item: itemSnippet,
+		children,
 		onchange,
 		oncreate
 	}: ComboboxProps = $props();
@@ -42,6 +67,10 @@
 	let rootEl = $state<HTMLDivElement | null>(null);
 	let inputEl = $state<HTMLInputElement | null>(null);
 	let highlighted = $state(0);
+	let childEntries = $state<{ id: number; value: string; disabled: boolean; label: string }[]>([]);
+	let nextChildId = 0;
+	const uid = $props.id();
+	const listboxId = `${uid}-listbox`;
 
 	const selected = $derived(options.find((o) => o.value === value));
 
@@ -61,12 +90,33 @@
 	});
 
 	const items = $derived.by(() => {
-		const list: Array<{ kind: 'option'; option: ComboboxOption } | { kind: 'create'; label: string }> =
-			filtered.map((option) => ({ kind: 'option' as const, option }));
+		const list: Array<
+			{ kind: 'option'; option: ComboboxOption } | { kind: 'create'; label: string }
+		> = filtered.map((option) => ({ kind: 'option' as const, option }));
 		if (canCreate) list.push({ kind: 'create', label: createText(query.trim()) });
 		return list;
 	});
 
+	function itemKey(
+		item: { kind: 'option'; option: ComboboxOption } | { kind: 'create'; label: string }
+	): string {
+		return item.kind === 'create' ? COMBOBOX_CREATE_KEY : item.option.value;
+	}
+
+	const navKeys = $derived.by(() => {
+		const keys = items.map(itemKey);
+		for (const entry of childEntries) {
+			if (!entry.disabled && !keys.includes(entry.value)) keys.push(entry.value);
+		}
+		return keys;
+	});
+
+	const activeIndex = $derived(
+		navKeys.length === 0 ? 0 : Math.min(highlighted, navKeys.length - 1)
+	);
+	const highlightedKey = $derived(navKeys[activeIndex] ?? null);
+	const hasRows = $derived(items.length > 0 || childEntries.length > 0 || Boolean(children));
+
 	function setOpen(next: boolean) {
 		if (disabled) return;
 		open = next;
@@ -93,6 +143,28 @@
 		setOpen(false);
 	}
 
+	function selectByKey(key: string) {
+		if (key === COMBOBOX_CREATE_KEY) {
+			createOption();
+			return;
+		}
+		const option = options.find((o) => o.value === key);
+		if (option) {
+			selectOption(option);
+			return;
+		}
+		const child = childEntries.find((entry) => entry.value === key);
+		value = key;
+		query = child?.label || key;
+		onchange?.(key);
+		setOpen(false);
+	}
+
+	function highlightByKey(key: string) {
+		const index = navKeys.indexOf(key);
+		if (index >= 0) highlighted = index;
+	}
+
 	function onInput() {
 		setOpen(true);
 		highlighted = 0;
@@ -113,21 +185,20 @@
 		if (e.key === 'ArrowDown') {
 			e.preventDefault();
 			if (!open) setOpen(true);
-			else if (items.length) highlighted = (highlighted + 1) % items.length;
+			else if (navKeys.length) highlighted = (activeIndex + 1) % navKeys.length;
 			return;
 		}
 		if (e.key === 'ArrowUp') {
 			e.preventDefault();
 			if (!open) setOpen(true);
-			else if (items.length) highlighted = (highlighted - 1 + items.length) % items.length;
+			else if (navKeys.length) highlighted = (activeIndex - 1 + navKeys.length) % navKeys.length;
 			return;
 		}
 		if (e.key === 'Enter') {
 			e.preventDefault();
-			const item = items[highlighted];
-			if (!item) return;
-			if (item.kind === 'create') createOption();
-			else selectOption(item.option);
+			const key = navKeys[activeIndex];
+			if (!key) return;
+			selectByKey(key);
 			return;
 		}
 		if (e.key === 'Escape') {
@@ -150,24 +221,44 @@
 			query = selected.label;
 		}
 	});
+
+	const ctx: ComboboxContext = {
+		getValue: () => value,
+		getQuery: () => query,
+		getHighlighted: () => highlightedKey,
+		select: selectByKey,
+		highlight: highlightByKey,
+		register: (childValue, childDisabled, childLabel = '') => {
+			const id = ++nextChildId;
+			childEntries = [
+				...childEntries,
+				{ id, value: childValue, disabled: childDisabled, label: childLabel }
+			];
+			return () => {
+				childEntries = childEntries.filter((entry) => entry.id !== id);
+			};
+		}
+	};
+
+	setComboboxContext(ctx);
 </script>
 
 <svelte:document onpointerdown={onDocPointerDown} />
 
-<div class={['relative w-full max-w-sm', className]} bind:this={rootEl}>
+<div class={['max-w-sm relative w-full', className]} bind:this={rootEl}>
 	{#if label}
-		<span class="mb-1.5 block text-sm font-medium text-primary">{label}</span>
+		<span class="mb-1.5 text-sm font-medium text-primary block">{label}</span>
 	{/if}
 
 	<div
 		class={[
-			'flex h-10 items-center gap-2 rounded-xl border border-border bg-surface-elevated px-3 transition-colors',
-			open && 'border-brand-500 ring-2 ring-brand-500/20',
+			'h-10 gap-2 rounded-xl border-border bg-surface-elevated px-3 flex items-center border transition-colors',
+			open && 'border-brand-500 ring-brand-500/20 ring-2',
 			disabled && 'cursor-not-allowed opacity-60'
 		]}
 	>
 		<svg
-			class="h-4 w-4 shrink-0 text-muted"
+			class="h-4 w-4 text-muted shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -187,12 +278,13 @@
 			{disabled}
 			role="combobox"
 			aria-expanded={open}
+			aria-controls={listboxId}
 			aria-autocomplete="list"
 			autocomplete="off"
 			oninput={onInput}
 			onfocus={onFocus}
 			onkeydown={onKeydown}
-			class="min-w-0 flex-1 bg-transparent text-sm text-primary outline-none placeholder:text-muted"
+			class="min-w-0 text-sm text-primary placeholder:text-muted flex-1 bg-transparent outline-none"
 		/>
 		{#if query && !disabled}
 			<button
@@ -207,7 +299,13 @@
 				}}
 				class="text-muted hover:text-primary"
 			>
-				<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<svg
+					class="h-3.5 w-3.5"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+				>
 					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 				</svg>
 			</button>
@@ -216,67 +314,60 @@
 
 	{#if open}
 		<div
+			id={listboxId}
 			role="listbox"
-			class="absolute left-0 right-0 z-50 mt-2 max-h-60 overflow-y-auto rounded-xl border border-border bg-surface-elevated p-1.5 shadow-xl"
+			class="left-0 right-0 mt-2 max-h-60 rounded-xl border-border bg-surface-elevated p-1.5 shadow-xl absolute z-50 overflow-y-auto border"
 		>
-			{#if items.length === 0}
-				<div class="px-3 py-2.5 text-center text-xs text-muted">{emptyText}</div>
+			{#if !hasRows}
+				<div class="px-3 py-2.5 text-xs text-muted text-center">{emptyText}</div>
 			{:else}
-				{#each items as item, index (item.kind === 'option' ? item.option.value : 'create')}
+				{#each items as item, index (itemKey(item))}
 					{#if item.kind === 'create'}
-						<button
-							type="button"
-							role="option"
-							aria-selected={highlighted === index}
-							onpointerenter={() => (highlighted = index)}
+						<ComboboxItem
+							value={COMBOBOX_CREATE_KEY}
+							label={item.label}
+							highlighted={activeIndex === index}
+							register={false}
 							onclick={createOption}
-							class={[
-								'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm',
-								highlighted === index ? 'bg-brand-500 text-white' : 'text-primary hover:bg-surface-overlay'
-							]}
 						>
-							<svg
-								class="h-4 w-4 shrink-0"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								aria-hidden="true"
-							>
-								<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-							</svg>
+							{#snippet leading()}
+								<svg
+									class="h-4 w-4 shrink-0"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									aria-hidden="true"
+								>
+									<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+								</svg>
+							{/snippet}
 							{item.label}
-						</button>
+						</ComboboxItem>
 					{:else}
 						{@const option = item.option}
 						{@const isSelected = value === option.value}
-						<button
-							type="button"
-							role="option"
-							disabled={option.disabled}
-							aria-selected={isSelected}
-							onpointerenter={() => {
-								if (!option.disabled) highlighted = index;
-							}}
-							onclick={() => selectOption(option)}
-							class={[
-								'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm',
-								option.disabled && 'cursor-not-allowed opacity-40',
-								!option.disabled &&
-									(highlighted === index || isSelected
-										? 'bg-brand-500 text-white'
-										: 'text-primary hover:bg-surface-overlay')
-							]}
-						>
-							<span class="min-w-0 flex-1 truncate">{option.label}</span>
-							{#if isSelected}
-								<svg class="h-4 w-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-									<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-								</svg>
-							{/if}
-						</button>
+						{@const isHighlighted = activeIndex === index}
+						{#if itemSnippet}
+							{@render itemSnippet(option, {
+								selected: isSelected,
+								highlighted: isHighlighted,
+								index
+							})}
+						{:else}
+							<ComboboxItem
+								value={option.value}
+								label={option.label}
+								disabled={option.disabled}
+								selected={isSelected}
+								highlighted={isHighlighted}
+								register={false}
+								onclick={() => selectOption(option)}
+							/>
+						{/if}
 					{/if}
 				{/each}
+				{@render children?.()}
 			{/if}
 		</div>
 	{/if}

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

@@ -1,8 +1,14 @@
+import type { Snippet } from 'svelte';
 export interface ComboboxOption {
     value: string;
     label: string;
     disabled?: boolean;
 }
+export interface ComboboxItemState {
+    selected: boolean;
+    highlighted: boolean;
+    index: number;
+}
 interface ComboboxProps {
     options?: ComboboxOption[];
     value?: string;
@@ -17,6 +23,15 @@ interface ComboboxProps {
     emptyText?: string;
     createText?: (query: string) => string;
     class?: string;
+    /**
+     * Custom row for each `options` entry. If omitted, rows use `ComboboxItem`.
+     */
+    item?: Snippet<[ComboboxOption, ComboboxItemState]>;
+    /**
+     * Extra (or fully custom) `ComboboxItem` rows rendered in the listbox.
+     * Nested items register for keyboard nav and filter against `query`.
+     */
+    children?: Snippet;
     onchange?: (value: string) => void;
     oncreate?: (value: string) => void;
 }

package/dist/components/molecules/Combobox/ComboboxStory.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
 	import Combobox, { type ComboboxOption } from './Combobox.svelte';
+	import ComboboxItem from '../ComboboxItem/ComboboxItem.svelte';
 
 	let {
 		creatable = false,
 		label = 'Framework',
-		disabled = false
+		disabled = false,
+		compound = false
 	}: {
 		creatable?: boolean;
 		label?: string;
 		disabled?: boolean;
+		compound?: boolean;
 	} = $props();
 
 	const options: ComboboxOption[] = [
@@ -25,17 +28,27 @@
 	let open = $state(false);
 </script>
 
-<div class="flex w-80 flex-col gap-3">
-	<Combobox
-		{options}
-		{label}
-		{creatable}
-		{disabled}
-		bind:value
-		bind:query
-		bind:open
-		placeholder="Search frameworks…"
-	/>
+<div class="w-80 gap-3 flex flex-col">
+	{#if compound}
+		<Combobox {label} {disabled} bind:value bind:query bind:open placeholder="Search frameworks…">
+			{#each options as option (option.value)}
+				<ComboboxItem value={option.value} label={option.label} disabled={option.disabled}>
+					{option.label}
+				</ComboboxItem>
+			{/each}
+		</Combobox>
+	{:else}
+		<Combobox
+			{options}
+			{label}
+			{creatable}
+			{disabled}
+			bind:value
+			bind:query
+			bind:open
+			placeholder="Search frameworks…"
+		/>
+	{/if}
 	<p class="text-xs text-muted">
 		Value: <span class="text-primary">{value || '—'}</span>
 	</p>

package/dist/components/molecules/Combobox/ComboboxStory.svelte.d.ts

@@ -2,6 +2,7 @@ type $$ComponentProps = {
     creatable?: boolean;
     label?: string;
     disabled?: boolean;
+    compound?: boolean;
 };
 declare const ComboboxStory: import("svelte").Component<$$ComponentProps, {}, "">;
 type ComboboxStory = ReturnType<typeof ComboboxStory>;

package/dist/components/molecules/Combobox/combobox-context.d.ts

@@ -0,0 +1,12 @@
+export declare const COMBOBOX_CONTEXT: unique symbol;
+export declare const COMBOBOX_CREATE_KEY = "__create__";
+export interface ComboboxContext {
+    getValue: () => string;
+    getQuery: () => string;
+    getHighlighted: () => string | null;
+    select: (value: string) => void;
+    highlight: (value: string) => void;
+    register: (value: string, disabled: boolean, label?: string) => () => void;
+}
+export declare function setComboboxContext(ctx: ComboboxContext): ComboboxContext;
+export declare function getComboboxContext(): ComboboxContext | null;

package/dist/components/molecules/Combobox/combobox-context.js

@@ -0,0 +1,10 @@
+import { getContext, setContext } from 'svelte';
+export const COMBOBOX_CONTEXT = Symbol('r2-combobox');
+export const COMBOBOX_CREATE_KEY = '__create__';
+export function setComboboxContext(ctx) {
+    setContext(COMBOBOX_CONTEXT, ctx);
+    return ctx;
+}
+export function getComboboxContext() {
+    return getContext(COMBOBOX_CONTEXT) ?? null;
+}

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

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;