From 7dcb100412719455c42eeaebf25b29d9a09a4203 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 13 Dec 2025 23:12:34 -0800
Subject: [PATCH] add medium size to Dialog, leftIcon/rightIcon props to Button

---
 src/lib/components/ui/Button.svelte | 14 ++++++++++++++
 src/lib/components/ui/Dialog.svelte | 15 +++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
index a2b85035..0b7599f3 100644
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -44,6 +44,10 @@
 		leftAccessory?: Snippet | undefined
 		/** Right accessory content */
 		rightAccessory?: Snippet | undefined
+		/** Left icon name */
+		leftIcon?: string | undefined
+		/** Right icon name */
+		rightIcon?: string | undefined
 		/** Icon name (legacy support) */
 		icon?: string | undefined
 		/** Icon position (legacy support) */
@@ -77,6 +81,8 @@
 		children,
 		leftAccessory,
 		rightAccessory,
+		leftIcon,
+		rightIcon,
 		icon,
 		iconPosition = 'left',
 		disabled = false,
@@ -127,6 +133,10 @@
 		<span class="accessory">
 			{@render leftAccessory()}
 		</span>
+	{:else if leftIcon}
+		<span class="accessory">
+			<Icon name={leftIcon} size={iconSizes[size]} />
+		</span>
 	{:else if hasLeftIcon && !iconOnly && icon}
 		<span class="accessory">
 			<Icon name={icon} size={iconSizes[size]} />
@@ -147,6 +157,10 @@
 		<span class="accessory">
 			{@render rightAccessory()}
 		</span>
+	{:else if rightIcon}
+		<span class="accessory">
+			<Icon name={rightIcon} size={iconSizes[size]} />
+		</span>
 	{:else if hasRightIcon && !iconOnly && icon}
 		<span class="accessory">
 			<Icon name={icon} size={iconSizes[size]} />
diff --git a/src/lib/components/ui/Dialog.svelte b/src/lib/components/ui/Dialog.svelte
index 2c6c8d06..3a044742 100644
--- a/src/lib/components/ui/Dialog.svelte
+++ b/src/lib/components/ui/Dialog.svelte
@@ -2,7 +2,7 @@
 	import { Dialog as DialogBase } from 'bits-ui'
 	import type { Snippet } from 'svelte'
 
-	type DialogSize = 'default' | 'large'
+	type DialogSize = 'default' | 'medium' | 'large'
 
 	interface DialogProps {
 		open: boolean
@@ -18,7 +18,13 @@
 		children
 	}: DialogProps = $props()
 
-	const sizeClass = $derived(size === 'large' ? 'dialog-content-large' : '')
+	const sizeClass = $derived(
+		size === 'large'
+			? 'dialog-content-large'
+			: size === 'medium'
+				? 'dialog-content-medium'
+				: ''
+	)
 
 	function handleOpenChange(newOpen: boolean) {
 		open = newOpen
@@ -100,6 +106,11 @@
 		}
 	}
 
+	// Medium dialog variant - wider than default, grows with content
+	:global(.dialog-content-medium) {
+		width: 900px;
+	}
+
 	// Large dialog variant for collection modals, etc.
 	:global(.dialog-content-large) {
 		width: 90vw;