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

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>

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';
+export { default as Modal } from './Modal.svelte';
+export { default as Swap } from './Swap.svelte';