@immich/ui 0.29.0 → 0.30.1

package/dist/components/Textarea/Textarea.svelte

@@ -1,120 +1,119 @@
 <script lang="ts">
-	import { getFieldContext } from '../../common/context.svelte.js';
-	import Label from '../Label/Label.svelte';
-	import Text from '../Text/Text.svelte';
-	import type { TextareaProps } from '../../types.js';
-	import { cleanClass, generateId } from '../../utils.js';
-	import type { FormEventHandler } from 'svelte/elements';
-	import { tv } from 'tailwind-variants';
+  import { getFieldContext } from '../../common/context.svelte.js';
+  import Label from '../Label/Label.svelte';
+  import Text from '../Text/Text.svelte';
+  import type { TextareaProps } from '../../types.js';
+  import { cleanClass, generateId } from '../../utils.js';
+  import type { FormEventHandler } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
 
-	let {
-		ref = $bindable(null),
-		containerRef = $bindable(null),
-		shape = 'semi-round',
-		size = 'medium',
-		class: className,
-		grow,
-		value = $bindable<string>(),
-		...restProps
-	}: TextareaProps = $props();
+  let {
+    ref = $bindable(null),
+    containerRef = $bindable(null),
+    shape = 'semi-round',
+    size = 'medium',
+    class: className,
+    grow,
+    value = $bindable<string>(),
+    ...restProps
+  }: TextareaProps = $props();
 
-	const { label, description, readOnly, required, invalid, disabled, ...labelProps } =
-		$derived(getFieldContext());
+  const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(getFieldContext());
 
-	const styles = tv({
-		base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
-		variants: {
-			shape: {
-				rectangle: 'rounded-none',
-				'semi-round': '',
-				round: 'rounded-full',
-			},
-			padding: {
-				base: 'px-4 py-3',
-				round: 'px-5 py-3',
-			},
-			grow: {
-				true: 'resize-none',
-				false: '',
-			},
-			roundedSize: {
-				tiny: 'rounded-xl',
-				small: 'rounded-xl',
-				medium: 'rounded-2xl',
-				large: 'rounded-2xl',
-				giant: 'rounded-2xl',
-			},
-			textSize: {
-				tiny: 'text-xs',
-				small: 'text-sm',
-				medium: 'text-base',
-				large: 'text-lg',
-				giant: 'text-xl',
-			},
-			invalid: {
-				true: 'border-danger/80 border',
-				false: '',
-			},
-		},
-	});
+  const styles = tv({
+    base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
+    variants: {
+      shape: {
+        rectangle: 'rounded-none',
+        'semi-round': '',
+        round: 'rounded-full',
+      },
+      padding: {
+        base: 'px-4 py-3',
+        round: 'px-5 py-3',
+      },
+      grow: {
+        true: 'resize-none',
+        false: '',
+      },
+      roundedSize: {
+        tiny: 'rounded-xl',
+        small: 'rounded-xl',
+        medium: 'rounded-2xl',
+        large: 'rounded-2xl',
+        giant: 'rounded-2xl',
+      },
+      textSize: {
+        tiny: 'text-xs',
+        small: 'text-sm',
+        medium: 'text-base',
+        large: 'text-lg',
+        giant: 'text-xl',
+      },
+      invalid: {
+        true: 'border-danger/80 border',
+        false: '',
+      },
+    },
+  });
 
-	const id = generateId();
-	const inputId = `input-${id}`;
-	const labelId = `label-${id}`;
-	const descriptionId = $derived(description ? `description-${id}` : undefined);
+  const id = generateId();
+  const inputId = `input-${id}`;
+  const labelId = `label-${id}`;
+  const descriptionId = $derived(description ? `description-${id}` : undefined);
 
-	const onInput: FormEventHandler<HTMLTextAreaElement> = (event) => {
-		const element = event.target as HTMLTextAreaElement;
-		if (element && grow) {
-			element.style.height = 'auto';
-			element.style.height = `${element.scrollHeight}px`;
-		}
+  const onInput: FormEventHandler<HTMLTextAreaElement> = (event) => {
+    const element = event.target as HTMLTextAreaElement;
+    if (element && grow) {
+      element.style.height = 'auto';
+      element.style.height = `${element.scrollHeight}px`;
+    }
 
-		restProps?.oninput?.(event);
-	};
+    restProps?.oninput?.(event);
+  };
 </script>
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>
-	{#if label}
-		<Label id={labelId} for={inputId} {label} {...labelProps} />
-	{/if}
+  {#if label}
+    <Label id={labelId} for={inputId} {label} {...labelProps} />
+  {/if}
 
-	{#if description}
-		<Text color="secondary" size="small" id={descriptionId}>{description}</Text>
-	{/if}
+  {#if description}
+    <Text color="secondary" size="small" id={descriptionId}>{description}</Text>
+  {/if}
 
-	<div class="relative w-full">
-		<textarea
-			oninput={onInput}
-			id={inputId}
-			aria-labelledby={label && labelId}
-			{required}
-			aria-required={required}
-			{disabled}
-			aria-disabled={disabled}
-			aria-describedby={descriptionId}
-			readonly={readOnly}
-			aria-readonly={readOnly}
-			class={cleanClass(
-				styles({
-					shape,
-					textSize: size,
-					padding: shape === 'round' ? 'round' : 'base',
-					grow,
-					roundedSize: shape === 'semi-round' ? size : undefined,
-					invalid,
-				}),
-				className,
-			)}
-			bind:this={ref}
-			bind:value
-			{...restProps}
-		></textarea>
-	</div>
+  <div class="relative w-full">
+    <textarea
+      oninput={onInput}
+      id={inputId}
+      aria-labelledby={label && labelId}
+      {required}
+      aria-required={required}
+      {disabled}
+      aria-disabled={disabled}
+      aria-describedby={descriptionId}
+      readonly={readOnly}
+      aria-readonly={readOnly}
+      class={cleanClass(
+        styles({
+          shape,
+          textSize: size,
+          padding: shape === 'round' ? 'round' : 'base',
+          grow,
+          roundedSize: shape === 'semi-round' ? size : undefined,
+          invalid,
+        }),
+        className,
+      )}
+      bind:this={ref}
+      bind:value
+      {...restProps}
+    ></textarea>
+  </div>
 </div>
 
 <style>
-	textarea::-ms-reveal {
-		display: none;
-	}
+  textarea::-ms-reveal {
+    display: none;
+  }
 </style>

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -1,52 +1,39 @@
 <script lang="ts">
-	import IconButton from '../IconButton/IconButton.svelte';
-	import { theme, toggleTheme } from '../../services/theme.svelte.js';
-	import { t } from '../../services/translation.svelte.js';
-	import {
-		Theme,
-		type Color,
-		type Size,
-		type TranslationProps,
-		type Variants,
-	} from '../../types.js';
-	import { cleanClass } from '../../utils.js';
-	import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
+  import IconButton from '../IconButton/IconButton.svelte';
+  import { theme, toggleTheme } from '../../services/theme.svelte.js';
+  import { t } from '../../services/translation.svelte.js';
+  import { Theme, type Color, type Size, type TranslationProps, type Variants } from '../../types.js';
+  import { cleanClass } from '../../utils.js';
+  import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
 
-	type Props = {
-		size?: Size;
-		class?: string;
-		color?: Color;
-		variant?: Variants;
-		translations?: TranslationProps<'dark_theme'>;
-		onChange?: (theme: Theme) => void;
-	};
+  type Props = {
+    size?: Size;
+    class?: string;
+    color?: Color;
+    variant?: Variants;
+    translations?: TranslationProps<'dark_theme'>;
+    onChange?: (theme: Theme) => void;
+  };
 
-	const {
-		color = 'primary',
-		variant = 'ghost',
-		size,
-		class: className,
-		translations,
-		onChange,
-	}: Props = $props();
+  const { color = 'primary', variant = 'ghost', size, class: className, translations, onChange }: Props = $props();
 
-	const handleToggleTheme = () => {
-		toggleTheme();
-		onChange?.(theme.value);
-	};
+  const handleToggleTheme = () => {
+    toggleTheme();
+    onChange?.(theme.value);
+  };
 
-	const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
+  const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
 </script>
 
 <IconButton
-	shape="round"
-	{color}
-	{size}
-	{variant}
-	icon={themeIcon}
-	onclick={handleToggleTheme}
-	class={cleanClass(className)}
-	aria-label={t('dark_theme', translations)}
-	role="switch"
-	aria-checked={theme.value === Theme.Dark}
+  shape="round"
+  {color}
+  {size}
+  {variant}
+  icon={themeIcon}
+  onclick={handleToggleTheme}
+  class={cleanClass(className)}
+  aria-label={t('dark_theme', translations)}
+  role="switch"
+  aria-checked={theme.value === Theme.Dark}
 />