From 546a7f7480406d0091c0462d6b8f9c3d2c3dc9b4 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Mon, 18 Nov 2024 12:39:46 -0500
Subject: [PATCH] feat: stack component

---
 src/docs/components/DecorativeBlock.svelte   |  43 ++++
 src/docs/components/DualThemeLayout.svelte   |   5 +-
 src/docs/constants.ts                        |   1 +
 src/lib/components/Card/Card.svelte          |   2 +-
 src/lib/components/Stack/HStack.svelte       |  10 +
 src/lib/components/Stack/Stack.svelte        |  68 +++++++
 src/lib/components/Stack/VStack.svelte       |  10 +
 src/lib/index.ts                             |   3 +
 src/lib/types.ts                             |  16 ++
 src/routes/examples/alert/+page.svelte       | 114 +++++------
 src/routes/examples/button/+page.svelte      | 204 +++++++++----------
 src/routes/examples/card/+page.svelte        | 200 +++++++++---------
 src/routes/examples/checkbox/+page.svelte    | 100 +++++----
 src/routes/examples/heading/+page.svelte     |  58 +++---
 src/routes/examples/icon-button/+page.svelte | 176 ++++++++--------
 src/routes/examples/logo/+page.svelte        | 108 +++++-----
 src/routes/examples/stack/+page.svelte       |  48 +++++
 src/routes/examples/text/+page.svelte        |  60 +++---
 18 files changed, 695 insertions(+), 531 deletions(-)
 create mode 100644 src/docs/components/DecorativeBlock.svelte
 create mode 100644 src/lib/components/Stack/HStack.svelte
 create mode 100644 src/lib/components/Stack/Stack.svelte
 create mode 100644 src/lib/components/Stack/VStack.svelte
 create mode 100644 src/routes/examples/stack/+page.svelte

diff --git a/src/docs/components/DecorativeBlock.svelte b/src/docs/components/DecorativeBlock.svelte
new file mode 100644
index 0000000..7b54463
--- /dev/null
+++ b/src/docs/components/DecorativeBlock.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Color, Size } from '$lib/types.js';
+	import { cleanClass } from '$lib/utils.js';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		color?: Color;
+		width?: Size;
+		height?: Size;
+	};
+
+	const { width = 'medium', height = 'medium', color = 'primary' }: Props = $props();
+
+	const styles = tv({
+		base: '',
+		variants: {
+			color: {
+				primary: 'bg-primary',
+				secondary: 'bg-dark',
+				success: 'bg-success',
+				danger: 'bg-danger',
+				warning: 'bg-warning',
+				info: 'bg-info',
+			},
+			width: {
+				tiny: 'w-4',
+				small: 'w-8',
+				medium: 'w-16',
+				large: 'w-32',
+				giant: 'w-64',
+			},
+			height: {
+				tiny: 'h-4',
+				small: 'h-8',
+				medium: 'h-16',
+				large: 'h-32',
+				giant: 'h-64',
+			},
+		},
+	});
+</script>
+
+<div class={cleanClass(styles({ width, height, color }))}></div>
diff --git a/src/docs/components/DualThemeLayout.svelte b/src/docs/components/DualThemeLayout.svelte
index 3e74f50..f86e8e1 100644
--- a/src/docs/components/DualThemeLayout.svelte
+++ b/src/docs/components/DualThemeLayout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { DisplayOption, Theme } from '$docs/constants.js';
 	import { Icon } from '$lib/index.js';
+	import { VStack } from '@immich/ui';
 	import { mdiCompare, mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
 	import type { Snippet } from 'svelte';
 
@@ -60,7 +61,9 @@
 		{#each displayThemes as theme}
 			<div class="flex flex-col gap-4 {theme} h-full bg-light p-8">
 				<h2 class="text-2xl capitalize text-dark">{theme}</h2>
-				{@render component({ theme })}
+				<VStack gap={4}>
+					{@render component({ theme })}
+				</VStack>
 			</div>
 		{/each}
 	</div>
diff --git a/src/docs/constants.ts b/src/docs/constants.ts
index 67e8b39..d141836 100644
--- a/src/docs/constants.ts
+++ b/src/docs/constants.ts
@@ -25,5 +25,6 @@ export const routes: Route[] = [
 	{ name: 'Heading', link: '/examples/heading' },
 	{ name: 'IconButton', link: '/examples/icon-button' },
 	{ name: 'Logo', link: '/examples/logo' },
+	{ name: 'Stack', link: '/examples/stack' },
 	{ name: 'Text', link: '/examples/text' },
 ];
diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte
index 077e10f..d5de192 100644
--- a/src/lib/components/Card/Card.svelte
+++ b/src/lib/components/Card/Card.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { withChildrenSnippets } from '$lib/common/use-context.svelte.js';
+	import IconButton from '$lib/components/IconButton/IconButton.svelte';
 	import { ContextKey } from '$lib/constants.js';
 	import type { Color, Shape } from '$lib/types.js';
 	import { cleanClass } from '$lib/utils.js';
-	import { IconButton } from '@immich/ui';
 	import { mdiChevronDown } from '@mdi/js';
 	import { type Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
diff --git a/src/lib/components/Stack/HStack.svelte b/src/lib/components/Stack/HStack.svelte
new file mode 100644
index 0000000..55e88ed
--- /dev/null
+++ b/src/lib/components/Stack/HStack.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Stack from '$lib/components/Stack/Stack.svelte';
+	import type { HStackProps } from '$lib/types.js';
+
+	const { class: className, children, ...props }: HStackProps = $props();
+</script>
+
+<Stack direction="row" class={className} {...props}>
+	{@render children()}
+</Stack>
diff --git a/src/lib/components/Stack/Stack.svelte b/src/lib/components/Stack/Stack.svelte
new file mode 100644
index 0000000..65b4906
--- /dev/null
+++ b/src/lib/components/Stack/Stack.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { StackProps } from '$lib/types.js';
+	import { cleanClass } from '$lib/utils.js';
+	import { tv } from 'tailwind-variants';
+
+	const {
+		align,
+		direction = 'column',
+		wrap = false,
+		class: className,
+		gap = 2,
+		children,
+	}: StackProps = $props();
+
+	const styles = tv({
+		base: 'flex gap-2',
+		variants: {
+			direction: {
+				row: 'flex-row',
+				column: 'flex-col',
+			},
+			align: {
+				start: 'items-start',
+				center: 'items-center',
+				end: 'items-end',
+			},
+			fullWidth: {
+				true: 'w-full',
+				false: '',
+			},
+			fullHeight: {
+				true: 'h-full',
+				false: '',
+			},
+			gap: {
+				0: 'gap-0',
+				1: 'gap-1',
+				2: 'gap-2',
+				3: 'gap-3',
+				4: 'gap-4',
+				5: 'gap-5',
+				6: 'gap-6',
+				7: 'gap-7',
+				8: 'gap-8',
+			},
+			wrap: {
+				true: 'flex-wrap',
+				false: '',
+			},
+		},
+	});
+</script>
+
+<div
+	class={cleanClass(
+		styles({
+			align,
+			direction,
+			gap,
+			wrap,
+			fullWidth: direction === 'row',
+			fullHeight: direction === 'column',
+		}),
+		className,
+	)}
+>
+	{@render children()}
+</div>
diff --git a/src/lib/components/Stack/VStack.svelte b/src/lib/components/Stack/VStack.svelte
new file mode 100644
index 0000000..d0a11ec
--- /dev/null
+++ b/src/lib/components/Stack/VStack.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Stack from '$lib/components/Stack/Stack.svelte';
+	import type { VStackProps } from '$lib/types.js';
+
+	const { class: className, children, ...props }: VStackProps = $props();
+</script>
+
+<Stack direction="column" class={className} {...props}>
+	{@render children()}
+</Stack>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5d38b60..d7b0d4e 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -13,5 +13,8 @@ export { default as Heading } from '$lib/components/Heading/Heading.svelte';
 export { default as Icon } from '$lib/components/Icon/Icon.svelte';
 export { default as IconButton } from '$lib/components/IconButton/IconButton.svelte';
 export { default as Logo } from '$lib/components/Logo/Logo.svelte';
+export { default as HStack } from '$lib/components/Stack/HStack.svelte';
+export { default as Stack } from '$lib/components/Stack/Stack.svelte';
+export { default as VStack } from '$lib/components/Stack/VStack.svelte';
 export { default as Text } from '$lib/components/Text/Text.svelte';
 export * from '$lib/types.js';
diff --git a/src/lib/types.ts b/src/lib/types.ts
index f396869..fa0134a 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
@@ -5,6 +6,7 @@ export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
 export type HeadingSize = Size | 'title';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
 export type Variants = 'filled' | 'outline' | 'ghost' | 'hero';
+export type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
 type ButtonOrAnchor =
 	| ({ href?: never } & HTMLButtonAttributes)
@@ -35,3 +37,17 @@ export type IconProps = {
 
 export type IconButtonProps = ButtonBaseProps & IconProps;
 export type ButtonProps = ButtonBaseProps & { fullWidth?: boolean };
+
+type StackBaseProps = {
+	class?: string;
+	children: Snippet;
+	align?: 'start' | 'center' | 'end';
+	gap?: Gap;
+	wrap?: boolean;
+};
+
+export type StackProps = StackBaseProps & {
+	direction?: 'row' | 'column';
+};
+export type HStackProps = StackBaseProps;
+export type VStackProps = StackBaseProps;
diff --git a/src/routes/examples/alert/+page.svelte b/src/routes/examples/alert/+page.svelte
index 70e3e81..b5b5686 100644
--- a/src/routes/examples/alert/+page.svelte
+++ b/src/routes/examples/alert/+page.svelte
@@ -2,78 +2,64 @@
 	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
 	import Lorem from '$docs/components/Lorem.svelte';
 	import { colors } from '$docs/constants.js';
-	import Card from '$lib/components/Card/Card.svelte';
-	import CardBody from '$lib/components/Card/CardBody.svelte';
-	import CardHeader from '$lib/components/Card/CardHeader.svelte';
-	import CardTitle from '$lib/components/Card/CardTitle.svelte';
-	import { Alert } from '@immich/ui';
+	import { Alert, Card, CardBody, CardHeader, CardTitle, VStack } from '@immich/ui';
 	import { mdiHelpCircleOutline } from '@mdi/js';
 </script>
 
 <DualThemeLayout name="Alert">
 	{#snippet component()}
-		<div class="flex flex-col gap-4">
-			<section class="flex flex-col gap-4">
-				<Card>
-					<CardHeader>
-						<CardTitle>Basic</CardTitle>
-					</CardHeader>
-					<CardBody>
-						<div class="flex flex-wrap gap-4">
-							{#each colors as color}
-								<Alert {color} title="This is an alert" />
-							{/each}
-						</div>
-					</CardBody>
-				</Card>
-			</section>
+		<Card>
+			<CardHeader>
+				<CardTitle>Basic</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					{#each colors as color}
+						<Alert {color} title="This is an alert" />
+					{/each}
+				</VStack>
+			</CardBody>
+		</Card>
 
-			<section class="flex flex-col gap-4">
-				<Card>
-					<CardHeader>
-						<CardTitle>Colors</CardTitle>
-					</CardHeader>
-					<CardBody>
-						<div class="flex flex-wrap gap-4">
-							{#each colors as color}
-								<Alert {color} title="This is an alert">
-									<Lorem />
-								</Alert>
-							{/each}
-						</div>
-					</CardBody>
-				</Card>
-			</section>
-
-			<section class="flex flex-col gap-4">
-				<Card>
-					<CardHeader>
-						<CardTitle>Custom icon</CardTitle>
-					</CardHeader>
-					<CardBody>
-						<Alert icon={mdiHelpCircleOutline} title="This is an alert">
+		<Card>
+			<CardHeader>
+				<CardTitle>Colors</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					{#each colors as color}
+						<Alert {color} title="This is an alert">
 							<Lorem />
 						</Alert>
-					</CardBody>
-				</Card>
-			</section>
+					{/each}
+				</VStack>
+			</CardBody>
+		</Card>
+
+		<Card>
+			<CardHeader>
+				<CardTitle>Custom icon</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Alert icon={mdiHelpCircleOutline} title="This is an alert">
+					<Lorem />
+				</Alert>
+			</CardBody>
+		</Card>
 
-			<section class="flex flex-col gap-4">
-				<Card>
-					<CardHeader>
-						<CardTitle>Colors</CardTitle>
-					</CardHeader>
-					<CardBody>
-						<div class="flex flex-wrap gap-4">
-							{#each colors as color}
-								<Alert {color} title="This is an alert">
-									<Lorem />
-								</Alert>
-							{/each}
-						</div>
-					</CardBody>
-				</Card>
-			</section>
-		</div>
+		<Card>
+			<CardHeader>
+				<CardTitle>Colors</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					{#each colors as color}
+						<Alert {color} title="This is an alert">
+							<Lorem />
+						</Alert>
+					{/each}
+				</VStack>
+			</CardBody>
+		</Card>
 	{/snippet}
 </DualThemeLayout>
diff --git a/src/routes/examples/button/+page.svelte b/src/routes/examples/button/+page.svelte
index 07eaa5f..e7749f8 100644
--- a/src/routes/examples/button/+page.svelte
+++ b/src/routes/examples/button/+page.svelte
@@ -1,119 +1,117 @@
 <script lang="ts">
 	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
 	import { colors, shapes, sizes } from '$docs/constants.js';
-	import { Button, Card, CardBody, CardHeader, CardTitle } from '@immich/ui';
+	import { Button, HStack, VStack, Card, CardBody, CardHeader, CardTitle } from '@immich/ui';
 </script>
 
 <DualThemeLayout name="Button">
 	{#snippet component()}
-		<div class="flex flex-col gap-4">
-			<Card>
-				<CardHeader>
-					<CardTitle>Shapes</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each shapes as shape}
-							<Button {shape} class="capitalize">{shape}</Button>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Shapes</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each shapes as shape}
+						<Button {shape} class="capitalize">{shape}</Button>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Colors</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each colors as color}
-							<Button {color} class="capitalize">{color}</Button>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Colors</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each colors as color}
+						<Button {color} class="capitalize">{color}</Button>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Outline</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each colors as color}
-							<Button variant="outline" {color}>Button</Button>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Outline</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each colors as color}
+						<Button variant="outline" {color}>Button</Button>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Ghost</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each colors as color}
-							<Button variant="ghost" {color}>Button</Button>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Ghost</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each colors as color}
+						<Button variant="ghost" {color}>Button</Button>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Hero</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each colors as color}
-							<Button variant="hero" {color}>Button</Button>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Hero</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each colors as color}
+						<Button variant="hero" {color}>Button</Button>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Disabled</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each colors as color}
-							<Button {color} disabled>Button</Button>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Disabled</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each colors as color}
+						<Button {color} disabled>Button</Button>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Sizes</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each sizes as size}
-							<div>
-								<Button {size} class="capitalize">{size}</Button>
-							</div>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Sizes</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each sizes as size}
+						<div>
+							<Button {size} class="capitalize">{size}</Button>
+						</div>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Full width</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-col gap-4">
-						{#each colors as color}
-							<div>
-								<Button fullWidth {color}>Button</Button>
-							</div>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
-		</div>
+		<Card>
+			<CardHeader>
+				<CardTitle>Full width</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					{#each colors as color}
+						<div>
+							<Button fullWidth {color}>Button</Button>
+						</div>
+					{/each}
+				</VStack>
+			</CardBody>
+		</Card>
 	{/snippet}
 </DualThemeLayout>
diff --git a/src/routes/examples/card/+page.svelte b/src/routes/examples/card/+page.svelte
index abd87d7..c8434d7 100644
--- a/src/routes/examples/card/+page.svelte
+++ b/src/routes/examples/card/+page.svelte
@@ -7,122 +7,106 @@
 
 <DualThemeLayout name="Card">
 	{#snippet component()}
-		<div class="flex flex-col gap-4">
-			<section class="flex flex-col gap-4">
-				<Card>
-					<CardHeader>
-						<CardTitle>Title</CardTitle>
-					</CardHeader>
-				</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Title</CardTitle>
+			</CardHeader>
+		</Card>
 
-				<Card>
-					<CardHeader>
-						<CardTitle>Card with title</CardTitle>
-					</CardHeader>
-					<CardBody>
-						<Lorem />
-					</CardBody>
-				</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Card with title</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Lorem />
+			</CardBody>
+		</Card>
 
-				<Card>
-					<CardHeader>
-						<CardTitle>Card with title and footer</CardTitle>
-					</CardHeader>
-					<CardBody>
-						<Lorem />
-					</CardBody>
-					<CardFooter>Footer goes here</CardFooter>
-				</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Card with title and footer</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Lorem />
+			</CardBody>
+			<CardFooter>Footer goes here</CardFooter>
+		</Card>
 
-				<Card>
-					<CardHeader>
-						<CardTitle>Card with title, description, and footer</CardTitle>
-						<CardDescription>This is the description</CardDescription>
-					</CardHeader>
-					<CardBody>
-						<Lorem />
-					</CardBody>
-					<CardFooter>Footer</CardFooter>
-				</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Card with title, description, and footer</CardTitle>
+				<CardDescription>This is the description</CardDescription>
+			</CardHeader>
+			<CardBody>
+				<Lorem />
+			</CardBody>
+			<CardFooter>Footer</CardFooter>
+		</Card>
 
-				<div class="flex flex-wrap gap-4">
-					{#each colors as color}
-						<Card {color} variant="outline">
-							<CardHeader>
-								<CardTitle class="capitalize">Outline ({color})</CardTitle>
-							</CardHeader>
-							<CardBody>
-								<Lorem />
-							</CardBody>
-						</Card>
-					{/each}
-				</div>
+		{#each colors as color}
+			<Card {color} variant="outline">
+				<CardHeader>
+					<CardTitle class="capitalize">Outline ({color})</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<Lorem />
+				</CardBody>
+			</Card>
+		{/each}
 
-				<div class="flex flex-wrap gap-4">
-					{#each colors as color}
-						<Card {color} variant="filled">
-							<CardHeader>
-								<CardTitle class="capitalize">Filled ({color})</CardTitle>
-							</CardHeader>
-							<CardBody>
-								<Lorem />
-							</CardBody>
-						</Card>
-					{/each}
-				</div>
+		{#each colors as color}
+			<Card {color} variant="filled">
+				<CardHeader>
+					<CardTitle class="capitalize">Filled ({color})</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<Lorem />
+				</CardBody>
+			</Card>
+		{/each}
 
-				<div class="flex flex-wrap gap-4">
-					{#each colors as color}
-						<Card {color} variant="subtle">
-							<CardHeader>
-								<CardTitle class="capitalize">Subtle ({color})</CardTitle>
-							</CardHeader>
-							<CardBody>
-								<Lorem />
-							</CardBody>
-						</Card>
-					{/each}
-				</div>
+		{#each colors as color}
+			<Card {color} variant="subtle">
+				<CardHeader>
+					<CardTitle class="capitalize">Subtle ({color})</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<Lorem />
+				</CardBody>
+			</Card>
+		{/each}
 
-				<div class="flex flex-wrap gap-4">
-					{#each colors as color}
-						<Card {color} expandable variant="outline">
-							<CardHeader>
-								<CardTitle class="capitalize">Outline ({color})</CardTitle>
-							</CardHeader>
-							<CardBody>
-								<Lorem />
-							</CardBody>
-						</Card>
-					{/each}
-				</div>
+		{#each colors as color}
+			<Card {color} expandable variant="outline">
+				<CardHeader>
+					<CardTitle class="capitalize">Outline ({color})</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<Lorem />
+				</CardBody>
+			</Card>
+		{/each}
 
-				<div class="flex flex-wrap gap-4">
-					{#each colors as color}
-						<Card {color} expandable variant="filled">
-							<CardHeader>
-								<CardTitle class="capitalize">Filled ({color})</CardTitle>
-							</CardHeader>
-							<CardBody>
-								<Lorem />
-							</CardBody>
-						</Card>
-					{/each}
-				</div>
+		{#each colors as color}
+			<Card {color} expandable variant="filled">
+				<CardHeader>
+					<CardTitle class="capitalize">Filled ({color})</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<Lorem />
+				</CardBody>
+			</Card>
+		{/each}
 
-				<div class="flex flex-wrap gap-4">
-					{#each colors as color}
-						<Card {color} expandable variant="subtle">
-							<CardHeader>
-								<CardTitle class="capitalize">Subtle ({color})</CardTitle>
-							</CardHeader>
-							<CardBody>
-								<Lorem />
-							</CardBody>
-						</Card>
-					{/each}
-				</div>
-			</section>
-		</div>
+		{#each colors as color}
+			<Card {color} expandable variant="subtle">
+				<CardHeader>
+					<CardTitle class="capitalize">Subtle ({color})</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<Lorem />
+				</CardBody>
+			</Card>
+		{/each}
 	{/snippet}
 </DualThemeLayout>
diff --git a/src/routes/examples/checkbox/+page.svelte b/src/routes/examples/checkbox/+page.svelte
index 77770fb..26041b7 100644
--- a/src/routes/examples/checkbox/+page.svelte
+++ b/src/routes/examples/checkbox/+page.svelte
@@ -1,62 +1,60 @@
 <script lang="ts">
 	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
 	import { colors, shapes, sizes } from '$docs/constants.js';
-	import { Card, CardBody, CardHeader, CardTitle, Checkbox } from '@immich/ui';
+	import { Card, CardBody, CardHeader, CardTitle, Checkbox, HStack, VStack } from '@immich/ui';
 </script>
 
 <DualThemeLayout name="Checkbox">
 	{#snippet component()}
-		<div class="flex flex-col gap-4">
-			<Card>
-				<CardHeader>
-					<CardTitle>Colors</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-col gap-4">
-						{#each colors as color}
-							<div class="flex gap-4">
-								<Checkbox checked {color} />
-								<Checkbox {color} />
-								<Checkbox checked="indeterminate" {color} />
-							</div>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Colors</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					{#each colors as color}
+						<HStack>
+							<Checkbox checked {color} />
+							<Checkbox {color} />
+							<Checkbox checked="indeterminate" {color} />
+						</HStack>
+					{/each}
+				</VStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Sizes</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-col gap-4">
-						{#each sizes as size}
-							<div class="flex gap-4">
-								<Checkbox checked {size} />
-								<Checkbox {size} />
-								<Checkbox checked="indeterminate" {size} />
-							</div>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Sizes</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					{#each sizes as size}
+						<HStack>
+							<Checkbox checked {size} />
+							<Checkbox {size} />
+							<Checkbox checked="indeterminate" {size} />
+						</HStack>
+					{/each}
+				</VStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Shapes</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-col gap-4">
-						{#each shapes as shape}
-							<div class="flex gap-4">
-								<Checkbox checked {shape} />
-								<Checkbox {shape} />
-								<Checkbox checked="indeterminate" {shape} />
-							</div>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
-		</div>
+		<Card>
+			<CardHeader>
+				<CardTitle>Shapes</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					{#each shapes as shape}
+						<HStack>
+							<Checkbox checked {shape} />
+							<Checkbox {shape} />
+							<Checkbox checked="indeterminate" {shape} />
+						</HStack>
+					{/each}
+				</VStack>
+			</CardBody>
+		</Card>
 	{/snippet}
 </DualThemeLayout>
diff --git a/src/routes/examples/heading/+page.svelte b/src/routes/examples/heading/+page.svelte
index 9207298..652c5e5 100644
--- a/src/routes/examples/heading/+page.svelte
+++ b/src/routes/examples/heading/+page.svelte
@@ -1,42 +1,40 @@
 <script lang="ts">
 	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
 	import { colors } from '$docs/constants.js';
-	import { Card, CardBody, CardHeader, CardTitle, Heading } from '@immich/ui';
+	import { Card, CardBody, CardHeader, CardTitle, Heading, VStack } from '@immich/ui';
 
 	const text = 'Heading';
 </script>
 
 <DualThemeLayout name="Heading">
 	{#snippet component()}
-		<section class="flex flex-col gap-4">
-			<Card>
-				<CardHeader>
-					<CardTitle>Sizes</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-col gap-4">
-						<Heading size="tiny">{text} (tiny)</Heading>
-						<Heading size="small">{text} (small)</Heading>
-						<Heading size="medium">{text} (medium)</Heading>
-						<Heading size="large">{text} (large)</Heading>
-						<Heading size="giant">{text} (giant)</Heading>
-						<Heading size="title">{text} (title)</Heading>
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Sizes</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					<Heading size="tiny">{text} (tiny)</Heading>
+					<Heading size="small">{text} (small)</Heading>
+					<Heading size="medium">{text} (medium)</Heading>
+					<Heading size="large">{text} (large)</Heading>
+					<Heading size="giant">{text} (giant)</Heading>
+					<Heading size="title">{text} (title)</Heading>
+				</VStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Colors</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-col gap-4">
-						{#each colors as color}
-							<Heading size="medium" {color} class="capitalize">{text} ({color})</Heading>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
-		</section>
+		<Card>
+			<CardHeader>
+				<CardTitle>Colors</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					{#each colors as color}
+						<Heading size="medium" {color} class="capitalize">{text} ({color})</Heading>
+					{/each}
+				</VStack>
+			</CardBody>
+		</Card>
 	{/snippet}
 </DualThemeLayout>
diff --git a/src/routes/examples/icon-button/+page.svelte b/src/routes/examples/icon-button/+page.svelte
index e4e177f..3f9a60c 100644
--- a/src/routes/examples/icon-button/+page.svelte
+++ b/src/routes/examples/icon-button/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
 	import { colors, shapes, sizes } from '$docs/constants.js';
-	import { Card, CardBody, CardHeader, CardTitle, IconButton } from '@immich/ui';
+	import { Card, CardBody, CardHeader, CardTitle, HStack, IconButton } from '@immich/ui';
 	import { mdiMagnify } from '@mdi/js';
 
 	const icon = mdiMagnify;
@@ -9,99 +9,97 @@
 
 <DualThemeLayout name="IconButton">
 	{#snippet component()}
-		<div class="flex flex-col gap-4">
-			<Card>
-				<CardHeader>
-					<CardTitle>Shapes</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each shapes as shape}
-							<IconButton {icon} {shape} />
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Shapes</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each shapes as shape}
+						<IconButton {icon} {shape} />
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Colors</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each colors as color}
-							<IconButton {icon} {color}></IconButton>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Colors</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each colors as color}
+						<IconButton {icon} {color}></IconButton>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Outline</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each colors as color}
-							<IconButton {icon} variant="outline" {color}></IconButton>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Outline</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each colors as color}
+						<IconButton {icon} variant="outline" {color}></IconButton>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Ghost</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each colors as color}
-							<IconButton {icon} variant="ghost" {color}></IconButton>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Ghost</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each colors as color}
+						<IconButton {icon} variant="ghost" {color}></IconButton>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Hero</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each colors as color}
-							<IconButton {icon} variant="hero" {color}></IconButton>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Hero</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each colors as color}
+						<IconButton {icon} variant="hero" {color}></IconButton>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Disabled</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each colors as color}
-							<IconButton {icon} {color} disabled></IconButton>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Disabled</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each colors as color}
+						<IconButton {icon} {color} disabled></IconButton>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Sizes</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="flex flex-wrap gap-4">
-						{#each sizes as size}
-							<div>
-								<IconButton {icon} {size}></IconButton>
-							</div>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
-		</div>
+		<Card>
+			<CardHeader>
+				<CardTitle>Sizes</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack wrap>
+					{#each sizes as size}
+						<div>
+							<IconButton {icon} {size}></IconButton>
+						</div>
+					{/each}
+				</HStack>
+			</CardBody>
+		</Card>
 	{/snippet}
 </DualThemeLayout>
diff --git a/src/routes/examples/logo/+page.svelte b/src/routes/examples/logo/+page.svelte
index 2548e90..f88dd8f 100644
--- a/src/routes/examples/logo/+page.svelte
+++ b/src/routes/examples/logo/+page.svelte
@@ -1,65 +1,67 @@
 <script lang="ts">
 	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
 	import { sizes } from '$docs/constants.js';
-	import { Card, CardBody, CardHeader, CardTitle, Logo } from '@immich/ui';
+	import { Card, CardBody, CardHeader, CardTitle, HStack, Logo, VStack } from '@immich/ui';
 </script>
 
 <DualThemeLayout name="Button">
 	{#snippet component({ theme })}
-		<div class="flex flex-col gap-4">
-			<Card>
-				<CardHeader>
-					<CardTitle>Logo</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<div class="m-2 flex flex-col gap-2">
-						{#each sizes as size}
-							<div class="flex gap-1 rounded-xl bg-gray-300 p-2 dark:bg-gray-600">
-								<Logo {size} {theme} variant="logo"></Logo>
-								<Logo {size} {theme} variant="logo"></Logo>
-								<Logo {size} {theme} variant="logo"></Logo>
-							</div>
-						{/each}
-					</div>
-				</CardBody>
-			</Card>
-			<Card>
-				<CardHeader>
-					<CardTitle>Icon</CardTitle>
-				</CardHeader>
-				<CardBody>
-					{#each sizes as size}
-						<div>
-							<Logo {size} {theme} variant="icon"></Logo>
-						</div>
-					{/each}
-				</CardBody>
-			</Card>
-			<Card>
-				<CardHeader>
-					<CardTitle>Inline</CardTitle>
-				</CardHeader>
-				<CardBody>
+		<Card>
+			<CardHeader>
+				<CardTitle>Logo</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
 					{#each sizes as size}
-						<div>
-							<Logo {size} {theme} variant="inline"></Logo>
-						</div>
+						<Card color="secondary" variant="subtle">
+							<CardBody>
+								<HStack>
+									<Logo {size} {theme} variant="logo"></Logo>
+									<Logo {size} {theme} variant="logo"></Logo>
+									<Logo {size} {theme} variant="logo"></Logo>
+								</HStack>
+							</CardBody>
+						</Card>
 					{/each}
-				</CardBody>
-			</Card>
+				</VStack>
+			</CardBody>
+		</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Icon</CardTitle>
+			</CardHeader>
+			<CardBody>
+				{#each sizes as size}
+					<div>
+						<Logo {size} {theme} variant="icon"></Logo>
+					</div>
+				{/each}
+			</CardBody>
+		</Card>
+		<Card>
+			<CardHeader>
+				<CardTitle>Inline</CardTitle>
+			</CardHeader>
+			<CardBody>
+				{#each sizes as size}
+					<div>
+						<Logo {size} {theme} variant="inline"></Logo>
+					</div>
+				{/each}
+			</CardBody>
+		</Card>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Stacked</CardTitle>
-				</CardHeader>
-				<CardBody>
-					{#each sizes as size}
-						<div>
-							<Logo {size} {theme} variant="stacked"></Logo>
-						</div>
-					{/each}
-				</CardBody>
-			</Card>
-		</div>
+		<Card>
+			<CardHeader>
+				<CardTitle>Stacked</CardTitle>
+			</CardHeader>
+			<CardBody>
+				{#each sizes as size}
+					<div>
+						<Logo {size} {theme} variant="stacked"></Logo>
+					</div>
+				{/each}
+			</CardBody>
+		</Card>
 	{/snippet}
 </DualThemeLayout>
diff --git a/src/routes/examples/stack/+page.svelte b/src/routes/examples/stack/+page.svelte
new file mode 100644
index 0000000..92dca07
--- /dev/null
+++ b/src/routes/examples/stack/+page.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import DecorativeBlock from '$docs/components/DecorativeBlock.svelte';
+	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
+	import { Card, CardBody, CardHeader, CardTitle, HStack, Stack, VStack } from '@immich/ui';
+</script>
+
+<DualThemeLayout name="Stack">
+	{#snippet component()}
+		<Card>
+			<CardHeader>
+				<CardTitle>Stack</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Stack>
+					<DecorativeBlock />
+					<DecorativeBlock />
+					<DecorativeBlock />
+				</Stack>
+			</CardBody>
+		</Card>
+
+		<Card>
+			<CardHeader>
+				<CardTitle>HStack</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<HStack>
+					<DecorativeBlock />
+					<DecorativeBlock />
+					<DecorativeBlock />
+				</HStack>
+			</CardBody>
+		</Card>
+
+		<Card>
+			<CardHeader>
+				<CardTitle>VStack</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					<DecorativeBlock />
+					<DecorativeBlock />
+					<DecorativeBlock />
+				</VStack>
+			</CardBody>
+		</Card>
+	{/snippet}
+</DualThemeLayout>
diff --git a/src/routes/examples/text/+page.svelte b/src/routes/examples/text/+page.svelte
index a2b1b74..9f4ca1c 100644
--- a/src/routes/examples/text/+page.svelte
+++ b/src/routes/examples/text/+page.svelte
@@ -1,43 +1,41 @@
 <script lang="ts">
 	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
 	import { colors } from '$docs/constants.js';
-	import { Card, CardBody, CardHeader, CardTitle, Text } from '@immich/ui';
+	import { Card, CardBody, CardHeader, CardTitle, Text, VStack } from '@immich/ui';
 
 	const text = 'The quick brown fox jumps over the lazy dog';
 </script>
 
 <DualThemeLayout name="Text">
 	{#snippet component()}
-		<div class="flex flex-col gap-4">
-			<section class="flex flex-col gap-4">
-				<Card>
-					<CardHeader>
-						<CardTitle>Sizes</CardTitle>
-					</CardHeader>
-					<CardBody>
-						<div class="flex flex-col gap-4">
-							<Text size="tiny">{text} (tiny)</Text>
-							<Text size="small">{text} (small)</Text>
-							<Text size="medium">{text} (medium)</Text>
-							<Text size="large">{text} (large)</Text>
-							<Text size="giant">{text} (giant)</Text>
-						</div>
-					</CardBody>
-				</Card>
+		<VStack gap={4}>
+			<Card>
+				<CardHeader>
+					<CardTitle>Sizes</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<VStack>
+						<Text size="tiny">{text} (tiny)</Text>
+						<Text size="small">{text} (small)</Text>
+						<Text size="medium">{text} (medium)</Text>
+						<Text size="large">{text} (large)</Text>
+						<Text size="giant">{text} (giant)</Text>
+					</VStack>
+				</CardBody>
+			</Card>
 
-				<Card>
-					<CardHeader>
-						<CardTitle>Colors</CardTitle>
-					</CardHeader>
-					<CardBody>
-						<div class="flex flex-col gap-4">
-							{#each colors as color}
-								<Text size="medium" {color} class="capitalize">{text} ({color})</Text>
-							{/each}
-						</div>
-					</CardBody>
-				</Card>
-			</section>
-		</div>
+			<Card>
+				<CardHeader>
+					<CardTitle>Colors</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<VStack>
+						{#each colors as color}
+							<Text size="medium" {color} class="capitalize">{text} ({color})</Text>
+						{/each}
+					</VStack>
+				</CardBody>
+			</Card>
+		</VStack>
 	{/snippet}
 </DualThemeLayout>