@r2digisolutions/ui 0.26.2 → 0.26.4

package/dist/components/ui/Card/Card.svelte

@@ -4,18 +4,29 @@
 	import CardHeader from './CardHeader.svelte';
 
 	const { children, footer, header, onclick, body_class, ...props }: Props = $props();
+
+	const isInteractive = $derived(typeof onclick === 'function');
+	const Tag = $derived(isInteractive ? 'button' : 'article');
 </script>
 
 <svelte:element
-	this={onclick ? 'button' : 'article'}
+	this={Tag}
 	{...props}
-	role="button"
-	type={onclick ? 'button' : undefined}
-	tabindex="0"
-	aria-label="Card"
 	{onclick}
+	type={isInteractive ? 'button' : undefined}
+	role={isInteractive ? 'button' : undefined}
+	tabindex={isInteractive ? 0 : undefined}
+	data-interactive={isInteractive}
 	class={[
-		'rounded-3xl border border-white/50 bg-white text-black shadow-sm backdrop-blur-xl dark:border-neutral-700 dark:bg-neutral-900 dark:text-white',
+		'relative flex flex-col overflow-hidden rounded-2xl border text-sm',
+		'border-neutral-200/80 bg-white/80 text-neutral-900 shadow-sm shadow-black/5 backdrop-blur-xl',
+		'dark:border-neutral-800/80 dark:bg-neutral-950/80 dark:text-neutral-50',
+
+		isInteractive &&
+			'cursor-pointer transition-all duration-150 hover:-translate-y-px hover:border-neutral-300 hover:shadow-md hover:shadow-black/10 dark:hover:border-neutral-600',
+		isInteractive &&
+			'focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent focus-visible:outline-none',
+
 		props.class
 	]}
 >

package/dist/components/ui/NoContent/NoContent.svelte

@@ -1,25 +1,44 @@
 <script lang="ts">
 	import type { Props } from './type.js';
-
 	const { title, subtitle, children, icon: Icon, ...props }: Props = $props();
 </script>
 
-<div class={['w-full py-20 text-center', props.class]}>
+<div
+	class={[
+		'flex w-full flex-col items-center justify-center px-4 py-20 text-center',
+		'rounded-2xl border border-neutral-200/80 bg-white/70 shadow-sm shadow-black/5 backdrop-blur-md',
+		'dark:border-neutral-800/80 dark:bg-neutral-950/80',
+		props.class
+	]}
+>
 	{#if Icon}
 		<div
-			class={[
-				'mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-gradient-to-br from-blue-100 to-purple-100'
-			]}
+			class="mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-full
+            bg-linear-to-br from-indigo-100 via-purple-100 to-blue-100
+            shadow-inner ring-1 shadow-white/40
+            ring-white/40 ring-inset dark:from-indigo-900/30
+            dark:via-purple-900/30 dark:to-blue-900/30 dark:shadow-black/20 dark:ring-white/5"
 		>
-			<Icon class="h-12 w-12 text-gray-400" />
+			<Icon
+				class="h-12 w-12 text-neutral-400 opacity-90 transition-transform duration-300 group-hover:scale-105 dark:text-neutral-500"
+			/>
 		</div>
 	{/if}
-	<h3 class="text-2xl font-bold text-gray-900">{title}</h3>
-	<p class="text-md mx-auto max-w-md text-gray-500">
-		{subtitle}
-	</p>
+
+	<h3
+		class="text-xl font-semibold tracking-tight text-neutral-900 md:text-2xl dark:text-neutral-50"
+	>
+		{title}
+	</h3>
+
+	{#if subtitle}
+		<p class="mx-auto mt-2 max-w-md text-sm text-neutral-600 md:text-base dark:text-neutral-400">
+			{subtitle}
+		</p>
+	{/if}
+
 	{#if children}
-		<div class="mt-4 flex items-center justify-center gap-4">
+		<div class="mt-6 flex flex-wrap items-center justify-center gap-3">
 			{@render children?.()}
 		</div>
 	{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.26.2",
+	"version": "0.26.4",
 	"private": false,
 	"packageManager": "bun@1.3.2",
 	"publishConfig": {