From e3435878b2a3957bf6b9ab968c08e0f08413a0e9 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Tue, 18 Mar 2025 12:12:14 -0400
Subject: [PATCH] add swap

---
 .../components/Actions/Swap.stories.svelte    | 29 +++++++++++++++++
 .../src/lib/components/Actions/Swap.svelte    | 31 +++++++++++++++++++
 .../src/lib/components/Actions/index.ts       |  3 +-
 3 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/src/lib/components/Actions/Swap.stories.svelte
 create mode 100644 packages/svelte/src/lib/components/Actions/Swap.svelte

diff --git a/packages/svelte/src/lib/components/Actions/Swap.stories.svelte b/packages/svelte/src/lib/components/Actions/Swap.stories.svelte
new file mode 100644
index 0000000..3463a1d
--- /dev/null
+++ b/packages/svelte/src/lib/components/Actions/Swap.stories.svelte
@@ -0,0 +1,29 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { type ComponentProps } from 'svelte';
+	import Swap from './Swap.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Actions/Swap',
+		component: Swap,
+		argTypes: {
+			style: {
+				control: 'radio',
+				options: [undefined, 'flip', 'rotate'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: Partial<ComponentProps<typeof Swap>>)}
+	<Swap {...props}>
+		{#snippet on()}
+			ON
+		{/snippet}
+		{#snippet off()}
+			OFF
+		{/snippet}
+	</Swap>
+{/snippet}
+
+<Story name="Default" children={template} />
\ No newline at end of file
diff --git a/packages/svelte/src/lib/components/Actions/Swap.svelte b/packages/svelte/src/lib/components/Actions/Swap.svelte
new file mode 100644
index 0000000..239060b
--- /dev/null
+++ b/packages/svelte/src/lib/components/Actions/Swap.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	export type SwapStyle = 'flip' | 'rotate';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		active?: boolean;
+		indeterminate?: Snippet;
+		on: Snippet;
+		off: Snippet;
+		style?: SwapStyle;
+	};
+
+	let { active, indeterminate, on, off, style }: Props = $props();
+</script>
+
+<label
+	class="swap"
+	class:swap-active={active}
+	class:swap-flip={style === 'flip'}
+	class:swap-rotate={style === 'rotate'}
+>
+	<input type="checkbox" />
+	{#if indeterminate}
+		{@render indeterminate()}
+	{/if}
+	<div class="swap-on fill-current">{@render on()}</div>
+	<div class="swap-off fill-current">{@render off()}</div>
+</label>
\ 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 621d898..8dfdfa2 100644
--- a/packages/svelte/src/lib/components/Actions/index.ts
+++ b/packages/svelte/src/lib/components/Actions/index.ts
@@ -1,2 +1,3 @@
 export { default as Button } from './Button.svelte';
-export { default as Modal } from './Modal.svelte';
\ No newline at end of file
+export { default as Modal } from './Modal.svelte';
+export { default as Swap } from './Swap.svelte';
\ No newline at end of file