@immich/ui 0.30.0 → 0.30.1

package/dist/internal/Select.svelte

@@ -1,163 +1,156 @@
 <script lang="ts">
-	import { getFieldContext } from '../common/context.svelte.js';
-	import Field from '../components/Field/Field.svelte';
-	import Icon from '../components/Icon/Icon.svelte';
-	import IconButton from '../components/IconButton/IconButton.svelte';
-	import Input from '../components/Input/Input.svelte';
-	import Label from '../components/Label/Label.svelte';
-	import type { SelectCommonProps, SelectItem } from '../types.js';
-	import { cleanClass, generateId } from '../utils.js';
-	import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiUnfoldMoreHorizontal } from '@mdi/js';
-	import { Select } from 'bits-ui';
-
-	type T = SelectItem;
-
-	type Props = {
-		multiple?: boolean;
-		values: T[];
-		asLabel?: (items: T[]) => string;
-		onChange?: (values: T[]) => void;
-	} & SelectCommonProps<T>;
-
-	let {
-		data,
-		shape,
-		size = 'medium',
-		multiple = false,
-		values = $bindable([]),
-		onChange,
-		asLabel = (options: T[]) => options.map(({ label }) => label).join(', '),
-		placeholder,
-		class: className,
-	}: Props = $props();
-
-	const asOptions = (items: string[] | T[]) => {
-		return items.map((item) => {
-			if (typeof item === 'string') {
-				return { value: item, label: item } as T;
-			}
-
-			const label = item.label ?? item.value;
-			return { ...item, label };
-		});
-	};
-
-	const options = $derived(asOptions(data));
-
-	const { readOnly, required, invalid, disabled, label, ...labelProps } =
-		$derived(getFieldContext());
-
-	const id = generateId();
-	const inputId = `input-${id}`;
-	const labelId = `label-${id}`;
-
-	const selectedLabel = $derived(asLabel(values));
-
-	let inputRef = $state<HTMLElement | null>(null);
-	let contentRef = $state<HTMLElement | null>(null);
-	let ref = $state<HTMLElement | null>(null);
-
-	$effect(() => {
-		if (ref && contentRef) {
-			contentRef.style.width = `${ref.clientWidth}px`;
-		}
-	});
-
-	const findOption = (value: string) => options.find((option) => option.value === value);
-
-	const onValueChange = (items: string[] | string) => {
-		values = multiple
-			? ((items as string[]).map(findOption) as T[])
-			: [findOption(items as string) as T].filter(Boolean);
-
-		onChange?.(values);
-	};
-
-	let internalValue = $derived(
-		multiple ? values.map(({ value }) => value) : (values[0]?.value ?? ''),
-	);
+  import { getFieldContext } from '../common/context.svelte.js';
+  import Field from '../components/Field/Field.svelte';
+  import Icon from '../components/Icon/Icon.svelte';
+  import IconButton from '../components/IconButton/IconButton.svelte';
+  import Input from '../components/Input/Input.svelte';
+  import Label from '../components/Label/Label.svelte';
+  import type { SelectCommonProps, SelectItem } from '../types.js';
+  import { cleanClass, generateId } from '../utils.js';
+  import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiUnfoldMoreHorizontal } from '@mdi/js';
+  import { Select } from 'bits-ui';
+
+  type T = SelectItem;
+
+  type Props = {
+    multiple?: boolean;
+    values: T[];
+    asLabel?: (items: T[]) => string;
+    onChange?: (values: T[]) => void;
+  } & SelectCommonProps<T>;
+
+  let {
+    data,
+    shape,
+    size = 'medium',
+    multiple = false,
+    values = $bindable([]),
+    onChange,
+    asLabel = (options: T[]) => options.map(({ label }) => label).join(', '),
+    placeholder,
+    class: className,
+  }: Props = $props();
+
+  const asOptions = (items: string[] | T[]) => {
+    return items.map((item) => {
+      if (typeof item === 'string') {
+        return { value: item, label: item } as T;
+      }
+
+      const label = item.label ?? item.value;
+      return { ...item, label };
+    });
+  };
+
+  const options = $derived(asOptions(data));
+
+  const { readOnly, required, invalid, disabled, label, ...labelProps } = $derived(getFieldContext());
+
+  const id = generateId();
+  const inputId = `input-${id}`;
+  const labelId = `label-${id}`;
+
+  const selectedLabel = $derived(asLabel(values));
+
+  let inputRef = $state<HTMLElement | null>(null);
+  let contentRef = $state<HTMLElement | null>(null);
+  let ref = $state<HTMLElement | null>(null);
+
+  $effect(() => {
+    if (ref && contentRef) {
+      contentRef.style.width = `${ref.clientWidth}px`;
+    }
+  });
+
+  const findOption = (value: string) => options.find((option) => option.value === value);
+
+  const onValueChange = (items: string[] | string) => {
+    values = multiple
+      ? ((items as string[]).map(findOption) as T[])
+      : [findOption(items as string) as T].filter(Boolean);
+
+    onChange?.(values);
+  };
+
+  let internalValue = $derived(multiple ? values.map(({ value }) => value) : (values[0]?.value ?? ''));
 </script>
 
 <div class={cleanClass('flex flex-col gap-1', className)} bind:this={ref}>
-	{#if label}
-		<Label id={labelId} for={inputId} {label} {...labelProps} />
-	{/if}
-
-	<Select.Root
-		type={multiple ? 'multiple' : 'single'}
-		bind:value={internalValue as never}
-		{onValueChange}
-	>
-		<Select.Trigger
-			{disabled}
-			class="w-full items-center gap-1 rounded-lg focus-visible:outline-none"
-			aria-label={placeholder}
-		>
-			<Field {readOnly} {required} {disabled} {invalid}>
-				<Input
-					bind:containerRef={inputRef}
-					id={inputId}
-					{size}
-					{shape}
-					{placeholder}
-					value={selectedLabel}
-					readonly
-					aria-labelledby={labelId}
-					aria-readonly
-				>
-					{#snippet trailingIcon()}
-						<IconButton
-							variant="ghost"
-							shape="round"
-							color="secondary"
-							class="m-1"
-							icon={mdiUnfoldMoreHorizontal}
-							{disabled}
-							aria-label="Expand"
-						/>
-					{/snippet}
-				</Input>
-			</Field>
-		</Select.Trigger>
-		<Select.Portal>
-			<Select.Content
-				bind:ref={contentRef}
-				class="bg-light text-dark max-h-96 rounded-xl border py-3 outline-none select-none"
-				sideOffset={10}
-			>
-				<Select.ScrollUpButton class="flex w-full items-center justify-center">
-					<Icon icon={mdiArrowUp} />
-				</Select.ScrollUpButton>
-				<Select.Viewport>
-					{#each options as { value, label, disabled }, i (i + value)}
-						<Select.Item
-							class={cleanClass(
-								'hover:bg-subtle data-[selected]:bg-primary/10 flex h-10 w-full items-center px-5 py-3 text-sm duration-75 outline-none select-none data-disabled:opacity-50',
-								disabled ? 'cursor-not-allowed' : 'cursor-pointer',
-							)}
-							{value}
-							{label}
-							{disabled}
-						>
-							{#snippet children({ selected })}
-								<div
-									class="flex cursor-pointer items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-colors"
-								>
-									<span>{label}</span>
-								</div>
-								{#if selected}
-									<div class="ms-auto">
-										<Icon icon={mdiCheck} />
-									</div>
-								{/if}
-							{/snippet}
-						</Select.Item>
-					{/each}
-				</Select.Viewport>
-				<Select.ScrollDownButton class="flex w-full items-center justify-center">
-					<Icon icon={mdiArrowDown} />
-				</Select.ScrollDownButton>
-			</Select.Content>
-		</Select.Portal>
-	</Select.Root>
+  {#if label}
+    <Label id={labelId} for={inputId} {label} {...labelProps} />
+  {/if}
+
+  <Select.Root type={multiple ? 'multiple' : 'single'} bind:value={internalValue as never} {onValueChange}>
+    <Select.Trigger
+      {disabled}
+      class="w-full items-center gap-1 rounded-lg focus-visible:outline-none"
+      aria-label={placeholder}
+    >
+      <Field {readOnly} {required} {disabled} {invalid}>
+        <Input
+          bind:containerRef={inputRef}
+          id={inputId}
+          {size}
+          {shape}
+          {placeholder}
+          value={selectedLabel}
+          readonly
+          aria-labelledby={labelId}
+          aria-readonly
+        >
+          {#snippet trailingIcon()}
+            <IconButton
+              variant="ghost"
+              shape="round"
+              color="secondary"
+              class="m-1"
+              icon={mdiUnfoldMoreHorizontal}
+              {disabled}
+              aria-label="Expand"
+            />
+          {/snippet}
+        </Input>
+      </Field>
+    </Select.Trigger>
+    <Select.Portal>
+      <Select.Content
+        bind:ref={contentRef}
+        class="bg-light text-dark max-h-96 rounded-xl border py-3 outline-none select-none"
+        sideOffset={10}
+      >
+        <Select.ScrollUpButton class="flex w-full items-center justify-center">
+          <Icon icon={mdiArrowUp} />
+        </Select.ScrollUpButton>
+        <Select.Viewport>
+          {#each options as { value, label, disabled }, i (i + value)}
+            <Select.Item
+              class={cleanClass(
+                'hover:bg-subtle data-[selected]:bg-primary/10 flex h-10 w-full items-center px-5 py-3 text-sm duration-75 outline-none select-none data-disabled:opacity-50',
+                disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+              )}
+              {value}
+              {label}
+              {disabled}
+            >
+              {#snippet children({ selected })}
+                <div
+                  class="flex cursor-pointer items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-colors"
+                >
+                  <span>{label}</span>
+                </div>
+                {#if selected}
+                  <div class="ms-auto">
+                    <Icon icon={mdiCheck} />
+                  </div>
+                {/if}
+              {/snippet}
+            </Select.Item>
+          {/each}
+        </Select.Viewport>
+        <Select.ScrollDownButton class="flex w-full items-center justify-center">
+          <Icon icon={mdiArrowDown} />
+        </Select.ScrollDownButton>
+      </Select.Content>
+    </Select.Portal>
+  </Select.Root>
 </div>

package/dist/internal/Text.svelte

@@ -1,60 +1,52 @@
 <script lang="ts">
-	import type { FontWeight, HeadingColor, HeadingTag, TextVariant } from '../types.js';
-	import { cleanClass } from '../utils.js';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { tv } from 'tailwind-variants';
+  import type { FontWeight, HeadingColor, HeadingTag, TextVariant } 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 = {
-		/**
-		 * The HTML element type.
-		 */
-		tag?: HeadingTag;
-		fontWeight?: FontWeight;
-		variant?: TextVariant;
-		color?: HeadingColor;
-		class?: string;
+  type Props = {
+    /**
+     * The HTML element type.
+     */
+    tag?: HeadingTag;
+    fontWeight?: FontWeight;
+    variant?: TextVariant;
+    color?: HeadingColor;
+    class?: string;
 
-		children: Snippet;
-	} & HTMLAttributes<HTMLElement>;
+    children: Snippet;
+  } & HTMLAttributes<HTMLElement>;
 
-	const {
-		tag = 'p',
-		color,
-		fontWeight,
-		variant,
-		class: className,
-		children,
-		...restProps
-	}: Props = $props();
+  const { tag = 'p', color, fontWeight, variant, class: className, children, ...restProps }: Props = $props();
 
-	const styles = tv({
-		variants: {
-			color: {
-				muted: 'text-gray-600 dark:text-gray-400',
-				primary: 'text-primary',
-				secondary: 'text-dark',
-				success: 'text-success',
-				danger: 'text-danger',
-				warning: 'text-warning',
-				info: 'text-info',
-			},
-			fontWeight: {
-				light: 'font-light',
-				normal: 'font-normal',
-				'semi-bold': 'font-semibold',
-				bold: 'font-bold',
-				'extra-bold': 'font-extrabold',
-			},
-			variant: {
-				italic: 'italic',
-			},
-		},
-	});
+  const styles = tv({
+    variants: {
+      color: {
+        muted: 'text-gray-600 dark:text-gray-400',
+        primary: 'text-primary',
+        secondary: 'text-dark',
+        success: 'text-success',
+        danger: 'text-danger',
+        warning: 'text-warning',
+        info: 'text-info',
+      },
+      fontWeight: {
+        light: 'font-light',
+        normal: 'font-normal',
+        'semi-bold': 'font-semibold',
+        bold: 'font-bold',
+        'extra-bold': 'font-extrabold',
+      },
+      variant: {
+        italic: 'italic',
+      },
+    },
+  });
 
-	const classList = $derived(cleanClass(styles({ color, fontWeight, variant }), className));
+  const classList = $derived(cleanClass(styles({ color, fontWeight, variant }), className));
 </script>
 
 <svelte:element this={tag} class={classList} {...restProps}>
-	{@render children()}
+  {@render children()}
 </svelte:element>

package/dist/site/SiteFooter.svelte

@@ -1,84 +1,68 @@
 <script lang="ts">
-	import Heading from '../components/Heading/Heading.svelte';
-	import Stack from '../components/Stack/Stack.svelte';
-	import VStack from '../components/Stack/VStack.svelte';
-	import Text from '../components/Text/Text.svelte';
-	import ThemeSwitcher from '../components/ThemeSwitcher/ThemeSwitcher.svelte';
-	import { Constants } from './constants.js';
-	import SiteFooterLink from './SiteFooterLink.svelte';
-	import {
-		mdiBookshelf,
-		mdiChartGantt,
-		mdiCubeOutline,
-		mdiHomeSearchOutline,
-		mdiKey,
-		mdiOfficeBuildingOutline,
-		mdiScriptTextOutline,
-		mdiServerOutline,
-		mdiShoppingOutline,
-	} from '@mdi/js';
-	import { siAndroid, siApple, siDiscord, siGithub, siReddit } from 'simple-icons';
+  import Heading from '../components/Heading/Heading.svelte';
+  import Stack from '../components/Stack/Stack.svelte';
+  import VStack from '../components/Stack/VStack.svelte';
+  import Text from '../components/Text/Text.svelte';
+  import ThemeSwitcher from '../components/ThemeSwitcher/ThemeSwitcher.svelte';
+  import { Constants } from './constants.js';
+  import SiteFooterLink from './SiteFooterLink.svelte';
+  import {
+    mdiBookshelf,
+    mdiChartGantt,
+    mdiCubeOutline,
+    mdiHomeSearchOutline,
+    mdiKey,
+    mdiOfficeBuildingOutline,
+    mdiScriptTextOutline,
+    mdiServerOutline,
+    mdiShoppingOutline,
+  } from '@mdi/js';
+  import { siAndroid, siApple, siDiscord, siGithub, siReddit } from 'simple-icons';
 </script>
 
-<div class="bg-dark/10 mt-16 rounded-t-3xl p-8">
-	<div class="mx-auto max-w-(--breakpoint-lg) xl:py-8">
-		<Stack gap={8}>
-			<div class="place-center grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
-				<Stack>
-					<Heading size="tiny">Social</Heading>
-					<SiteFooterLink href={Constants.Socials.Github} icon={siGithub} text="GitHub" />
-					<SiteFooterLink href={Constants.Socials.Discord} icon={siDiscord} text="Discord" />
-					<SiteFooterLink href={Constants.Socials.Reddit} icon={siReddit} text="Reddit" />
-				</Stack>
+<div class="mt-16 rounded-t-3xl bg-gray-100 p-8 dark:bg-neutral-900">
+  <div class="mx-auto max-w-(--breakpoint-lg) xl:py-8">
+    <Stack gap={8}>
+      <div class="place-center grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
+        <Stack>
+          <Heading size="tiny">Social</Heading>
+          <SiteFooterLink href={Constants.Socials.Github} icon={siGithub} text="GitHub" />
+          <SiteFooterLink href={Constants.Socials.Discord} icon={siDiscord} text="Discord" />
+          <SiteFooterLink href={Constants.Socials.Reddit} icon={siReddit} text="Reddit" />
+        </Stack>
 
-				<Stack>
-					<Heading size="tiny">Download</Heading>
-					<SiteFooterLink href={Constants.Get.Android} icon={siAndroid} text="Android" />
-					<SiteFooterLink href={Constants.Get.iOS} icon={siApple} text="iOS" />
-					<SiteFooterLink
-						href={Constants.Get.DockerCompose}
-						icon={mdiServerOutline}
-						text="Server"
-					/>
-				</Stack>
+        <Stack>
+          <Heading size="tiny">Download</Heading>
+          <SiteFooterLink href={Constants.Get.Android} icon={siAndroid} text="Android" />
+          <SiteFooterLink href={Constants.Get.iOS} icon={siApple} text="iOS" />
+          <SiteFooterLink href={Constants.Get.DockerCompose} icon={mdiServerOutline} text="Server" />
+        </Stack>
 
-				<Stack>
-					<Heading size="tiny">Company</Heading>
-					<SiteFooterLink
-						href={Constants.Socials.Futo}
-						icon={mdiOfficeBuildingOutline}
-						text="FUTO"
-					/>
-					<SiteFooterLink href={Constants.Sites.Buy} icon={mdiKey} text="Purchase" />
-					<SiteFooterLink href={Constants.Sites.Store} icon={mdiShoppingOutline} text="Merch" />
-				</Stack>
+        <Stack>
+          <Heading size="tiny">Company</Heading>
+          <SiteFooterLink href={Constants.Socials.Futo} icon={mdiOfficeBuildingOutline} text="FUTO" />
+          <SiteFooterLink href={Constants.Sites.Buy} icon={mdiKey} text="Purchase" />
+          <SiteFooterLink href={Constants.Sites.Store} icon={mdiShoppingOutline} text="Merch" />
+        </Stack>
 
-				<Stack>
-					<Heading size="tiny">Sites</Heading>
-					<SiteFooterLink
-						href={Constants.Sites.Docs}
-						icon={mdiScriptTextOutline}
-						text="Documentation"
-					/>
-					<SiteFooterLink href={Constants.Sites.My} icon={mdiHomeSearchOutline} text="My Immich" />
-					<SiteFooterLink href={Constants.Sites.Api} icon={mdiCubeOutline} text="Immich API" />
-				</Stack>
+        <Stack>
+          <Heading size="tiny">Sites</Heading>
+          <SiteFooterLink href={Constants.Sites.Docs} icon={mdiScriptTextOutline} text="Documentation" />
+          <SiteFooterLink href={Constants.Sites.My} icon={mdiHomeSearchOutline} text="My Immich" />
+          <SiteFooterLink href={Constants.Sites.Api} icon={mdiCubeOutline} text="Immich API" />
+        </Stack>
 
-				<Stack>
-					<Heading size="tiny">Miscellaneous</Heading>
-					<SiteFooterLink href={Constants.Pages.Roadmap} icon={mdiChartGantt} text="Roadmap" />
-					<SiteFooterLink
-						href={Constants.Pages.CursedKnowledge}
-						icon={mdiBookshelf}
-						text="Cursed Knowledge"
-					/>
-				</Stack>
-			</div>
-			<VStack class="text-center">
-				<Text size="large">This project is available under GNU AGPL v3 license.</Text>
-				<Text color="muted" variant="italic">Privacy should not be a luxury</Text>
-				<ThemeSwitcher color="secondary" />
-			</VStack>
-		</Stack>
-	</div>
+        <Stack>
+          <Heading size="tiny">Miscellaneous</Heading>
+          <SiteFooterLink href={Constants.Pages.Roadmap} icon={mdiChartGantt} text="Roadmap" />
+          <SiteFooterLink href={Constants.Pages.CursedKnowledge} icon={mdiBookshelf} text="Cursed Knowledge" />
+        </Stack>
+      </div>
+      <VStack class="text-center">
+        <Text size="large">This project is available under GNU AGPL v3 license.</Text>
+        <Text color="muted" variant="italic">Privacy should not be a luxury</Text>
+        <ThemeSwitcher color="secondary" />
+      </VStack>
+    </Stack>
+  </div>
 </div>

package/dist/site/SiteFooterLink.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import HStack from '../components/Stack/HStack.svelte';
-	import Icon from '../components/Icon/Icon.svelte';
-	import Link from '../components/Link/Link.svelte';
-	import Text from '../components/Text/Text.svelte';
+  import HStack from '../components/Stack/HStack.svelte';
+  import Icon from '../components/Icon/Icon.svelte';
+  import Link from '../components/Link/Link.svelte';
+  import Text from '../components/Text/Text.svelte';
 
-	type Props = {
-		href: string;
-		icon: string | { path: string };
-		text: string;
-	};
+  type Props = {
+    href: string;
+    icon: string | { path: string };
+    text: string;
+  };
 
-	let { href, icon, text }: Props = $props();
+  let { href, icon, text }: Props = $props();
 </script>
 
 <Link {href} external>
-	<HStack>
-		<Icon {icon} size="1.5em" />
-		<Text>{text}</Text>
-	</HStack>
+  <HStack>
+    <Icon {icon} size="1.5em" />
+    <Text>{text}</Text>
+  </HStack>
 </Link>