@placeholderco/placeholder-ui 2.5.5 → 2.6.0

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export { default as Badge } from './ui/Badge.svelte';
 export type { BadgeProps } from './ui/Badge.svelte';
 export { default as Dialog } from './ui/Dialog.svelte';
 export type { DialogProps, DialogContext } from './ui/Dialog.svelte';
+export { default as ConfirmDialog } from './ui/ConfirmDialog.svelte';
+export type { ConfirmDialogProps } from './ui/ConfirmDialog.svelte';
 export { default as Drawer } from './ui/Drawer.svelte';
 export type { DrawerProps } from './ui/Drawer.svelte';
 export { default as Dropdown } from './ui/Dropdown.svelte';

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as Button } from './ui/Button.svelte';
 export { default as ActionIcon } from './ui/ActionIcon.svelte';
 export { default as Badge } from './ui/Badge.svelte';
 export { default as Dialog } from './ui/Dialog.svelte';
+export { default as ConfirmDialog } from './ui/ConfirmDialog.svelte';
 export { default as Drawer } from './ui/Drawer.svelte';
 export { default as Dropdown } from './ui/Dropdown.svelte';
 export { default as Dropzone } from './ui/Dropzone.svelte';

package/dist/ui/ConfirmDialog.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from './Button.svelte';
+	import Dialog from './Dialog.svelte';
+	import type { ButtonVariant } from './ButtonVariant.js';
+
+	export interface ConfirmDialogProps {
+		/** Whether the dialog is visible (bindable) */
+		show: boolean;
+		/** Dialog title displayed in the header */
+		title?: string | undefined;
+		/**
+		 * Plain-text body. Ignored when `children` is provided, so pass a snippet
+		 * for richer content.
+		 */
+		message?: string | undefined;
+		/** Label for the confirming button */
+		okText?: string;
+		/** Label for the dismissing button */
+		cancelText?: string;
+		/** Visual variant of the confirming button (use `danger` for destructive actions) */
+		okVariant?: ButtonVariant;
+		/** Visual variant of the dismissing button */
+		cancelVariant?: ButtonVariant;
+		/** Icon shown on the left of the confirming button */
+		okSvg?: string;
+		/** Disable the confirming button (e.g. while a form is invalid) */
+		okDisabled?: boolean;
+		/** Hide the Cancel button entirely, leaving an acknowledgement-style dialog */
+		hideCancel?: boolean;
+		/**
+		 * Which button receives focus when the dialog opens. Defaults to the
+		 * confirming button, or to Cancel when `okVariant` is a danger variant so
+		 * a stray Enter cannot trigger a destructive action.
+		 */
+		initialFocus?: 'ok' | 'cancel' | 'none';
+		/**
+		 * Called when OK is pressed. Returning a promise puts the OK button into a
+		 * loading state and keeps the dialog open until it settles. Return `false`
+		 * (or resolve to `false`) to keep the dialog open.
+		 */
+		onConfirm?: () => void | boolean | Promise<void | boolean>;
+		/** Called when the dialog is dismissed via Cancel, the close icon, Escape or the backdrop */
+		onCancel?: () => void;
+		/** Allow closing by clicking backdrop or pressing Escape */
+		allowImplicitClose?: boolean;
+		/** Size preset for the dialog width */
+		size?: 'md' | 'lg' | 'xl' | 'full';
+		/** Additional CSS classes passed through to the dialog */
+		class?: string;
+		/** Custom body content; overrides `message` */
+		children?: Snippet;
+	}
+
+	let {
+		show = $bindable(false),
+		title = undefined,
+		message = undefined,
+		okText = 'Save',
+		cancelText = 'Cancel',
+		okVariant = 'primary',
+		cancelVariant = 'secondary',
+		okSvg = undefined,
+		okDisabled = false,
+		hideCancel = false,
+		initialFocus = undefined,
+		onConfirm = undefined,
+		onCancel = undefined,
+		allowImplicitClose = true,
+		size = 'md',
+		class: classes = '',
+		children
+	}: ConfirmDialogProps = $props();
+
+	let loading = $state(false);
+	let footerElement: HTMLDivElement | undefined = $state(undefined);
+
+	// Track whether the close was the result of OK so the cancel callback only
+	// fires for genuine dismissals (Cancel button, close icon, Escape, backdrop)
+	let confirmed = false;
+	let wasOpen = false;
+
+	const resolvedFocus = $derived(
+		initialFocus ?? (okVariant.startsWith('danger') && !hideCancel ? 'cancel' : 'ok')
+	);
+
+	$effect(() => {
+		if (show && !wasOpen) {
+			wasOpen = true;
+			confirmed = false;
+			loading = false;
+			focusInitialButton();
+		} else if (!show && wasOpen) {
+			wasOpen = false;
+			loading = false;
+			if (!confirmed) onCancel?.();
+		}
+	});
+
+	function focusInitialButton() {
+		if (resolvedFocus === 'none') return;
+		// showModal() runs in the parent Dialog's effect and moves focus to the
+		// first focusable element; wait a frame so this focus call lands after it
+		requestAnimationFrame(() => {
+			const target = footerElement?.querySelector<HTMLButtonElement>(
+				`.confirm-dialog-${resolvedFocus} button`
+			);
+			target?.focus();
+		});
+	}
+
+	async function handleConfirm() {
+		if (loading) return;
+		let result: void | boolean;
+		try {
+			const pending = onConfirm?.();
+			if (pending instanceof Promise) {
+				loading = true;
+				result = await pending;
+			} else {
+				result = pending;
+			}
+		} finally {
+			loading = false;
+		}
+		if (result === false) return;
+		confirmed = true;
+		show = false;
+	}
+
+	function handleCancel() {
+		if (loading) return;
+		show = false;
+	}
+</script>
+
+<Dialog
+	bind:show
+	{title}
+	{size}
+	class={classes}
+	allowImplicitClose={allowImplicitClose && !loading}
+>
+	{#if children}
+		{@render children()}
+	{:else if message}
+		<p class="confirm-dialog-message">{message}</p>
+	{/if}
+	{#snippet footer()}
+		<div class="confirm-dialog-actions" bind:this={footerElement}>
+			{#if !hideCancel}
+				<span class="confirm-dialog-cancel">
+					<Button variant={cancelVariant} disabled={loading} onclick={handleCancel}>
+						{cancelText}
+					</Button>
+				</span>
+			{/if}
+			<span class="confirm-dialog-ok">
+				<Button
+					variant={okVariant}
+					svg={okSvg}
+					{loading}
+					disabled={okDisabled}
+					onclick={handleConfirm}
+				>
+					{okText}
+				</Button>
+			</span>
+		</div>
+	{/snippet}
+</Dialog>
+
+<style>
+	.confirm-dialog-message {
+		margin: 0;
+		white-space: pre-line;
+		overflow-wrap: anywhere;
+	}
+
+	.confirm-dialog-actions {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 0.5rem;
+	}
+
+	.confirm-dialog-cancel,
+	.confirm-dialog-ok {
+		display: contents;
+	}
+</style>

package/dist/ui/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+import type { ButtonVariant } from './ButtonVariant.js';
+export interface ConfirmDialogProps {
+    /** Whether the dialog is visible (bindable) */
+    show: boolean;
+    /** Dialog title displayed in the header */
+    title?: string | undefined;
+    /**
+     * Plain-text body. Ignored when `children` is provided, so pass a snippet
+     * for richer content.
+     */
+    message?: string | undefined;
+    /** Label for the confirming button */
+    okText?: string;
+    /** Label for the dismissing button */
+    cancelText?: string;
+    /** Visual variant of the confirming button (use `danger` for destructive actions) */
+    okVariant?: ButtonVariant;
+    /** Visual variant of the dismissing button */
+    cancelVariant?: ButtonVariant;
+    /** Icon shown on the left of the confirming button */
+    okSvg?: string;
+    /** Disable the confirming button (e.g. while a form is invalid) */
+    okDisabled?: boolean;
+    /** Hide the Cancel button entirely, leaving an acknowledgement-style dialog */
+    hideCancel?: boolean;
+    /**
+     * Which button receives focus when the dialog opens. Defaults to the
+     * confirming button, or to Cancel when `okVariant` is a danger variant so
+     * a stray Enter cannot trigger a destructive action.
+     */
+    initialFocus?: 'ok' | 'cancel' | 'none';
+    /**
+     * Called when OK is pressed. Returning a promise puts the OK button into a
+     * loading state and keeps the dialog open until it settles. Return `false`
+     * (or resolve to `false`) to keep the dialog open.
+     */
+    onConfirm?: () => void | boolean | Promise<void | boolean>;
+    /** Called when the dialog is dismissed via Cancel, the close icon, Escape or the backdrop */
+    onCancel?: () => void;
+    /** Allow closing by clicking backdrop or pressing Escape */
+    allowImplicitClose?: boolean;
+    /** Size preset for the dialog width */
+    size?: 'md' | 'lg' | 'xl' | 'full';
+    /** Additional CSS classes passed through to the dialog */
+    class?: string;
+    /** Custom body content; overrides `message` */
+    children?: Snippet;
+}
+declare const ConfirmDialog: import("svelte").Component<ConfirmDialogProps, {}, "show">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.5.5",
+  "version": "2.6.0",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",
@@ -56,7 +56,7 @@
     "@sveltejs/kit": "^2.70.3",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@types/node": "^26.4.1",
+    "@types/node": "^26.5.1",
     "globals": "^17.12.0",
     "prettier": "^3.9.6",
     "prettier-plugin-svelte": "^4.1.1",
@@ -65,7 +65,7 @@
     "svelte": "^5.57.0",
     "svelte-check": "^4.7.6",
     "typescript": "^6.0.3",
-    "vite": "^8.2.2"
+    "vite": "^8.3.0"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",