@immich/ui 0.29.0 → 0.30.1

package/README.md

@@ -14,26 +14,18 @@ Import components from `@immich/ui`. For example:
 
 ```html
 <script lang="ts">
-	import {
-		Card,
-		CardBody,
-		CardHeader,
-		CardTitle,
-		CardDescription,
-		Heading,
-		Text,
-	} from '@immich/ui';
+  import { Card, CardBody, CardHeader, CardTitle, CardDescription, Heading, Text } from '@immich/ui';
 </script>
 
 <Card>
-	<CardHeader>
-		<CardTitle>@immich/ui</CardTitle>
-		<CardDescription>A component library</CardDescription>
-	</CardHeader>
-	<CardBody>
-		<Lorem />
-	</CardBody>
-	<CardFooter>Privacy should not be a luxury</CardFooter>
+  <CardHeader>
+    <CardTitle>@immich/ui</CardTitle>
+    <CardDescription>A component library</CardDescription>
+  </CardHeader>
+  <CardBody>
+    <Lorem />
+  </CardBody>
+  <CardFooter>Privacy should not be a luxury</CardFooter>
 </Card>
 ```
 

package/dist/actions/shortcut.js

@@ -47,7 +47,7 @@ export const shortcut = (node, option) => {
 export const shortcuts = (node, options) => {
     function onKeydown(event) {
         const ignoreShortcut = shouldIgnoreEvent(event);
-        for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true, } of options) {
+        for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) {
             if (ignoreInputFields && ignoreShortcut) {
                 continue;
             }

package/dist/components/Alert/Alert.svelte

@@ -1,110 +1,108 @@
 <script lang="ts">
-	import Card from '../Card/Card.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 type { Color, Size } from '../../types.js';
-	import { cleanClass } from '../../utils.js';
-	import {
-		mdiAlertOutline,
-		mdiCheckCircleOutline,
-		mdiCloseCircleOutline,
-		mdiInformationVariantCircleOutline,
-	} from '@mdi/js';
-	import type { Snippet } from 'svelte';
+  import Card from '../Card/Card.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 type { Color, Size } from '../../types.js';
+  import { cleanClass } from '../../utils.js';
+  import {
+    mdiAlertOutline,
+    mdiCheckCircleOutline,
+    mdiCloseCircleOutline,
+    mdiInformationVariantCircleOutline,
+  } from '@mdi/js';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		color?: Color;
-		size?: Size;
-		icon?: string | false;
-		title?: string;
-		class?: string;
-		duration?: number;
-		closable?: boolean;
-		controlled?: boolean;
-		onClose?: () => void;
-		children?: Snippet;
-	};
+  type Props = {
+    color?: Color;
+    size?: Size;
+    icon?: string | false;
+    title?: string;
+    class?: string;
+    duration?: number;
+    closable?: boolean;
+    controlled?: boolean;
+    onClose?: () => void;
+    children?: Snippet;
+  };
 
-	const {
-		color = 'primary',
-		icon: iconOverride,
-		size = 'large',
-		title,
-		class: className,
-		duration,
-		controlled,
-		closable,
-		onClose,
-		children,
-	}: Props = $props();
+  const {
+    color = 'primary',
+    icon: iconOverride,
+    size = 'large',
+    title,
+    class: className,
+    duration,
+    controlled,
+    closable,
+    onClose,
+    children,
+  }: Props = $props();
 
-	let open = $state(true);
+  let open = $state(true);
 
-	const iconSizes: Record<Size, string> = {
-		tiny: '1em',
-		small: '1.25em',
-		medium: '1.5em',
-		large: '1.75em',
-		giant: '1.85em',
-	};
+  const iconSizes: Record<Size, string> = {
+    tiny: '1em',
+    small: '1.25em',
+    medium: '1.5em',
+    large: '1.75em',
+    giant: '1.85em',
+  };
 
-	const handleClose = () => {
-		if (!open) {
-			return;
-		}
+  const handleClose = () => {
+    if (!open) {
+      return;
+    }
 
-		if (!controlled) {
-			open = false;
-		}
+    if (!controlled) {
+      open = false;
+    }
 
-		onClose?.();
-	};
+    onClose?.();
+  };
 
-	if (duration) {
-		setTimeout(handleClose, duration);
-	}
+  if (duration) {
+    setTimeout(handleClose, duration);
+  }
 
-	const icons: Partial<Record<Color, string>> = {
-		success: mdiCheckCircleOutline,
-		warning: mdiAlertOutline,
-		danger: mdiCloseCircleOutline,
-	};
+  const icons: Partial<Record<Color, string>> = {
+    success: mdiCheckCircleOutline,
+    warning: mdiAlertOutline,
+    danger: mdiCloseCircleOutline,
+  };
 
-	const icon = $derived(
-		iconOverride === false
-			? undefined
-			: iconOverride || (icons[color] ?? mdiInformationVariantCircleOutline),
-	);
+  const icon = $derived(
+    iconOverride === false ? undefined : iconOverride || (icons[color] ?? mdiInformationVariantCircleOutline),
+  );
 </script>
 
 {#if open}
-	<Card {color} class={cleanClass(className)}>
-		<CardBody>
-			<div class="flex items-center justify-between">
-				<div class={cleanClass('flex gap-2')}>
-					{#if icon}
-						<div>
-							<Icon {icon} size={iconSizes[size]} />
-						</div>
-					{/if}
+  <Card {color} class={cleanClass(className)}>
+    <CardBody>
+      <div class="flex items-center justify-between">
+        <div class={cleanClass('flex gap-2')}>
+          {#if icon}
+            <div>
+              <Icon {icon} size={iconSizes[size]} />
+            </div>
+          {/if}
 
-					<div class="flex flex-col gap-2 self-center">
-						{#if title}
-							<Text {size} fontWeight={children ? 'bold' : undefined}>{title}</Text>
-						{/if}
-						{#if children}
-							{@render children()}
-						{/if}
-					</div>
-				</div>
-				{#if closable || onClose}
-					<div>
-						<CloseButton onclick={handleClose} />
-					</div>
-				{/if}
-			</div>
-		</CardBody>
-	</Card>
+          <div class="flex flex-col gap-2 self-center">
+            {#if title}
+              <Text {size} fontWeight={children ? 'bold' : undefined}>{title}</Text>
+            {/if}
+            {#if children}
+              {@render children()}
+            {/if}
+          </div>
+        </div>
+        {#if closable || onClose}
+          <div>
+            <CloseButton onclick={handleClose} />
+          </div>
+        {/if}
+      </div>
+    </CardBody>
+  </Card>
 {/if}

package/dist/components/AppShell/AppShell.svelte

@@ -1,34 +1,34 @@
 <script lang="ts">
-	import { withChildrenSnippets } from '../../common/use-child.svelte.js';
-	import Scrollable from '../Scrollable/Scrollable.svelte';
-	import { ChildKey } from '../../constants.js';
-	import { cleanClass } from '../../utils.js';
-	import type { Snippet } from 'svelte';
+  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import Scrollable from '../Scrollable/Scrollable.svelte';
+  import { ChildKey } from '../../constants.js';
+  import { cleanClass } from '../../utils.js';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		class?: string;
-		children?: Snippet;
-	};
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  };
 
-	const { class: className, children }: Props = $props();
+  const { class: className, children }: Props = $props();
 
-	const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.AppShell);
-	const header = $derived(getChildSnippet(ChildKey.AppShellHeader));
-	const sidebar = $derived(getChildSnippet(ChildKey.AppShellSidebar));
+  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.AppShell);
+  const header = $derived(getChildSnippet(ChildKey.AppShellHeader));
+  const sidebar = $derived(getChildSnippet(ChildKey.AppShellSidebar));
 </script>
 
 <div class={cleanClass('flex h-dvh flex-col overflow-hidden', className)}>
-	{#if header}
-		<header class="border-b">
-			{@render header?.snippet()}
-		</header>
-	{/if}
-	<div class="flex w-full grow overflow-y-auto">
-		{#if sidebar}
-			{@render sidebar?.snippet()}
-		{/if}
-		<Scrollable class="grow" resetOnNavigate>
-			{@render children?.()}
-		</Scrollable>
-	</div>
+  {#if header}
+    <header class="border-b">
+      {@render header?.snippet()}
+    </header>
+  {/if}
+  <div class="relative flex w-full grow overflow-y-auto">
+    {#if sidebar}
+      {@render sidebar?.snippet()}
+    {/if}
+    <Scrollable class="grow" resetOnNavigate>
+      {@render children?.()}
+    </Scrollable>
+  </div>
 </div>

package/dist/components/AppShell/AppShellHeader.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.AppShell} as={ChildKey.AppShellHeader}>
-	{@render children?.()}
+  {@render children?.()}
 </Child>

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
-	import Scrollable from '../Scrollable/Scrollable.svelte';
-	import { ChildKey } from '../../constants.js';
-	import Child from '../../internal/Child.svelte';
-	import { cleanClass } from '../../utils.js';
-	import { type Snippet } from 'svelte';
+  import Scrollable from '../Scrollable/Scrollable.svelte';
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import { cleanClass } from '../../utils.js';
+  import { type Snippet } from 'svelte';
 
-	type Props = {
-		class?: string;
-		children: Snippet;
-		open?: boolean;
-	};
+  type Props = {
+    class?: string;
+    children: Snippet;
+    open?: boolean;
+  };
 
-	let { class: className, children, open = $bindable(true) }: Props = $props();
+  let { class: className, children, open = $bindable(true) }: Props = $props();
 </script>
 
 <Child for={ChildKey.AppShell} as={ChildKey.AppShellSidebar}>
-	<Scrollable
-		class={cleanClass(
-			'bg-light text-dark relative shrink-0 transition-all duration-200',
-			open ? 'w-[min(100vw,16rem)]' : 'w-[0px]',
-			className,
-		)}
-	>
-		{@render children?.()}
-	</Scrollable>
+  <Scrollable
+    class={cleanClass(
+      'bg-light text-dark absolute shrink-0 border-e shadow-lg transition-all duration-200 md:relative',
+      open ? 'w-[min(100vw,16rem)]' : 'w-[0px]',
+      className,
+    )}
+  >
+    {@render children?.()}
+  </Scrollable>
 </Child>

package/dist/components/AppShell/PageLayout.svelte

@@ -1,44 +1,38 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		title?: string | undefined;
-		description?: string | undefined;
-		scrollbar?: boolean;
-		buttons?: Snippet;
-		children?: Snippet;
-	}
+  interface Props {
+    title?: string | undefined;
+    description?: string | undefined;
+    scrollbar?: boolean;
+    buttons?: Snippet;
+    children?: Snippet;
+  }
 
-	let {
-		title = undefined,
-		description = undefined,
-		scrollbar = true,
-		buttons,
-		children,
-	}: Props = $props();
+  let { title = undefined, description = undefined, scrollbar = true, buttons, children }: Props = $props();
 
-	let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden');
-	let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full');
+  let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden');
+  let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full');
 </script>
 
 <section class="relative">
-	{#if title || buttons}
-		<div
-			class="dark:border-immich-neutral dark:text-immich-dark-fg absolute flex h-16 w-full place-items-center justify-between border-b p-4"
-		>
-			<div class="flex items-center gap-2">
-				{#if title}
-					<div class="font-medium" tabindex="-1">{title}</div>
-				{/if}
-				{#if description}
-					<p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>
-				{/if}
-			</div>
-			{@render buttons?.()}
-		</div>
-	{/if}
+  {#if title || buttons}
+    <div
+      class="dark:border-immich-neutral dark:text-immich-dark-fg absolute flex h-16 w-full place-items-center justify-between border-b p-4"
+    >
+      <div class="flex items-center gap-2">
+        {#if title}
+          <div class="font-medium" tabindex="-1">{title}</div>
+        {/if}
+        {#if description}
+          <p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>
+        {/if}
+      </div>
+      {@render buttons?.()}
+    </div>
+  {/if}
 
-	<div class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto">
-		{@render children?.()}
-	</div>
+  <div class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto">
+    {@render children?.()}
+  </div>
 </section>

package/dist/components/Avatar/Avatar.svelte

@@ -1,66 +1,56 @@
 <script lang="ts">
-	import type { Size } from '../../types.js';
-	import { tv } from 'tailwind-variants';
+  import type { Size } from '../../types.js';
+  import { tv } from 'tailwind-variants';
 
-	type Props = {
-		size?: Size;
-		color?:
-			| 'primary'
-			| 'pink'
-			| 'red'
-			| 'yellow'
-			| 'blue'
-			| 'green'
-			| 'purple'
-			| 'orange'
-			| 'gray'
-			| 'amber';
-		name: string;
-	};
+  type Props = {
+    size?: Size;
+    color?: 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green' | 'purple' | 'orange' | 'gray' | 'amber';
+    name: string;
+  };
 
-	const { color = 'primary', size = 'medium', name }: Props = $props();
+  const { color = 'primary', size = 'medium', name }: Props = $props();
 
-	const styles = tv({
-		base: 'flex h-full w-full items-center justify-center font-medium select-none',
-		variants: {
-			size: {
-				tiny: 'h-5 w-5 text-xs',
-				small: 'h-7 w-7 text-sm',
-				medium: 'h-10 w-10 text-base',
-				large: 'h-12 w-12 text-lg',
-				giant: 'h-16 w-16 text-xl',
-			},
-			color: {
-				primary: 'bg-primary text-light',
-				pink: 'text-light bg-pink-400',
-				red: 'text-light bg-red-500',
-				yellow: 'text-light bg-yellow-500',
-				purple: 'text-dark bg-purple-600',
-				orange: 'text-light bg-orange-600',
-				gray: 'text-dark bg-gray-600',
-				amber: 'text-light bg-amber-600',
-				blue: 'text-dark bg-blue-500',
-				green: 'text-dark bg-green-600',
-			},
-		},
-	});
+  const styles = tv({
+    base: 'flex h-full w-full items-center justify-center font-medium select-none',
+    variants: {
+      size: {
+        tiny: 'h-5 w-5 text-xs',
+        small: 'h-7 w-7 text-sm',
+        medium: 'h-10 w-10 text-base',
+        large: 'h-12 w-12 text-lg',
+        giant: 'h-16 w-16 text-xl',
+      },
+      color: {
+        primary: 'bg-primary text-light',
+        pink: 'text-light bg-pink-400',
+        red: 'text-light bg-red-500',
+        yellow: 'text-light bg-yellow-500',
+        purple: 'text-dark bg-purple-600',
+        orange: 'text-light bg-orange-600',
+        gray: 'text-dark bg-gray-600',
+        amber: 'text-light bg-amber-600',
+        blue: 'text-dark bg-blue-500',
+        green: 'text-dark bg-green-600',
+      },
+    },
+  });
 
-	const wrapper = tv({
-		base: 'overflow-hidden rounded-full shadow-md',
-	});
+  const wrapper = tv({
+    base: 'overflow-hidden rounded-full shadow-md',
+  });
 
-	const getInitials = (name: string) => {
-		return name
-			.split(' ')
-			.map((part) => part.at(0))
-			.join('')
-			.substr(0, 2)
-			.toUpperCase();
-	};
+  const getInitials = (name: string) => {
+    return name
+      .split(' ')
+      .map((part) => part.at(0))
+      .join('')
+      .substr(0, 2)
+      .toUpperCase();
+  };
 
-	const initials = $derived(getInitials(name));
+  const initials = $derived(getInitials(name));
 </script>
 
 <figure class={wrapper()}>
-	<span class={styles({ size, color })}>{initials}</span>
+  <span class={styles({ size, color })}>{initials}</span>
 </figure>

package/dist/components/Button/Button.svelte

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