refactor: separate components

web/src/lib/components/ui/Button.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import type { Component } from "svelte";
-	import { ButtonVariantDefine, type ButtonVariant } from "../define";
+	import {
+		ButtonVariantDefine,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "./define";
 	import Icon from "./Icon.svelte";
 
 	interface Props {
@@ -8,21 +12,27 @@
 		ariaLabel?: string;
 		onclick?: () => void;
 		variant?: ButtonVariant;
+		size?: ButtonSize;
 		icon?: Component<{ size?: number; class?: string }>;
 		disabled?: boolean;
+		type?: "button" | "submit";
 	}
 	let {
 		label,
 		ariaLabel = label,
 		onclick,
 		variant = ButtonVariantDefine.PRIMARY,
+		size = "m",
 		icon,
 		disabled = false,
+		type = "button",
 	}: Props = $props();
 </script>
 
 <button
-	class="btn btn--{variant}"
+	class="btn btn--{variant} btn--{size}"
+	class:btn--icon={!label}
+	{type}
 	{disabled}
 	aria-label={ariaLabel}
 	onclick={() => onclick?.()}
@@ -51,12 +61,36 @@
 		color: var(--color-background);
 	}
 
+	.btn--s {
+		gap: var(--space-m);
+		padding: var(--space-m) var(--space-l);
+		border-width: var(--size-border);
+		border-radius: var(--radius-m);
+		font-size: var(--font-size-s);
+		font-family: var(--font-mono);
+		font-weight: normal;
+	}
+
+	.btn--s.btn--icon {
+		padding: var(--space-s);
+	}
+
 	.btn--outline {
 		background: transparent;
 		color: var(--color-main-tint);
 		border-color: var(--color-main-tint);
 	}
 
+	.btn--s.btn--outline {
+		color: var(--color-text-muted);
+		border-color: var(--color-border);
+	}
+
+	.btn--s.btn--outline:hover {
+		color: var(--color-text);
+		border-color: var(--color-text-muted);
+	}
+
 	.btn--accent {
 		background: var(--color-accent);
 		color: var(--color-background);
@@ -69,6 +103,16 @@
 		border-color: var(--color-danger);
 	}
 
+	.btn--clear {
+		background: none;
+		border-color: transparent;
+		color: var(--color-text-muted);
+	}
+
+	.btn--clear:hover {
+		color: var(--color-text);
+	}
+
 	.btn:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;