@r2digisolutions/components 0.6.0 → 0.6.1

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;

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

@@ -0,0 +1,8 @@
+import ComboboxItemStory from './ComboboxItemStory.svelte';
+const meta = {
+    title: 'Molecules/ComboboxItem',
+    component: ComboboxItemStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/ComboboxItem/ComboboxItem.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Check from '@lucide/svelte/icons/check';
+	import { getComboboxContext } from '../Combobox/combobox-context.js';
+
+	interface ComboboxItemProps {
+		value: string;
+		/** Used for default text and query filtering when nested in `Combobox`. */
+		label?: string;
+		disabled?: boolean;
+		/** Extra strings matched against the parent `Combobox` query. */
+		keywords?: string[];
+		/**
+		 * When omitted, selection comes from the parent `Combobox`.
+		 * Pass explicitly when using the item standalone.
+		 */
+		selected?: boolean;
+		/**
+		 * When omitted, highlight comes from the parent `Combobox`.
+		 * Pass explicitly when using the item standalone.
+		 */
+		highlighted?: boolean;
+		/**
+		 * Register this row for keyboard navigation / query filtering.
+		 * Internal `Combobox` rows set this to `false` (parent already filters).
+		 */
+		register?: boolean;
+		class?: string;
+		children?: Snippet;
+		leading?: Snippet;
+		trailing?: Snippet;
+		onclick?: () => void;
+		onhighlight?: () => void;
+	}
+
+	let {
+		value,
+		label = '',
+		disabled = false,
+		keywords = [],
+		selected,
+		highlighted,
+		register = true,
+		class: className = '',
+		children,
+		leading,
+		trailing,
+		onclick,
+		onhighlight
+	}: ComboboxItemProps = $props();
+
+	const ctx = getComboboxContext();
+
+	const matchesQuery = $derived.by(() => {
+		if (!register || !ctx) return true;
+		const q = ctx.getQuery().trim().toLowerCase();
+		if (!q) return true;
+		const blob = [label, value, ...keywords].join(' ').toLowerCase();
+		return blob.includes(q);
+	});
+
+	const isSelected = $derived(selected ?? (ctx ? ctx.getValue() === value : false));
+	const isHighlighted = $derived(highlighted ?? (ctx ? ctx.getHighlighted() === value : false));
+	const active = $derived(!disabled && (isHighlighted || isSelected));
+
+	$effect(() => {
+		if (!register || !ctx || disabled || !matchesQuery) return;
+		return ctx.register(value, disabled, label);
+	});
+
+	function activate() {
+		if (disabled) return;
+		if (onclick) {
+			onclick();
+			return;
+		}
+		ctx?.select(value);
+	}
+</script>
+
+{#if matchesQuery}
+	<button
+		type="button"
+		role="option"
+		data-value={value}
+		{disabled}
+		aria-selected={isSelected}
+		aria-disabled={disabled}
+		onpointerenter={() => {
+			if (disabled) return;
+			onhighlight?.();
+			ctx?.highlight(value);
+		}}
+		onclick={activate}
+		class={[
+			'gap-2 rounded-lg px-2.5 py-2 text-sm flex w-full items-center text-left transition-colors',
+			'focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
+			disabled && 'cursor-not-allowed opacity-40',
+			!disabled && (active ? 'bg-brand-500 text-white' : 'text-primary hover:bg-surface-overlay'),
+			className
+		]}
+	>
+		{#if leading}
+			<span class="flex shrink-0 items-center">{@render leading()}</span>
+		{/if}
+
+		<span class={['min-w-0 flex-1', !children && 'truncate']}>
+			{#if children}
+				{@render children()}
+			{:else}
+				{label || value}
+			{/if}
+		</span>
+
+		{#if trailing}
+			<span class="flex shrink-0 items-center">{@render trailing()}</span>
+		{:else if isSelected}
+			<Check class="h-4 w-4 shrink-0" strokeWidth={2.5} />
+		{/if}
+	</button>
+{/if}