@immich/ui 0.30.0 → 0.30.1

package/dist/components/FormatBytes/FormatBytes.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { getBytesWithUnit } from '../../utilities/byte-units.js';
+  import { getBytesWithUnit } from '../../utilities/byte-units.js';
 
-	type Props = {
-		bytes: number;
-		precision?: number;
-		variant?: 'short' | 'narrow';
-	};
+  type Props = {
+    bytes: number;
+    precision?: number;
+    variant?: 'short' | 'narrow';
+  };
 
-	const { bytes, precision, variant = 'short' }: Props = $props();
+  const { bytes, precision, variant = 'short' }: Props = $props();
 
-	const [value, unit] = $derived(getBytesWithUnit(bytes, precision));
-	const separator = $derived(variant === 'narrow' ? '' : ' ');
+  const [value, unit] = $derived(getBytesWithUnit(bytes, precision));
+  const separator = $derived(variant === 'narrow' ? '' : ' ');
 </script>
 
 <span>{value}{separator}{unit}</span>

package/dist/components/Heading/Heading.svelte

@@ -1,57 +1,51 @@
 <script lang="ts">
-	import type {
-		FontWeight,
-		HeadingColor,
-		HeadingSize,
-		HeadingTag,
-		TextVariant,
-	} from '../../types.js';
-	import { cleanClass } from '../../utils.js';
-	import Text from '../../internal/Text.svelte';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { tv } from 'tailwind-variants';
+  import type { FontWeight, HeadingColor, HeadingSize, HeadingTag, TextVariant } from '../../types.js';
+  import { cleanClass } from '../../utils.js';
+  import Text from '../../internal/Text.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
 
-	type Props = {
-		/**
-		 * The HTML element type.
-		 */
-		tag?: HeadingTag;
-		size?: HeadingSize;
-		color?: HeadingColor;
-		fontWeight?: FontWeight;
-		variant?: TextVariant;
-		class?: string;
+  type Props = {
+    /**
+     * The HTML element type.
+     */
+    tag?: HeadingTag;
+    size?: HeadingSize;
+    color?: HeadingColor;
+    fontWeight?: FontWeight;
+    variant?: TextVariant;
+    class?: string;
 
-		children: Snippet;
-	} & HTMLAttributes<HTMLElement>;
+    children: Snippet;
+  } & HTMLAttributes<HTMLElement>;
 
-	const {
-		tag = 'p',
-		size = 'medium',
-		fontWeight = 'semi-bold',
-		class: className,
-		children,
-		...restProps
-	}: Props = $props();
+  const {
+    tag = 'p',
+    size = 'medium',
+    fontWeight = 'semi-bold',
+    class: className,
+    children,
+    ...restProps
+  }: Props = $props();
 
-	const styles = tv({
-		base: 'leading-none tracking-tight',
-		variants: {
-			size: {
-				tiny: 'text-lg',
-				small: 'text-xl',
-				medium: 'text-2xl',
-				large: 'text-3xl',
-				giant: 'text-4xl',
-				title: 'text-5xl',
-			},
-		},
-	});
+  const styles = tv({
+    base: 'leading-none tracking-tight',
+    variants: {
+      size: {
+        tiny: 'text-lg',
+        small: 'text-xl',
+        medium: 'text-2xl',
+        large: 'text-3xl',
+        giant: 'text-4xl',
+        title: 'text-5xl',
+      },
+    },
+  });
 
-	const classList = $derived(cleanClass(styles({ size }), className));
+  const classList = $derived(cleanClass(styles({ size }), className));
 </script>
 
 <Text {tag} {fontWeight} class={classList} {...restProps}>
-	{@render children()}
+  {@render children()}
 </Text>

package/dist/components/HelperText/HelperText.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-	import Text from '../Text/Text.svelte';
-	import { ChildKey } from '../../constants.js';
-	import Child from '../../internal/Child.svelte';
-	import type { TextColor } from '../../types.js';
-	import { cleanClass } from '../../utils.js';
-	import type { Snippet } from 'svelte';
+  import Text from '../Text/Text.svelte';
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { TextColor } from '../../types.js';
+  import { cleanClass } from '../../utils.js';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		color?: TextColor;
-		class?: string;
-		children?: Snippet;
-	};
+  type Props = {
+    color?: TextColor;
+    class?: string;
+    children?: Snippet;
+  };
 
-	let { class: className, children, color = 'muted' }: Props = $props();
+  let { class: className, children, color = 'muted' }: Props = $props();
 </script>
 
 <Child for={ChildKey.Field} as={ChildKey.HelperText}>
-	<div class={cleanClass(className)}>
-		<Text {color} size="small">
-			{@render children?.()}
-		</Text>
-	</div>
+  <div class={cleanClass(className)}>
+    <Text {color} size="small">
+      {@render children?.()}
+    </Text>
+  </div>
 </Child>

package/dist/components/Icon/Icon.svelte

@@ -1,52 +1,47 @@
 <script lang="ts">
-	import type { IconProps } from '../../types.js';
-	import { cleanClass } from '../../utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+  import type { IconProps } from '../../types.js';
+  import { cleanClass } from '../../utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-	const {
-		size = '1em',
-		viewBox = '0 0 24 24',
-		class: className = '',
-		flipped = false,
-		flopped = false,
-		spin = false,
-		strokeColor = 'transparent',
-		strokeWidth = 2,
-		role = 'img',
-		title,
-		icon,
-		color = 'currentColor',
-		description,
-		...restProps
-	}: IconProps & HTMLAttributes<EventTarget> = $props();
+  const {
+    size = '1em',
+    viewBox = '0 0 24 24',
+    class: className = '',
+    flipped = false,
+    flopped = false,
+    spin = false,
+    strokeColor = 'transparent',
+    strokeWidth = 2,
+    role = 'img',
+    title,
+    icon,
+    color = 'currentColor',
+    description,
+    ...restProps
+  }: IconProps & HTMLAttributes<EventTarget> = $props();
 </script>
 
 <svg
-	width={size}
-	height={size}
-	{viewBox}
-	class={cleanClass(
-		className,
-		flipped && '-scale-x-100',
-		flopped && 'rotate-180',
-		spin && 'animate-spin',
-	)}
-	stroke={strokeColor}
-	stroke-width={strokeWidth}
-	{role}
-	{...restProps}
+  width={size}
+  height={size}
+  {viewBox}
+  class={cleanClass(className, flipped && '-scale-x-100', flopped && 'rotate-180', spin && 'animate-spin')}
+  stroke={strokeColor}
+  stroke-width={strokeWidth}
+  {role}
+  {...restProps}
 >
-	{#if title}
-		<title>{title}</title>
-	{/if}
-	{#if description}
-		<desc>{description}</desc>
-	{/if}
-	<path d={typeof icon === 'string' ? icon : icon.path} fill={color} />
+  {#if title}
+    <title>{title}</title>
+  {/if}
+  {#if description}
+    <desc>{description}</desc>
+  {/if}
+  <path d={typeof icon === 'string' ? icon : icon.path} fill={color} />
 </svg>
 
 <style>
-	svg {
-		transition: transform 0.2s ease;
-	}
+  svg {
+    transition: transform 0.2s ease;
+  }
 </style>

package/dist/components/IconButton/IconButton.svelte

@@ -1,20 +1,13 @@
 <script lang="ts">
-	import Button from '../../internal/Button.svelte';
-	import Icon from '../Icon/Icon.svelte';
-	import type { IconButtonProps } from '../../types.js';
+  import Button from '../../internal/Button.svelte';
+  import Icon from '../Icon/Icon.svelte';
+  import type { IconButtonProps } from '../../types.js';
 
-	const {
-		icon,
-		flipped,
-		flopped,
-		title,
-		'aria-label': ariaLabel,
-		...buttonProps
-	}: IconButtonProps = $props();
+  const { icon, flipped, flopped, title, 'aria-label': ariaLabel, ...buttonProps }: IconButtonProps = $props();
 
-	const buttonTitle = $derived(title || ariaLabel);
+  const buttonTitle = $derived(title || ariaLabel);
 </script>
 
 <Button icon {...buttonProps} title={buttonTitle} aria-label={ariaLabel}>
-	<Icon {icon} {flipped} {flopped} size="60%" aria-hidden />
+  <Icon {icon} {flipped} {flopped} size="60%" aria-hidden />
 </Button>

package/dist/components/Input/Input.svelte

@@ -1,171 +1,168 @@
 <script lang="ts">
-	import { getFieldContext } from '../../common/context.svelte.js';
-	import Icon from '../Icon/Icon.svelte';
-	import Label from '../Label/Label.svelte';
-	import Text from '../Text/Text.svelte';
-	import type { InputProps } from '../../types.js';
-	import { cleanClass, generateId, isIconLike } from '../../utils.js';
-	import { tv } from 'tailwind-variants';
+  import { getFieldContext } from '../../common/context.svelte.js';
+  import Icon from '../Icon/Icon.svelte';
+  import Label from '../Label/Label.svelte';
+  import Text from '../Text/Text.svelte';
+  import type { InputProps } from '../../types.js';
+  import { cleanClass, generateId, isIconLike } from '../../utils.js';
+  import { tv } from 'tailwind-variants';
 
-	let {
-		ref = $bindable(null),
-		containerRef = $bindable(null),
-		shape = 'semi-round',
-		size = 'medium',
-		class: className,
-		value = $bindable<string>(),
-		leadingIcon,
-		trailingIcon,
-		trailingText,
-		inputSize,
-		...restProps
-	}: InputProps = $props();
+  let {
+    ref = $bindable(null),
+    containerRef = $bindable(null),
+    shape = 'semi-round',
+    size = 'medium',
+    class: className,
+    value = $bindable<string>(),
+    leadingIcon,
+    trailingIcon,
+    trailingText,
+    inputSize,
+    ...restProps
+  }: InputProps = $props();
 
-	const { label, description, readOnly, required, invalid, disabled, ...labelProps } =
-		$derived(getFieldContext());
+  const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(getFieldContext());
 
-	const iconStyles = tv({
-		base: 'flex flex-shrink-0 items-center justify-center',
-		variants: {
-			size: {
-				tiny: 'w-6',
-				small: 'w-8',
-				medium: 'w-10',
-				large: 'w-12',
-				giant: 'w-14',
-			},
-		},
-	});
+  const iconStyles = tv({
+    base: 'flex flex-shrink-0 items-center justify-center',
+    variants: {
+      size: {
+        tiny: 'w-6',
+        small: 'w-8',
+        medium: 'w-10',
+        large: 'w-12',
+        giant: 'w-14',
+      },
+    },
+  });
 
-	const containerStyles = tv({
-		base: 'flex w-full items-center 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',
-			},
-			roundedSize: {
-				tiny: 'rounded-xl',
-				small: 'rounded-xl',
-				medium: 'rounded-2xl',
-				large: 'rounded-2xl',
-				giant: 'rounded-2xl',
-			},
-			invalid: {
-				true: 'border-danger/80 border',
-				false: '',
-			},
-		},
-	});
+  const containerStyles = tv({
+    base: 'flex w-full items-center 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',
+      },
+      roundedSize: {
+        tiny: 'rounded-xl',
+        small: 'rounded-xl',
+        medium: 'rounded-2xl',
+        large: 'rounded-2xl',
+        giant: 'rounded-2xl',
+      },
+      invalid: {
+        true: 'border-danger/80 border',
+        false: '',
+      },
+    },
+  });
 
-	const inputStyles = tv({
-		base: 'flex-1 bg-transparent py-3 outline-none disabled:cursor-not-allowed',
-		variants: {
-			textSize: {
-				tiny: 'text-xs',
-				small: 'text-sm',
-				medium: 'text-base',
-				large: 'text-lg',
-				giant: 'text-xl',
-			},
-			leadingPadding: {
-				base: 'pl-4',
-				icon: 'pl-0',
-			},
-			trailingPadding: {
-				base: 'pr-4',
-				icon: 'pr-0',
-			},
-		},
-	});
+  const inputStyles = tv({
+    base: 'flex-1 bg-transparent py-3 outline-none disabled:cursor-not-allowed',
+    variants: {
+      textSize: {
+        tiny: 'text-xs',
+        small: 'text-sm',
+        medium: 'text-base',
+        large: 'text-lg',
+        giant: 'text-xl',
+      },
+      leadingPadding: {
+        base: 'pl-4',
+        icon: 'pl-0',
+      },
+      trailingPadding: {
+        base: 'pr-4',
+        icon: 'pr-0',
+      },
+    },
+  });
 
-	const trailingTextStyles = tv({
-		variants: {
-			padding: {
-				base: 'px-4',
-				icon: 'pl-4',
-			},
-		},
-	});
+  const trailingTextStyles = tv({
+    variants: {
+      padding: {
+        base: 'px-4',
+        icon: 'pl-4',
+      },
+    },
+  });
 
-	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);
 </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={cleanClass(
-			containerStyles({
-				shape,
-				roundedSize: shape === 'semi-round' ? size : undefined,
-				invalid,
-			}),
-			className,
-		)}
-	>
-		{#if leadingIcon}
-			<div tabindex="-1" class={iconStyles({ size })}>
-				{#if isIconLike(leadingIcon)}
-					<Icon size="60%" icon={leadingIcon} />
-				{:else}
-					{@render leadingIcon()}
-				{/if}
-			</div>
-		{/if}
+  <div
+    class={cleanClass(
+      containerStyles({
+        shape,
+        roundedSize: shape === 'semi-round' ? size : undefined,
+        invalid,
+      }),
+      className,
+    )}
+  >
+    {#if leadingIcon}
+      <div tabindex="-1" class={iconStyles({ size })}>
+        {#if isIconLike(leadingIcon)}
+          <Icon size="60%" icon={leadingIcon} />
+        {:else}
+          {@render leadingIcon()}
+        {/if}
+      </div>
+    {/if}
 
-		<input
-			id={inputId}
-			aria-labelledby={label && labelId}
-			{required}
-			aria-required={required}
-			{disabled}
-			aria-disabled={disabled}
-			aria-describedby={descriptionId}
-			readonly={readOnly}
-			size={inputSize}
-			aria-readonly={readOnly}
-			class={inputStyles({
-				textSize: size,
-				leadingPadding: leadingIcon ? 'icon' : 'base',
-				trailingPadding: trailingIcon || trailingText ? 'icon' : 'base',
-			})}
-			bind:this={ref}
-			bind:value
-			{...restProps}
-		/>
-		{#if trailingText}
-			<Text
-				{size}
-				color="muted"
-				class={trailingTextStyles({ padding: trailingIcon ? 'icon' : 'base' })}>{trailingText}</Text
-			>
-		{/if}
+    <input
+      id={inputId}
+      aria-labelledby={label && labelId}
+      {required}
+      aria-required={required}
+      {disabled}
+      aria-disabled={disabled}
+      aria-describedby={descriptionId}
+      readonly={readOnly}
+      size={inputSize}
+      aria-readonly={readOnly}
+      class={inputStyles({
+        textSize: size,
+        leadingPadding: leadingIcon ? 'icon' : 'base',
+        trailingPadding: trailingIcon || trailingText ? 'icon' : 'base',
+      })}
+      bind:this={ref}
+      bind:value
+      {...restProps}
+    />
+    {#if trailingText}
+      <Text {size} color="muted" class={trailingTextStyles({ padding: trailingIcon ? 'icon' : 'base' })}
+        >{trailingText}</Text
+      >
+    {/if}
 
-		{#if trailingIcon}
-			<div tabindex="-1" class={iconStyles({ size })}>
-				{#if isIconLike(trailingIcon)}
-					<Icon size="60%" icon={trailingIcon} />
-				{:else}
-					{@render trailingIcon()}
-				{/if}
-			</div>
-		{/if}
-	</div>
+    {#if trailingIcon}
+      <div tabindex="-1" class={iconStyles({ size })}>
+        {#if isIconLike(trailingIcon)}
+          <Icon size="60%" icon={trailingIcon} />
+        {:else}
+          {@render trailingIcon()}
+        {/if}
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>
-	input::-ms-reveal {
-		display: none;
-	}
+  input::-ms-reveal {
+    display: none;
+  }
 </style>