@r2digisolutions/ui 0.29.1 → 0.30.0

package/dist/components/container/SelectMultiple/SelectMultiple.svelte

@@ -179,18 +179,17 @@
 			<div class="relative">
 				<Input
 					type="search"
-					class="w-full"
+					class="w-full pl-8"
 					placeholder="Buscar..."
 					name="search"
 					autofocus
 					value={search}
 					oninput={(e) => (search = e.currentTarget.value)}
 				/>
-				<div class="top absolute left-2">
+				<div class="top absolute top-0 bottom-0 left-2 flex items-center justify-center">
 					<Search class="h-4 w-4 text-neutral-400" />
 				</div>
 			</div>
-
 			{#if multiple}
 				<div
 					class="flex items-center justify-between text-[11px] text-neutral-500 dark:text-neutral-400"

package/dist/components/index.d.ts

@@ -23,4 +23,5 @@ 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';
+export { 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,5 @@ 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';
+export { 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/Input/Input.svelte

@@ -27,7 +27,17 @@
 		}
 	}}
 	class={[
-		'block h-12 w-full rounded-lg border border-gray-300 px-2 py-3 font-normal transition-colors placeholder:text-gray-400 read-only:border-gray-300 read-only:bg-gray-200 read-only:text-gray-500 focus:border-transparent focus:ring-2 focus:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-900 read-only:dark:border-neutral-700 read-only:dark:bg-neutral-800 read-only:dark:text-gray-400 dark:focus:ring-offset-gray-800',
+		'block h-12 w-full rounded-lg px-3 py-2 text-sm transition-colors outline-none',
+		'border border-neutral-300 bg-neutral-50 text-neutral-900 placeholder:text-neutral-400',
+		'hover:border-neutral-400',
+		'focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30',
+		'disabled:cursor-not-allowed disabled:opacity-50',
+		'read-only:border-neutral-300 read-only:bg-neutral-100 read-only:text-neutral-500',
+		'dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-500',
+		'dark:hover:border-neutral-600',
+		'dark:focus:border-purple-400 dark:focus:ring-purple-400/30',
+		'dark:read-only:border-neutral-700 dark:read-only:bg-neutral-800 dark:read-only:text-neutral-400',
+
 		props.class
 	]}
 />

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.1",
+	"version": "0.30.0",
 	"private": false,
 	"packageManager": "bun@1.3.4",
 	"publishConfig": {