@signal9/era-ui 2.14.0 → 2.16.0

package/dist/generated-docs/manifest.json

@@ -16,6 +16,14 @@
       "sections": [],
       "file": "surfaces.md"
     },
+    {
+      "slug": "measurements",
+      "title": "Measurements",
+      "summary": "Every component measured as it renders — gaps, radii, and the laws they must obey.",
+      "tokenEstimate": 25,
+      "sections": [],
+      "file": "measurements.md"
+    },
     {
       "slug": "text",
       "title": "Text",
@@ -166,6 +174,17 @@
       ],
       "file": "code-block.md"
     },
+    {
+      "slug": "copy-button",
+      "title": "Copy Button",
+      "summary": "An icon button that copies text and cross-fades to a result glyph.",
+      "tokenEstimate": 257,
+      "sections": [
+        "Import",
+        "Props"
+      ],
+      "file": "copy-button.md"
+    },
     {
       "slug": "kv",
       "title": "KV",

package/dist/generated-docs/measurements.md

@@ -0,0 +1,3 @@
+# Measurements
+
+Every component measured as it renders — gaps, radii, and the laws they must obey.

package/dist/ui/code-block/code-block.svelte

@@ -2,9 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../../utils/index.js';
-	import { Button } from '../button';
-	import Copy from '@lucide/svelte/icons/copy';
-	import Check from '@lucide/svelte/icons/check';
+	import { CopyButton } from '../copy-button/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -20,16 +18,9 @@
 		children?: Snippet;
 	} = $props();
 
-	let copied = $state(false);
-
-	function copy() {
-		const text = code ?? ref?.querySelector('code')?.textContent ?? '';
-		navigator.clipboard.writeText(text);
-		copied = true;
-		setTimeout(() => {
-			copied = false;
-		}, 1500);
-	}
+	// Resolved at click time: with a `children` snippet the text only exists in
+	// the DOM, so it can't be read during render.
+	const copyText = () => code ?? ref?.querySelector('code')?.textContent ?? '';
 </script>
 
 <div
@@ -42,17 +33,9 @@
 			>{#if children}{@render children()}{:else}{code}{/if}</code
 		></pre>
 	{#if copyable}
-		<Button
-			icon
-			size="sm"
+		<CopyButton
+			text={copyText}
 			class="absolute top-[calc(var(--era-inset-md)+(var(--era-text)*1.625-var(--era-h-sm))/2)] right-[calc(var(--era-inset-md)+(var(--era-text)*1.625-var(--era-h-sm))/2)]"
-			onclick={copy}
-		>
-			{#if copied}
-				<Check class="size-(--era-h-xs)" />
-			{:else}
-				<Copy class="size-(--era-h-xs)" />
-			{/if}
-		</Button>
+		/>
 	{/if}
 </div>

package/dist/ui/copy-button/copy-button.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Copy from '@lucide/svelte/icons/copy';
+	import Check from '@lucide/svelte/icons/check';
+	import X from '@lucide/svelte/icons/x';
+	import { Button, type ButtonVariants } from '../button/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		text,
+		onCopy,
+		resetDelay = 1500,
+		label = 'Copy',
+		copiedLabel = 'Copied',
+		size = 'sm',
+		class: className,
+		...restProps
+		// Typed off the native button rather than bits-ui's Button.RootProps: the
+		// latter is a union whose Omit<> exceeds TS's representable-union limit
+		// (the same reason ButtonVariants is a standalone interface).
+	}: Omit<HTMLButtonAttributes, 'onclick' | 'children'> & {
+		ref?: HTMLElement | null;
+	} & ButtonVariants & {
+			/**
+			 * The string written to the clipboard. Pass a function when the value
+			 * is only knowable at click time (e.g. text read out of the DOM) — it
+			 * is resolved on each click, not at render.
+			 */
+			text: string | (() => string);
+			/** Fires after the write settles, with the outcome. */
+			onCopy?: (status: 'success' | 'failure') => void;
+			/** How long the result icon holds before falling back to idle. */
+			resetDelay?: number;
+			/** Accessible name in the idle and failure states. */
+			label?: string;
+			/** Accessible name while the success icon is showing. */
+			copiedLabel?: string;
+		} = $props();
+
+	let status = $state<'idle' | 'success' | 'failure'>('idle');
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	// The reset timer outlives the click that armed it, so it has to be torn
+	// down on destroy — a handler-only clear fires on an unmounted component.
+	$effect(() => () => clearTimeout(timer));
+
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(typeof text === 'function' ? text() : text);
+			status = 'success';
+		} catch {
+			status = 'failure';
+		}
+		onCopy?.(status);
+		clearTimeout(timer);
+		timer = setTimeout(() => (status = 'idle'), resetDelay);
+	}
+
+	// All three icons stay mounted and stack on one another, so the swap
+	// cross-fades in BOTH directions — an icon that unmounts can only animate
+	// its enter. The entering glyph scales up from 0.25 and unblurs while the
+	// leaving one does the reverse; timing rides the motion axis, so the swap
+	// snaps at instant, is decisive at normal, and overshoots at extra.
+	const iconBase =
+		'absolute inset-0 size-(--era-h-xs) transition-[opacity,scale,filter] duration-(--era-duration) ease-(--era-ease)';
+	const iconIn = 'scale-100 opacity-100 blur-none';
+	const iconOut = 'scale-25 opacity-0 blur-xs';
+</script>
+
+<Button
+	bind:ref
+	icon
+	{size}
+	aria-label={status === 'success' ? copiedLabel : label}
+	class={className}
+	onclick={copy}
+	{...restProps}
+>
+	<span class="relative block size-(--era-h-xs) shrink-0">
+		<Copy class={cn(iconBase, status === 'idle' ? iconIn : iconOut)} />
+		<Check class={cn(iconBase, 'text-success', status === 'success' ? iconIn : iconOut)} />
+		<X class={cn(iconBase, 'text-destructive', status === 'failure' ? iconIn : iconOut)} />
+	</span>
+</Button>

package/dist/ui/copy-button/copy-button.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type ButtonVariants } from '../button/index.js';
+type $$ComponentProps = Omit<HTMLButtonAttributes, 'onclick' | 'children'> & {
+    ref?: HTMLElement | null;
+} & ButtonVariants & {
+    /**
+     * The string written to the clipboard. Pass a function when the value
+     * is only knowable at click time (e.g. text read out of the DOM) — it
+     * is resolved on each click, not at render.
+     */
+    text: string | (() => string);
+    /** Fires after the write settles, with the outcome. */
+    onCopy?: (status: 'success' | 'failure') => void;
+    /** How long the result icon holds before falling back to idle. */
+    resetDelay?: number;
+    /** Accessible name in the idle and failure states. */
+    label?: string;
+    /** Accessible name while the success icon is showing. */
+    copiedLabel?: string;
+};
+declare const CopyButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/ui/copy-button/index.d.ts

@@ -0,0 +1 @@
+export { default as CopyButton } from './copy-button.svelte';

package/dist/ui/copy-button/index.js

@@ -0,0 +1 @@
+export { default as CopyButton } from './copy-button.svelte';

package/dist/ui/index.d.ts

@@ -6,6 +6,7 @@ export { Badge } from './badge/index.js';
 export * as Calendar from './calendar/index.js';
 export { Chip } from './chip/index.js';
 export { CodeBlock } from './code-block/index.js';
+export { CopyButton } from './copy-button/index.js';
 export * as Checkbox from './checkbox/index.js';
 export * as Combobox from './combobox/index.js';
 export * as Collapsible from './collapsible/index.js';

package/dist/ui/index.js

@@ -6,6 +6,7 @@ export { Badge } from './badge/index.js';
 export * as Calendar from './calendar/index.js';
 export { Chip } from './chip/index.js';
 export { CodeBlock } from './code-block/index.js';
+export { CopyButton } from './copy-button/index.js';
 export * as Checkbox from './checkbox/index.js';
 export * as Combobox from './combobox/index.js';
 export * as Collapsible from './collapsible/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "2.14.0",
+	"version": "2.16.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",

package/dist/ai/copy-button.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-	import Copy from '@lucide/svelte/icons/copy';
-	import Check from '@lucide/svelte/icons/check';
-	import X from '@lucide/svelte/icons/x';
-	import { Button } from '../ui/button/index.js';
-	import { cn } from '../utils/index.js';
-
-	let {
-		text,
-		onCopy,
-		class: className
-	}: {
-		text: string;
-		onCopy?: (status: 'success' | 'failure') => void;
-		class?: string;
-	} = $props();
-
-	let status = $state<'idle' | 'success' | 'failure'>('idle');
-	let timer: ReturnType<typeof setTimeout>;
-
-	async function copy() {
-		try {
-			await navigator.clipboard.writeText(text);
-			status = 'success';
-		} catch {
-			status = 'failure';
-		}
-		onCopy?.(status as 'success' | 'failure');
-		clearTimeout(timer);
-		timer = setTimeout(() => (status = 'idle'), 1500);
-	}
-</script>
-
-<Button icon size="icon" aria-label="Copy" class={cn(className)} onclick={copy}>
-	{#if status === 'success'}
-		<Check class="size-(--era-h-xs) text-success" />
-	{:else if status === 'failure'}
-		<X class="size-(--era-h-xs) text-destructive" />
-	{:else}
-		<Copy class="size-(--era-h-xs)" />
-	{/if}
-</Button>

package/dist/ai/copy-button.svelte.d.ts

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    text: string;
-    onCopy?: (status: 'success' | 'failure') => void;
-    class?: string;
-};
-declare const CopyButton: import("svelte").Component<$$ComponentProps, {}, "">;
-type CopyButton = ReturnType<typeof CopyButton>;
-export default CopyButton;