add Accordion component

packages/svelte/src/lib/components/DataDisplay/Accordion.stories.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Accordion from './Accordion.svelte';
+	import { type ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Data Display/Accordion',
+		component: Accordion,
+		argTypes: {
+			close: {
+				control: 'boolean',
+				defaultValue: false,
+			},
+			open: {
+				control: 'boolean',
+				defaultValue: false,
+			},
+			style: {
+				control: 'radio',
+				options: [undefined, 'arrow', 'plus'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: Partial<ComponentProps<typeof Accordion>>)}
+	<div class="flex flex-col gap-2">
+		<Accordion name={props.name!} style={props.style} initialOpen>
+			{#snippet title()}
+				Option 1
+			{/snippet}
+			{#snippet content()}
+				Description here!
+			{/snippet}
+		</Accordion>
+		<Accordion name={props.name!} style={props.style}>
+			{#snippet title()}
+				Option 2
+			{/snippet}
+			{#snippet content()}
+				Description here!
+			{/snippet}
+		</Accordion>
+		<Accordion name={props.name!} style={props.style}>
+			{#snippet title()}
+				Option 3
+			{/snippet}
+			{#snippet content()}
+				Description here!
+			{/snippet}
+		</Accordion>
+	</div>
+{/snippet}
+
+<Story name="Default" children={template} args={{ name: 'accordion-story' }} />

packages/svelte/src/lib/components/DataDisplay/Accordion.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+	export type AccordionStyle = 'arrow' | 'plus';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		close?: boolean;
+		content?: Snippet;
+		initialOpen?: boolean;
+		name: string;
+		open?: boolean;
+		style?: AccordionStyle;
+		title?: Snippet;
+	};
+
+	let { close, content, initialOpen, name, open, style, title }: Props = $props();
+</script>
+
+<div
+	class="bg-base-100 border-base-300 collapse border"
+	class:collapse-arrow={style === 'arrow'}
+	class:collapse-close={close}
+	class:collapse-open={open}
+	class:collapse-plus={style === 'plus'}
+>
+	<input type="radio" {name} checked={initialOpen} />
+	{#if title}
+		<div class="collapse-title font-semibold">{@render title()}</div>
+	{/if}
+	{#if content}
+		<div class="collapse-content text-sm">{@render content()}</div>
+	{/if}
+</div>

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

@@ -1 +1,2 @@
-export { default as Avatar } from './Avatar.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as Avatar } from './Avatar.svelte';