add options to Copy_To_Clipboard

.changeset/silver-parrots-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@ryanatkn/fuz': patch
+---
+
+add options to `Copy_To_Clipboard`

src/lib/Copy_To_Clipboard.svelte

@@ -1,11 +1,26 @@
 <script lang="ts">
+	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
 	interface Props {
 		text: string;
+		classes?: string;
+		button_classes?: string;
+		button_attrs?: SvelteHTMLElements['button'];
+		attrs?: SvelteHTMLElements['div'];
+		children?: Snippet<[copied: boolean, failed: boolean]>;
 	}
 
 	// TODO add library entry
 
-	const {text}: Props = $props();
+	const {
+		text,
+		classes = '',
+		button_classes = 'icon_button',
+		button_attrs,
+		attrs,
+		children,
+	}: Props = $props();
 
 	let copied = $state(false);
 	let failed = $state(false);
@@ -23,9 +38,14 @@
 	};
 </script>
 
-<div class="copy_to_clipboard">
-	<button type="button" class="icon_button" style:font-size="var(--size_lg)" onclick={copy}
-		>📋</button
+<div {...attrs} class="copy_to_clipboard {classes}">
+	<button
+		{...button_attrs}
+		type="button"
+		class={button_classes}
+		style:font-size="var(--size_lg)"
+		onclick={copy}
+		>{#if children}{@render children(copied, failed)}{:else}📋{/if}</button
 	>
 	{#if copied}<small class="color_b_5">copied!</small>{/if}
 	{#if failed}<small class="color_c_5">failed</small>{/if}