@immich/ui 0.9.0 → 0.11.0

package/dist/common/use-child.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ChildKey } from '../constants.js';
-import { type Snippet } from 'svelte';
+import type { ChildData } from '../types.js';
 export declare const withChildrenSnippets: (key: ChildKey) => {
-    getChildren: (key: ChildKey) => Snippet<[]> | undefined;
+    getChildren: (key: ChildKey) => ChildData | undefined;
 };

package/dist/common/use-child.svelte.js

@@ -3,17 +3,11 @@ import { withPrefix } from '../utils.js';
 import { setContext } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 export const withChildrenSnippets = (key) => {
-    const map = $state(new SvelteMap());
+    const map = new SvelteMap();
     setContext(withPrefix(key), {
-        register: async (child, snippet) => {
-            if (map.has(child)) {
-                console.warn(`Snippet with key ${child} already exists in the context`);
-                return;
-            }
-            map.set(child, snippet);
-        },
+        register: (child, data) => map.set(child, data),
     });
     return {
-        getChildren: (key) => map.get(key),
+        getChildren: (key) => map.get(key)?.(),
     };
 };

package/dist/components/Alert/Alert.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import Card from '../Card/Card.svelte';
-	import CardHeader from '../Card/CardHeader.svelte';
+	import CardBody from '../Card/CardBody.svelte';
+	import CloseButton from '../CloseButton/CloseButton.svelte';
 	import Icon from '../Icon/Icon.svelte';
 	import Text from '../Text/Text.svelte';
-	import CloseButton from '../CloseButton/CloseButton.svelte';
 	import type { Color, Size } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import {
@@ -78,9 +78,9 @@
 </script>
 
 {#if open}
-	<Card {color} variant="subtle" class={cleanClass(className)}>
-		<CardHeader>
-			<div class="flex justify-between">
+	<Card {color} class={cleanClass(className)}>
+		<CardBody>
+			<div class="flex items-center justify-between">
 				<div class={cleanClass('flex gap-2')}>
 					{#if icon}
 						<div>
@@ -103,6 +103,6 @@
 					</div>
 				{/if}
 			</div>
-		</CardHeader>
+		</CardBody>
 	</Card>
 {/if}

package/dist/components/AppShell/AppShell.svelte

@@ -20,12 +20,12 @@
 <div class={cleanClass('flex h-screen flex-col overflow-hidden', className)}>
 	{#if header}
 		<header class="border-b">
-			{@render header?.()}
+			{@render header?.snippet()}
 		</header>
 	{/if}
 	<div class="flex w-full grow overflow-y-auto">
 		{#if sidebar}
-			{@render sidebar()}
+			{@render sidebar?.snippet()}
 		{/if}
 		<Scrollable class="grow">
 			{@render children?.()}

package/dist/components/Avatar/Avatar.svelte

@@ -24,11 +24,11 @@
 		base: 'flex h-full w-full select-none items-center justify-center font-medium',
 		variants: {
 			size: {
-				tiny: 'w-5 h-5 text-xs',
-				small: 'w-7 h-7 text-sm',
-				medium: 'w-10 h-10 text-md',
-				large: 'w-12 h-12 text-lg',
-				giant: 'w-16 h-16 text-xl',
+				tiny: 'h-5 w-5 text-xs',
+				small: 'h-7 w-7 text-sm',
+				medium: 'text-md h-10 w-10',
+				large: 'h-12 w-12 text-lg',
+				giant: 'h-16 w-16 text-xl',
 			},
 			color: {
 				primary: 'bg-primary text-light',
@@ -46,7 +46,7 @@
 	});
 
 	const wrapper = tv({
-		base: 'overflow-hidden shadow-md rounded rounded-full',
+		base: 'overflow-hidden rounded-full shadow-md',
 	});
 
 	const getInitials = (name: string) => {

package/dist/components/Card/Card.svelte

@@ -1,50 +1,54 @@
 <script lang="ts">
 	import { withChildrenSnippets } from '../../common/use-child.svelte.js';
 	import IconButton from '../IconButton/IconButton.svelte';
+	import Scrollable from '../Scrollable/Scrollable.svelte';
 	import { ChildKey } from '../../constants.js';
-	import type { Color, Shape } from '../../types.js';
+	import type { Color } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import { mdiChevronDown } from '@mdi/js';
 	import { type Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
 
 	type Props = HTMLAttributes<HTMLDivElement> & {
 		color?: Color;
-		shape?: Shape;
-		variant?: 'filled' | 'outline' | 'subtle';
+		shape?: 'round' | 'rectangle';
+		expanded?: boolean;
 		expandable?: boolean;
 		children: Snippet;
 	};
 
 	let {
-		color = 'secondary',
+		color,
 		class: className,
+		shape = 'round',
+		expanded = $bindable(true),
 		expandable = false,
-		variant,
 		children,
 		...restProps
 	}: Props = $props();
 
-	const cardStyles = tv({
-		base: 'flex flex-col rounded-2xl bg-light text-dark shadow-sm w-full overflow-hidden',
+	const containerStyles = tv({
+		base: 'w-full overflow-hidden bg-light text-dark shadow-sm',
 		variants: {
-			defaultStyle: {
+			shape: {
+				rectangle: '',
+				round: 'rounded-2xl',
+			},
+			border: {
 				true: 'border',
 				false: '',
-				default: '',
 			},
-			outlineColor: {
-				primary: 'border border-primary',
-				secondary: 'border',
-				success: 'border border-success',
-				danger: 'border border-danger',
-				warning: 'border border-warning',
-				info: 'border border-info',
-			},
-			subtleColor: {
+		},
+	});
+
+	const cardStyles = tv({
+		base: 'flex h-full w-full flex-col',
+		variants: {
+			color: {
 				primary: 'bg-primary/25 dark:bg-primary/25',
-				secondary: 'bg-dark/5 dark:bg-dark/25 text-dark',
+				secondary: 'bg-dark/5 text-dark dark:bg-dark/25',
 				success: 'bg-success/15 dark:bg-success/30',
 				danger: 'bg-danger/15 dark:bg-danger/50',
 				warning: 'bg-warning/25 dark:bg-warning/50',
@@ -54,132 +58,103 @@
 	});
 
 	const headerContainerStyles = tv({
+		base: 'p-4',
 		variants: {
-			bottomPadding: {
+			padding: {
 				true: '',
 				false: 'pb-0',
 			},
-			filledColor: {
-				primary: 'bg-primary text-light rounded-t-xl',
-				secondary: 'bg-dark text-light rounded-t-xl',
-				success: 'bg-success text-light rounded-t-xl',
-				danger: 'bg-danger text-light rounded-t-xl',
-				warning: 'bg-warning text-black rounded-t-xl',
-				info: 'bg-info text-light rounded-t-xl',
-			},
-			outlineColor: {
-				primary: 'text-primary',
-				secondary: 'text-dark',
-				success: 'text-success',
-				danger: 'text-danger',
-				warning: 'text-warning',
-				info: 'text-info',
-			},
-		},
-	});
-
-	const iconStyles = tv({
-		variants: {
-			filledColor: {
-				primary: 'text-light',
-				secondary: 'text-light',
-				success: 'text-light',
-				danger: 'text-light',
-				warning: 'text-dark',
-				info: 'text-light',
-			},
-			outlineColor: {
-				primary: 'text-primary',
-				secondary: 'text-dark',
-				success: 'text-success',
-				danger: 'text-danger',
-				warning: 'text-warning',
-				info: 'text-info',
+			border: {
+				true: 'border-b',
+				false: '',
 			},
 		},
 	});
 
-	let expanded = $state(!expandable);
 	const onToggle = () => {
 		expanded = !expanded;
 	};
 
 	const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Card);
-	const headerChildren = $derived(getChildSnippet(ChildKey.CardHeader));
-	const bodyChildren = $derived(getChildSnippet(ChildKey.CardBody));
-	const footerChildren = $derived(getChildSnippet(ChildKey.CardFooter));
+	const headerChild = $derived(getChildSnippet(ChildKey.CardHeader));
+	const bodyChild = $derived(getChildSnippet(ChildKey.CardBody));
+	const footerChild = $derived(getChildSnippet(ChildKey.CardFooter));
+
+	const headerBorder = $derived(!color);
+	const headerPadding = $derived(headerBorder || !expanded);
 
-	const headerClasses = 'flex flex-col space-y-1.5';
 	const headerContainerClasses = $derived(
-		cleanClass(
-			headerContainerStyles({
-				bottomPadding: variant === 'filled' || !bodyChildren,
-				outlineColor: variant === 'outline' ? color : undefined,
-				filledColor: variant === 'filled' ? color : undefined,
-			}),
+		twMerge(
+			cleanClass(
+				headerContainerStyles({
+					padding: headerPadding,
+					border: headerBorder,
+				}),
+				headerChild?.class,
+			),
 		),
 	);
 </script>
 
 {#snippet header()}
 	{#if expandable}
-		<button type="button" onclick={onToggle} class="w-full">
-			<div class={cleanClass(headerContainerClasses, 'flex items-center justify-between px-4')}>
-				<div class={cleanClass(headerClasses, 'py-4')}>
-					{@render headerChildren?.()}
-				</div>
-				<div>
-					<IconButton
-						class={iconStyles({
-							filledColor: variant === 'filled' ? color : undefined,
-							outlineColor: variant === 'outline' ? color : undefined,
-						}) as Color}
-						icon={mdiChevronDown}
-						flopped={expanded}
-						variant="ghost"
-						shape="round"
-						size="large"
-					/>
-				</div>
+		<button
+			type="button"
+			onclick={onToggle}
+			class={cleanClass('flex w-full items-center justify-between px-4', headerContainerClasses)}
+		>
+			<div class="flex flex-col">
+				{@render headerChild?.snippet()}
+			</div>
+			<div>
+				<IconButton
+					color="secondary"
+					icon={mdiChevronDown}
+					flopped={expanded}
+					variant="ghost"
+					shape="round"
+					size="large"
+				/>
 			</div>
 		</button>
 	{:else}
-		<div class={cleanClass(headerClasses, headerContainerClasses, 'p-4')}>
-			{@render headerChildren?.()}
+		<div class={cleanClass('flex flex-col', headerContainerClasses)}>
+			{@render headerChild?.snippet()}
 		</div>
 	{/if}
 {/snippet}
 
-{#snippet body()}
-	{@render bodyChildren?.()}
-{/snippet}
-
-{#snippet footer()}
-	{@render footerChildren?.()}
-{/snippet}
-
 <div
 	class={cleanClass(
-		cardStyles({
-			defaultStyle: variant === undefined,
-			outlineColor: variant === 'outline' || variant === 'filled' ? color : undefined,
-			subtleColor: variant === 'subtle' ? color : undefined,
+		containerStyles({
+			shape,
+			border: !color,
 		}),
 		className,
 	)}
 	{...restProps}
 >
-	{#if headerChildren}
-		{@render header()}
-	{/if}
+	<div class={cleanClass(cardStyles({ color }))}>
+		{#if headerChild}
+			{@render header()}
+		{/if}
 
-	{#if bodyChildren && expanded}
-		{@render body()}
-	{/if}
+		{#if bodyChild && expanded}
+			<Scrollable class={twMerge(cleanClass('p-4', bodyChild?.class))}>
+				{@render bodyChild?.snippet()}
+			</Scrollable>
+		{/if}
 
-	{#if footerChildren}
-		{@render footer()}
-	{/if}
+		{#if footerChild}
+			<div
+				class={twMerge(
+					cleanClass('flex items-center border-t border-t-subtle p-4', footerChild.class),
+				)}
+			>
+				{@render footerChild.snippet()}
+			</div>
+		{/if}
 
-	{@render children()}
+		{@render children()}
+	</div>
 </div>

package/dist/components/Card/Card.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { Color, Shape } from '../../types.js';
+import type { Color } from '../../types.js';
 import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 declare const Card: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
     color?: Color;
-    shape?: Shape;
-    variant?: "filled" | "outline" | "subtle";
+    shape?: "round" | "rectangle";
+    expanded?: boolean;
     expandable?: boolean;
     children: Snippet;
-}, {}, "">;
+}, {}, "expanded">;
 export default Card;

package/dist/components/Card/CardBody.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { ChildKey } from '../../constants.js';
 	import Child from '../../internal/Child.svelte';
-	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
-	import { twMerge } from 'tailwind-merge';
 
 	type Props = {
 		class?: string;
@@ -13,8 +11,6 @@
 	let { class: className, children }: Props = $props();
 </script>
 
-<Child for={ChildKey.Card} as={ChildKey.CardBody}>
-	<div class={twMerge(cleanClass('w-full grow p-4', className))}>
-		{@render children?.()}
-	</div>
+<Child for={ChildKey.Card} as={ChildKey.CardBody} class={className}>
+	{@render children?.()}
 </Child>

package/dist/components/Card/CardFooter.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
 	import { ChildKey } from '../../constants.js';
 	import Child from '../../internal/Child.svelte';
-	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
-		children: Snippet;
 		class?: string;
+		children: Snippet;
 	};
 
-	let { children, class: className }: Props = $props();
+	let { class: className, children }: Props = $props();
 </script>
 
-<Child for={ChildKey.Card} as={ChildKey.CardFooter}>
-	<div class={cleanClass('flex items-center p-4 pt-0', className)}>
-		{@render children?.()}
-	</div>
+<Child for={ChildKey.Card} as={ChildKey.CardFooter} class={className}>
+	{@render children?.()}
 </Child>

package/dist/components/Card/CardFooter.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 declare const CardFooter: import("svelte").Component<{
-    children: Snippet;
     class?: string;
+    children: Snippet;
 }, {}, "">;
 export default CardFooter;

package/dist/components/Card/CardHeader.svelte

@@ -4,12 +4,13 @@
 	import type { Snippet } from 'svelte';
 
 	type Props = {
+		class?: string;
 		children: Snippet;
 	};
 
-	let { children }: Props = $props();
+	let { class: className, children }: Props = $props();
 </script>
 
-<Child for={ChildKey.Card} as={ChildKey.CardHeader}>
+<Child for={ChildKey.Card} as={ChildKey.CardHeader} class={className}>
 	{@render children?.()}
 </Child>

package/dist/components/Card/CardHeader.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 declare const CardHeader: import("svelte").Component<{
+    class?: string;
     children: Snippet;
 }, {}, "">;
 export default CardHeader;

package/dist/components/CloseButton/CloseButton.svelte

@@ -1,9 +1,23 @@
 <script lang="ts">
 	import IconButton from '../IconButton/IconButton.svelte';
+	import { t } from '../../services/translation.svelte.js';
 	import type { CloseButtonProps } from '../../types.js';
 	import { mdiClose } from '@mdi/js';
 
-	const { size = 'medium', variant = 'ghost', ...restProps }: CloseButtonProps = $props();
+	const {
+		size = 'medium',
+		variant = 'ghost',
+		translations,
+		...restProps
+	}: CloseButtonProps = $props();
 </script>
 
-<IconButton {...restProps} icon={mdiClose} shape="round" {variant} {size} color="secondary" />
+<IconButton
+	{...restProps}
+	icon={mdiClose}
+	shape="round"
+	{variant}
+	{size}
+	color="secondary"
+	title={t('close', translations)}
+/>

package/dist/components/Code/Code.svelte

@@ -32,7 +32,7 @@
 
 			filledColor: {
 				false: '',
-				muted: 'bg-gray-600 dark:bg-gray-800 text-light',
+				muted: 'bg-gray-600 text-light dark:bg-gray-800',
 				primary: 'bg-primary text-light',
 				secondary: 'bg-dark text-light',
 				success: 'bg-success text-light',

package/dist/components/Form/Checkbox.svelte

@@ -32,7 +32,7 @@
 	} = $derived(getFieldContext());
 
 	const containerStyles = tv({
-		base: 'border-2 ring-offset-background focus-visible:ring-ring peer box-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50 overflow-hidden',
+		base: 'ring-offset-background focus-visible:ring-ring peer box-content overflow-hidden border-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',

package/dist/components/Form/Field.svelte

@@ -3,6 +3,7 @@
 	import { withChildrenSnippets } from '../../common/use-child.svelte.js';
 	import { ChildKey } from '../../constants.js';
 	import type { FieldContext } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
 	import { type Snippet } from 'svelte';
 
 	type Props = FieldContext & {
@@ -22,8 +23,8 @@
 <div>
 	{@render children()}
 	{#if helperTextChildren}
-		<div class="pt-1">
-			{@render helperTextChildren?.()}
+		<div class={cleanClass('pt-1', helperTextChildren.class)}>
+			{@render helperTextChildren.snippet()}
 		</div>
 	{/if}
 </div>

package/dist/components/Form/Input.svelte

@@ -36,7 +36,7 @@
 	});
 
 	const inputStyles = tv({
-		base: 'w-full outline-none disabled:cursor-not-allowed bg-gray-200 dark:bg-gray-600 disabled:bg-gray-300 disabled:text-gray-200 dark:disabled:bg-gray-800 aria-readonly:text-dark/50 dark:aria-readonly:text-dark/75',
+		base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-200 aria-readonly:text-dark/50 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:aria-readonly:text-dark/75',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',

package/dist/components/Form/PasswordInput.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Input from './Input.svelte';
 	import IconButton from '../IconButton/IconButton.svelte';
+	import { t } from '../../services/translation.svelte.js';
 	import type { PasswordInputProps } from '../../types.js';
 	import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
 
 	let {
 		value = $bindable<string>(),
-		showLabel = 'Show password',
-		hideLabel = 'Hide password',
+		translations,
 		isVisible = $bindable<boolean>(false),
 		color = 'secondary',
 		...props
@@ -24,7 +24,7 @@
 				class="m-1"
 				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
 				onclick={() => (isVisible = !isVisible)}
-				title={isVisible ? hideLabel : showLabel}
+				title={isVisible ? t('hidePassword', translations) : t('showPassword', translations)}
 			></IconButton>
 		{/if}
 	{/snippet}

package/dist/components/Heading/Heading.svelte

@@ -12,7 +12,7 @@
 		children: Snippet;
 	};
 
-	const { color, size, class: className, children }: Props = $props();
+	const { color, size = 'medium', class: className, children }: Props = $props();
 
 	const sizes = {
 		title: 'h1',

package/dist/components/Kbd/Kbd.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Color, Size } from '../../types.js';
+	import { cleanClass } from '../../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>

package/dist/components/Kbd/Kbd.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Color, Size } from '../../types.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const Kbd: import("svelte").Component<{
+    size?: Size;
+    color?: Color;
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLElement>, {}, "">;
+export default Kbd;

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+	import Card from '../Card/Card.svelte';
+	import CardBody from '../Card/CardBody.svelte';
+	import CardFooter from '../Card/CardFooter.svelte';
+	import CardHeader from '../Card/CardHeader.svelte';
+	import CardTitle from '../Card/CardTitle.svelte';
+	import CloseButton from '../CloseButton/CloseButton.svelte';
+	import { ChildKey } from '../../constants.js';
+	import type { ModalSize } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import { Dialog } from 'bits-ui';
+	import { type Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	type Props = Dialog.RootProps & {
+		title: string;
+		size?: ModalSize;
+		class?: string;
+		open?: boolean;
+		expandable?: boolean;
+		children: Snippet;
+	};
+
+	let {
+		title,
+		size = 'medium',
+		open = $bindable(true),
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+
+	const modalStyles = tv({
+		base: 'flex rounded-none border border-subtle bg-subtle sm:rounded-2xl',
+		variants: {
+			size: {
+				tiny: 'h-full sm:h-min md:max-w-64',
+				small: 'h-full sm:h-min md:max-w-96',
+				medium: 'h-full sm:h-min md:max-w-screen-sm',
+				large: 'h-full sm:h-min md:max-w-screen-md',
+				giant: 'h-full sm:h-min md:max-w-screen-lg',
+				full: 'h-full w-full',
+			},
+		},
+	});
+
+	const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Modal);
+	const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
+	const footerChildren = $derived(getChildSnippet(ChildKey.ModalFooter));
+
+	const handleClose = () => {
+		open = false;
+	};
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="absolute left-0 top-0 flex h-screen w-screen backdrop-blur" />
+		<Dialog.Content
+			class={cleanClass(
+				'absolute left-0 top-0 flex h-dvh w-screen items-center justify-center overflow-hidden sm:p-4',
+			)}
+		>
+			<div class={cleanClass('flex h-full w-full flex-col items-center justify-center ')}>
+				<Card class={cleanClass(modalStyles({ size }), className)}>
+					<CardHeader class="border-0 py-2">
+						<div class="flex items-center justify-between">
+							<CardTitle>{title}</CardTitle>
+							<CloseButton size="large" onclick={handleClose} />
+						</div>
+					</CardHeader>
+
+					<CardBody class="grow py-2">
+						{@render bodyChildren?.snippet()}
+					</CardBody>
+
+					{#if footerChildren}
+						<CardFooter class="py-2">
+							{@render footerChildren.snippet()}
+						</CardFooter>
+					{/if}
+				</Card>
+			</div>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+{@render children?.()}

package/dist/components/Modal/Modal.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ModalSize } from '../../types.js';
+import { type Snippet } from 'svelte';
+declare const Modal: import("svelte").Component<{
+    open?: boolean;
+    onOpenChange?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
+} & {
+    children?: Snippet | undefined;
+} & {
+    title: string;
+    size?: ModalSize;
+    class?: string;
+    open?: boolean;
+    expandable?: boolean;
+    children: Snippet;
+}, {}, "open">;
+export default Modal;

package/dist/components/Modal/ModalBody.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ChildKey } from '../../constants.js';
+	import Child from '../../internal/Child.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+	};
+
+	let { children }: Props = $props();
+</script>
+
+<Child for={ChildKey.Modal} as={ChildKey.ModalBody}>
+	{@render children?.()}
+</Child>

package/dist/components/Modal/ModalBody.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const ModalBody: import("svelte").Component<{
+    children: Snippet;
+}, {}, "">;
+export default ModalBody;

package/dist/components/Modal/ModalFooter.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ChildKey } from '../../constants.js';
+	import Child from '../../internal/Child.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+	};
+
+	let { children }: Props = $props();
+</script>
+
+<Child for={ChildKey.Modal} as={ChildKey.ModalFooter}>
+	{@render children?.()}
+</Child>

package/dist/components/Modal/ModalFooter.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const ModalFooter: import("svelte").Component<{
+    children: Snippet;
+}, {}, "">;
+export default ModalFooter;

package/dist/components/Modal/ModalHeader.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ChildKey } from '../../constants.js';
+	import Child from '../../internal/Child.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+	};
+
+	let { children }: Props = $props();
+</script>
+
+<Child for={ChildKey.Modal} as={ChildKey.ModalHeader}>
+	{@render children?.()}
+</Child>

package/dist/components/Modal/ModalHeader.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const ModalHeader: import("svelte").Component<{
+    children: Snippet;
+}, {}, "">;
+export default ModalHeader;

package/dist/components/Navbar/NavbarItem.svelte

@@ -12,7 +12,7 @@
 	let { href, title, active = false, ...iconProps }: Props = $props();
 
 	const styles = tv({
-		base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 pl-5 group-hover:sm:px-5 md:px-5',
+		base: 'flex w-full place-items-center gap-4 rounded-r-full py-3 pl-5 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5 md:px-5',
 		variants: {
 			active: {
 				true: 'bg-primary/10 text-primary',

package/dist/components/SupporterBadge/SupporterBadge.svelte

@@ -24,7 +24,7 @@
 	};
 
 	const containerStyles = tv({
-		base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg  transition-all',
+		base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg transition-all',
 		variants: {
 			size: {
 				tiny: 'px-2 py-1',
@@ -34,8 +34,8 @@
 				giant: 'px-3 py-2',
 			},
 			effect: {
-				hover: 'border border-dark/25 supporter-effect-hover',
-				always: 'shadow supporter-effect',
+				hover: 'supporter-effect-hover border border-dark/25',
+				always: 'supporter-effect shadow',
 			},
 		},
 	});

package/dist/components/Switch/Switch.svelte

@@ -43,7 +43,7 @@
 	});
 
 	const bar = tv({
-		base: 'w-12 h-3 my-2 rounded-full border border-transparent',
+		base: 'my-2 h-3 w-12 rounded-full border border-transparent',
 		variants: {
 			fillColor: {
 				default: 'bg-gray-400',
@@ -58,7 +58,7 @@
 	});
 
 	const dot = tv({
-		base: 'absolute transition-colors h-6 w-6 rounded-full transition-transform duration-[400ms]',
+		base: 'absolute h-6 w-6 rounded-full transition-transform duration-[400ms]',
 		variants: {
 			checked: {
 				true: 'translate-x-6',

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import IconButton from '../IconButton/IconButton.svelte';
+	import { theme } from '../../services/theme.svelte.js';
+	import { Theme, type Size, type Variants } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
+
+	type Props = {
+		size?: Size;
+		class?: string;
+		variant?: Variants;
+		onChange?: (theme: Theme) => void;
+	};
+
+	const { variant = 'ghost', size, class: className, onChange }: Props = $props();
+
+	const handleToggleTheme = () => {
+		theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
+		onChange?.(theme.value);
+	};
+
+	const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
+</script>
+
+<IconButton
+	shape="round"
+	color="primary"
+	{size}
+	{variant}
+	icon={themeIcon}
+	onclick={handleToggleTheme}
+	class={cleanClass(className)}
+/>

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Theme, type Size, type Variants } from '../../types.js';
+declare const ThemeSwitcher: import("svelte").Component<{
+    size?: Size;
+    class?: string;
+    variant?: Variants;
+    onChange?: (theme: Theme) => void;
+}, {}, "">;
+export default ThemeSwitcher;

package/dist/constants.d.ts

@@ -7,5 +7,9 @@ export declare enum ChildKey {
     Card = "card",
     CardHeader = "card-header",
     CardBody = "card-body",
-    CardFooter = "card-footer"
+    CardFooter = "card-footer",
+    Modal = "modal",
+    ModalHeader = "modal-header",
+    ModalBody = "modal-body",
+    ModalFooter = "modal-footer"
 }

package/dist/constants.js

@@ -9,4 +9,8 @@ export var ChildKey;
     ChildKey["CardHeader"] = "card-header";
     ChildKey["CardBody"] = "card-body";
     ChildKey["CardFooter"] = "card-footer";
+    ChildKey["Modal"] = "modal";
+    ChildKey["ModalHeader"] = "modal-header";
+    ChildKey["ModalBody"] = "modal-body";
+    ChildKey["ModalFooter"] = "modal-footer";
 })(ChildKey || (ChildKey = {}));

package/dist/index.d.ts

@@ -31,9 +31,13 @@ export { default as FormatBytes } from './components/FormatBytes/FormatBytes.sve
 export { default as Heading } from './components/Heading/Heading.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IconButton } from './components/IconButton/IconButton.svelte';
+export { default as Kbd } from './components/Kbd/Kbd.svelte';
 export { default as Link } from './components/Link/Link.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
+export { default as Modal } from './components/Modal/Modal.svelte';
+export { default as ModalBody } from './components/Modal/ModalBody.svelte';
+export { default as ModalFooter } from './components/Modal/ModalFooter.svelte';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.svelte';
 export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
 export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
@@ -45,6 +49,8 @@ export { default as VStack } from './components/Stack/VStack.svelte';
 export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
+export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
 export * from './services/theme.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
+export * from './services/translation.svelte.js';

package/dist/index.js

@@ -33,9 +33,13 @@ export { default as FormatBytes } from './components/FormatBytes/FormatBytes.sve
 export { default as Heading } from './components/Heading/Heading.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IconButton } from './components/IconButton/IconButton.svelte';
+export { default as Kbd } from './components/Kbd/Kbd.svelte';
 export { default as Link } from './components/Link/Link.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
+export { default as Modal } from './components/Modal/Modal.svelte';
+export { default as ModalBody } from './components/Modal/ModalBody.svelte';
+export { default as ModalFooter } from './components/Modal/ModalFooter.svelte';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.svelte';
 export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
 export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
@@ -47,7 +51,9 @@ export { default as VStack } from './components/Stack/VStack.svelte';
 export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
+export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
 // helpers
 export * from './services/theme.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
+export * from './services/translation.svelte.js';

package/dist/internal/Button.svelte

@@ -57,7 +57,7 @@
 			iconSize: {
 				tiny: 'h-4 w-4 text-xs',
 				small: 'h-6 w-6 text-sm',
-				medium: 'h-8 w-8 text-md',
+				medium: 'text-md h-8 w-8',
 				large: 'h-10 w-10 text-lg',
 				giant: 'h-12 w-12 text-lg',
 			},
@@ -77,12 +77,12 @@
 				info: 'bg-info text-light hover:bg-info/80',
 			},
 			outlineColor: {
-				primary: 'bg-primary/10 text-primary border border-primary hover:bg-primary/20',
-				secondary: 'bg-dark/10 text-dark border border-dark hover:bg-dark/20',
-				success: 'bg-success/10 text-success border border-success hover:bg-success/20',
-				danger: 'bg-danger/10 text-danger border border-danger hover:bg-danger/20',
-				warning: 'bg-warning/10 text-warning border border-warning hover:bg-warning/20',
-				info: 'bg-info/10 text-info border border-info hover:bg-info/20',
+				primary: 'border border-primary bg-primary/10 text-primary hover:bg-primary/20',
+				secondary: 'border border-dark bg-dark/10 text-dark hover:bg-dark/20',
+				success: 'border border-success bg-success/10 text-success hover:bg-success/20',
+				danger: 'border border-danger bg-danger/10 text-danger hover:bg-danger/20',
+				warning: 'border border-warning bg-warning/10 text-warning hover:bg-warning/20',
+				info: 'border border-info bg-info/10 text-info hover:bg-info/20',
 			},
 			ghostColor: {
 				primary: 'text-primary hover:bg-primary/10',

package/dist/internal/Child.svelte

@@ -1,20 +1,27 @@
 <script lang="ts">
 	import { ChildKey } from '../constants.js';
+	import type { ChildData } from '../types.js';
 	import { withPrefix } from '../utils.js';
 	import { getContext, type Snippet } from 'svelte';
 
-	type ContextType = { register: (key: ChildKey, snippet: Snippet) => void };
+	type ContextType = {
+		register: (key: ChildKey, data: () => ChildData) => void;
+	};
 	type Props = {
 		for: ChildKey;
 		as: ChildKey;
+		class?: string;
 		children: Snippet;
 	};
 
-	const { for: key, as, children }: Props = $props();
+	const { for: key, as, children, class: className }: Props = $props();
 
 	const context = getContext<ContextType>(withPrefix(key));
+
+	const data = $derived({ snippet: children, class: className });
+
 	if (context) {
-		context.register(as, children);
+		context.register(as, () => data);
 	} else {
 		console.log('Unable to find context for key:', key);
 	}

package/dist/internal/Child.svelte.d.ts

@@ -3,6 +3,7 @@ import { type Snippet } from 'svelte';
 declare const Child: import("svelte").Component<{
     for: ChildKey;
     as: ChildKey;
+    class?: string;
     children: Snippet;
 }, {}, "">;
 export default Child;

package/dist/services/translation.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { TranslationProps } from '../types.js';
+declare const defaultTranslations: {
+    close: string;
+    showPassword: string;
+    hidePassword: string;
+};
+export type Translations = typeof defaultTranslations;
+export declare const translate: <T extends keyof Translations>(key: T, overrides?: TranslationProps<T>) => string;
+export declare const t: <T extends keyof Translations>(key: T, overrides?: TranslationProps<T>) => string;
+export declare const setTranslations: (newTranslations: Partial<Translations>) => void;
+export {};

package/dist/services/translation.svelte.js

@@ -0,0 +1,11 @@
+const defaultTranslations = {
+    close: 'Close',
+    showPassword: 'Show password',
+    hidePassword: 'Hide password',
+};
+let translations = $state(defaultTranslations);
+export const translate = (key, overrides) => overrides?.[key] ?? translations[key];
+export const t = translate;
+export const setTranslations = (newTranslations) => {
+    translations = { ...defaultTranslations, ...newTranslations };
+};

package/dist/types.d.ts

@@ -1,9 +1,11 @@
+import type { Translations } from './services/translation.svelte.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 export type TextColor = Color | 'muted';
 export type HeadingColor = TextColor;
 export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
+export type ModalSize = Size | 'full';
 export type HeadingSize = Size | 'title';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
 export type Variants = 'filled' | 'outline' | 'ghost';
@@ -12,6 +14,9 @@ export declare enum Theme {
     Light = "light",
     Dark = "dark"
 }
+export type TranslationProps<T extends keyof Translations> = {
+    [K in T]?: string;
+};
 export type IconProps = {
     icon: string;
     title?: string;
@@ -46,6 +51,7 @@ export type CloseButtonProps = {
     size?: Size;
     variant?: Variants;
     class?: string;
+    translations?: TranslationProps<'close'>;
 } & ButtonOrAnchor;
 export type IconButtonProps = ButtonBase & {
     icon: string;
@@ -60,6 +66,10 @@ type StackBaseProps = {
     fullWidth?: boolean;
     fullHeight?: boolean;
 };
+export type ChildData = {
+    snippet: Snippet;
+    class?: string;
+};
 export type StackProps = StackBaseProps & {
     align?: 'start' | 'center' | 'end';
     direction?: 'row' | 'column';
@@ -86,8 +96,7 @@ export type InputProps = BaseInputProps & {
     trailingIcon?: Snippet;
 };
 export type PasswordInputProps = BaseInputProps & {
-    showLabel?: string;
-    hideLabel?: string;
+    translations?: TranslationProps<'showPassword' | 'hidePassword'>;
     isVisible?: boolean;
 };
 export type SelectItem = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.9.0",
+	"version": "0.11.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",
@@ -53,7 +53,7 @@
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.5",
-		"publint": "^0.2.0",
+		"publint": "^0.3.0",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"svelte-highlight": "^7.8.0",