@r2digisolutions/components 0.6.2 → 0.6.7

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/components/molecules/Dock/Dock.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        size?: import("./Dock.svelte.ts").DockSize;
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+    args: {
+        size: "sm";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Mini: Story;
+export declare const Medium: Story;

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

@@ -0,0 +1,14 @@
+import DockStory from './DockStory.svelte';
+const meta = {
+    title: 'Molecules/Dock',
+    component: DockStory,
+    tags: ['autodocs'],
+    argTypes: {
+        size: { control: 'select', options: ['mini', 'sm', 'md'] }
+    },
+    args: { size: 'sm' }
+};
+export default meta;
+export const Default = {};
+export const Mini = { args: { size: 'mini' } };
+export const Medium = { args: { size: 'md' } };

package/dist/components/molecules/Dock/Dock.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export type DockSize = 'mini' | 'sm' | 'md';
+
+	interface DockProps {
+		size?: DockSize;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { size = 'mini', class: className = '', children }: DockProps = $props();
+
+	const sizes: Record<DockSize, string> = {
+		mini: 'rounded-full p-0.5',
+		sm: 'rounded-full p-0.5',
+		md: 'rounded-2xl p-1'
+	};
+</script>
+
+<div
+	class={[
+		'border-border/70 bg-surface-overlay/80 shadow-sm backdrop-blur-md isolate inline-flex items-center overflow-hidden border',
+		sizes[size],
+		className
+	]}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+export type DockSize = 'mini' | 'sm' | 'md';
+interface DockProps {
+    size?: DockSize;
+    class?: string;
+    children?: Snippet;
+}
+declare const Dock: import("svelte").Component<DockProps, {}, "">;
+type Dock = ReturnType<typeof Dock>;
+export default Dock;

package/dist/components/molecules/Dock/DockItem.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { DockSize } from './Dock.svelte';
+
+	interface DockItemProps {
+		as?: 'button' | 'a';
+		href?: string;
+		onclick?: (e: MouseEvent) => void;
+		disabled?: boolean;
+		active?: boolean;
+		size?: DockSize;
+		ariaLabel?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		as = 'button',
+		href,
+		onclick,
+		disabled = false,
+		active = false,
+		size = 'mini',
+		ariaLabel,
+		class: className = '',
+		children
+	}: DockItemProps = $props();
+
+	const sizes: Record<DockSize, string> = {
+		mini: 'h-7 px-2 text-[11px]',
+		sm: 'h-8 px-2.5 text-xs',
+		md: 'h-9 px-3 text-sm'
+	};
+
+	const classes = $derived([
+		'relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap select-none font-medium transition-all duration-150',
+		'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+		sizes[size],
+		active
+			? 'bg-surface-elevated text-primary shadow-sm ring-1 ring-border'
+			: 'text-secondary hover:bg-surface-elevated/70 hover:text-primary',
+		disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer',
+		'[&[data-active]:first-child]:rounded-l-full',
+		'[&[data-active]:last-child]:rounded-r-full',
+		'[&[data-active]:not(:first-child):not(:last-child)]:rounded-none',
+		'[&:not([data-active]):first-child:hover]:rounded-l-full',
+		'[&:not([data-active]):last-child:hover]:rounded-r-full',
+		'[&:not([data-active]):not(:first-child):not(:last-child):hover]:rounded-none',
+		className
+	]);
+</script>
+
+{#if as === 'a' || href}
+	<a {href} aria-label={ariaLabel} data-active={active || undefined} class={classes}>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		type="button"
+		{disabled}
+		aria-label={ariaLabel}
+		aria-pressed={active}
+		data-active={active || undefined}
+		{onclick}
+		class={classes}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/molecules/Dock/DockItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { DockSize } from './Dock.svelte';
+interface DockItemProps {
+    as?: 'button' | 'a';
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    disabled?: boolean;
+    active?: boolean;
+    size?: DockSize;
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const DockItem: import("svelte").Component<DockItemProps, {}, "">;
+type DockItem = ReturnType<typeof DockItem>;
+export default DockItem;

package/dist/components/molecules/Dock/DockStory.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Dock from './Dock.svelte';
+	import DockItem from './DockItem.svelte';
+	import type { DockSize } from './Dock.svelte';
+
+	let { size = 'sm' }: { size?: DockSize } = $props();
+
+	let value = $state('es');
+	const langs = ['es', 'en', 'ca', 'fr', 'de'];
+	const filled = new Set(['es', 'en']);
+</script>
+
+<div class="gap-4 flex flex-col">
+	<Dock {size}>
+		{#each langs as lang (lang)}
+			<DockItem {size} active={value === lang} onclick={() => (value = lang)}>
+				{lang.toUpperCase()}
+				{#if filled.has(lang)}
+					<span class="h-1.5 w-1.5 bg-emerald-500 rounded-full" aria-hidden="true"></span>
+				{/if}
+			</DockItem>
+		{/each}
+	</Dock>
+	<p class="text-xs text-muted">Selected: {value.toUpperCase()}</p>
+</div>

package/dist/components/molecules/Dock/DockStory.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DockSize } from './Dock.svelte';
+type $$ComponentProps = {
+    size?: DockSize;
+};
+declare const DockStory: import("svelte").Component<$$ComponentProps, {}, "">;
+type DockStory = ReturnType<typeof DockStory>;
+export default DockStory;

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

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        example?: "destructive" | "toolbar" | "media" | "compose";
+        example?: "destructive" | "media" | "toolbar" | "compose";
         position?: import("./SpeedDial.svelte.ts").SpeedDialPosition;
         direction?: import("./SpeedDial.svelte.ts").SpeedDialDirection;
         variant?: import("./SpeedDial.svelte.ts").SpeedDialVariant;

package/dist/components/organisms/DataGrid/DataGrid.svelte.d.ts

@@ -77,7 +77,7 @@ declare function $$render<T extends Record<string, unknown> = Record<string, unk
         onrowdblclick?: (row: T) => void;
     };
     exports: {};
-    bindings: "notes" | "selection" | "marks" | "formatRules" | "filterQuery" | "columnFilters" | "expandedRows" | "viewMode";
+    bindings: "viewMode" | "notes" | "selection" | "marks" | "formatRules" | "filterQuery" | "columnFilters" | "expandedRows";
     slots: {};
     events: {};
 };
@@ -85,7 +85,7 @@ declare class __sveltets_Render<T extends Record<string, unknown> = Record<strin
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "notes" | "selection" | "marks" | "formatRules" | "filterQuery" | "columnFilters" | "expandedRows" | "viewMode";
+    bindings(): "viewMode" | "notes" | "selection" | "marks" | "formatRules" | "filterQuery" | "columnFilters" | "expandedRows";
     exports(): {};
 }
 interface $$IsomorphicComponent {