add dropdown

packages/svelte/src/lib/components/Actions/Dropdown.stories.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Dropdown from './Dropdown.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Actions/Dropdown',
+		component: Dropdown,
+		argTypes: {
+			hover: {
+				control: 'boolean',
+			},
+			open: {
+				control: 'boolean',
+			},
+		},
+	});
+</script>
+
+<Story name="Dropdown Menu">
+	<Dropdown>
+		{#snippet title()}
+			Click me!
+		{/snippet}
+		<ul class={'menu bg-base-200 rounded-box w-56'}>
+			<li><a>Item 1</a></li>
+			<li><a>Item 2</a></li>
+			<li><a>Item 3</a></li>
+		</ul>
+	</Dropdown>
+</Story>
+
+<Story name="Dropdown Card">
+	<Dropdown>
+		{#snippet title()}
+			Click me!
+		{/snippet}
+		<div class="card card-sm bg-base-100 z-1 w-64 shadow-md">
+			<div class="card-body">
+				<h2 class="card-title">You needed more info?</h2>
+				<p>This is a card. You can use any element as a dropdown.</p>
+			</div>
+		</div>
+	</Dropdown>
+</Story>

packages/svelte/src/lib/components/Actions/Dropdown.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	export type DropdownAlignment = {
+		vertical?: 'top' | 'bottom';
+		horizontal?: 'left' | 'right';
+		content?: 'start' | 'center' | 'end';
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		alignment?: DropdownAlignment;
+		children: Snippet;
+		hover?: boolean;
+		open?: boolean;
+		title: Snippet;
+	};
+
+	let { alignment, children, hover, open, title }: Props = $props();
+</script>
+
+<div
+	class="dropdown"
+	class:dropdown-start={alignment?.content === 'start'}
+	class:dropdown-center={alignment?.content === 'center'}
+	class:dropdown-end={alignment?.content === 'end'}
+	class:dropdown-top={alignment?.vertical === 'top'}
+	class:dropdown-bottom={alignment?.vertical === 'bottom'}
+	class:dropdown-left={alignment?.horizontal === 'left'}
+	class:dropdown-right={alignment?.horizontal === 'right'}
+	class:dropdown-hover={hover}
+	class:dropdown-open={open}
+>
+	<div tabindex="0" role="button" class="btn m-1">{@render title()}</div>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div tabindex="0" class="dropdown-content z-0">
+		{@render children?.()}
+	</div>
+</div>

packages/svelte/src/lib/components/Actions/index.ts

@@ -1,3 +1,4 @@
 export { default as Button } from './Button.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as Swap } from './Swap.svelte';