From 73c328eb354cc135c341cd0cd15e908d815923b6 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Thu, 26 Dec 2024 21:18:12 -0500
Subject: [PATCH 01/12] move loader to Feedback

---
 .../{common/Loader => Feedback}/Loader.stories.svelte         | 0
 src/lib/components/{common/Loader => Feedback}/Loader.svelte  | 0
 src/lib/components/Feedback/index.ts                          | 1 +
 src/lib/components/common/Loader/index.ts                     | 3 ---
 src/routes/+page.svelte                                       | 4 ++--
 5 files changed, 3 insertions(+), 5 deletions(-)
 rename src/lib/components/{common/Loader => Feedback}/Loader.stories.svelte (100%)
 rename src/lib/components/{common/Loader => Feedback}/Loader.svelte (100%)
 create mode 100644 src/lib/components/Feedback/index.ts
 delete mode 100644 src/lib/components/common/Loader/index.ts

diff --git a/src/lib/components/common/Loader/Loader.stories.svelte b/src/lib/components/Feedback/Loader.stories.svelte
similarity index 100%
rename from src/lib/components/common/Loader/Loader.stories.svelte
rename to src/lib/components/Feedback/Loader.stories.svelte
diff --git a/src/lib/components/common/Loader/Loader.svelte b/src/lib/components/Feedback/Loader.svelte
similarity index 100%
rename from src/lib/components/common/Loader/Loader.svelte
rename to src/lib/components/Feedback/Loader.svelte
diff --git a/src/lib/components/Feedback/index.ts b/src/lib/components/Feedback/index.ts
new file mode 100644
index 0000000..336b5ed
--- /dev/null
+++ b/src/lib/components/Feedback/index.ts
@@ -0,0 +1 @@
+export { default as Loader } from './Loader.svelte';
\ No newline at end of file
diff --git a/src/lib/components/common/Loader/index.ts b/src/lib/components/common/Loader/index.ts
deleted file mode 100644
index 9623773..0000000
--- a/src/lib/components/common/Loader/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Loader from './Loader.svelte';
-
-export default Loader;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0342404..5c20636 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import Loader from '$lib/components/common/Loader';
+	import { Loader } from '$lib/components/Feedback';
 	import { fade } from 'svelte/transition';
 
 	$effect(() => {
@@ -19,4 +19,4 @@
 	.site-loader {
 		@apply flex h-screen w-screen flex-col items-center justify-center gap-6;
 	}
-</style>
+</style>
\ No newline at end of file
-- 
2.45.3


From 817359473cd02bd777b7488845dc67e91d5d10d9 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Thu, 2 Jan 2025 22:35:54 -0500
Subject: [PATCH 02/12] fill out button props to match what is available on
 daisy

---
 .../components/Actions/Button.stories.svelte  | 19 ++++----
 src/lib/components/Actions/Button.svelte      | 47 ++++++++++++-------
 src/lib/components/Feedback/index.ts          |  2 +-
 src/lib/types/daisy-colors.ts                 |  2 -
 src/routes/+page.svelte                       |  2 +-
 5 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/Actions/Button.stories.svelte b/src/lib/components/Actions/Button.stories.svelte
index abd7504..4d8be63 100644
--- a/src/lib/components/Actions/Button.stories.svelte
+++ b/src/lib/components/Actions/Button.stories.svelte
@@ -8,9 +8,11 @@
 		title: 'Actions/Button',
 		component: Button,
 		args: {
-			onClick: fn(),
+			onclick: fn(),
 		},
 		argTypes: {
+			active: { control: 'boolean' },
+			animation: { control: 'boolean' },
 			block: { control: 'boolean' },
 			color: {
 				control: 'select',
@@ -20,28 +22,25 @@
 					'secondary',
 					'accent',
 					'ghost',
-					'link',
 					'info',
 					'success',
 					'warning',
 					'error',
 				],
 			},
+			disabled: { control: 'boolean' },
 			full: { control: 'boolean' },
 			glass: { control: 'boolean' },
-			outline: {
-				control: 'boolean',
+			shape: {
+				control: 'select',
+				options: ['circle', 'square'],
 			},
-			responsive: { control: 'boolean' },
 			size: {
 				control: 'select',
-				options: ['Default', 'xs', 'sm', 'lg'],
+				options: ['xs', 'sm', '-', 'lg'],
 				defaultValue: 'Default',
 			},
-			type: {
-				control: 'select',
-				options: ['button', 'reset', 'submit'],
-			},
+			variant: { control: 'select', options: ['link', 'outline'] },
 			wide: { control: 'boolean' },
 		},
 	});
diff --git a/src/lib/components/Actions/Button.svelte b/src/lib/components/Actions/Button.svelte
index f550841..43e89a3 100644
--- a/src/lib/components/Actions/Button.svelte
+++ b/src/lib/components/Actions/Button.svelte
@@ -3,57 +3,70 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props {
+	interface Props extends HTMLButtonAttributes {
+		active?: boolean;
+		animation?: boolean;
 		block?: boolean;
 		children: Snippet;
 		color?: DaisyColor;
+		disabled?: boolean;
 		full?: boolean;
 		glass?: boolean;
-		outline?: boolean;
-		onClick?: () => void;
-		responsive?: boolean;
+		onclick?: () => void;
+		shape?: 'circle' | 'square';
 		size?: DaisySize;
 		type?: HTMLButtonAttributes['type'];
+		variant?: 'link' | 'outline';
 		wide?: boolean;
 	}
 
 	let {
+		active = false,
+		animation = true,
 		block = false,
 		children,
 		color,
+		disabled = false,
 		full = false,
 		glass = false,
-		outline = false,
-		onClick,
-		responsive = false,
+		onclick: onClick,
+		shape,
 		size,
 		type = 'button',
 		wide = false,
+		variant,
+		...props
 	}: Props = $props();
 </script>
 
 <button
-	{type}
 	onclick={onClick}
-	class:btn-outline={outline}
+	class:btn-active={active}
+	class:no-animation={!animation}
 	class:btn-block={block}
-	class:btn-wide={wide}
-	class:w-full={full}
-	class:glass
-	class:btn-xs={size === 'xs'}
-	class:btn-sm={size === 'sm'}
-	class:btn-lg={size === 'lg'}
 	class:btn-neutral={color === 'neutral'}
 	class:btn-primary={color === 'primary'}
 	class:btn-secondary={color === 'secondary'}
 	class:btn-accent={color === 'accent'}
 	class:btn-ghost={color === 'ghost'}
-	class:btn-link={color === 'link'}
 	class:btn-info={color === 'info'}
 	class:btn-success={color === 'success'}
 	class:btn-warning={color === 'warning'}
 	class:btn-error={color === 'error'}
-	class={`btn ${responsive && 'btn-xs sm:btn-sm md:btn-md lg:btn-lg'}`}
+	class:btn-disabled={disabled}
+	class:w-full={full}
+	class:glass
+	class:btn-circle={shape === 'circle'}
+	class:btn-square={shape === 'square'}
+	class:btn-xs={size === 'xs'}
+	class:btn-sm={size === 'sm'}
+	class:btn-lg={size === 'lg'}
+	class:btn-link={variant === 'link'}
+	class:btn-outline={variant === 'outline'}
+	class:btn-wide={wide}
+	{disabled}
+	{type}
+	{...props}
 >
 	{@render children()}
 </button>
diff --git a/src/lib/components/Feedback/index.ts b/src/lib/components/Feedback/index.ts
index 336b5ed..85096d3 100644
--- a/src/lib/components/Feedback/index.ts
+++ b/src/lib/components/Feedback/index.ts
@@ -1 +1 @@
-export { default as Loader } from './Loader.svelte';
\ No newline at end of file
+export { default as Loader } from './Loader.svelte';
diff --git a/src/lib/types/daisy-colors.ts b/src/lib/types/daisy-colors.ts
index e8c5062..9947e01 100644
--- a/src/lib/types/daisy-colors.ts
+++ b/src/lib/types/daisy-colors.ts
@@ -1,11 +1,9 @@
 export type DaisyColor =
-	| 'default'
 	| 'neutral'
 	| 'primary'
 	| 'secondary'
 	| 'accent'
 	| 'ghost'
-	| 'link'
 	| 'info'
 	| 'success'
 	| 'warning'
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5c20636..9ae838e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,4 +19,4 @@
 	.site-loader {
 		@apply flex h-screen w-screen flex-col items-center justify-center gap-6;
 	}
-</style>
\ No newline at end of file
+</style>
-- 
2.45.3


From 358d3dcd59b126aa26bdf9dd49befb75bccf7a06 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Thu, 2 Jan 2025 23:25:36 -0500
Subject: [PATCH 03/12] links

---
 .../components/Navigation/Link.stories.svelte | 31 +++++++++++++++++++
 src/lib/components/Navigation/Link.svelte     | 23 ++++++++++++++
 src/lib/components/Navigation/index.ts        |  1 +
 3 files changed, 55 insertions(+)
 create mode 100644 src/lib/components/Navigation/Link.stories.svelte
 create mode 100644 src/lib/components/Navigation/Link.svelte

diff --git a/src/lib/components/Navigation/Link.stories.svelte b/src/lib/components/Navigation/Link.stories.svelte
new file mode 100644
index 0000000..30ed305
--- /dev/null
+++ b/src/lib/components/Navigation/Link.stories.svelte
@@ -0,0 +1,31 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Link from './Link.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navigation/Link',
+		component: Link,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: [
+					'primary',
+					'secondary',
+					'accent',
+					'neutral',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Link>)}
+	<Link {...props}>Hello world!</Link>
+{/snippet}
+
+<Story name="Default" children={template} />
diff --git a/src/lib/components/Navigation/Link.svelte b/src/lib/components/Navigation/Link.svelte
new file mode 100644
index 0000000..1eef76f
--- /dev/null
+++ b/src/lib/components/Navigation/Link.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = { color?: DaisyColor; hover?: boolean } & SvelteHTMLElements['a'];
+
+	let { children, class: className, color, hover, ...props }: Props = $props();
+</script>
+
+<a
+	class={twMerge(className, 'link')}
+	class:link-primary={color === 'primary'}
+	class:link-secondary={color === 'secondary'}
+	class:link-accent={color === 'accent'}
+	class:link-neutral={color === 'neutral'}
+	class:link-info={color === 'info'}
+	class:link-success={color === 'success'}
+	class:link-warning={color === 'warning'}
+	class:link-error={color === 'error'}
+	class:link-hover={hover}
+	{...props}>{@render children?.()}</a
+>
diff --git a/src/lib/components/Navigation/index.ts b/src/lib/components/Navigation/index.ts
index 1c2df11..cb48563 100644
--- a/src/lib/components/Navigation/index.ts
+++ b/src/lib/components/Navigation/index.ts
@@ -1,4 +1,5 @@
 import Navbar from './Navbar';
 import Tabs from './Tabs';
 
+export { default as Link } from './Link.svelte';
 export { Navbar, Tabs };
-- 
2.45.3


From 51049b2b261d0707abdbd97674b894e28be68d82 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 3 Jan 2025 10:49:35 -0500
Subject: [PATCH 04/12] Alert component and InfoIcon

---
 .../components/Feedback/Alert.stories.svelte  | 25 +++++++++++++++++++
 src/lib/components/Feedback/Alert.svelte      | 24 ++++++++++++++++++
 src/lib/components/Feedback/index.ts          |  1 +
 src/lib/components/Icons/InfoIcon.svelte      |  8 ++++++
 src/lib/components/Icons/index.ts             |  1 +
 5 files changed, 59 insertions(+)
 create mode 100644 src/lib/components/Feedback/Alert.stories.svelte
 create mode 100644 src/lib/components/Feedback/Alert.svelte
 create mode 100644 src/lib/components/Icons/InfoIcon.svelte
 create mode 100644 src/lib/components/Icons/index.ts

diff --git a/src/lib/components/Feedback/Alert.stories.svelte b/src/lib/components/Feedback/Alert.stories.svelte
new file mode 100644
index 0000000..82762b0
--- /dev/null
+++ b/src/lib/components/Feedback/Alert.stories.svelte
@@ -0,0 +1,25 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Alert from './Alert.svelte';
+	import type { ComponentProps } from 'svelte';
+	import { InfoIcon } from '../Icons';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Alert',
+		component: Alert,
+		argTypes: {
+			status: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Alert>)}
+	<Alert {...props}>
+		{#snippet icon()}
+			<InfoIcon class="h-6 w-6 shrink-0 stroke-info" />
+		{/snippet}
+		<span>Hello world!</span>
+	</Alert>
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />
diff --git a/src/lib/components/Feedback/Alert.svelte b/src/lib/components/Feedback/Alert.svelte
new file mode 100644
index 0000000..2dc4efb
--- /dev/null
+++ b/src/lib/components/Feedback/Alert.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children?: Snippet;
+		icon?: Snippet;
+		status?: Extract<DaisyColor, 'info' | 'success' | 'warning' | 'error'>;
+	};
+
+	let { children, icon, status: color }: Props = $props();
+</script>
+
+<div
+	role="alert"
+	class="alert"
+	class:alert-info={color === 'info'}
+	class:alert-success={color === 'success'}
+	class:alert-warning={color === 'warning'}
+	class:alert-error={color === 'error'}
+>
+	{@render icon?.()}
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/Feedback/index.ts b/src/lib/components/Feedback/index.ts
index 85096d3..040c9b0 100644
--- a/src/lib/components/Feedback/index.ts
+++ b/src/lib/components/Feedback/index.ts
@@ -1 +1,2 @@
+export { default as Alert } from './Alert.svelte';
 export { default as Loader } from './Loader.svelte';
diff --git a/src/lib/components/Icons/InfoIcon.svelte b/src/lib/components/Icons/InfoIcon.svelte
new file mode 100644
index 0000000..1eb8fc1
--- /dev/null
+++ b/src/lib/components/Icons/InfoIcon.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	let { class: className, ...props }: SvelteHTMLElements['i'] = $props();
+</script>
+
+<i {...props} class={twMerge(className, 'fi fi-sr-info')}></i>
diff --git a/src/lib/components/Icons/index.ts b/src/lib/components/Icons/index.ts
new file mode 100644
index 0000000..334fb9f
--- /dev/null
+++ b/src/lib/components/Icons/index.ts
@@ -0,0 +1 @@
+export { default as InfoIcon } from './InfoIcon.svelte';
-- 
2.45.3


From c59c82d614280dd042c382d4063928ed4429b94e Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 3 Jan 2025 13:31:31 -0500
Subject: [PATCH 05/12] Loading component

---
 .../Feedback/Loading.stories.svelte           | 40 +++++++++++++++++++
 src/lib/components/Feedback/Loading.svelte    | 31 ++++++++++++++
 src/lib/components/Feedback/index.ts          |  1 +
 3 files changed, 72 insertions(+)
 create mode 100644 src/lib/components/Feedback/Loading.stories.svelte
 create mode 100644 src/lib/components/Feedback/Loading.svelte

diff --git a/src/lib/components/Feedback/Loading.stories.svelte b/src/lib/components/Feedback/Loading.stories.svelte
new file mode 100644
index 0000000..8de2377
--- /dev/null
+++ b/src/lib/components/Feedback/Loading.stories.svelte
@@ -0,0 +1,40 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Loading from './Loading.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Loading',
+		component: Loading,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: [
+					'neutral',
+					'primary',
+					'secondary',
+					'accent',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
+			variant: {
+				control: 'select',
+				options: ['spinner', 'dots', 'ring', 'ball', 'bars', 'infinity'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Loading>)}
+	<Loading {...props} />
+{/snippet}
+
+<Story
+	name="Default"
+	args={{ color: 'neutral', size: 'md', variant: 'spinner' }}
+	children={template}
+/>
diff --git a/src/lib/components/Feedback/Loading.svelte b/src/lib/components/Feedback/Loading.svelte
new file mode 100644
index 0000000..49af3d8
--- /dev/null
+++ b/src/lib/components/Feedback/Loading.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+
+	type Props = {
+		color?: Exclude<DaisyColor, 'ghost'>;
+		size?: DaisySize | 'md';
+		variant?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';
+	};
+	let { color, size = 'md', variant = 'spinner' }: Props = $props();
+</script>
+
+<span
+	class="loading"
+	class:text-primary={color === 'primary'}
+	class:text-secondary={color === 'secondary'}
+	class:text-accent={color === 'accent'}
+	class:text-info={color === 'info'}
+	class:text-success={color === 'success'}
+	class:text-warning={color === 'warning'}
+	class:text-error={color === 'error'}
+	class:loading-xs={size === 'xs'}
+	class:loading-sm={size === 'sm'}
+	class:loading-md={size === 'md'}
+	class:loading-lg={size === 'lg'}
+	class:loading-spinner={variant === 'spinner'}
+	class:loading-dots={variant === 'dots'}
+	class:loading-ring={variant === 'ring'}
+	class:loading-ball={variant === 'ball'}
+	class:loading-bars={variant === 'bars'}
+	class:loading-infinity={variant === 'infinity'}
+></span>
diff --git a/src/lib/components/Feedback/index.ts b/src/lib/components/Feedback/index.ts
index 040c9b0..b04322e 100644
--- a/src/lib/components/Feedback/index.ts
+++ b/src/lib/components/Feedback/index.ts
@@ -1,2 +1,3 @@
 export { default as Alert } from './Alert.svelte';
 export { default as Loader } from './Loader.svelte';
+export { default as Loading } from './Loading.svelte';
-- 
2.45.3


From 7659ee200f6e948f972832ad23e092728645ef90 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 3 Jan 2025 13:43:55 -0500
Subject: [PATCH 06/12] Progress component

---
 .../Feedback/Progress.stories.svelte          | 24 +++++++++++++++++++
 src/lib/components/Feedback/Progress.svelte   | 24 +++++++++++++++++++
 src/lib/components/Feedback/index.ts          |  1 +
 3 files changed, 49 insertions(+)
 create mode 100644 src/lib/components/Feedback/Progress.stories.svelte
 create mode 100644 src/lib/components/Feedback/Progress.svelte

diff --git a/src/lib/components/Feedback/Progress.stories.svelte b/src/lib/components/Feedback/Progress.stories.svelte
new file mode 100644
index 0000000..bf4c696
--- /dev/null
+++ b/src/lib/components/Feedback/Progress.stories.svelte
@@ -0,0 +1,24 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Progress from './Progress.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Progress',
+		component: Progress,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
+			},
+			value: { control: 'number' },
+			max: { control: 'number' },
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Progress>)}
+	<Progress {...props} />
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />
diff --git a/src/lib/components/Feedback/Progress.svelte b/src/lib/components/Feedback/Progress.svelte
new file mode 100644
index 0000000..ac70da3
--- /dev/null
+++ b/src/lib/components/Feedback/Progress.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		color?: Exclude<DaisyColor, 'neutral' | 'ghost'>;
+	} & SvelteHTMLElements['progress'];
+	let { children, class: className, color, ...props }: Props = $props();
+</script>
+
+<progress
+	class={twMerge(className, 'progress')}
+	class:progress-primary={color === 'primary'}
+	class:progress-secondary={color === 'secondary'}
+	class:progress-accent={color === 'accent'}
+	class:progress-info={color === 'info'}
+	class:progress-success={color === 'success'}
+	class:progress-warning={color === 'warning'}
+	class:progress-error={color === 'error'}
+	{...props}
+>
+	{@render children?.()}
+</progress>
diff --git a/src/lib/components/Feedback/index.ts b/src/lib/components/Feedback/index.ts
index b04322e..512571f 100644
--- a/src/lib/components/Feedback/index.ts
+++ b/src/lib/components/Feedback/index.ts
@@ -1,3 +1,4 @@
 export { default as Alert } from './Alert.svelte';
 export { default as Loader } from './Loader.svelte';
 export { default as Loading } from './Loading.svelte';
+export { default as Progress } from './Progress.svelte';
-- 
2.45.3


From 00f90c93c0e5bca0b7e2d5b256345644a8ce99e0 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 3 Jan 2025 14:38:18 -0500
Subject: [PATCH 07/12] lol wtf

---
 src/lib/components/Actions/Button.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/Actions/Button.svelte b/src/lib/components/Actions/Button.svelte
index 43e89a3..6a3dfad 100644
--- a/src/lib/components/Actions/Button.svelte
+++ b/src/lib/components/Actions/Button.svelte
@@ -41,6 +41,7 @@
 
 <button
 	onclick={onClick}
+	class="btn"
 	class:btn-active={active}
 	class:no-animation={!animation}
 	class:btn-block={block}
-- 
2.45.3


From 04b315f2c6855ebed8a554438211720d86afd375 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 3 Jan 2025 14:41:20 -0500
Subject: [PATCH 08/12] Tooltip component

---
 .../Feedback/Tooltip.stories.svelte           | 27 +++++++++++++++
 src/lib/components/Feedback/Tooltip.svelte    | 33 +++++++++++++++++++
 src/lib/components/Feedback/index.ts          |  1 +
 3 files changed, 61 insertions(+)
 create mode 100644 src/lib/components/Feedback/Tooltip.stories.svelte
 create mode 100644 src/lib/components/Feedback/Tooltip.svelte

diff --git a/src/lib/components/Feedback/Tooltip.stories.svelte b/src/lib/components/Feedback/Tooltip.stories.svelte
new file mode 100644
index 0000000..f9a9cde
--- /dev/null
+++ b/src/lib/components/Feedback/Tooltip.stories.svelte
@@ -0,0 +1,27 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Tooltip from './Tooltip.svelte';
+	import { Button } from '../Actions';
+	import type { ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Tooltip',
+		component: Tooltip,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
+			},
+			open: { control: 'boolean' },
+			position: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Tooltip>)}
+	<Tooltip {...props}>
+		<Button color="primary">Button</Button>
+	</Tooltip>
+{/snippet}
+
+<Story name="Default" args={{ tip: "It's a button" }} children={template} />
diff --git a/src/lib/components/Feedback/Tooltip.svelte b/src/lib/components/Feedback/Tooltip.svelte
new file mode 100644
index 0000000..141e555
--- /dev/null
+++ b/src/lib/components/Feedback/Tooltip.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		color?: Exclude<DaisyColor, 'neutral' | 'ghost'>;
+		open?: boolean;
+		position?: 'top' | 'bottom' | 'left' | 'right';
+		tip?: string;
+	} & SvelteHTMLElements['div'];
+	let { children, class: className, color, open, position, tip, ...props }: Props = $props();
+</script>
+
+<div
+	class={twMerge('tooltip', className)}
+	class:tooltip-primary={color === 'primary'}
+	class:tooltip-secondary={color === 'secondary'}
+	class:tooltip-accent={color === 'accent'}
+	class:tooltip-info={color === 'info'}
+	class:tooltip-success={color === 'success'}
+	class:tooltip-warning={color === 'warning'}
+	class:tooltip-error={color === 'error'}
+	class:tooltip-open={open}
+	class:tooltip-top={position === 'top'}
+	class:tooltip-bottom={position === 'bottom'}
+	class:tooltip-left={position === 'left'}
+	class:tooltip-right={position === 'right'}
+	data-tip={tip}
+	{...props}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/Feedback/index.ts b/src/lib/components/Feedback/index.ts
index 512571f..ad00eeb 100644
--- a/src/lib/components/Feedback/index.ts
+++ b/src/lib/components/Feedback/index.ts
@@ -2,3 +2,4 @@ export { default as Alert } from './Alert.svelte';
 export { default as Loader } from './Loader.svelte';
 export { default as Loading } from './Loading.svelte';
 export { default as Progress } from './Progress.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
-- 
2.45.3


From b375a36d6b30d8c6bddc069b4e22c38c22c889fe Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 3 Jan 2025 14:42:19 -0500
Subject: [PATCH 09/12] Skeleton component

---
 .../Feedback/Skeleton.stories.svelte           | 18 ++++++++++++++++++
 src/lib/components/Feedback/Skeleton.svelte    | 12 ++++++++++++
 src/lib/components/Feedback/index.ts           |  1 +
 3 files changed, 31 insertions(+)
 create mode 100644 src/lib/components/Feedback/Skeleton.stories.svelte
 create mode 100644 src/lib/components/Feedback/Skeleton.svelte

diff --git a/src/lib/components/Feedback/Skeleton.stories.svelte b/src/lib/components/Feedback/Skeleton.stories.svelte
new file mode 100644
index 0000000..0f659d6
--- /dev/null
+++ b/src/lib/components/Feedback/Skeleton.stories.svelte
@@ -0,0 +1,18 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Skeleton from './Skeleton.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Skeleton',
+		component: Skeleton,
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Skeleton>)}
+	<Skeleton {...props} />
+{/snippet}
+
+<Story name="Default" args={{ class: 'h-32 w-32' }} children={template} />
+
+<Story name="Circle" args={{ class: 'h-32 w-32 rounded-full' }} children={template} />
diff --git a/src/lib/components/Feedback/Skeleton.svelte b/src/lib/components/Feedback/Skeleton.svelte
new file mode 100644
index 0000000..869c921
--- /dev/null
+++ b/src/lib/components/Feedback/Skeleton.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		children?: Snippet;
+	} & SvelteHTMLElements['div'];
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div {...props} class={twMerge('skeleton', className)}>{@render children?.()}</div>
diff --git a/src/lib/components/Feedback/index.ts b/src/lib/components/Feedback/index.ts
index ad00eeb..dca62e9 100644
--- a/src/lib/components/Feedback/index.ts
+++ b/src/lib/components/Feedback/index.ts
@@ -2,4 +2,5 @@ export { default as Alert } from './Alert.svelte';
 export { default as Loader } from './Loader.svelte';
 export { default as Loading } from './Loading.svelte';
 export { default as Progress } from './Progress.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
-- 
2.45.3


From 79eac1abef57a43fee72148292ff17a1f417f2ca Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 3 Jan 2025 16:27:35 -0500
Subject: [PATCH 10/12] Divider component

---
 .../components/Layout/Divider.stories.svelte  | 41 +++++++++++++++++++
 src/lib/components/Layout/Divider.svelte      | 31 ++++++++++++++
 src/lib/components/Layout/index.ts            |  0
 3 files changed, 72 insertions(+)
 create mode 100644 src/lib/components/Layout/Divider.stories.svelte
 create mode 100644 src/lib/components/Layout/Divider.svelte
 create mode 100644 src/lib/components/Layout/index.ts

diff --git a/src/lib/components/Layout/Divider.stories.svelte b/src/lib/components/Layout/Divider.stories.svelte
new file mode 100644
index 0000000..97beb09
--- /dev/null
+++ b/src/lib/components/Layout/Divider.stories.svelte
@@ -0,0 +1,41 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Divider from './Divider.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Layout/Divider',
+		component: Divider,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: [
+					'neutral',
+					'primary',
+					'secondary',
+					'accent',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			direction: { control: 'select', options: ['horizontal', 'vertical'] },
+			variant: { control: 'select', options: ['start', 'end'] },
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Divider>)}
+	<div
+		class="flex"
+		class:flex-row={props.direction === 'horizontal'}
+		class:flex-col={props.direction === 'vertical'}
+	>
+		<span>Side A</span>
+		<Divider {...props} />
+		<span>Side B</span>
+	</div>
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />
diff --git a/src/lib/components/Layout/Divider.svelte b/src/lib/components/Layout/Divider.svelte
new file mode 100644
index 0000000..9c73c76
--- /dev/null
+++ b/src/lib/components/Layout/Divider.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		color?: Exclude<DaisyColor, 'ghost'>;
+		direction?: 'horizontal' | 'vertical';
+		variant?: 'start' | 'end';
+	} & SvelteHTMLElements['div'];
+	let { children, class: className, color, direction, variant, ...props }: Props = $props();
+</script>
+
+<div
+	class={twMerge('divider', className)}
+	class:divider-neutral={color === 'neutral'}
+	class:divider-primary={color === 'primary'}
+	class:divider-secondary={color === 'secondary'}
+	class:divider-accent={color === 'accent'}
+	class:divider-info={color === 'info'}
+	class:divider-success={color === 'success'}
+	class:divider-warning={color === 'warning'}
+	class:divider-error={color === 'error'}
+	class:divider-horizontal={direction === 'horizontal'}
+	class:divider-vertical={direction === 'vertical'}
+	class:divider-start={variant === 'start'}
+	class:divider-end={variant === 'end'}
+	{...props}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/Layout/index.ts b/src/lib/components/Layout/index.ts
new file mode 100644
index 0000000..e69de29
-- 
2.45.3


From e42a52e73ac1b2c5efb0619a7f0d726599f60a81 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Sat, 4 Jan 2025 21:11:11 -0500
Subject: [PATCH 11/12] fix errors

---
 src/lib/components/DataInput/TextInput.svelte | 1 -
 src/routes/app/sms/+page.svelte               | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/components/DataInput/TextInput.svelte b/src/lib/components/DataInput/TextInput.svelte
index e3c61e3..b91d6cf 100644
--- a/src/lib/components/DataInput/TextInput.svelte
+++ b/src/lib/components/DataInput/TextInput.svelte
@@ -75,7 +75,6 @@
 		class:input-secondary={color === 'secondary'}
 		class:input-accent={color === 'accent'}
 		class:input-ghost={color === 'ghost'}
-		class:input-link={color === 'link'}
 		class:input-info={color === 'info'}
 		class:input-success={color === 'success'}
 		class:input-warning={color === 'warning'}
diff --git a/src/routes/app/sms/+page.svelte b/src/routes/app/sms/+page.svelte
index 16d4a90..470c2c4 100644
--- a/src/routes/app/sms/+page.svelte
+++ b/src/routes/app/sms/+page.svelte
@@ -55,7 +55,7 @@
 				/>
 			</div>
 			<div class="card-actions justify-center px-8 pb-4">
-				<Button outline type="submit" full>{messages.sms_button_submit()}</Button>
+				<Button type="submit" variant="outline" full>{messages.sms_button_submit()}</Button>
 			</div>
 		</form>
 	</div>
-- 
2.45.3


From d92bbcb5c1dc561b1bd5436a25c8613f8ce54b7e Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Sat, 4 Jan 2025 21:41:04 -0500
Subject: [PATCH 12/12] made this component early so i just fixed up some of
 the props

---
 src/lib/components/Actions/Button.svelte | 27 +++++++++---------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/Actions/Button.svelte b/src/lib/components/Actions/Button.svelte
index 6a3dfad..905dcfd 100644
--- a/src/lib/components/Actions/Button.svelte
+++ b/src/lib/components/Actions/Button.svelte
@@ -1,38 +1,33 @@
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
 
-	interface Props extends HTMLButtonAttributes {
+	type Props = {
 		active?: boolean;
 		animation?: boolean;
 		block?: boolean;
-		children: Snippet;
 		color?: DaisyColor;
-		disabled?: boolean;
 		full?: boolean;
 		glass?: boolean;
-		onclick?: () => void;
 		shape?: 'circle' | 'square';
 		size?: DaisySize;
-		type?: HTMLButtonAttributes['type'];
 		variant?: 'link' | 'outline';
 		wide?: boolean;
-	}
+	} & SvelteHTMLElements['button'];
 
 	let {
 		active = false,
 		animation = true,
 		block = false,
 		children,
+		class: className,
 		color,
-		disabled = false,
+		disabled,
 		full = false,
 		glass = false,
-		onclick: onClick,
 		shape,
 		size,
-		type = 'button',
 		wide = false,
 		variant,
 		...props
@@ -40,8 +35,9 @@
 </script>
 
 <button
-	onclick={onClick}
-	class="btn"
+	{...props}
+	{disabled}
+	class={twMerge('btn', className)}
 	class:btn-active={active}
 	class:no-animation={!animation}
 	class:btn-block={block}
@@ -65,11 +61,8 @@
 	class:btn-link={variant === 'link'}
 	class:btn-outline={variant === 'outline'}
 	class:btn-wide={wide}
-	{disabled}
-	{type}
-	{...props}
 >
-	{@render children()}
+	{@render children?.()}
 </button>
 
 <style></style>
-- 
2.45.3