From dd52c2f000bf1e7c94bdb04218d6dd36f2a38deb Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Mon, 24 Mar 2025 16:59:21 -0400
Subject: [PATCH] add dropdown

---
 .../Actions/Dropdown.stories.svelte           | 44 +++++++++++++++++++
 .../lib/components/Actions/Dropdown.svelte    | 40 +++++++++++++++++
 .../src/lib/components/Actions/index.ts       |  1 +
 3 files changed, 85 insertions(+)
 create mode 100644 packages/svelte/src/lib/components/Actions/Dropdown.stories.svelte
 create mode 100644 packages/svelte/src/lib/components/Actions/Dropdown.svelte

diff --git a/packages/svelte/src/lib/components/Actions/Dropdown.stories.svelte b/packages/svelte/src/lib/components/Actions/Dropdown.stories.svelte
new file mode 100644
index 0000000..8f66937
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/components/Actions/Dropdown.svelte b/packages/svelte/src/lib/components/Actions/Dropdown.svelte
new file mode 100644
index 0000000..fbb5dc6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/components/Actions/index.ts b/packages/svelte/src/lib/components/Actions/index.ts
index 8dfdfa2..a1e3cb7 100644
--- a/packages/svelte/src/lib/components/Actions/index.ts
+++ b/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';
\ No newline at end of file