@r2digisolutions/components 0.6.2 → 0.6.3

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

@@ -6,6 +6,7 @@ declare const meta: {
         label?: string;
         disabled?: boolean;
         compound?: boolean;
+        menuItems?: boolean;
     }, {}, "">;
     tags: string[];
     argTypes: {
@@ -18,12 +19,16 @@ declare const meta: {
         compound: {
             control: "boolean";
         };
+        menuItems: {
+            control: "boolean";
+        };
     };
     args: {
         creatable: false;
         label: string;
         disabled: false;
         compound: false;
+        menuItems: false;
     };
 };
 export default meta;
@@ -32,3 +37,4 @@ export declare const Default: Story;
 export declare const Creatable: Story;
 export declare const Disabled: Story;
 export declare const WithComboboxItem: Story;
+export declare const WithComboboxMenuItem: Story;

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

@@ -6,13 +6,15 @@ const meta = {
     argTypes: {
         creatable: { control: 'boolean' },
         disabled: { control: 'boolean' },
-        compound: { control: 'boolean' }
+        compound: { control: 'boolean' },
+        menuItems: { control: 'boolean' }
     },
     args: {
         creatable: false,
         label: 'Framework',
         disabled: false,
-        compound: false
+        compound: false,
+        menuItems: false
     }
 };
 export default meta;
@@ -20,3 +22,4 @@ export const Default = {};
 export const Creatable = { args: { creatable: true } };
 export const Disabled = { args: { disabled: true } };
 export const WithComboboxItem = { args: { compound: true } };
+export const WithComboboxMenuItem = { args: { menuItems: true } };

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

@@ -1,17 +1,20 @@
 <script lang="ts">
 	import Combobox, { type ComboboxOption } from './Combobox.svelte';
 	import ComboboxItem from '../ComboboxItem/ComboboxItem.svelte';
+	import ComboboxMenuItem from '../ComboboxMenuItem/ComboboxMenuItem.svelte';
 
 	let {
 		creatable = false,
 		label = 'Framework',
 		disabled = false,
-		compound = false
+		compound = false,
+		menuItems = false
 	}: {
 		creatable?: boolean;
 		label?: string;
 		disabled?: boolean;
 		compound?: boolean;
+		menuItems?: boolean;
 	} = $props();
 
 	const options: ComboboxOption[] = [
@@ -29,7 +32,13 @@
 </script>
 
 <div class="w-80 gap-3 flex flex-col">
-	{#if compound}
+	{#if menuItems}
+		<Combobox {label} {disabled} bind:value bind:query bind:open placeholder="Search frameworks…">
+			{#each options as option (option.value)}
+				<ComboboxMenuItem value={option.value} label={option.label} disabled={option.disabled} />
+			{/each}
+		</Combobox>
+	{:else 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}>

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

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

package/dist/components/molecules/Combobox/combobox-item.svelte.d.ts

@@ -0,0 +1,17 @@
+export interface ComboboxItemInput {
+    value: string;
+    label: string;
+    disabled: boolean;
+    keywords: string[];
+    selected: boolean | undefined;
+    highlighted: boolean | undefined;
+    register: boolean;
+    onclick?: () => void;
+}
+export declare function createComboboxItemController(getInput: () => ComboboxItemInput): {
+    readonly matchesQuery: boolean;
+    readonly isSelected: boolean;
+    readonly isHighlighted: boolean;
+    activate: () => void;
+    highlight: () => void;
+};

package/dist/components/molecules/Combobox/combobox-item.svelte.js

@@ -0,0 +1,57 @@
+import { getComboboxContext } from './combobox-context.js';
+export function createComboboxItemController(getInput) {
+    const ctx = getComboboxContext();
+    const matchesQuery = $derived.by(() => {
+        const input = getInput();
+        if (!input.register || !ctx)
+            return true;
+        const q = ctx.getQuery().trim().toLowerCase();
+        if (!q)
+            return true;
+        const blob = [input.label, input.value, ...input.keywords].join(' ').toLowerCase();
+        return blob.includes(q);
+    });
+    const isSelected = $derived.by(() => {
+        const input = getInput();
+        return input.selected ?? (ctx ? ctx.getValue() === input.value : false);
+    });
+    const isHighlighted = $derived.by(() => {
+        const input = getInput();
+        return input.highlighted ?? (ctx ? ctx.getHighlighted() === input.value : false);
+    });
+    $effect(() => {
+        const input = getInput();
+        if (!input.register || !ctx || input.disabled || !matchesQuery)
+            return;
+        return ctx.register(input.value, input.disabled, input.label);
+    });
+    function activate() {
+        const input = getInput();
+        if (input.disabled)
+            return;
+        if (input.onclick) {
+            input.onclick();
+            return;
+        }
+        ctx?.select(input.value);
+    }
+    function highlight() {
+        const input = getInput();
+        if (input.disabled)
+            return;
+        ctx?.highlight(input.value);
+    }
+    return {
+        get matchesQuery() {
+            return matchesQuery;
+        },
+        get isSelected() {
+            return isSelected;
+        },
+        get isHighlighted() {
+            return isHighlighted;
+        },
+        activate,
+        highlight
+    };
+}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import Check from '@lucide/svelte/icons/check';
-	import { getComboboxContext } from '../Combobox/combobox-context.js';
+	import { createComboboxItemController } from '../Combobox/combobox-item.svelte.js';
 
 	interface ComboboxItemProps {
 		value: string;
@@ -49,54 +49,39 @@
 		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);
-	}
+	const item = createComboboxItemController(() => ({
+		value,
+		label,
+		disabled,
+		keywords,
+		selected,
+		highlighted,
+		register,
+		onclick
+	}));
 </script>
 
-{#if matchesQuery}
+{#if item.matchesQuery}
 	<button
 		type="button"
 		role="option"
 		data-value={value}
 		{disabled}
-		aria-selected={isSelected}
+		aria-selected={item.isSelected}
 		aria-disabled={disabled}
 		onpointerenter={() => {
-			if (disabled) return;
 			onhighlight?.();
-			ctx?.highlight(value);
+			item.highlight();
 		}}
-		onclick={activate}
+		onclick={item.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'),
+			!disabled &&
+				(item.isHighlighted || item.isSelected
+					? 'bg-brand-500 text-white'
+					: 'text-primary hover:bg-surface-overlay'),
 			className
 		]}
 	>
@@ -114,7 +99,7 @@
 
 		{#if trailing}
 			<span class="flex shrink-0 items-center">{@render trailing()}</span>
-		{:else if isSelected}
+		{:else if item.isSelected}
 			<Check class="h-4 w-4 shrink-0" strokeWidth={2.5} />
 		{/if}
 	</button>

package/dist/components/molecules/ComboboxMenuItem/ComboboxMenuItem.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/ComboboxMenuItem/ComboboxMenuItem.stories.js

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

package/dist/components/molecules/ComboboxMenuItem/ComboboxMenuItem.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Check from '@lucide/svelte/icons/check';
+	import { createComboboxItemController } from '../Combobox/combobox-item.svelte.js';
+
+	interface ComboboxMenuItemProps {
+		value: string;
+		label?: string;
+		disabled?: boolean;
+		keywords?: string[];
+		selected?: boolean;
+		highlighted?: boolean;
+		register?: boolean;
+		class?: string;
+		children?: Snippet;
+		onclick?: () => void;
+		onhighlight?: () => void;
+	}
+
+	let {
+		value,
+		label = '',
+		disabled = false,
+		keywords = [],
+		selected,
+		highlighted,
+		register = true,
+		class: className = '',
+		children,
+		onclick,
+		onhighlight
+	}: ComboboxMenuItemProps = $props();
+
+	const item = createComboboxItemController(() => ({
+		value,
+		label,
+		disabled,
+		keywords,
+		selected,
+		highlighted,
+		register,
+		onclick
+	}));
+</script>
+
+{#if item.matchesQuery}
+	<button
+		type="button"
+		role="option"
+		data-value={value}
+		{disabled}
+		aria-selected={item.isSelected}
+		aria-disabled={disabled}
+		onpointerenter={() => {
+			onhighlight?.();
+			item.highlight();
+		}}
+		onclick={item.activate}
+		class={[
+			'rounded-lg py-1.5 pr-2 pl-8 text-sm relative flex w-full cursor-default items-center text-left outline-none select-none',
+			'focus-visible:ring-brand-500/30 transition-colors focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
+			disabled && 'cursor-not-allowed opacity-40',
+			!disabled && item.isHighlighted && 'bg-surface-overlay',
+			!disabled && !item.isHighlighted && 'hover:bg-surface-overlay',
+			!disabled && item.isSelected && 'font-medium text-brand-600 dark:text-brand-400',
+			!disabled && !item.isSelected && 'text-primary',
+			className
+		]}
+	>
+		<span class="left-2 h-3.5 w-3.5 absolute flex items-center justify-center" aria-hidden="true">
+			{#if item.isSelected}
+				<Check class="h-3.5 w-3.5" strokeWidth={2.5} />
+			{/if}
+		</span>
+
+		<span class={['min-w-0 flex-1', !children && 'truncate']}>
+			{#if children}
+				{@render children()}
+			{:else}
+				{label || value}
+			{/if}
+		</span>
+	</button>
+{/if}

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface ComboboxMenuItemProps {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    keywords?: string[];
+    selected?: boolean;
+    highlighted?: boolean;
+    register?: boolean;
+    class?: string;
+    children?: Snippet;
+    onclick?: () => void;
+    onhighlight?: () => void;
+}
+declare const ComboboxMenuItem: import("svelte").Component<ComboboxMenuItemProps, {}, "">;
+type ComboboxMenuItem = ReturnType<typeof ComboboxMenuItem>;
+export default ComboboxMenuItem;

package/dist/components/molecules/ComboboxMenuItem/ComboboxMenuItemStory.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import ComboboxMenuItem from './ComboboxMenuItem.svelte';
+
+	let selected = $state('svelte');
+	let highlighted = $state('svelte');
+
+	const frameworks = [
+		{ value: 'svelte', label: 'Svelte' },
+		{ value: 'react', label: 'React' },
+		{ value: 'vue', label: 'Vue' },
+		{ value: 'solid', label: 'Solid' },
+		{ value: 'qwik', label: 'Qwik', disabled: true }
+	];
+</script>
+
+<div class="max-w-sm space-y-3 w-full">
+	<div class="space-y-1">
+		<p class="text-sm font-semibold text-primary">ComboboxMenuItem</p>
+		<p class="text-xs text-secondary">
+			Fila compacta con check a la izquierda, como el combobox de selección. No pinta el fondo
+			brand.
+		</p>
+	</div>
+
+	<div class="rounded-xl border-border bg-surface-elevated p-1 shadow-sm border">
+		{#each frameworks as fw (fw.value)}
+			<ComboboxMenuItem
+				value={fw.value}
+				label={fw.label}
+				disabled={fw.disabled}
+				selected={selected === fw.value}
+				highlighted={highlighted === fw.value}
+				onclick={() => (selected = fw.value)}
+				onhighlight={() => (highlighted = fw.value)}
+			/>
+		{/each}
+	</div>
+
+	<p class="text-xs text-muted">
+		Value: <span class="text-primary">{selected}</span>
+	</p>
+</div>

package/dist/components/molecules/ComboboxMenuItem/ComboboxMenuItemStory.svelte.d.ts

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

package/dist/index.d.ts

@@ -212,6 +212,7 @@ export { default as DateRangePicker } from './components/molecules/DateRangePick
 export { default as Combobox } from './components/molecules/Combobox/Combobox.svelte';
 export type { ComboboxOption, ComboboxItemState } from './components/molecules/Combobox/Combobox.svelte';
 export { default as ComboboxItem } from './components/molecules/ComboboxItem/ComboboxItem.svelte';
+export { default as ComboboxMenuItem } from './components/molecules/ComboboxMenuItem/ComboboxMenuItem.svelte';
 export { COMBOBOX_CONTEXT, COMBOBOX_CREATE_KEY, getComboboxContext, setComboboxContext } from './components/molecules/Combobox/combobox-context.js';
 export type { ComboboxContext } from './components/molecules/Combobox/combobox-context.js';
 export { default as MultiSelect } from './components/molecules/MultiSelect/MultiSelect.svelte';

package/dist/index.js

@@ -167,6 +167,7 @@ export { default as DateTimePicker } from './components/molecules/DateTimePicker
 export { default as DateRangePicker } from './components/molecules/DateRangePicker/DateRangePicker.svelte';
 export { default as Combobox } from './components/molecules/Combobox/Combobox.svelte';
 export { default as ComboboxItem } from './components/molecules/ComboboxItem/ComboboxItem.svelte';
+export { default as ComboboxMenuItem } from './components/molecules/ComboboxMenuItem/ComboboxMenuItem.svelte';
 export { COMBOBOX_CONTEXT, COMBOBOX_CREATE_KEY, getComboboxContext, setComboboxContext } from './components/molecules/Combobox/combobox-context.js';
 export { default as MultiSelect } from './components/molecules/MultiSelect/MultiSelect.svelte';
 export { default as ConfirmDialog } from './components/molecules/ConfirmDialog/ConfirmDialog.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.6.2",
+	"version": "0.6.3",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",