@immich/ui 0.30.0 → 0.31.0

package/dist/components/Modal/ModalHeader.svelte

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

package/dist/components/MultiSelect/MultiSelect.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import InternalSelect from '../../internal/Select.svelte';
-	import type { MultiSelectProps, SelectItem } from '../../types.js';
+  import InternalSelect from '../../internal/Select.svelte';
+  import type { MultiSelectProps, SelectItem } from '../../types.js';
 
-	type T = SelectItem;
+  type T = SelectItem;
 
-	let { onChange, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
+  let { onChange, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
 
-	const handleChange = (items: T[]) => {
-		onChange?.(items);
-	};
+  const handleChange = (items: T[]) => {
+    onChange?.(items);
+  };
 </script>
 
 <InternalSelect multiple bind:values onChange={handleChange} {...restProps} />

package/dist/components/Navbar/NavbarGroup.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	type Props = {
-		title: string;
-	};
+  type Props = {
+    title: string;
+  };
 
-	let { title }: Props = $props();
+  let { title }: Props = $props();
 </script>
 
 <div class="text-sm transition-all duration-200 md:text-sm">
-	<p class="py-2 ps-4">{title}</p>
+  <p class="py-2 ps-4">{title}</p>
 </div>

package/dist/components/Navbar/NavbarItem.svelte

@@ -1,73 +1,71 @@
 <script lang="ts">
-	import { page } from '$app/state';
-	import Icon from '../Icon/Icon.svelte';
-	import Link from '../Link/Link.svelte';
-	import type { IconProps } from '../../types.js';
-	import { tv } from 'tailwind-variants';
+  import { page } from '$app/state';
+  import Icon from '../Icon/Icon.svelte';
+  import Link from '../Link/Link.svelte';
+  import type { IconProps } from '../../types.js';
+  import { tv } from 'tailwind-variants';
 
-	type Props = {
-		title: string;
-		href: string;
-		external?: boolean;
-		active?: boolean;
-		variant?: 'compact';
-		isActive?: () => boolean;
-		icon?: string | IconProps;
-		activeIcon?: string | IconProps;
-	};
+  type Props = {
+    title: string;
+    href: string;
+    external?: boolean;
+    active?: boolean;
+    variant?: 'compact';
+    isActive?: () => boolean;
+    icon?: string | IconProps;
+    activeIcon?: string | IconProps;
+  };
 
-	const startsWithHref = () => page.url.pathname.startsWith(href);
+  const startsWithHref = () => page.url.pathname.startsWith(href);
 
-	let {
-		href,
-		external,
-		isActive: isActiveOverride,
-		title,
-		variant,
-		active: activeOverride,
-		icon,
-		activeIcon,
-	}: Props = $props();
+  let {
+    href,
+    external,
+    isActive: isActiveOverride,
+    title,
+    variant,
+    active: activeOverride,
+    icon,
+    activeIcon,
+  }: Props = $props();
 
-	const isActive = isActiveOverride ?? startsWithHref;
-	let active = $derived(activeOverride ?? isActive());
+  const isActive = isActiveOverride ?? startsWithHref;
+  let active = $derived(activeOverride ?? isActive());
 
-	const iconProps = $derived(typeof icon === 'string' ? { icon } : icon);
-	const activeIconProps = $derived(
-		typeof activeIcon === 'string' ? { icon: activeIcon } : activeIcon,
-	);
+  const iconProps = $derived(typeof icon === 'string' ? { icon } : icon);
+  const activeIconProps = $derived(typeof activeIcon === 'string' ? { icon: activeIcon } : activeIcon);
 
-	const styles = tv({
-		base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-e-full px-5 transition-[padding] delay-100 duration-100 group-hover:sm:px-5',
-		variants: {
-			active: {
-				true: 'bg-primary/10 text-primary',
-				false: '',
-			},
-			variant: {
-				default: 'py-3 ps-5',
-				compact: 'py-2 ps-3',
-			},
-		},
-	});
+  const styles = tv({
+    base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-e-full px-5 transition-[padding] delay-100 duration-100 group-hover:sm:px-5',
+    variants: {
+      active: {
+        true: 'bg-primary/10 text-primary',
+        false: '',
+      },
+      variant: {
+        default: 'py-3 ps-5',
+        compact: 'py-2 ps-3',
+      },
+    },
+  });
 </script>
 
 <Link
-	{href}
-	{external}
-	aria-current={active ? 'page' : undefined}
-	underline={false}
-	class={styles({ active, variant: variant ?? 'default' })}
+  {href}
+  {external}
+  aria-current={active ? 'page' : undefined}
+  underline={false}
+  class={styles({ active, variant: variant ?? 'default' })}
 >
-	<div class="flex w-full place-items-center gap-4 truncate overflow-hidden">
-		{#if iconProps}
-			<Icon
-				size="1.375em"
-				class="shrink-0"
-				aria-hidden={true}
-				{...active && activeIconProps ? activeIconProps : iconProps}
-			/>
-		{/if}
-		<span class="text-sm font-medium">{title}</span>
-	</div>
+  <div class="flex w-full place-items-center gap-4 truncate overflow-hidden">
+    {#if iconProps}
+      <Icon
+        size="1.375em"
+        class="shrink-0"
+        aria-hidden={true}
+        {...active && activeIconProps ? activeIconProps : iconProps}
+      />
+    {/if}
+    <span class="text-sm font-medium">{title}</span>
+  </div>
 </Link>

package/dist/components/PasswordInput/PasswordInput.svelte

@@ -1,38 +1,36 @@
 <script lang="ts">
-	import IconButton from '../IconButton/IconButton.svelte';
-	import Input from '../Input/Input.svelte';
-	import { t } from '../../services/translation.svelte.js';
-	import type { PasswordInputProps } from '../../types.js';
-	import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
+  import IconButton from '../IconButton/IconButton.svelte';
+  import Input from '../Input/Input.svelte';
+  import { t } from '../../services/translation.svelte.js';
+  import type { PasswordInputProps } from '../../types.js';
+  import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
 
-	let {
-		value = $bindable<string>(),
-		translations,
-		isVisible = $bindable<boolean>(false),
-		color = 'secondary',
-		size,
-		...props
-	}: PasswordInputProps = $props();
+  let {
+    value = $bindable<string>(),
+    translations,
+    isVisible = $bindable<boolean>(false),
+    color = 'secondary',
+    size,
+    ...props
+  }: PasswordInputProps = $props();
 
-	let labelValue = $derived(
-		isVisible ? t('hide_password', translations) : t('show_password', translations),
-	);
+  let labelValue = $derived(isVisible ? t('hide_password', translations) : t('show_password', translations));
 </script>
 
 <Input bind:value {size} type={isVisible ? 'text' : 'password'} {color} {...props}>
-	{#snippet trailingIcon()}
-		{#if value?.length > 0}
-			<IconButton
-				variant="ghost"
-				shape="round"
-				color="secondary"
-				{size}
-				class="me-1"
-				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
-				onclick={() => (isVisible = !isVisible)}
-				title={labelValue}
-				aria-label={labelValue}
-			/>
-		{/if}
-	{/snippet}
+  {#snippet trailingIcon()}
+    {#if value?.length > 0}
+      <IconButton
+        variant="ghost"
+        shape="round"
+        color="secondary"
+        {size}
+        class="me-1"
+        icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
+        onclick={() => (isVisible = !isVisible)}
+        title={labelValue}
+        aria-label={labelValue}
+      />
+    {/if}
+  {/snippet}
 </Input>

package/dist/components/Scrollable/Scrollable.svelte

@@ -1,67 +1,67 @@
 <script lang="ts">
-	import { afterNavigate } from '$app/navigation';
-	import { cleanClass } from '../../utils.js';
-	import type { Snippet } from 'svelte';
+  import { afterNavigate } from '$app/navigation';
+  import { cleanClass } from '../../utils.js';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		class?: string;
-		children?: Snippet;
-		transition?: TransitionEvent;
-		ref?: HTMLDivElement;
-		resetOnNavigate?: boolean;
-	};
+  type Props = {
+    class?: string;
+    children?: Snippet;
+    transition?: TransitionEvent;
+    ref?: HTMLDivElement;
+    resetOnNavigate?: boolean;
+  };
 
-	let { resetOnNavigate = false, class: className, children, ref = $bindable() }: Props = $props();
+  let { resetOnNavigate = false, class: className, children, ref = $bindable() }: Props = $props();
 
-	afterNavigate(() => {
-		if (resetOnNavigate) {
-			ref?.scrollTo(0, 0);
-		}
-	});
+  afterNavigate(() => {
+    if (resetOnNavigate) {
+      ref?.scrollTo(0, 0);
+    }
+  });
 </script>
 
 <div bind:this={ref} class={cleanClass('immich-scrollbar h-full w-full overflow-auto', className)}>
-	{@render children?.()}
+  {@render children?.()}
 </div>
 
 <style>
-	/* width */
-	.immich-scrollbar::-webkit-scrollbar {
-		width: 8px;
-		height: 8px;
-		visibility: hidden;
-	}
-	/* Track */
-	.immich-scrollbar::-webkit-scrollbar-track {
-		background: #f1f1f1;
-		border-radius: 16px;
-		visibility: hidden;
-	}
+  /* width */
+  .immich-scrollbar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    visibility: hidden;
+  }
+  /* Track */
+  .immich-scrollbar::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 16px;
+    visibility: hidden;
+  }
 
-	/* Handle */
-	.immich-scrollbar::-webkit-scrollbar-thumb {
-		background: rgba(85, 86, 87, 0.408);
-		border-radius: 16px;
-		visibility: hidden;
-	}
+  /* Handle */
+  .immich-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(85, 86, 87, 0.408);
+    border-radius: 16px;
+    visibility: hidden;
+  }
 
-	/* Handle on hover */
-	.immich-scrollbar::-webkit-scrollbar-thumb:hover {
-		background: #4250afad;
-		border-radius: 16px;
-	}
+  /* Handle on hover */
+  .immich-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #4250afad;
+    border-radius: 16px;
+  }
 
-	/*
+  /*
 		* Show scrollbar elements when hovering or actively scrolling
 		* Applies to the main scrollbar, track, and thumb components
 		* Changes visibility from hidden to visible on user interaction
 	*/
-	.immich-scrollbar:hover::-webkit-scrollbar,
-	.immich-scrollbar:active::-webkit-scrollbar,
-	.immich-scrollbar:hover::-webkit-scrollbar-track,
-	.immich-scrollbar:active::-webkit-scrollbar-track,
-	.immich-scrollbar:hover::-webkit-scrollbar-thumb,
-	.immich-scrollbar:active::-webkit-scrollbar-thumb {
-		visibility: visible;
-	}
+  .immich-scrollbar:hover::-webkit-scrollbar,
+  .immich-scrollbar:active::-webkit-scrollbar,
+  .immich-scrollbar:hover::-webkit-scrollbar-track,
+  .immich-scrollbar:active::-webkit-scrollbar-track,
+  .immich-scrollbar:hover::-webkit-scrollbar-thumb,
+  .immich-scrollbar:active::-webkit-scrollbar-thumb {
+    visibility: visible;
+  }
 </style>

package/dist/components/Select/Select.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import InternalSelect from '../../internal/Select.svelte';
-	import type { SelectItem, SelectProps } from '../../types.js';
+  import InternalSelect from '../../internal/Select.svelte';
+  import type { SelectItem, SelectProps } from '../../types.js';
 
-	type T = SelectItem;
+  type T = SelectItem;
 
-	let { onChange, value = $bindable(), ...restProps }: SelectProps<T> = $props();
+  let { onChange, value = $bindable(), ...restProps }: SelectProps<T> = $props();
 
-	let values = $derived(value ? [value] : []);
+  let values = $derived(value ? [value] : []);
 
-	const handleChange = (items: T[]) => {
-		value = items[0];
-		onChange?.(value);
-	};
+  const handleChange = (items: T[]) => {
+    value = items[0];
+    onChange?.(value);
+  };
 </script>
 
 <InternalSelect bind:values onChange={handleChange} {...restProps} />

package/dist/components/Stack/HStack.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import Stack from './Stack.svelte';
-	import type { HStackProps } from '../../types.js';
+  import Stack from './Stack.svelte';
+  import type { HStackProps } from '../../types.js';
 
-	const { class: className, children, ...props }: HStackProps = $props();
+  const { class: className, children, ...props }: HStackProps = $props();
 </script>
 
 <Stack direction="row" align="center" class={className} {...props}>
-	{@render children()}
+  {@render children()}
 </Stack>

package/dist/components/Stack/Stack.svelte

@@ -1,70 +1,70 @@
 <script lang="ts">
-	import type { StackProps } from '../../types.js';
-	import { cleanClass } from '../../utils.js';
-	import { tv } from 'tailwind-variants';
+  import type { StackProps } from '../../types.js';
+  import { cleanClass } from '../../utils.js';
+  import { tv } from 'tailwind-variants';
 
-	const {
-		align,
-		direction = 'column',
-		wrap = false,
-		class: className,
-		fullWidth,
-		fullHeight,
-		gap = 2,
-		children,
-	}: StackProps = $props();
+  const {
+    align,
+    direction = 'column',
+    wrap = false,
+    class: className,
+    fullWidth,
+    fullHeight,
+    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: '',
-			},
-		},
-	});
+  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,
-			fullHeight,
-			fullWidth,
-		}),
-		className,
-	)}
+  class={cleanClass(
+    styles({
+      align,
+      direction,
+      gap,
+      wrap,
+      fullHeight,
+      fullWidth,
+    }),
+    className,
+  )}
 >
-	{@render children()}
+  {@render children()}
 </div>

package/dist/components/Stack/VStack.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import Stack from './Stack.svelte';
-	import type { VStackProps } from '../../types.js';
+  import Stack from './Stack.svelte';
+  import type { VStackProps } from '../../types.js';
 
-	const { class: className, children, ...props }: VStackProps = $props();
+  const { class: className, children, ...props }: VStackProps = $props();
 </script>
 
 <Stack direction="column" align="center" class={className} {...props}>
-	{@render children()}
+  {@render children()}
 </Stack>