@immich/ui 0.24.5 → 0.25.0

package/dist/components/Button/Button.svelte

@@ -2,7 +2,7 @@
 	import Button from '../../internal/Button.svelte';
 	import type { ButtonProps } from '../../types.js';
 
-	const props: ButtonProps = $props();
+	let { ref = $bindable(null), ...props }: ButtonProps = $props();
 </script>
 
-<Button {...props} />
+<Button bind:ref {...props} />

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

@@ -1,5 +1,5 @@
 import Button from '../../internal/Button.svelte';
 import type { ButtonProps } from '../../types.js';
-declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/Card/Card.svelte

@@ -12,6 +12,7 @@
 	import { tv } from 'tailwind-variants';
 
 	type Props = HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLElement | null;
 		color?: Color;
 		shape?: 'round' | 'rectangle';
 		expanded?: boolean;
@@ -20,6 +21,7 @@
 	};
 
 	let {
+		ref = $bindable(null),
 		color,
 		class: className,
 		shape = 'round',
@@ -125,7 +127,11 @@
 	{/if}
 {/snippet}
 
-<div class={cleanClass(containerStyles({ shape, border: !color }), className)} {...restProps}>
+<div
+	bind:this={ref}
+	class={cleanClass(containerStyles({ shape, border: !color }), className)}
+	{...restProps}
+>
 	<div class={cleanClass(cardStyles({ color }))}>
 		{#if headerChild}
 			{@render header()}

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

@@ -2,12 +2,13 @@ import type { Color } from '../../types.js';
 import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLElement | null;
     color?: Color;
     shape?: 'round' | 'rectangle';
     expanded?: boolean;
     expandable?: boolean;
     children: Snippet;
 };
-declare const Card: import("svelte").Component<Props, {}, "expanded">;
+declare const Card: import("svelte").Component<Props, {}, "ref" | "expanded">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/Modal/Modal.svelte

@@ -16,21 +16,25 @@
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
-		title: string;
+		title?: string;
+		icon?: string | boolean;
 		size?: ModalSize;
 		class?: string;
-		icon?: string | boolean;
 		expandable?: boolean;
+		closeOnEsc?: boolean;
+		closeOnBackdropClick?: boolean;
 		children: Snippet;
 		onClose?: () => void;
 	};
 
 	let {
-		title,
 		size = 'medium',
-		icon = true,
 		onClose,
+		icon = true,
+		title,
 		class: className,
+		closeOnEsc = true,
+		closeOnBackdropClick = false,
 		children,
 	}: Props = $props();
 
@@ -49,6 +53,7 @@
 	});
 
 	const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Modal);
+	const headerChildren = $derived(getChildSnippet(ChildKey.ModalHeader));
 	const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
 	const footerChildren = $derived(getChildSnippet(ChildKey.ModalFooter));
 
@@ -59,6 +64,16 @@
 
 		onClose?.();
 	};
+
+	let cardRef = $state<HTMLElement | null>(null);
+
+	const handleCloseOnClick = (event: Event) => {
+		if (!closeOnBackdropClick || cardRef?.contains(event.target as Node)) {
+			return;
+		}
+
+		onClose?.();
+	};
 </script>
 
 <Dialog.Root open={true}>
@@ -69,25 +84,34 @@
 				if (e.key === 'Escape') {
 					e.stopPropagation();
 					e.preventDefault();
-					handleClose();
+					if (closeOnEsc) {
+						handleClose();
+					}
 				}
 			}}
+			onclick={handleCloseOnClick}
 			class={cleanClass(
 				'fixed start-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)}>
+				<Card bind:ref={cardRef} class={cleanClass(modalStyles({ size }), className)}>
 					<CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
-						<div class="flex items-center justify-between gap-2">
-							{#if typeof icon === 'string'}
-								<Icon {icon} size="1.5rem" aria-hidden />
-							{:else if icon}
-								<Logo variant="icon" size="tiny" />
-							{/if}
-							<CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
-							<CloseButton class="-me-2" onclick={() => handleClose()} />
-						</div>
+						{#if headerChildren}
+							{@render headerChildren.snippet()}
+						{:else if title}
+							<div class="flex items-center justify-between gap-2">
+								{#if typeof icon === 'string'}
+									<Icon {icon} size="1.5rem" aria-hidden />
+								{:else if icon}
+									<Logo variant="icon" size="tiny" />
+								{/if}
+								<CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold"
+									>{title}</CardTitle
+								>
+								<CloseButton class="-me-2" onclick={() => handleClose()} />
+							</div>
+						{/if}
 					</CardHeader>
 
 					<CardBody class="grow px-5">

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

@@ -1,11 +1,13 @@
 import type { ModalSize } from '../../types.js';
 import { type Snippet } from 'svelte';
 type Props = {
-    title: string;
+    title?: string;
+    icon?: string | boolean;
     size?: ModalSize;
     class?: string;
-    icon?: string | boolean;
     expandable?: boolean;
+    closeOnEsc?: boolean;
+    closeOnBackdropClick?: boolean;
     children: Snippet;
     onClose?: () => void;
 };

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import IconButton from '../IconButton/IconButton.svelte';
-	import { onThemeChange, theme } from '../../services/theme.svelte.js';
+	import { theme, toggleTheme } from '../../services/theme.svelte.js';
 	import { t } from '../../services/translation.svelte.js';
 	import {
 		Theme,
@@ -31,9 +31,8 @@
 	}: Props = $props();
 
 	const handleToggleTheme = () => {
-		theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
+		toggleTheme();
 		onChange?.(theme.value);
-		onThemeChange();
 	};
 
 	const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);

package/dist/index.d.ts

@@ -39,6 +39,7 @@ 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 ModalHeader } from './components/Modal/ModalHeader.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';

package/dist/index.js

@@ -41,6 +41,7 @@ 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 ModalHeader } from './components/Modal/ModalHeader.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';

package/dist/internal/Button.svelte

@@ -13,7 +13,8 @@
 		icon?: boolean;
 	};
 
-	const {
+	let {
+		ref = $bindable(null),
 		type = 'button',
 		href,
 		variant = 'filled',
@@ -152,7 +153,13 @@
 {/snippet}
 
 {#if href}
-	<a {href} class={classList} aria-disabled={disabled} {...restProps as HTMLAnchorAttributes}>
+	<a
+		bind:this={ref}
+		{href}
+		class={classList}
+		aria-disabled={disabled}
+		{...restProps as HTMLAnchorAttributes}
+	>
 		{#if loading}
 			<div class="flex items-center justify-center gap-2">
 				<LoadingSpinner {color} size={spinnerSizes[size]} />
@@ -164,6 +171,7 @@
 	</a>
 {:else}
 	<ButtonPrimitive.Root
+		bind:ref
 		class={classList}
 		type={type as HTMLButtonAttributes['type']}
 		{...restProps as HTMLButtonAttributes}

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

@@ -3,6 +3,6 @@ type InternalButtonProps = ButtonProps & {
     /** when true, button width to height ratio is 1:1 */
     icon?: boolean;
 };
-declare const Button: import("svelte").Component<InternalButtonProps, {}, "">;
+declare const Button: import("svelte").Component<InternalButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

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

@@ -14,5 +14,6 @@ type ThemePreference = {
 };
 export declare const theme: ThemePreference;
 export declare const onThemeChange: () => void;
+export declare const toggleTheme: () => void;
 export declare const initializeTheme: (options?: ThemeOptions) => void;
 export {};

package/dist/services/theme.svelte.js

@@ -56,6 +56,10 @@ const syncToDom = () => {
         }
     }
 };
+export const toggleTheme = () => {
+    theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
+    onThemeChange();
+};
 export const initializeTheme = (options) => {
     if (options) {
         setThemeOptions(options);

package/dist/types.d.ts

@@ -49,6 +49,7 @@ type ButtonBase = {
     shape?: Shape;
 };
 export type ButtonProps = ButtonBase & {
+    ref?: HTMLElement | null;
     fullWidth?: boolean;
     loading?: boolean;
     leadingIcon?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.24.5",
+	"version": "0.25.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",