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

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
+>

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