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] 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';