From 1f17cfa35d66f7e86c5f99ceb369beb0994b3383 Mon Sep 17 00:00:00 2001
From: madkarmaa <madkarma99@gmail.com>
Date: Thu, 3 Apr 2025 12:57:53 +0200
Subject: [PATCH] feat: add button code (no style)

---
 package.json                           |  3 ++
 pnpm-lock.yaml                         | 13 +++++++
 src/lib/components/atoms/Button.svelte | 47 ++++++++++++++++++++++++++
 src/lib/types.ts                       |  7 ++++
 svelte.config.js                       |  3 +-
 5 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 325122d..a4b8f71 100644
--- a/package.json
+++ b/package.json
@@ -37,5 +37,8 @@
 			"esbuild",
 			"svelte-preprocess"
 		]
+	},
+	"dependencies": {
+		"svelte-material-icons": "^3.0.5"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ed550bf..c4a74a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      svelte-material-icons:
+        specifier: ^3.0.5
+        version: 3.0.5(svelte@5.25.3)
     devDependencies:
       '@eslint/compat':
         specifier: ^1.2.5
@@ -1119,6 +1123,11 @@ packages:
       svelte:
         optional: true
 
+  svelte-material-icons@3.0.5:
+    resolution: {integrity: sha512-UbhAa+Btd5y6e6DMljVccP+cbJ8lvesltMippiCOvfIUtYe2TsQqM+P6osfrVsZHV47b1tY6AmqCuSpMKnwMOQ==}
+    peerDependencies:
+      svelte: ^3.0.0 || ^4.0.0
+
   svelte@5.25.3:
     resolution: {integrity: sha512-J9rcZ/xVJonAoESqVGHHZhrNdVbrCfkdB41BP6eiwHMoFShD9it3yZXApVYMHdGfCshBsZCKsajwJeBbS/M1zg==}
     engines: {node: '>=18'}
@@ -2180,6 +2189,10 @@ snapshots:
     optionalDependencies:
       svelte: 5.25.3
 
+  svelte-material-icons@3.0.5(svelte@5.25.3):
+    dependencies:
+      svelte: 5.25.3
+
   svelte@5.25.3:
     dependencies:
       '@ampproject/remapping': 2.3.0
diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index e69de29..baf6257 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import type { SpecialTargetValues } from '$types';
+
+	type ButtonType = 'filled' | 'tonal' | 'text' | 'outlined';
+
+	type Props = {
+		type: ButtonType;
+		icon?: Component;
+		iconSize?: number;
+		iconColor?: string;
+		href?: string;
+		target?: `${SpecialTargetValues}` | SpecialTargetValues;
+		label?: string;
+		children?: Snippet;
+		onclick?: () => void;
+	};
+
+	let {
+		type,
+		// https://svelte.dev/docs/svelte/compiler-warnings#svelte_component_deprecated
+		icon: Icon,
+		href,
+		children,
+		label = '',
+		onclick = () => {},
+		iconSize = 20,
+		iconColor = 'currentColor',
+		target = '_self'
+	}: Props = $props();
+</script>
+
+{#if href}
+	<a {href} {target} class:type aria-label={label}>
+		{#if Icon}
+			<Icon size={iconSize} color={iconColor} />
+		{/if}
+		{@render children?.()}
+	</a>
+{:else}
+	<button {onclick} class:type aria-label={label}>
+		{#if Icon}
+			<Icon size={iconSize} color={iconColor} />
+		{/if}
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 9d62427..7ac0324 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,2 +1,9 @@
 export type SHA256AuthHeader =
 	`Digest username="${string}", realm="${string}", nonce="${string}", uri="${string}", algorithm=${string}, response="${string}"`;
+
+export enum SpecialTargetValues {
+	SELF = '_self',
+	BLANK = '_blank',
+	PARENT = '_parent',
+	TOP = '_top'
+}
diff --git a/svelte.config.js b/svelte.config.js
index 4ccb702..3e754c3 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -9,7 +9,8 @@ const config = {
 		alias: {
 			$components: './src/lib/components',
 			$api: './src/lib/api',
-			$lib: './src/lib'
+			$lib: './src/lib',
+			$types: './src/lib/types.ts'
 		}
 	}
 };