@r2digisolutions/ui 0.29.2 → 0.31.0

package/dist/components/index.d.ts

@@ -23,4 +23,6 @@ import NoContent from './ui/NoContent/NoContent.svelte';
 import Tag from './ui/Tag/Tag.svelte';
 export * from './ui/Dialog/index.js';
 import Selector from './ui/Selector/Selector.svelte';
-export { Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+import SelectTile from './ui/SelectTile/SelectTile.svelte';
+import MobileSheet from './ui/MobileSheet/MobileSheet.svelte';
+export { MobileSheet, SelectTile, Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };

package/dist/components/index.js

@@ -23,4 +23,6 @@ import NoContent from './ui/NoContent/NoContent.svelte';
 import Tag from './ui/Tag/Tag.svelte';
 export * from './ui/Dialog/index.js';
 import Selector from './ui/Selector/Selector.svelte';
-export { Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+import SelectTile from './ui/SelectTile/SelectTile.svelte';
+import MobileSheet from './ui/MobileSheet/MobileSheet.svelte';
+export { MobileSheet, SelectTile, Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };

package/dist/components/ui/MobileSheet/MobileSheet.svelte

@@ -0,0 +1,317 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { fade, slide } from 'svelte/transition';
+	import { cubicOut, cubicIn } from 'svelte/easing';
+
+	type SheetContext = { close: (reason?: string) => void };
+
+	type Props = {
+		open: boolean;
+		onOpenChange?: (open: boolean) => void;
+
+		header?: Snippet<[SheetContext]>;
+		content?: Snippet<[SheetContext]>;
+		footer?: Snippet<[SheetContext]>;
+
+		snapPoints?: number[];
+		initialSnap?: number;
+
+		closeOnOverlay?: boolean;
+		closeOnEscape?: boolean;
+
+		maxHeight?: string;
+
+		overlayClass?: string;
+		panelClass?: string;
+
+		/** Evita que el sheet se cierre arrastrando hacia abajo (sólo cambia de snap) */
+		disableDragClose?: boolean;
+
+		/** Hace scroll-lock del body mientras el sheet está abierto (por defecto true) */
+		lockScroll?: boolean;
+
+		/** Callback cuando cambia el snap */
+		onSnapChange?: (snap: { index: number; height: number }) => void;
+	};
+
+	const props: Props = $props();
+
+	// --- Snap inicial: índice del snapPoint más pequeño, o initialSnap si es válido ---
+	let snapIndex = 0;
+	if (props.snapPoints && props.snapPoints.length) {
+		let min = props.snapPoints[0];
+		let minIndex = 0;
+		for (let i = 1; i < props.snapPoints.length; i++) {
+			if (props.snapPoints[i] < min) {
+				min = props.snapPoints[i];
+				minIndex = i;
+			}
+		}
+		if (
+			typeof props.initialSnap === 'number' &&
+			props.initialSnap >= 0 &&
+			props.initialSnap < props.snapPoints.length
+		) {
+			snapIndex = props.initialSnap;
+		} else {
+			snapIndex = minIndex;
+		}
+	}
+
+	// --- Estado drag / altura ---
+
+	let dragHeight = $state<number | null>(null);
+	let isDragging = $state(false);
+	let dragStartY = 0;
+	let dragStartHeight = 0;
+	let dragDelta = $state(0);
+
+	const snapPoints = $derived(props.snapPoints ?? [0.4, 0.9]); // por defecto compacto
+	const minSnap = $derived(Math.min(...snapPoints));
+	const maxSnap = $derived(Math.max(...snapPoints));
+
+	function baseHeight() {
+		return snapPoints[snapIndex] ?? snapPoints[0] ?? 0.4;
+	}
+
+	const currentHeight = $derived(dragHeight ?? baseHeight());
+	const handleStretch = $derived(Math.min(Math.abs(dragDelta) / 160, 0.45));
+	const handleOffset = $derived(Math.max(Math.min(dragDelta / 12, 10), -6));
+
+	let isOpening = $state(false);
+
+	// Animación elástica al abrir
+	$effect(() => {
+		if (!props.open || typeof window === 'undefined') {
+			isOpening = false;
+			return;
+		}
+
+		isOpening = true;
+		const timer = setTimeout(() => {
+			isOpening = false;
+		}, 260);
+
+		return () => clearTimeout(timer);
+	});
+
+	// Scroll-lock del body mientras está abierto
+	$effect(() => {
+		if (typeof document === 'undefined') return;
+
+		if (props.open && props.lockScroll !== false) {
+			const prev = document.body.style.overflow;
+			document.body.style.overflow = 'hidden';
+
+			return () => {
+				document.body.style.overflow = prev;
+			};
+		}
+	});
+
+	function setOpen(next: boolean, _reason?: string) {
+		props.onOpenChange?.(next);
+		if (!next) {
+			dragHeight = null;
+			dragDelta = 0;
+		}
+	}
+
+	function close(reason?: string) {
+		if (!props.open) return;
+		setOpen(false, reason);
+	}
+
+	const sheetContext: SheetContext = {
+		close
+	};
+
+	function handleOverlayClick() {
+		if (props.closeOnOverlay === false) return;
+		close('overlay');
+	}
+
+	// Escape global
+	$effect(() => {
+		if (!props.open || props.closeOnEscape === false || typeof window === 'undefined') return;
+
+		function onKey(e: KeyboardEvent) {
+			if (e.key === 'Escape') {
+				e.stopPropagation();
+				close('escape');
+			}
+		}
+
+		window.addEventListener('keydown', onKey);
+		return () => window.removeEventListener('keydown', onKey);
+	});
+
+	function startDrag(e: PointerEvent) {
+		if (!props.open || typeof window === 'undefined') return;
+		isDragging = true;
+		dragStartY = e.clientY;
+		dragStartHeight = baseHeight();
+		dragDelta = 0;
+
+		window.addEventListener('pointermove', handleWindowPointerMove);
+		window.addEventListener('pointerup', handleWindowPointerUp);
+		window.addEventListener('pointercancel', handleWindowPointerUp);
+	}
+
+	function onHandlePointerDown(e: PointerEvent) {
+		// Evita selección de texto y gesto accidental
+		e.preventDefault();
+		startDrag(e);
+	}
+
+	function handleWindowPointerMove(e: PointerEvent) {
+		if (!isDragging || !props.open) return;
+
+		const deltaY = e.clientY - dragStartY;
+		dragDelta = deltaY;
+
+		const vh = window.innerHeight || 1;
+		let next = dragStartHeight - deltaY / vh; // arriba => más alto
+
+		// “Esponja” debajo del mínimo
+		if (next < minSnap) {
+			const overshoot = minSnap - next;
+			next = minSnap - overshoot * 0.25;
+		}
+
+		// “Esponja” por encima del máximo
+		if (next > maxSnap) {
+			const overshoot = next - maxSnap;
+			next = maxSnap + overshoot * 0.25;
+		}
+
+		dragHeight = next;
+	}
+
+	function handleWindowPointerUp(e: PointerEvent) {
+		if (!isDragging) return;
+		isDragging = false;
+
+		if (typeof window !== 'undefined') {
+			window.removeEventListener('pointermove', handleWindowPointerMove);
+			window.removeEventListener('pointerup', handleWindowPointerUp);
+			window.removeEventListener('pointercancel', handleWindowPointerUp);
+		}
+
+		const vh = typeof window !== 'undefined' ? window.innerHeight || 1 : 1;
+		const deltaY = e.clientY - dragStartY;
+		const final = dragHeight ?? baseHeight();
+		dragHeight = null;
+		dragDelta = 0;
+
+		const pulledDownHard = deltaY > vh * 0.18;
+		const allowDragClose = props.disableDragClose !== true;
+
+		if (allowDragClose && (pulledDownHard || final < minSnap * 0.7)) {
+			close('drag-down');
+			return;
+		}
+
+		// Snap al punto más cercano
+		let targetIndex = 0;
+		let bestDist = Number.POSITIVE_INFINITY;
+
+		snapPoints.forEach((p, i) => {
+			const d = Math.abs(p - final);
+			if (d < bestDist) {
+				bestDist = d;
+				targetIndex = i;
+			}
+		});
+
+		snapIndex = targetIndex;
+		props.onSnapChange?.({ index: targetIndex, height: snapPoints[targetIndex] });
+	}
+</script>
+
+{#if props.open}
+	<div class="fixed inset-0 z-99 flex flex-col md:hidden">
+		<!-- Overlay -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			in:fade={{ duration: 150 }}
+			out:fade={{ duration: 120 }}
+			class={['flex-1 bg-neutral-950/70 backdrop-blur-sm', props.overlayClass ?? '']}
+			onclick={handleOverlayClick}
+		></div>
+
+		<!-- Panel -->
+		<div
+			role="dialog"
+			aria-modal="true"
+			in:slide={{ duration: 220, easing: cubicOut }}
+			out:slide={{ duration: 190, easing: cubicIn }}
+			class={[
+				'relative w-full overflow-hidden rounded-t-3xl border-t border-neutral-800/70 bg-neutral-950/95 text-neutral-50 shadow-[0_-18px_45px_rgba(0,0,0,0.7)]',
+				props.panelClass ?? ''
+			]}
+			style={`max-height:${props.maxHeight ?? '80vh'};height:${currentHeight * 100}vh;`}
+		>
+			<div class={['flex h-full flex-col', isOpening ? 'sheet-inner-opening' : '']}>
+				<!-- Handle drag -->
+				<div
+					class="flex items-center justify-center pt-2 pb-1 select-none"
+					style="touch-action:none;"
+					onpointerdown={onHandlePointerDown}
+				>
+					<div
+						class="h-1.5 w-10 rounded-full bg-neutral-700/80 transition-transform duration-150"
+						style={`transform: translateY(${handleOffset}px) scaleX(${
+							1 + handleStretch
+						}); opacity:${0.9 - handleStretch * 0.3};`}
+					></div>
+				</div>
+
+				<!-- Header opcional -->
+				{#if props.header}
+					<div class="px-4 pb-2">
+						{@render props.header(sheetContext)}
+					</div>
+				{/if}
+
+				<!-- Body -->
+				<div class="flex min-h-0 flex-1 flex-col overflow-hidden px-3 pb-3">
+					{#if props.content}
+						<div class="min-h-0 flex-1 overflow-y-auto">
+							{@render props.content(sheetContext)}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Footer siempre abajo, con pequeño safe-area -->
+				{#if props.footer}
+					<div
+						class="border-t border-neutral-800/70 px-3 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom,0px))]"
+					>
+						{@render props.footer(sheetContext)}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	@keyframes sheet-inner-elastic-in {
+		0% {
+			transform: scaleY(0.9);
+		}
+		60% {
+			transform: scaleY(1.03);
+		}
+		100% {
+			transform: scaleY(1);
+		}
+	}
+
+	.sheet-inner-opening {
+		transform-origin: bottom;
+		animation: sheet-inner-elastic-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
+	}
+</style>

package/dist/components/ui/MobileSheet/MobileSheet.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+type SheetContext = {
+    close: (reason?: string) => void;
+};
+type Props = {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    header?: Snippet<[SheetContext]>;
+    content?: Snippet<[SheetContext]>;
+    footer?: Snippet<[SheetContext]>;
+    snapPoints?: number[];
+    initialSnap?: number;
+    closeOnOverlay?: boolean;
+    closeOnEscape?: boolean;
+    maxHeight?: string;
+    overlayClass?: string;
+    panelClass?: string;
+    /** Evita que el sheet se cierre arrastrando hacia abajo (sólo cambia de snap) */
+    disableDragClose?: boolean;
+    /** Hace scroll-lock del body mientras el sheet está abierto (por defecto true) */
+    lockScroll?: boolean;
+    /** Callback cuando cambia el snap */
+    onSnapChange?: (snap: {
+        index: number;
+        height: number;
+    }) => void;
+};
+declare const MobileSheet: import("svelte").Component<Props, {}, "">;
+type MobileSheet = ReturnType<typeof MobileSheet>;
+export default MobileSheet;

package/dist/components/ui/SelectTile/SelectTile.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+	import { i18n } from '../../../settings/index.js';
+	import { Check, Plus, ChevronRight } from 'lucide-svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		label: string;
+		description?: string;
+
+		selected?: boolean;
+		hasChildren?: boolean;
+
+		size?: 'sm' | 'md';
+		accent?: 'purple' | 'indigo' | 'sky' | 'neutral';
+
+		showLeadingCircle?: boolean;
+		showSelectedBadge?: boolean;
+		showChevronForChildren?: boolean;
+
+		compact?: boolean;
+		disabled?: boolean;
+
+		onclick?: () => void;
+
+		meta?: Snippet;
+		right?: Snippet;
+	}
+
+	const {
+		label,
+		description = '',
+		selected = false,
+		hasChildren = false,
+		size = 'md',
+		accent = 'purple',
+
+		showLeadingCircle = true,
+		showSelectedBadge = true,
+		showChevronForChildren = true,
+
+		compact = false,
+		disabled = false,
+
+		onclick,
+		meta,
+		right
+	}: Props = $props();
+
+	const sizeClasses = $derived(
+		{
+			sm: 'px-2.5 py-1.5 text-[13px]',
+			md: 'px-3 py-2 text-sm'
+		}[size]
+	);
+
+	const leadingSizeClasses = $derived(
+		{
+			sm: 'h-6 w-6',
+			md: 'h-7 w-7'
+		}[size]
+	);
+
+	const labelTextSize = $derived(compact ? 'text-[13px]' : 'text-[13px]');
+	const descriptionTextSize = $derived(compact ? 'text-[11px]' : 'text-[11px]');
+
+	const accentMap = {
+		purple: {
+			selectedBorder: 'border-purple-400/70 dark:border-purple-500/60',
+			selectedBg: 'bg-purple-50 dark:bg-purple-950/40',
+			selectedText: 'text-neutral-900 dark:text-neutral-50',
+
+			badgeBg: 'bg-white/85 dark:bg-purple-200/10',
+			badgeText: 'text-purple-700 dark:text-purple-100',
+
+			leadingSelectedBg: 'bg-purple-500/90 dark:bg-purple-500',
+			leadingSelectedBorder: 'border-purple-400/70 dark:border-purple-400/80'
+		},
+		indigo: {
+			selectedBorder: 'border-indigo-400/70 dark:border-indigo-500/60',
+			selectedBg: 'bg-indigo-50 dark:bg-indigo-950/40',
+			selectedText: 'text-neutral-900 dark:text-neutral-50',
+
+			badgeBg: 'bg-white/85 dark:bg-indigo-200/10',
+			badgeText: 'text-indigo-700 dark:text-indigo-100',
+
+			leadingSelectedBg: 'bg-indigo-500/90 dark:bg-indigo-500',
+			leadingSelectedBorder: 'border-indigo-400/70 dark:border-indigo-400/80'
+		},
+		sky: {
+			selectedBorder: 'border-sky-400/70 dark:border-sky-500/60',
+			selectedBg: 'bg-sky-50 dark:bg-sky-950/40',
+			selectedText: 'text-neutral-900 dark:text-neutral-50',
+
+			badgeBg: 'bg-white/85 dark:bg-sky-200/10',
+			badgeText: 'text-sky-700 dark:text-sky-100',
+
+			leadingSelectedBg: 'bg-sky-500/90 dark:bg-sky-500',
+			leadingSelectedBorder: 'border-sky-400/70 dark:border-sky-400/80'
+		},
+		neutral: {
+			selectedBorder: 'border-neutral-400/70 dark:border-neutral-500/60',
+			selectedBg: 'bg-neutral-100 dark:bg-neutral-900',
+			selectedText: 'text-neutral-900 dark:text-neutral-50',
+
+			badgeBg: 'bg-white/85 dark:bg-neutral-800',
+			badgeText: 'text-neutral-800 dark:text-neutral-100',
+
+			leadingSelectedBg: 'bg-neutral-700 dark:bg-neutral-700',
+			leadingSelectedBorder: 'border-neutral-500/70 dark:border-neutral-500/80'
+		}
+	} as const;
+
+	const accentClasses = $derived(accentMap[accent]);
+</script>
+
+<button
+	type="button"
+	{disabled}
+	onclick={() => onclick?.()}
+	class={[
+		'flex w-full items-center justify-between gap-3 rounded-lg border text-left transition-colors',
+		sizeClasses,
+		'focus-visible:ring-2 focus-visible:ring-purple-500/40 focus-visible:outline-none',
+		!disabled && 'cursor-pointer',
+		'disabled:cursor-not-allowed disabled:opacity-60',
+
+		selected
+			? [
+					accentClasses.selectedBorder,
+					accentClasses.selectedBg,
+					accentClasses.selectedText,
+					'shadow-sm',
+					'hover:brightness-[0.98] dark:hover:brightness-[1.05]'
+				]
+			: [
+					'border-neutral-200 bg-neutral-50 text-neutral-800',
+					'hover:border-neutral-300 hover:bg-neutral-100',
+					'dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100',
+					'dark:hover:border-neutral-600 dark:hover:bg-neutral-800'
+				]
+	]}
+>
+	<div class="flex min-w-0 flex-1 items-center gap-3">
+		{#if showLeadingCircle}
+			<div
+				class={[
+					'flex shrink-0 items-center justify-center rounded-full border text-xs font-medium shadow-sm',
+					leadingSizeClasses,
+					selected
+						? [accentClasses.leadingSelectedBg, accentClasses.leadingSelectedBorder, 'text-white']
+						: 'border-neutral-300 bg-white text-neutral-500 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-300'
+				]}
+			>
+				{#if selected}
+					<Check class="h-3.5 w-3.5" />
+				{:else}
+					<Plus class="h-3.5 w-3.5" />
+				{/if}
+			</div>
+		{/if}
+
+		<div class="flex min-w-0 flex-col">
+			<span class={`truncate font-medium ${labelTextSize}`}>
+				{label}
+			</span>
+
+			{#if description}
+				<span
+					class={`mt-0.5 truncate ${descriptionTextSize} ${
+						selected
+							? 'text-neutral-600 dark:text-neutral-300'
+							: 'text-neutral-500 dark:text-neutral-400'
+					}`}
+				>
+					{description}
+				</span>
+			{/if}
+
+			{@render meta?.()}
+		</div>
+	</div>
+
+	<div class="flex shrink-0 items-center gap-2">
+		{#if selected && showSelectedBadge}
+			<span
+				class={[
+					'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium shadow-sm backdrop-blur',
+					accentClasses.badgeBg,
+					accentClasses.badgeText
+				]}
+			>
+				<Check class="h-3 w-3" />
+				<span>{i18n.t('common.selected')}</span>
+			</span>
+		{/if}
+
+		{@render right?.()}
+
+		{#if hasChildren && showChevronForChildren}
+			<div
+				class="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-900/5 text-neutral-400 dark:bg-neutral-50/5 dark:text-neutral-500"
+			>
+				<ChevronRight class="h-4 w-4" />
+			</div>
+		{/if}
+	</div>
+</button>

package/dist/components/ui/SelectTile/SelectTile.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    description?: string;
+    selected?: boolean;
+    hasChildren?: boolean;
+    size?: 'sm' | 'md';
+    accent?: 'purple' | 'indigo' | 'sky' | 'neutral';
+    showLeadingCircle?: boolean;
+    showSelectedBadge?: boolean;
+    showChevronForChildren?: boolean;
+    compact?: boolean;
+    disabled?: boolean;
+    onclick?: () => void;
+    meta?: Snippet;
+    right?: Snippet;
+}
+declare const SelectTile: import("svelte").Component<Props, {}, "">;
+type SelectTile = ReturnType<typeof SelectTile>;
+export default SelectTile;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.29.2",
+	"version": "0.31.0",
 	"private": false,
 	"packageManager": "bun@1.3.4",
 	"publishConfig": {
@@ -55,11 +55,11 @@
 		"@storybook/addon-interactions": "8.6.14",
 		"@storybook/addon-svelte-csf": "5.0.10",
 		"@storybook/blocks": "8.6.14",
-		"@storybook/svelte": "10.1.4",
-		"@storybook/sveltekit": "10.1.4",
+		"@storybook/svelte": "10.1.6",
+		"@storybook/sveltekit": "10.1.6",
 		"@storybook/test": "8.6.14",
 		"@sveltejs/adapter-static": "3.0.10",
-		"@sveltejs/kit": "2.49.1",
+		"@sveltejs/kit": "2.49.2",
 		"@sveltejs/package": "2.5.7",
 		"@sveltejs/vite-plugin-svelte": "6.2.1",
 		"@tailwindcss/postcss": "4.1.17",
@@ -70,18 +70,18 @@
 		"eslint-config-prettier": "10.1.8",
 		"eslint-plugin-svelte": "3.13.1",
 		"globals": "16.5.0",
-		"jsdom": "27.2.0",
-		"lucide-svelte": "0.556.0",
+		"jsdom": "27.3.0",
+		"lucide-svelte": "0.560.0",
 		"prettier": "3.7.4",
 		"prettier-plugin-svelte": "3.4.0",
 		"prettier-plugin-tailwindcss": "0.7.2",
-		"publint": "0.3.15",
-		"storybook": "10.1.4",
-		"svelte": "5.45.6",
+		"publint": "0.3.16",
+		"storybook": "10.1.6",
+		"svelte": "5.45.8",
 		"svelte-check": "4.3.4",
 		"tailwindcss": "4.1.17",
 		"typescript": "5.9.3",
-		"typescript-eslint": "8.48.1",
+		"typescript-eslint": "8.49.0",
 		"vite": "7.2.7",
 		"vitest": "4.0.15"
 	},