feat: kbd component

src/docs/constants.ts

@@ -16,6 +16,7 @@ import {
 	mdiHelpBoxOutline,
 	mdiHomeCircle,
 	mdiImage,
+	mdiKeyboardVariant,
 	mdiLink,
 	mdiListBoxOutline,
 	mdiMenu,
@@ -77,6 +78,7 @@ export const componentGroups = [
 		title: 'Text',
 		components: [
 			{ name: 'Code', icon: mdiCodeBraces },
+			{ name: 'Kbd', icon: mdiKeyboardVariant },
 			{ name: 'Text', icon: mdiFormatHeaderPound },
 			{ name: 'Heading', icon: mdiFormTextbox },
 			{ name: 'Link', icon: mdiLink },

src/lib/components/Kbd/Kbd.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Color, Size } from '$lib/types.js';
+	import { cleanClass } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		size?: Size;
+		color?: Color;
+		class?: string;
+		children?: Snippet;
+	} & HTMLAttributes<HTMLElement>;
+
+	const { class: className, size = 'small', children, ...restProps }: Props = $props();
+
+	const styles = tv({
+		base: 'flex flex-col rounded-md border border-b-2 bg-subtle px-1 font-mono text-dark shadow',
+		variants: {
+			size: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+		},
+	});
+</script>
+
+<kbd class={cleanClass(styles({ size }), className)} {...restProps}>
+	{@render children?.()}
+</kbd>

src/lib/index.ts

@@ -34,6 +34,7 @@ export { default as FormatBytes } from '$lib/components/FormatBytes/FormatBytes.
 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 Kbd } from '$lib/components/Kbd/Kbd.svelte';
 export { default as Link } from '$lib/components/Link/Link.svelte';
 export { default as LoadingSpinner } from '$lib/components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from '$lib/components/Logo/Logo.svelte';

src/routes/components/kbd/+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 SizeExample from './SizeExample.svelte';
+	import sizeExample from './SizeExample.svelte?raw';
+</script>
+
+<ComponentPage name="Kbd">
+	<ComponentExamples
+		examples={[
+			{ title: 'Basic', code: basicExample, component: BasicExample },
+			{ title: 'Size', code: sizeExample, component: SizeExample },
+		]}
+	/>
+</ComponentPage>

src/routes/components/kbd/BasicExample.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { Kbd, Stack, Text } from '@immich/ui';
+</script>
+
+<Stack class="items-start">
+	<Kbd class="border-b-2">F12</Kbd>
+	<Kbd>SHIFT+TAB</Kbd>
+	<Text>Press <Kbd size="small">CTRL+c</Kbd> to copy highlighted text. it.</Text>
+</Stack>

src/routes/components/kbd/SizeExample.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Kbd, Stack } from '@immich/ui';
+</script>
+
+<Stack class="items-start">
+	<Kbd size="tiny">SHIFT+TAB</Kbd>
+	<Kbd size="small">SHIFT+TAB</Kbd>
+	<Kbd size="medium">SHIFT+TAB</Kbd>
+	<Kbd size="large">SHIFT+TAB</Kbd>
+	<Kbd size="giant">SHIFT+TAB</Kbd>
+</Stack>