@orochibraru/ui 1.0.3-canary.2 → 1.0.4-canary.1

package/README.md

@@ -55,6 +55,9 @@ spinner, switch, table, tabs, textarea, toggle, toggle-group, tooltip.
 `input` turns password managers off on fields that don't set `autocomplete`, so
 a search box never gets a login suggestion.
 
+`button` takes `loading`: it disables the button and shows a spinner in place of
+its label, keeping its width, so a pending submit can't be clicked twice.
+
 ## Components
 
 Under `@orochibraru/ui/components/<name>`: one import, data in. Where a
@@ -269,9 +272,9 @@ packages `dist/` and runs publint.
 
 New upstream components come from the shadcn-svelte CLI (`components.json` is
 set up), followed by `node_modules/.bin/tailwint --fix` on the new files. The
-CLI overwrites any customised primitive a new one depends on (drawer, input and
-sonner carry the apps' changes): copy those aside before `add --overwrite` and
-put them back after.
+CLI overwrites any customised primitive a new one depends on (button, drawer,
+input and sonner carry the apps' changes): copy those aside before
+`add --overwrite` and put them back after.
 
 Dependencies use caret ranges, unlike the apps' exact pins, so a consuming app
 dedupes `bits-ui` and friends with its own copy instead of bundling two.

package/dist/components/ui/button/button.svelte

@@ -5,6 +5,7 @@
 	} from "svelte/elements";
 	import { tv, type VariantProps } from "tailwind-variants";
 
+	import { Spinner } from "../spinner/index.js";
 	import { cn, type WithElementRef } from "../../../utils.js";
 
 	export const buttonVariants = tv({
@@ -50,6 +51,7 @@
 		WithElementRef<HTMLAnchorAttributes> & {
 			variant?: ButtonVariant;
 			size?: ButtonSize;
+			loading?: boolean;
 		};
 </script>
 
@@ -62,33 +64,55 @@
 		href = undefined,
 		type = "button",
 		disabled,
+		loading = false,
 		children,
 		...restProps
 	}: ButtonProps = $props();
+
+	const inert = $derived(disabled || loading);
 </script>
 
+{#snippet content()}
+	{#if loading}
+		<span class="invisible contents">{@render children?.()}</span>
+		<Spinner class="absolute inset-0 m-auto" />
+	{:else}
+		{@render children?.()}
+	{/if}
+{/snippet}
+
 {#if href}
 	<a
 		bind:this={ref}
 		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
-		href={disabled ? undefined : href}
-		aria-disabled={disabled}
-		role={disabled ? "link" : undefined}
-		tabindex={disabled ? -1 : undefined}
+		class={cn(
+			buttonVariants({ variant, size }),
+			loading && "relative",
+			className,
+		)}
+		href={inert ? undefined : href}
+		aria-disabled={inert}
+		aria-busy={loading || undefined}
+		role={inert ? "link" : undefined}
+		tabindex={inert ? -1 : undefined}
 		{...restProps}
 	>
-		{@render children?.()}
+		{@render content()}
 	</a>
 {:else}
 	<button
 		bind:this={ref}
 		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
+		class={cn(
+			buttonVariants({ variant, size }),
+			loading && "relative",
+			className,
+		)}
 		{type}
-		{disabled}
+		disabled={inert}
+		aria-busy={loading || undefined}
 		{...restProps}
 	>
-		{@render children?.()}
+		{@render content()}
 	</button>
 {/if}

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

@@ -64,6 +64,7 @@ export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    loading?: boolean;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;