@x33025/sveltely 0.0.47 → 0.0.49

package/dist/components/AsyncButton.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
+	import { CircleAlertIcon } from '@lucide/svelte';
 	import type { Component } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import Spinner from './Spinner.svelte';
+	import Tooltip from './Tooltip.svelte';
 
 	type Props = {
 		icon?: Component<{ class?: string }>;
 		label: string;
 		action: () => void | Promise<void>;
+		error?: unknown | null;
+		style?: 'iconAndLabel' | 'iconOnly';
 	} & Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
 
 	let {
 		icon,
 		label,
 		action,
+		error = $bindable<unknown | null>(null),
+		style: styleMode = 'iconAndLabel',
 		disabled = false,
 		class: className = '',
 		type = 'button',
@@ -23,28 +29,46 @@
 
 	const handleClick = async () => {
 		if (disabled || pending) return;
+		error = null;
 		pending = true;
 		try {
 			await action();
+		} catch (caught) {
+			error = caught;
 		} finally {
 			pending = false;
 		}
 	};
+
+	const errorLabel = $derived.by(() => {
+		if (!error) return null;
+		if (typeof error === 'string' && error.trim().length > 0) return error;
+		if (error instanceof Error && error.message.trim().length > 0) return error.message;
+		return 'Something went wrong';
+	});
 </script>
 
-<button
-	{type}
-	class="inline-flex items-center gap-2 disabled:cursor-not-allowed disabled:opacity-50 {className}"
-	disabled={disabled || pending}
-	aria-busy={pending}
-	{...props}
-	onclick={handleClick}
->
-	{#if pending}
-		<Spinner class="size-4" />
-	{:else if icon}
-		{@const Icon = icon}
-		<Icon class="size-4" />
-	{/if}
-	<span>{label}</span>
-</button>
+<Tooltip label={errorLabel ?? ''} disabled={!errorLabel}>
+	<button
+		{type}
+		class="inline-flex items-center gap-2 disabled:cursor-not-allowed disabled:opacity-50 {className}"
+		disabled={disabled || pending}
+		aria-busy={pending}
+		aria-label={styleMode === 'iconOnly' ? label : undefined}
+		data-error={error ? 'true' : 'false'}
+		{...props}
+		onclick={handleClick}
+	>
+		{#if pending}
+			<Spinner class="async-button-icon size-4" />
+		{:else if error}
+			<CircleAlertIcon class="async-button-icon size-4 text-red-600" />
+		{:else if icon}
+			{@const Icon = icon}
+			<Icon class="async-button-icon size-4" />
+		{/if}
+		{#if styleMode === 'iconAndLabel'}
+			<span class="async-button-text">{label}</span>
+		{/if}
+	</button>
+</Tooltip>

package/dist/components/AsyncButton.svelte.d.ts

@@ -6,7 +6,9 @@ type Props = {
     }>;
     label: string;
     action: () => void | Promise<void>;
+    error?: unknown | null;
+    style?: 'iconAndLabel' | 'iconOnly';
 } & Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
-declare const AsyncButton: Component<Props, {}, "">;
+declare const AsyncButton: Component<Props, {}, "error">;
 type AsyncButton = ReturnType<typeof AsyncButton>;
 export default AsyncButton;

package/dist/style/index.css

@@ -1,4 +1,7 @@
 @import 'tailwindcss';
+@custom-variant error (&[data-error='true']);
+@custom-variant error-icon (&[data-error='true'] .async-button-icon);
+@custom-variant error-text (&[data-error='true'] .async-button-text);
 
 @layer base {
 	html,

package/dist/style.css

@@ -7,6 +7,8 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-700: oklch(37.3% 0.034 259.733);
@@ -367,6 +369,9 @@
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
+  .border-zinc-300 {
+    border-color: var(--color-zinc-300);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -429,6 +434,9 @@
   .text-gray-700 {
     color: var(--color-gray-700);
   }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .text-red-700 {
     color: var(--color-red-700);
   }
@@ -540,6 +548,16 @@
       opacity: 50%;
     }
   }
+  .error\:border-red-500 {
+    &[data-error='true'] {
+      border-color: var(--color-red-500);
+    }
+  }
+  .error\:text-red-600 {
+    &[data-error='true'] {
+      color: var(--color-red-600);
+    }
+  }
 }
 @layer base {
   html,	body {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.47",
+	"version": "0.0.49",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",