component: Collapse (#59)

* component: Collapse

* nope

---------

Co-authored-by: Davis SHYAKA <[email protected]>

src/lib/components/ui/collapse/collapse-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Accordion as CollapsePrimitive } from 'bits-ui';
+	import { slide } from 'svelte/transition';
+
+	type $$Props = CollapsePrimitive.ContentProps;
+
+	let class_name: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = slide;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 200
+	};
+	export { class_name as class };
+</script>
+
+<CollapsePrimitive.Content
+	class={cn('overflow-hidden text-base transition-all', class_name)}
+	{transition}
+	{transitionConfig}
+	{...$$restProps}
+>
+	<div class="pb-4 pt-0">
+		<slot />
+	</div>
+</CollapsePrimitive.Content>

src/lib/components/ui/collapse/collapse-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Accordion as CollapsePrimitive } from 'bits-ui';
+
+	type $$Props = CollapsePrimitive.ItemProps;
+
+	let class_name: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export { class_name as class };
+</script>
+
+<CollapsePrimitive.Item {value} class={cn('border-b first:border-t', class_name)} {...$$restProps}>
+	<slot />
+</CollapsePrimitive.Item>

src/lib/components/ui/collapse/collapse-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+	import { cn } from '$lib/utils.js';
+	import { Accordion as CollapsePrimitive } from 'bits-ui';
+
+	type $$Props = CollapsePrimitive.TriggerProps;
+	type $$Events = CollapsePrimitive.TriggerEvents;
+
+	let class_name: $$Props['class'] = undefined;
+	export let level: CollapsePrimitive.HeaderProps['level'] = 3;
+	export { class_name as class };
+</script>
+
+<CollapsePrimitive.Header {level} class="flex">
+	<CollapsePrimitive.Trigger
+		class={cn(
+			'flex flex-1 items-center justify-between transition-all [&[data-state=open]>svg]:rotate-180',
+			'group-data-[size=sm]:py-3 group-data-[size=sm]:text-base group-data-[size=sm]:font-medium',
+			'group-data-[size=md]:py-6 group-data-[size=md]:text-2xl group-data-[size=md]:font-semibold',
+			class_name
+		)}
+		{...$$restProps}
+		on:click
+	>
+		<slot />
+		<Icons.ChevronDown class="size-4 transition-transform duration-200" />
+	</CollapsePrimitive.Trigger>
+</CollapsePrimitive.Header>

src/lib/components/ui/collapse/collapse.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Accordion as CollapsePrimitive } from 'bits-ui';
+
+	type $$Props = CollapsePrimitive.Props<false> & {
+		size?: 'sm' | 'md';
+	};
+
+	export let size: $$Props['size'] = 'md';
+</script>
+
+<CollapsePrimitive.Root data-size={size} class="group" {...$$restProps}>
+	<slot></slot>
+</CollapsePrimitive.Root>

src/lib/components/ui/collapse/index.ts

@@ -0,0 +1,15 @@
+import Content from './collapse-content.svelte';
+import Item from './collapse-item.svelte';
+import Trigger from './collapse-trigger.svelte';
+import Root from './collapse.svelte';
+
+export {
+	Root as Collapse,
+	Content as CollapseContent,
+	Item as CollapseItem,
+	Trigger as CollapseTrigger,
+	Content,
+	Item,
+	Root,
+	Trigger
+};

src/lib/config/sitemap.ts

@@ -95,7 +95,7 @@ export const aside_items: Aside = {
 		{
 			title: 'Collapse',
 			href: '/collapse',
-			status: 'soon'
+			status: 'new'
 		},
 		{
 			title: 'Combobox',

src/routes/collapse/+page.svelte

@@ -1 +1,26 @@
-<h1>collapse</h1>
+<script lang="ts">
+	import Demo from '$lib/components/shared/demo.svelte';
+	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
+	import Default from './default.svelte';
+	import default_code from './default.svelte?raw';
+	import Expanded from './expanded.svelte';
+	import expanded_code from './expanded.svelte?raw';
+	import Small from './small.svelte';
+	import small_code from './small.svelte?raw';
+
+	export let data;
+</script>
+
+<PageWrapper title={data.title} description={data.description}>
+	<Demo id="default" code={default_code}>
+		<Default />
+	</Demo>
+
+	<Demo id="expanded" code={expanded_code}>
+		<Expanded />
+	</Demo>
+
+	<Demo id="small" code={small_code}>
+		<Small />
+	</Demo>
+</PageWrapper>

src/routes/collapse/+page.ts

@@ -0,0 +1,22 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export function load() {
+	const title = 'Collapse';
+	const description =
+		'A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.';
+
+	const pageMetaTags = Object.freeze({
+		title,
+		description,
+		openGraph: {
+			title,
+			description
+		}
+	}) satisfies MetaTagsProps;
+
+	return {
+		pageMetaTags,
+		title,
+		description
+	};
+}

src/routes/collapse/default.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import * as Collapse from '$lib/components/ui/collapse';
+</script>
+
+<Collapse.Root>
+	<Collapse.Item value="item-1">
+		<Collapse.Trigger>Question A</Collapse.Trigger>
+		<Collapse.Content>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat.
+		</Collapse.Content>
+	</Collapse.Item>
+	<Collapse.Item value="item-2">
+		<Collapse.Trigger>Question B</Collapse.Trigger>
+		<Collapse.Content>
+			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+			pariatur.
+		</Collapse.Content>
+	</Collapse.Item>
+</Collapse.Root>

src/routes/collapse/expanded.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import * as Collapse from '$lib/components/ui/collapse';
+</script>
+
+<Collapse.Root value="item-2">
+	<Collapse.Item value="item-1">
+		<Collapse.Trigger>Question A</Collapse.Trigger>
+		<Collapse.Content>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat.
+		</Collapse.Content>
+	</Collapse.Item>
+	<Collapse.Item value="item-2">
+		<Collapse.Trigger>Question B</Collapse.Trigger>
+		<Collapse.Content>
+			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+			pariatur.
+		</Collapse.Content>
+	</Collapse.Item>
+</Collapse.Root>

src/routes/collapse/small.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import * as Collapse from '$lib/components/ui/collapse';
+</script>
+
+<Collapse.Root size="sm">
+	<Collapse.Item value="item-1">
+		<Collapse.Trigger>Question A</Collapse.Trigger>
+		<Collapse.Content>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat.
+		</Collapse.Content>
+	</Collapse.Item>
+</Collapse.Root>