@r2digisolutions/components 0.5.0 → 0.6.1

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}

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

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+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;
+}
+declare const ComboboxItem: import("svelte").Component<ComboboxItemProps, {}, "">;
+type ComboboxItem = ReturnType<typeof ComboboxItem>;
+export default ComboboxItem;

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import ComboboxItem from './ComboboxItem.svelte';
+
+	let selected = $state('svelte');
+	let highlighted = $state('svelte');
+
+	const frameworks = [
+		{ value: 'svelte', label: 'Svelte', hint: 'Compiler UI' },
+		{ value: 'react', label: 'React', hint: 'Component model' },
+		{ value: 'vue', label: 'Vue', hint: 'Progressive' },
+		{ value: 'solid', label: 'Solid', hint: 'Fine-grained' },
+		{ value: 'qwik', label: 'Qwik', hint: 'Resumable', 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">ComboboxItem</p>
+		<p class="text-xs text-secondary">
+			Fila de opción para listas de Combobox. Funciona sola o anidada en
+			<code class="text-primary">Combobox</code>.
+		</p>
+	</div>
+
+	<div class="rounded-xl border-border bg-surface-elevated p-1.5 shadow-sm border">
+		{#each frameworks as fw (fw.value)}
+			<ComboboxItem
+				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)}
+			>
+				<span class="min-w-0 flex flex-col">
+					<span class="truncate">{fw.label}</span>
+					<span
+						class={[
+							'truncate text-[11px]',
+							selected === fw.value || highlighted === fw.value ? 'text-white/80' : 'text-muted'
+						]}
+					>
+						{fw.hint}
+					</span>
+				</span>
+			</ComboboxItem>
+		{/each}
+	</div>
+
+	<p class="text-xs text-muted">
+		Value: <span class="text-primary">{selected}</span>
+	</p>
+</div>

package/dist/components/molecules/ComboboxItem/ComboboxItemStory.svelte.d.ts

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

package/dist/components/molecules/Form/Form.svelte

@@ -3,11 +3,12 @@
 	generics="TData extends FormDataValues = FormDataValues, TInput extends RemoteFormInput | void = RemoteFormInput, TOutput = unknown"
 >
 	import type { Snippet } from 'svelte';
-	import { setContext } from 'svelte';
+	import { setContext, untrack } from 'svelte';
 	import type { RemoteFormInput } from '@sveltejs/kit';
 	import Alert from '../Alert/Alert.svelte';
 	import {
 		FORM_CONTEXT_KEY,
+		getRemoteFormId,
 		isRemoteForm,
 		remoteIssuesToErrors,
 		type FormContext,
@@ -79,6 +80,9 @@
 	const isRemote = $derived(remote != null);
 	const remotePending = $derived(Boolean(kitForm?.pending));
 	const busy = $derived(loading || remotePending || disabled);
+	// Prefer page-provided `inputName` on fields; optional inferred id is set once below.
+	let remoteFormId = $state<string | null>(null);
+	let didInitRemoteFormId = false;
 
 	const errorEntries = $derived(Object.entries(errors).filter(([, msg]) => Boolean(msg)));
 	const hasErrors = $derived(errorEntries.length > 0);
@@ -135,6 +139,12 @@
 		get result() {
 			return (result ?? kitForm?.result) as TOutput | undefined;
 		},
+		get remote() {
+			return kitForm as FormContext<TData, TOutput>['remote'];
+		},
+		get remoteFormId() {
+			return remoteFormId;
+		},
 		setError,
 		clearError,
 		clearErrors,
@@ -143,19 +153,31 @@
 		getData
 	} satisfies FormContext<TData, TOutput>);
 
-	$effect(() => {
-		if (!kitForm || !syncRemoteIssues) return;
-		errors = remoteIssuesToErrors(kitForm.fields.allIssues());
-	});
+	if (kitForm && !didInitRemoteFormId) {
+		didInitRemoteFormId = true;
+		remoteFormId = untrack(() => getRemoteFormId(kitForm.action));
+	}
 
-	$effect(() => {
-		if (!kitForm) return;
-		if (kitForm.result !== undefined) result = kitForm.result;
-	});
+	function syncRemoteIssuesNow() {
+		if (!kitForm || !syncRemoteIssues) return;
+		const next = remoteIssuesToErrors(kitForm.fields.allIssues());
+		errors = next;
+		if (Object.keys(next).length > 0) submitted = true;
+	}
 
 	function handleSubmit(e: SubmitEvent) {
 		if (isRemote) {
 			submitted = true;
+			queueMicrotask(() => {
+				const check = () => {
+					if (kitForm && kitForm.pending > 0) {
+						requestAnimationFrame(check);
+						return;
+					}
+					syncRemoteIssuesNow();
+				};
+				check();
+			});
 			return;
 		}
 		e.preventDefault();
@@ -189,7 +211,11 @@
 			<ul class="mt-1 list-disc space-y-0.5 pl-4 text-sm">
 				{#each errorEntries as [field, message] (field)}
 					<li>
-						<span class="font-medium capitalize">{field}</span>: {message}
+						{#if field === '_form'}
+							{message}
+						{:else}
+							<span class="font-medium capitalize">{field}</span>: {message}
+						{/if}
 					</li>
 				{/each}
 			</ul>

package/dist/components/molecules/FormField/FormField.svelte

@@ -4,6 +4,8 @@
 	import {
 		getFormContext,
 		resolveFormFieldState,
+		resolveRemoteInputProps,
+		parseRemoteFieldName,
 		applyFormDataSync,
 		type FormFieldStatus
 	} from '../../../utils/formContext.js';
@@ -22,7 +24,18 @@
 
 	/**
 	 * Form-bound text input (email, tel, url, search, …).
-	 * There is no separate `FormTextInput` — use this component.
+	 *
+	 * Kit remote: pass the encoded `name` (and `type`) from `.as()`, **not** the full
+	 * spread — Kit’s `value` get/set fights `$bindable` and can loop.
+	 *
+	 * @example
+	 * ```svelte
+	 * <FormField
+	 *   name={login_user.fields.email.as('email').name}
+	 *   type="email"
+	 *   label="Email"
+	 * />
+	 * ```
 	 */
 	interface FormFieldProps {
 		id?: string;
@@ -41,19 +54,23 @@
 		size?: 'sm' | 'md' | 'lg';
 		/**
 		 * When true and inside `<Form>`, keep `value` in sync with `form.data[name]`.
-		 * Requires `name`.
+		 * Uses the logical field name (strips Kit `/formId` when present).
 		 */
 		bindData?: boolean;
-		leadIcon?: Snippet;
-		trailIcon?: Snippet;
 		/**
-		 * Custom control instead of the default `<Input>`.
-		 * Receives resolved status / disabled / helpers from form context.
+		 * Override HTML `name` if logical `name` is separate.
+		 * Prefer passing Kit `.as(...).name` as `name` instead.
 		 */
+		inputName?: string;
+		leadIcon?: Snippet;
+		trailIcon?: Snippet;
 		control?: Snippet<[FormFieldControlProps]>;
 		class?: string;
 		oninput?: (e: Event) => void;
 		onchange?: (e: Event) => void;
+		/** Absorbed if a Kit `.as()` object is spread by mistake. */
+		defaultValue?: unknown;
+		'aria-invalid'?: boolean | 'true' | 'false';
 	}
 
 	let {
@@ -72,23 +89,43 @@
 		clearable = false,
 		size = 'md',
 		bindData = false,
+		inputName,
 		leadIcon,
 		trailIcon,
 		control,
 		class: className = '',
 		oninput,
-		onchange
+		onchange,
+		defaultValue: _kitDefaultValue = undefined,
+		'aria-invalid': _ariaInvalid = undefined
 	}: FormFieldProps = $props();
 
 	const form = getFormContext();
+	const parsed = $derived(parseRemoteFieldName(name, form?.remoteFormId));
+	const logicalName = $derived(parsed.logicalName);
+
 	const resolved = $derived(
-		resolveFormFieldState({ name, errorMessage, helperText, status, disabled, form })
+		resolveFormFieldState({
+			name: logicalName,
+			errorMessage,
+			helperText,
+			status,
+			disabled,
+			form
+		})
 	);
 
+	/** HTML `name`: override → encoded as-is → else encode with remoteFormId. */
+	const htmlName = $derived.by(() => {
+		if (inputName) return inputName;
+		if (parsed.isEncoded) return parsed.htmlName;
+		return resolveRemoteInputProps(form?.remoteFormId, name, type).name;
+	});
+
 	$effect(() => {
-		if (!bindData || !name || !form) return;
+		if (!bindData || !logicalName || !form) return;
 		applyFormDataSync({
-			fromCtx: form.data[name],
+			fromCtx: form.data[logicalName],
 			getLocal: () => value,
 			setLocal: (v) => {
 				value = v;
@@ -99,20 +136,20 @@
 
 	function setValue(next: string) {
 		value = next;
-		if (bindData && name && form) {
-			form.setData(name, next);
-			form.clearError(name);
+		if (bindData && logicalName && form) {
+			form.setData(logicalName, next);
+			form.clearError(logicalName);
 		}
 	}
 
 	function clearFieldError() {
-		if (name && form) form.clearError(name);
+		if (logicalName && form) form.clearError(logicalName);
 	}
 
 	function handleInput(e: Event) {
-		if (bindData && name && form) {
-			form.setData(name, (e.currentTarget as HTMLInputElement).value);
-			form.clearError(name);
+		if (bindData && logicalName && form) {
+			form.setData(logicalName, (e.currentTarget as HTMLInputElement).value);
+			form.clearError(logicalName);
 		}
 		oninput?.(e);
 	}
@@ -122,7 +159,7 @@
 	{#if control}
 		{@render control({
 			id,
-			name,
+			name: logicalName,
 			value,
 			status: resolved.status,
 			helperText: resolved.helperText,
@@ -134,7 +171,7 @@
 	{:else}
 		<Input
 			{id}
-			{name}
+			name={htmlName}
 			{label}
 			{placeholder}
 			{type}

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

@@ -13,7 +13,18 @@ export interface FormFieldControlProps {
 }
 /**
  * Form-bound text input (email, tel, url, search, …).
- * There is no separate `FormTextInput` — use this component.
+ *
+ * Kit remote: pass the encoded `name` (and `type`) from `.as()`, **not** the full
+ * spread — Kit’s `value` get/set fights `$bindable` and can loop.
+ *
+ * @example
+ * ```svelte
+ * <FormField
+ *   name={login_user.fields.email.as('email').name}
+ *   type="email"
+ *   label="Email"
+ * />
+ * ```
  */
 interface FormFieldProps {
     id?: string;
@@ -32,19 +43,23 @@ interface FormFieldProps {
     size?: 'sm' | 'md' | 'lg';
     /**
      * When true and inside `<Form>`, keep `value` in sync with `form.data[name]`.
-     * Requires `name`.
+     * Uses the logical field name (strips Kit `/formId` when present).
      */
     bindData?: boolean;
-    leadIcon?: Snippet;
-    trailIcon?: Snippet;
     /**
-     * Custom control instead of the default `<Input>`.
-     * Receives resolved status / disabled / helpers from form context.
+     * Override HTML `name` if logical `name` is separate.
+     * Prefer passing Kit `.as(...).name` as `name` instead.
      */
+    inputName?: string;
+    leadIcon?: Snippet;
+    trailIcon?: Snippet;
     control?: Snippet<[FormFieldControlProps]>;
     class?: string;
     oninput?: (e: Event) => void;
     onchange?: (e: Event) => void;
+    /** Absorbed if a Kit `.as()` object is spread by mistake. */
+    defaultValue?: unknown;
+    'aria-invalid'?: boolean | 'true' | 'false';
 }
 declare const FormField: import("svelte").Component<FormFieldProps, {}, "value">;
 type FormField = ReturnType<typeof FormField>;

package/dist/components/molecules/FormPasswordInput/FormPasswordInput.svelte

@@ -3,9 +3,15 @@
 	import {
 		getFormContext,
 		resolveFormFieldState,
+		resolveRemoteInputProps,
+		parseRemoteFieldName,
 		applyFormDataSync
 	} from '../../../utils/formContext.js';
 
+	/**
+	 * Kit remote: pass `.as('password').name` as `name`, not the full `.as()` spread
+	 * (Kit’s `value` get/set fights local binding).
+	 */
 	interface FormPasswordInputProps {
 		id?: string;
 		name?: string;
@@ -18,11 +24,14 @@
 		disabled?: boolean;
 		required?: boolean;
 		size?: 'sm' | 'md' | 'lg';
-		/** Sync with `form.data[name]` when inside `<Form>`. */
 		bindData?: boolean;
+		inputName?: string;
 		class?: string;
 		oninput?: (e: Event) => void;
 		onchange?: (e: Event) => void;
+		defaultValue?: unknown;
+		type?: string;
+		'aria-invalid'?: boolean | 'true' | 'false';
 	}
 
 	let {
@@ -38,20 +47,40 @@
 		required = false,
 		size = 'md',
 		bindData = false,
+		inputName,
 		class: className = '',
 		oninput,
-		onchange
+		onchange,
+		defaultValue: _kitDefaultValue = undefined,
+		type: _kitType = undefined,
+		'aria-invalid': _ariaInvalid = undefined
 	}: FormPasswordInputProps = $props();
 
 	const form = getFormContext();
+	const parsed = $derived(parseRemoteFieldName(name, form?.remoteFormId));
+	const logicalName = $derived(parsed.logicalName);
+
 	const resolved = $derived(
-		resolveFormFieldState({ name, errorMessage, helperText, status, disabled, form })
+		resolveFormFieldState({
+			name: logicalName,
+			errorMessage,
+			helperText,
+			status,
+			disabled,
+			form
+		})
 	);
 
+	const htmlName = $derived.by(() => {
+		if (inputName) return inputName;
+		if (parsed.isEncoded) return parsed.htmlName;
+		return resolveRemoteInputProps(form?.remoteFormId, name, 'password').name;
+	});
+
 	$effect(() => {
-		if (!bindData || !name || !form) return;
+		if (!bindData || !logicalName || !form) return;
 		applyFormDataSync({
-			fromCtx: form.data[name],
+			fromCtx: form.data[logicalName],
 			getLocal: () => value,
 			setLocal: (v) => {
 				value = v;
@@ -61,9 +90,9 @@
 	});
 
 	function handleInput(e: Event) {
-		if (bindData && name && form) {
-			form.setData(name, (e.currentTarget as HTMLInputElement).value);
-			form.clearError(name);
+		if (bindData && logicalName && form) {
+			form.setData(logicalName, (e.currentTarget as HTMLInputElement).value);
+			form.clearError(logicalName);
 		}
 		oninput?.(e);
 	}
@@ -72,7 +101,7 @@
 <div class={['w-full', className]}>
 	<PasswordInput
 		{id}
-		{name}
+		name={htmlName}
 		{label}
 		{placeholder}
 		disabled={resolved.disabled}

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

@@ -1,3 +1,7 @@
+/**
+ * Kit remote: pass `.as('password').name` as `name`, not the full `.as()` spread
+ * (Kit’s `value` get/set fights local binding).
+ */
 interface FormPasswordInputProps {
     id?: string;
     name?: string;
@@ -10,11 +14,14 @@ interface FormPasswordInputProps {
     disabled?: boolean;
     required?: boolean;
     size?: 'sm' | 'md' | 'lg';
-    /** Sync with `form.data[name]` when inside `<Form>`. */
     bindData?: boolean;
+    inputName?: string;
     class?: string;
     oninput?: (e: Event) => void;
     onchange?: (e: Event) => void;
+    defaultValue?: unknown;
+    type?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
 }
 declare const FormPasswordInput: import("svelte").Component<FormPasswordInputProps, {}, "value">;
 type FormPasswordInput = ReturnType<typeof FormPasswordInput>;

package/dist/components/organisms/BlogEditor/BlogEditorStory.svelte

@@ -82,7 +82,7 @@
 	let value = $state<BlogDocument>({
 		...emptyBlogDocument('Shipping our component library'),
 		description: 'A richer block model with media, layout, and registered components.',
-		author: 'R2 Digisolutions',
+		author: 'Evoteg',
 		publishedAt: '2026-07-28',
 		tags: ['design-system', 'svelte', 'blog'],
 		coverImage: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&q=80',

package/dist/components/organisms/FileUploader/FileUploader.svelte

@@ -525,14 +525,18 @@
 					'focus-visible:ring-2 focus-visible:ring-brand-500/30 focus-visible:border-brand-500',
 					isDragging
 						? 'border-brand-500 bg-brand-500/10'
-						: hasFile
+						: hasFile || externalSrc
 							? 'border-transparent'
 							: 'border-border bg-surface-elevated hover:border-border-strong',
 					disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
 				]}
 			>
-				{#if primaryFile?.previewUrl}
-					<img src={primaryFile.previewUrl} alt="" class="h-full w-full object-cover" />
+				{#if primaryFile?.previewUrl || externalSrc}
+					<img
+						src={primaryFile?.previewUrl || externalSrc}
+						alt=""
+						class="h-full w-full object-cover"
+					/>
 					{#if !disabled}
 						<div
 							class="absolute inset-0 flex items-center justify-center bg-black/45 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"

package/dist/components/organisms/InvoicePage/InvoicePage.svelte

@@ -52,7 +52,7 @@
 		paidAt,
 		status = 'sent',
 		from = {
-			name: 'R2 Digi Solutions',
+			name: 'Evoteg',
 			email: 'billing@r2digi.com',
 			addressLines: ['Calle Mayor 12', '28013 Madrid, Spain'],
 			taxId: 'ES B12345678'