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} />

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>

src/lib/components/Feedback/index.ts

@@ -1 +1,2 @@
+export { default as Alert } from './Alert.svelte';
 export { default as Loader } from './Loader.svelte';

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>

src/lib/components/Icons/index.ts

@@ -0,0 +1 @@
+export { default as InfoIcon } from './InfoIcon.svelte';