feat: container component

src/docs/components/ComponentPage.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-	import { Heading, Scrollable } from '@immich/ui';
+	import { Container, Heading, Scrollable, type ContainerSize } from '@immich/ui';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
 		name: string;
+		size?: ContainerSize;
 		children?: Snippet;
 	};
 
-	const { name, children }: Props = $props();
+	const { size = 'medium', name, children }: Props = $props();
 </script>
 
 <div class="flex h-full flex-col">
@@ -23,9 +24,9 @@
 	</nav>
 
 	<Scrollable>
-		<div class="flex max-w-screen-md flex-col p-4">
+		<Container {size} class="flex flex-col p-4">
 			<Heading size="large">{name}</Heading>
 			{@render children?.()}
-		</div>
+		</Container>
 	</Scrollable>
 </div>

src/docs/components/Footer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import {
 		Card,
+		Container,
 		Heading,
 		HStack,
 		Icon,
@@ -33,7 +34,7 @@
 </script>
 
 <div class="mt-16 rounded-t-3xl bg-dark/10 p-8">
-	<div class="mx-auto max-w-screen-md lg:py-8">
+	<Container size="medium" center class="lg:py-8">
 		<Stack gap={8}>
 			<div class="place-center grid grid-cols-2 gap-8 lg:grid-cols-4">
 				<Stack>
@@ -144,5 +145,5 @@
 				/>
 			</VStack>
 		</Stack>
-	</div>
+	</Container>
 </div>

src/docs/constants.ts

@@ -23,6 +23,7 @@ import {
 	mdiNumeric,
 	mdiPanVertical,
 	mdiPartyPopper,
+	mdiSquareOutline,
 	mdiThemeLightDark,
 	mdiToggleSwitch,
 	mdiViewSequentialOutline,
@@ -51,6 +52,7 @@ export const componentGroups = [
 			{ name: 'Alert', icon: mdiAlertCircleOutline },
 			{ name: 'AppShell', icon: mdiApplicationOutline },
 			{ name: 'Card', icon: mdiCardOutline },
+			{ name: 'Container', icon: mdiSquareOutline },
 			{ name: 'Navbar', icon: mdiMenu },
 			{ name: 'Modal', icon: mdiWindowMaximize },
 			{ name: 'Scrollable', icon: mdiPanVertical },

src/lib/components/Container/Container.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Size } from '$lib/types.js';
+	import { cleanClass } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		size?: Size | 'full';
+		class?: string;
+		center?: boolean;
+		children?: Snippet;
+	};
+
+	const { center, class: className, size = 'full', children }: Props = $props();
+
+	const styles = tv({
+		base: '',
+		variants: {
+			size: {
+				tiny: 'max-w-lg',
+				small: 'max-w-screen-sm',
+				medium: 'max-w-screen-md',
+				large: 'max-w-screen-lg',
+				giant: 'max-w-screen-xl',
+				full: 'w-full',
+			},
+		},
+	});
+</script>
+
+<div class={cleanClass(styles({ size }), center && 'mx-auto w-full', className)}>
+	{@render children?.()}
+</div>

src/lib/index.ts

@@ -24,6 +24,7 @@ export { default as CardHeader } from '$lib/components/Card/CardHeader.svelte';
 export { default as CardTitle } from '$lib/components/Card/CardTitle.svelte';
 export { default as CloseButton } from '$lib/components/CloseButton/CloseButton.svelte';
 export { default as Code } from '$lib/components/Code/Code.svelte';
+export { default as Container } from '$lib/components/Container/Container.svelte';
 export { default as Checkbox } from '$lib/components/Form/Checkbox.svelte';
 export { default as Field } from '$lib/components/Form/Field.svelte';
 export { default as HelperText } from '$lib/components/Form/HelperText.svelte';

src/lib/types.ts

@@ -11,6 +11,7 @@ export type TextColor = Color | 'muted';
 export type HeadingColor = TextColor;
 export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
 export type ModalSize = Size | 'full';
+export type ContainerSize = ModalSize;
 export type HeadingSize = Size | 'title';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
 export type Variants = 'filled' | 'outline' | 'ghost';

src/routes/+page.svelte

@@ -2,12 +2,12 @@
 	import ComponentCard from '$docs/components/ComponentCard.svelte';
 	import Grid from '$docs/components/Grid.svelte';
 	import { componentGroups } from '$docs/constants.js';
-	import { Code, Heading, Link, Stack, Text } from '@immich/ui';
+	import { Code, Container, Heading, Link, Stack, Text } from '@immich/ui';
 </script>
 
-<div class="max-w-screen-lg p-2">
+<Container size="large" class="p-2">
 	<Stack class="flex flex-col gap-4 px-8 py-8" gap={8}>
-		<Heading size="large">@immich/ui</Heading>
+		<Heading size="title">@immich/ui</Heading>
 		<Text>
 			@immich/ui is a collection of <Link href="https://svelte.dev">Svelte</Link> components that are
 			shared across all Immich projects. It is designed to be a simple and easy-to-use library that provides
@@ -32,4 +32,4 @@
 			{/each}
 		</Stack>
 	</Stack>
-</div>
+</Container>

src/routes/components/container/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import ComponentExamples from '$docs/components/ComponentExamples.svelte';
+	import ComponentPage from '$docs/components/ComponentPage.svelte';
+	import BasicExample from './BasicExample.svelte';
+	import basicExample from './BasicExample.svelte?raw';
+	import CenterExample from './CenterExample.svelte';
+	import centerExample from './CenterExample.svelte?raw';
+</script>
+
+<ComponentPage name="Container" size="full">
+	<ComponentExamples
+		examples={[
+			{ title: 'Basic', code: basicExample, component: BasicExample },
+			{ title: 'Center', code: centerExample, component: CenterExample },
+		]}
+	/>
+</ComponentPage>

src/routes/components/container/BasicExample.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { Container, Stack } from '@immich/ui';
+</script>
+
+<Stack gap={2}>
+	<Container size="tiny" class="bg-gray-500 p-4">Container</Container>
+	<Container size="small" class="bg-gray-500 p-4">Container</Container>
+	<Container size="medium" class="bg-gray-500 p-4">Container</Container>
+	<Container size="large" class="bg-gray-500 p-4">Container</Container>
+	<Container size="giant" class="bg-gray-500 p-4">Container</Container>
+</Stack>

src/routes/components/container/CenterExample.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { Container, Stack } from '@immich/ui';
+</script>
+
+<Stack gap={2}>
+	<Container size="tiny" class="bg-gray-500 p-4" center>Container</Container>
+	<Container size="small" class="bg-gray-500 p-4" center>Container</Container>
+	<Container size="medium" class="bg-gray-500 p-4" center>Container</Container>
+	<Container size="large" class="bg-gray-500 p-4" center>Container</Container>
+	<Container size="giant" class="bg-gray-500 p-4" center>Container</Container>
+</Stack>