@x33025/sveltely 0.0.45 → 0.0.47

package/dist/components/AsyncButton.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Spinner from './Spinner.svelte';
+
+	type Props = {
+		icon?: Component<{ class?: string }>;
+		label: string;
+		action: () => void | Promise<void>;
+	} & Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
+
+	let {
+		icon,
+		label,
+		action,
+		disabled = false,
+		class: className = '',
+		type = 'button',
+		...props
+	}: Props = $props();
+
+	let pending = $state(false);
+
+	const handleClick = async () => {
+		if (disabled || pending) return;
+		pending = true;
+		try {
+			await action();
+		} finally {
+			pending = false;
+		}
+	};
+</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>

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

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = {
+    icon?: Component<{
+        class?: string;
+    }>;
+    label: string;
+    action: () => void | Promise<void>;
+} & Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
+declare const AsyncButton: Component<Props, {}, "">;
+type AsyncButton = ReturnType<typeof AsyncButton>;
+export default AsyncButton;

package/dist/index.d.ts

@@ -13,3 +13,4 @@ export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Dropdown } from './components/Dropdown';
 export { default as Popover } from './components/Popover';
 export { default as ChipInput } from './components/ChipInput.svelte';
+export { default as AsyncButton } from './components/AsyncButton.svelte';

package/dist/index.js

@@ -13,3 +13,4 @@ export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Dropdown } from './components/Dropdown';
 export { default as Popover } from './components/Popover';
 export { default as ChipInput } from './components/ChipInput.svelte';
+export { default as AsyncButton } from './components/AsyncButton.svelte';

package/dist/style.css

@@ -373,6 +373,9 @@
   .bg-zinc-50 {
     background-color: var(--color-zinc-50);
   }
+  .bg-zinc-900 {
+    background-color: var(--color-zinc-900);
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -429,6 +432,9 @@
   .text-red-700 {
     color: var(--color-red-700);
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .text-zinc-500 {
     color: var(--color-zinc-500);
   }
@@ -529,6 +535,11 @@
       opacity: 40%;
     }
   }
+  .disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
 }
 @layer base {
   html,	body {

package/package.json

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