@r2digisolutions/components 0.1.6 → 0.1.7

package/README.md

@@ -65,7 +65,7 @@ pnpm release
 Esto hace bump de versión, commit, tag `vX.Y.Z` y push. CI entonces:
 
 1. Publica `@r2digisolutions/components` en npm
-2. Crea un **GitHub Release** con notas generadas desde los commits desde el tag anterior
+2. Crea un **GitHub Release** con el enlace a npm y la lista de commits desde el tag anterior
 
 Mismo flujo que usan muchas libs con `bumpp` / `release-it` (tag → CI → npm + GitHub Release).
 

package/dist/components/atoms/Checkbox/Checkbox.svelte

@@ -10,7 +10,10 @@
 		value?: string;
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
+		/** Accessible name when no visible label is provided. */
+		'aria-label'?: string;
 		onchange?: (checked: boolean) => void;
+		onclick?: (e: MouseEvent) => void;
 	}
 
 	let {
@@ -24,7 +27,9 @@
 		value,
 		size = 'md',
 		class: className = '',
-		onchange
+		'aria-label': ariaLabel,
+		onchange,
+		onclick
 	}: CheckboxProps = $props();
 
 	const inputId = $derived(id ?? `checkbox-${Math.random().toString(36).slice(2, 9)}`);
@@ -48,7 +53,7 @@
 		onchange?.(checked);
 	}
 
-	// Apply indeterminate state via action
+	/** Keep DOM indeterminate in sync without bind loops. */
 	function setIndeterminate(node: HTMLInputElement) {
 		$effect(() => {
 			node.indeterminate = indeterminate;
@@ -64,7 +69,8 @@
 			{name}
 			{value}
 			{disabled}
-			bind:checked
+			checked={checked}
+			aria-label={ariaLabel ?? label}
 			{@attach setIndeterminate}
 			class={[
 				'shrink-0 cursor-pointer border-2 border-border bg-surface-elevated appearance-none transition-all duration-150',
@@ -86,6 +92,7 @@
 				background-repeat: no-repeat;
 			"
 			onchange={handleChange}
+			{onclick}
 		/>
 	</div>
 

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

@@ -9,7 +9,10 @@ interface CheckboxProps {
     value?: string;
     size?: 'sm' | 'md' | 'lg';
     class?: string;
+    /** Accessible name when no visible label is provided. */
+    'aria-label'?: string;
     onchange?: (checked: boolean) => void;
+    onclick?: (e: MouseEvent) => void;
 }
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/components/atoms/Input/Input.svelte

@@ -10,7 +10,7 @@
 		label?: string;
 		placeholder?: string;
 		value?: string;
-		type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+		type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'date';
 		status?: InputStatus;
 		helperText?: string;
 		disabled?: boolean;
@@ -21,10 +21,15 @@
 		leadIcon?: Snippet;
 		trailIcon?: Snippet;
 		class?: string;
+		autofocus?: boolean;
+		min?: number;
+		max?: number;
+		step?: number;
 		oninput?: (e: Event) => void;
 		onchange?: (e: Event) => void;
 		onfocus?: (e: FocusEvent) => void;
 		onblur?: (e: FocusEvent) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
 	}
 
 	let {
@@ -40,6 +45,10 @@
 		readonly = false,
 		required = false,
 		clearable = false,
+		autofocus = false,
+		min,
+		max,
+		step,
 		size = 'md',
 		leadIcon,
 		trailIcon,
@@ -47,7 +56,8 @@
 		oninput,
 		onchange,
 		onfocus,
-		onblur
+		onblur,
+		onkeydown
 	}: InputProps = $props();
 
 	const inputId = $derived(id ?? `input-${Math.random().toString(36).slice(2, 9)}`);
@@ -132,6 +142,10 @@
 			{disabled}
 			{readonly}
 			{required}
+			{autofocus}
+			{min}
+			{max}
+			{step}
 			bind:value
 			aria-describedby={helperText ? helperId : undefined}
 			aria-invalid={status === 'error'}
@@ -144,6 +158,7 @@
 			{onchange}
 			{onfocus}
 			{onblur}
+			{onkeydown}
 		/>
 
 		{#if hasClear}

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

@@ -7,7 +7,7 @@ interface InputProps {
     label?: string;
     placeholder?: string;
     value?: string;
-    type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+    type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'date';
     status?: InputStatus;
     helperText?: string;
     disabled?: boolean;
@@ -18,10 +18,15 @@ interface InputProps {
     leadIcon?: Snippet;
     trailIcon?: Snippet;
     class?: string;
+    autofocus?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
     oninput?: (e: Event) => void;
     onchange?: (e: Event) => void;
     onfocus?: (e: FocusEvent) => void;
     onblur?: (e: FocusEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
 }
 declare const Input: import("svelte").Component<InputProps, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/components/atoms/MarqueeRect/MarqueeRect.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { MarqueeRect as MarqueeRectBox } from '../../../utils/marqueeSelect.js';
+
+	interface MarqueeRectProps {
+		rect?: MarqueeRectBox | null;
+		class?: string;
+	}
+
+	let { rect = null, class: className = '' }: MarqueeRectProps = $props();
+</script>
+
+{#if rect && rect.width > 0 && rect.height > 0}
+	<div
+		class={[
+			'pointer-events-none absolute z-50 rounded-sm border border-brand-500 bg-brand-500/15',
+			className
+		]}
+		style={`left:${rect.x}px;top:${rect.y}px;width:${rect.width}px;height:${rect.height}px`}
+		aria-hidden="true"
+	></div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { MarqueeRect as MarqueeRectBox } from '../../../utils/marqueeSelect.js';
+interface MarqueeRectProps {
+    rect?: MarqueeRectBox | null;
+    class?: string;
+}
+declare const MarqueeRect: import("svelte").Component<MarqueeRectProps, {}, "">;
+type MarqueeRect = ReturnType<typeof MarqueeRect>;
+export default MarqueeRect;

package/dist/components/atoms/Textarea/Textarea.svelte

@@ -19,6 +19,7 @@
 		onchange?: (e: Event) => void;
 		onfocus?: (e: FocusEvent) => void;
 		onblur?: (e: FocusEvent) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
 	}
 
 	let {
@@ -40,7 +41,8 @@
 		oninput,
 		onchange,
 		onfocus,
-		onblur
+		onblur,
+		onkeydown
 	}: TextareaProps = $props();
 
 	const textareaId = $derived(id ?? `textarea-${Math.random().toString(36).slice(2, 9)}`);
@@ -118,6 +120,7 @@
 			{onchange}
 			{onfocus}
 			{onblur}
+			{onkeydown}
 		></textarea>
 	</div>
 

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

@@ -18,6 +18,7 @@ interface TextareaProps {
     onchange?: (e: Event) => void;
     onfocus?: (e: FocusEvent) => void;
     onblur?: (e: FocusEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
 }
 declare const Textarea: import("svelte").Component<TextareaProps, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;

package/dist/components/atoms/Toggle/Toggle.svelte

@@ -61,7 +61,7 @@
 		id={inputId}
 		type="checkbox"
 		class="sr-only"
-		bind:checked
+		checked={checked}
 		{disabled}
 		onchange={handleChange}
 	/>

package/dist/components/molecules/BulkActionBar/BulkActionBar.svelte

@@ -169,15 +169,29 @@
 			onclear?.();
 		}
 	}
+
+	/** Dock sticks to the viewport bottom; portal avoids parent transform/overflow traps. */
+	function portalDock(node: HTMLElement) {
+		if (!(placement === 'dock' && sticky)) return {};
+		document.body.appendChild(node);
+		return {
+			destroy() {
+				node.remove();
+			}
+		};
+	}
+
+	const dockFixed = $derived(placement === 'dock' && sticky);
 </script>
 
 <svelte:window onkeydown={onKeydown} />
 
 {#if count > 0}
 	<div
+		use:portalDock
 		class={[
 			placement === 'dock' && 'pointer-events-none z-30 flex justify-center',
-			placement === 'dock' && sticky && 'sticky bottom-3 px-3',
+			dockFixed && 'fixed inset-x-0 bottom-3 z-50 px-3',
 			placement === 'inline' && sticky && 'sticky bottom-0 z-20',
 			className
 		]}
@@ -210,14 +224,14 @@
 					</span>
 				{/if}
 
-				<div class="min-w-0 flex-1">
+				<div class="flex min-w-0 flex-1 flex-col leading-tight">
 					<p class="truncate text-xs font-semibold text-primary sm:text-sm">{selectionText}</p>
 					{#if description}
 						<p class="truncate text-[11px] text-muted">{description}</p>
 					{:else if canSelectAll}
 						<button
 							type="button"
-							class="mt-0.5 text-[11px] font-medium text-brand-600 hover:underline dark:text-brand-400"
+							class="w-fit text-left text-[11px] font-medium text-brand-600 hover:underline dark:text-brand-400"
 							onclick={() => onselectall?.()}
 						>
 							Select all {total}
@@ -225,7 +239,7 @@
 					{:else if canSelectNone}
 						<button
 							type="button"
-							class="mt-0.5 text-[11px] font-medium text-secondary hover:underline"
+							class="w-fit text-left text-[11px] font-medium text-secondary hover:underline"
 							onclick={() => onselectnone?.()}
 						>
 							Clear selection
@@ -233,7 +247,7 @@
 					{:else if resolvedHint}
 						<p
 							class={[
-								'mt-0.5 text-[11px]',
+								'text-[11px]',
 								pendingConfirm ? 'text-amber-700 dark:text-amber-300' : 'text-muted'
 							]}
 						>

package/dist/components/molecules/CodeEditor/CodeEditor.svelte

@@ -57,23 +57,27 @@
 
 <div
 	class={[
-		'overflow-hidden rounded-xl border border-border bg-zinc-950 text-zinc-100 shadow-sm',
+		'flex flex-col overflow-hidden rounded-xl border border-border bg-surface-elevated text-primary shadow-sm',
 		className
 	]}
 >
 	{#if filename || language}
-		<div class="flex items-center justify-between border-b border-zinc-800 bg-zinc-900/80 px-3 py-1.5">
-			<span class="truncate font-mono text-[11px] text-zinc-400">{filename || language}</span>
-			<span class="rounded bg-zinc-800 px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-zinc-500">
+		<div
+			class="flex shrink-0 items-center justify-between border-b border-border bg-surface-overlay/80 px-3 py-1.5"
+		>
+			<span class="truncate font-mono text-[11px] text-secondary">{filename || language}</span>
+			<span
+				class="rounded bg-surface-overlay px-1.5 py-0.5 font-mono text-[10px] tracking-wide text-muted uppercase"
+			>
 				{language}
 			</span>
 		</div>
 	{/if}
 
-	<div class="relative flex" style:min-height={`${minHeight}px`}>
+	<div class="relative flex min-h-0 flex-1" style:min-height={`${minHeight}px`}>
 		{#if showLineNumbers}
 			<div
-				class="select-none border-r border-zinc-800 bg-zinc-950/80 py-3 pl-3 pr-2 text-right font-mono text-[11px] leading-5 text-zinc-600"
+				class="select-none border-r border-border bg-surface-overlay/60 py-3 pr-2 pl-3 text-right font-mono text-[11px] leading-5 text-muted"
 				aria-hidden="true"
 			>
 				{#each lineNums as n (n)}
@@ -82,11 +86,10 @@
 			</div>
 		{/if}
 
-		<div class="relative min-w-0 flex-1">
+		<div class="relative min-h-0 min-w-0 flex-1">
 			<textarea
 				bind:this={textareaEl}
-				class="absolute inset-0 z-10 h-full w-full resize-none bg-transparent p-3 font-mono text-[12px] leading-5 text-transparent caret-zinc-100 outline-none selection:bg-brand-500/40"
-				style:min-height={`${minHeight}px`}
+				class="absolute inset-0 z-10 h-full w-full resize-none bg-transparent p-3 font-mono text-[12px] leading-5 text-transparent caret-[var(--text-primary)] outline-none selection:bg-brand-500/40"
 				{value}
 				{readonly}
 				{placeholder}
@@ -100,7 +103,7 @@
 			></textarea>
 			<pre
 				bind:this={preEl}
-				class="pointer-events-none absolute inset-0 overflow-auto whitespace-pre p-3 font-mono text-[12px] leading-5 text-zinc-200"
+				class="pointer-events-none absolute inset-0 overflow-auto whitespace-pre p-3 font-mono text-[12px] leading-5 text-primary"
 				aria-hidden="true"
 			><code>{value || ' '}</code></pre>
 		</div>