@immich/ui 0.6.0 → 0.8.0

package/dist/components/Card/CardFooter.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
 	import { ChildKey } from '../../constants.js';
 	import Child from '../../internal/Child.svelte';
+	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
 		children: Snippet;
+		class?: string;
 	};
 
-	let { children }: Props = $props();
+	let { children, class: className }: Props = $props();
 </script>
 
 <Child for={ChildKey.Card} as={ChildKey.CardFooter}>
-	{@render children?.()}
+	<div class={cleanClass('flex items-center p-4 pt-0', className)}>
+		{@render children?.()}
+	</div>
 </Child>

package/dist/components/Card/CardFooter.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 declare const CardFooter: import("svelte").Component<{
     children: Snippet;
+    class?: string;
 }, {}, "">;
 export default CardFooter;

package/dist/components/Code/Code.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Color, Size } from '../../types.js';
+	import type { Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		color?: Color | 'muted';
+		size?: Size;
+		variant?: 'filled';
+		children: Snippet;
+	};
+
+	const { size = 'medium', variant, color = 'secondary', children }: Props = $props();
+
+	const styles = tv({
+		base: 'font-monospace',
+		variants: {
+			textColor: {
+				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',
+			},
+
+			filled: {
+				true: 'rounded px-2 py-1',
+				false: '',
+			},
+
+			filledColor: {
+				false: '',
+				muted: 'bg-gray-600 dark:bg-gray-800 text-light',
+				primary: 'bg-primary text-light',
+				secondary: 'bg-dark text-light',
+				success: 'bg-success text-light',
+				danger: 'bg-danger text-light',
+				warning: 'bg-warning text-light',
+				info: 'bg-info text-dark',
+			},
+
+			size: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+		},
+	});
+</script>
+
+<code
+	class={styles({
+		filled: variant === 'filled',
+		filledColor: variant === 'filled' && color,
+		textColor: color,
+		size,
+	})}>{@render children()}</code
+>

package/dist/components/Code/Code.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Color, Size } from '../../types.js';
+import type { Snippet } from 'svelte';
+declare const Code: import("svelte").Component<{
+    color?: Color | "muted";
+    size?: Size;
+    variant?: "filled";
+    children: Snippet;
+}, {}, "">;
+export default Code;

package/dist/components/Form/Checkbox.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-	import { mdiCheck, mdiMinus } from '@mdi/js';
+	import { getFieldContext } from '../../common/context.svelte.js';
 	import Icon from '../Icon/Icon.svelte';
-	import { tv } from 'tailwind-variants';
 	import type { Color, Shape, Size } from '../../types.js';
-	import { cleanClass } from '../../utils.js';
+	import { cleanClass, generateId } from '../../utils.js';
+	import { mdiCheck, mdiMinus } from '@mdi/js';
+	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import { tv } from 'tailwind-variants';
 
 	type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & {
 		color?: Color;
@@ -22,8 +23,16 @@
 		...restProps
 	}: CheckboxProps = $props();
 
-	const container = tv({
-		base: 'ring-offset-background focus-visible:ring-ring peer box-content border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50 overflow-hidden',
+	const {
+		label,
+		readOnly = false,
+		required = false,
+		invalid = false,
+		disabled = false,
+	} = $derived(getFieldContext());
+
+	const containerStyles = tv({
+		base: 'border-2 ring-offset-background focus-visible:ring-ring peer box-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50 overflow-hidden',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',
@@ -32,7 +41,7 @@
 			},
 			color: {
 				primary: 'border-primary',
-				secondary: 'border-secondary',
+				secondary: 'border-dark',
 				success: 'border-success',
 				danger: 'border-danger',
 				warning: 'border-warning',
@@ -55,7 +64,7 @@
 		},
 	});
 
-	const icon = tv({
+	const iconStyles = tv({
 		variants: {
 			fullWidth: {
 				true: 'w-full',
@@ -70,24 +79,55 @@
 			},
 		},
 	});
+
+	const labelStyles = tv({
+		base: '',
+		variants: {
+			size: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+		},
+	});
+
+	const id = generateId();
+	const inputId = `input-${id}`;
+	const labelId = `label-${id}`;
 </script>
 
-<CheckboxPrimitive.Root
-	bind:ref
-	class={cleanClass(
-		container({ size, color, shape, roundedSize: shape === 'semi-round' ? size : undefined }),
-		className,
-	)}
-	bind:checked
-	{...restProps}
->
-	{#snippet children({ checked })}
-		<div class={cleanClass('flex items-center justify-center text-current')}>
-			{#if checked === true}
-				<Icon icon={mdiCheck} size="100%" class={cleanClass(icon({ color }))} />
-			{:else if checked === 'indeterminate'}
-				<Icon icon={mdiMinus} size="100%" class={cleanClass(icon({ color }))} />
-			{/if}
-		</div>
-	{/snippet}
-</CheckboxPrimitive.Root>
+<div class="flex flex-col gap-1">
+	{#if label}
+		<label id={labelId} for={inputId} class={labelStyles({ size })}>{label}</label>
+	{/if}
+
+	<CheckboxPrimitive.Root
+		bind:ref
+		class={cleanClass(
+			containerStyles({
+				size,
+				color: invalid ? 'danger' : color,
+				shape,
+				roundedSize: shape === 'semi-round' ? size : undefined,
+			}),
+			className,
+		)}
+		bind:checked
+		disabled={disabled || readOnly}
+		{required}
+		aria-readonly={disabled || readOnly}
+		{...restProps}
+	>
+		{#snippet children({ checked, indeterminate })}
+			<div class={cleanClass('flex items-center justify-center text-current')}>
+				{#if indeterminate}
+					<Icon icon={mdiMinus} size="100%" class={cleanClass(iconStyles({ color }))} />
+				{:else if checked}
+					<Icon icon={mdiCheck} size="100%" class={cleanClass(iconStyles({ color }))} />
+				{/if}
+			</div>
+		{/snippet}
+	</CheckboxPrimitive.Root>
+</div>

package/dist/components/Form/Checkbox.svelte.d.ts

@@ -1,8 +1,8 @@
-import { Checkbox as CheckboxPrimitive } from 'bits-ui';
 import type { Color, Shape, Size } from '../../types.js';
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
 declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children"> & {
     color?: Color;
     shape?: Shape;
     size?: Size;
-}, {}, "ref" | "checked">;
+}, {}, "checked" | "ref">;
 export default Checkbox;

package/dist/components/Form/Input.svelte

@@ -1,25 +1,18 @@
 <script lang="ts">
 	import { getFieldContext } from '../../common/context.svelte.js';
-	import type { Shape, Size } from '../../types.js';
+	import type { InputProps } from '../../types.js';
 	import { cleanClass, generateId } from '../../utils.js';
-	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { tv } from 'tailwind-variants';
 
-	type Props = {
-		class?: string;
-		value?: string;
-		size?: Size;
-		shape?: Shape;
-		inputSize?: HTMLInputAttributes['size'];
-	} & Omit<HTMLInputAttributes, 'size'>;
-
 	let {
+		containerRef = $bindable(null),
 		shape = 'semi-round',
 		size = 'medium',
 		class: className,
 		value = $bindable<string>(),
+		trailingIcon,
 		...restProps
-	}: Props = $props();
+	}: InputProps = $props();
 
 	const {
 		label,
@@ -43,7 +36,7 @@
 	});
 
 	const inputStyles = tv({
-		base: 'outline-none disabled:cursor-not-allowed bg-gray-200 dark:bg-gray-600 disabled:bg-gray-300 disabled:text-gray-200 dark:disabled:bg-gray-800 aria-readonly:text-dark/50 dark:aria-readonly:text-dark/75',
+		base: 'w-full outline-none disabled:cursor-not-allowed bg-gray-200 dark:bg-gray-600 disabled:bg-gray-300 disabled:text-gray-200 dark:disabled:bg-gray-800 aria-readonly:text-dark/50 dark:aria-readonly:text-dark/75',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',
@@ -80,30 +73,45 @@
 	const labelId = `label-${id}`;
 </script>
 
-<div class="flex flex-col gap-1">
+<div class="flex flex-col gap-1" bind:this={containerRef}>
 	{#if label}
 		<label id={labelId} for={inputId} class={labelStyles({ size })}>{label}</label>
 	{/if}
-	<input
-		id={label && inputId}
-		aria-labelledby={label && labelId}
-		{required}
-		aria-required={required}
-		{disabled}
-		aria-disabled={disabled}
-		readonly={readOnly}
-		aria-readonly={readOnly}
-		class={cleanClass(
-			inputStyles({
-				shape,
-				textSize: size,
-				padding: shape === 'round' ? 'round' : 'base',
-				roundedSize: shape === 'semi-round' ? size : undefined,
-				invalid,
-			}),
-			className,
-		)}
-		bind:value
-		{...restProps}
-	/>
+
+	<div class="relative">
+		<input
+			id={label && inputId}
+			aria-labelledby={label && labelId}
+			{required}
+			aria-required={required}
+			{disabled}
+			aria-disabled={disabled}
+			readonly={readOnly}
+			aria-readonly={readOnly}
+			class={cleanClass(
+				inputStyles({
+					shape,
+					textSize: size,
+					padding: shape === 'round' ? 'round' : 'base',
+					roundedSize: shape === 'semi-round' ? size : undefined,
+					invalid,
+				}),
+				trailingIcon && '!pr-10',
+				className,
+			)}
+			bind:value
+			{...restProps}
+		/>
+		{#if trailingIcon}
+			<div tabindex="-1" class={cleanClass('absolute inset-y-0 end-0 flex items-center')}>
+				{@render trailingIcon()}
+			</div>
+		{/if}
+	</div>
 </div>
+
+<style>
+	input::-ms-reveal {
+		display: none;
+	}
+</style>

package/dist/components/Form/Input.svelte.d.ts

@@ -1,10 +1,3 @@
-import type { Shape, Size } from '../../types.js';
-import type { HTMLInputAttributes } from 'svelte/elements';
-declare const Input: import("svelte").Component<{
-    class?: string;
-    value?: string;
-    size?: Size;
-    shape?: Shape;
-    inputSize?: HTMLInputAttributes["size"];
-} & Omit<HTMLInputAttributes, "size">, {}, "value">;
+import type { InputProps } from '../../types.js';
+declare const Input: import("svelte").Component<InputProps, {}, "value" | "containerRef">;
 export default Input;

package/dist/components/Form/PasswordInput.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import Input from './Input.svelte';
+	import IconButton from '../IconButton/IconButton.svelte';
+	import type { PasswordInputProps } from '../../types.js';
+	import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
+
+	let {
+		value = $bindable<string>(),
+		showLabel = 'Show password',
+		hideLabel = 'Hide password',
+		isVisible = $bindable<boolean>(false),
+		color = 'secondary',
+		...props
+	}: PasswordInputProps = $props();
+</script>
+
+<Input bind:value type={isVisible ? 'text' : 'password'} {color} {...props}>
+	{#snippet trailingIcon()}
+		{#if value?.length > 0}
+			<IconButton
+				variant="ghost"
+				shape="round"
+				color="secondary"
+				class="m-1"
+				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
+				onclick={() => (isVisible = !isVisible)}
+				title={isVisible ? hideLabel : showLabel}
+			></IconButton>
+		{/if}
+	{/snippet}
+</Input>

package/dist/components/Form/PasswordInput.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { PasswordInputProps } from '../../types.js';
+declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "value" | "isVisible">;
+export default PasswordInput;

package/dist/components/FormatBytes/FormatBytes.svelte

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

package/dist/components/FormatBytes/FormatBytes.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const FormatBytes: import("svelte").Component<{
+    bytes: number;
+    precision?: number;
+    variant?: "short" | "narrow";
+}, {}, "">;
+export default FormatBytes;

package/dist/components/Heading/Heading.svelte

@@ -6,7 +6,7 @@
 
 	type Props = {
 		size: HeadingSize;
-		color?: Color;
+		color?: Color | 'muted';
 		class?: string;
 
 		children: Snippet;
@@ -27,6 +27,7 @@
 		base: 'font-bold leading-none tracking-tight',
 		variants: {
 			color: {
+				muted: 'text-gray-600 dark:text-gray-400',
 				primary: 'text-primary',
 				secondary: 'text-dark',
 				success: 'text-success',

package/dist/components/Heading/Heading.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Color, HeadingSize } from '../../types.js';
 import type { Snippet } from 'svelte';
 declare const Heading: import("svelte").Component<{
     size: HeadingSize;
-    color?: Color;
+    color?: Color | "muted";
     class?: string;
     children: Snippet;
 }, {}, "">;

package/dist/components/LoadingSpinner/LoadingSpinner.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Color, Size } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import { tv } from 'tailwind-variants';
+
+	interface Props {
+		size?: Size;
+		color?: Color;
+		class?: string;
+	}
+
+	let { size = 'medium', color = 'primary', class: className }: Props = $props();
+
+	const styles = tv({
+		base: 'animate-spin fill-primary text-gray-400 dark:text-gray-600',
+		variants: {
+			size: {
+				tiny: 'h-3',
+				small: 'h-4',
+				medium: 'h-5',
+				large: 'h-6',
+				giant: 'h-12',
+			},
+			color: {
+				primary: 'fill-primary',
+				secondary: 'fill-dark',
+				success: 'fill-success',
+				danger: 'fill-danger',
+				warning: 'fill-warning',
+				info: 'fill-info',
+			},
+		},
+	});
+</script>
+
+<div>
+	<svg
+		role="status"
+		class={cleanClass(styles({ color, size }), className)}
+		viewBox="0 0 100 101"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		data-testid="loading-spinner"
+	>
+		<path
+			d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+			fill="currentFill"
+		/>
+	</svg>
+</div>

package/dist/components/LoadingSpinner/LoadingSpinner.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Color, Size } from '../../types.js';
+declare const LoadingSpinner: import("svelte").Component<{
+    size?: Size;
+    color?: Color;
+    class?: string;
+}, {}, "">;
+export default LoadingSpinner;

package/dist/components/Logo/Logo.svelte

@@ -1,30 +1,30 @@
 <script lang="ts">
-	import icon from '../../assets/immich-logo.svg';
 	import inlineDark from '../../assets/immich-logo-inline-dark.svg';
 	import inlineLight from '../../assets/immich-logo-inline-light.svg';
 	import stackedDark from '../../assets/immich-logo-stacked-dark.svg';
 	import stackedLight from '../../assets/immich-logo-stacked-light.svg';
-	import type { Size } from '../../types.js';
+	import icon from '../../assets/immich-logo.svg';
+	import { theme } from '../../services/theme.svelte.js';
+	import { Theme, type Size } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
 		size?: Size | 'landing';
-		theme?: 'dark' | 'light';
 		variant?: 'stacked' | 'inline' | 'logo' | 'icon';
 		class?: string;
 	};
 
-	const { theme = 'light', variant = 'logo', size = 'medium', class: className }: Props = $props();
+	const { variant = 'logo', size = 'medium', class: className }: Props = $props();
 
-	const getUrl = ({ theme, variant }: Required<Pick<Props, 'theme' | 'variant'>>): string => {
+	const getUrl = (variant: Props['variant']): string => {
 		switch (variant) {
 			case 'stacked': {
-				return theme === 'light' ? stackedLight : stackedDark;
+				return theme.value === Theme.Light ? stackedLight : stackedDark;
 			}
 
 			case 'inline': {
-				return theme === 'light' ? inlineLight : inlineDark;
+				return theme.value === Theme.Light ? inlineLight : inlineDark;
 			}
 
 			default: {
@@ -53,7 +53,7 @@
 		},
 	});
 
-	const src = $derived(getUrl({ theme, variant }));
+	const src = $derived(getUrl(variant));
 </script>
 
 <img {src} class={cleanClass(styles({ size, variant }), className)} alt="Immich logo" />

package/dist/components/Logo/Logo.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Size } from '../../types.js';
+import { type Size } from '../../types.js';
 declare const Logo: import("svelte").Component<{
     size?: Size | "landing";
-    theme?: "dark" | "light";
     variant?: "stacked" | "inline" | "logo" | "icon";
     class?: string;
 }, {}, "">;

package/dist/components/MultiSelect/MultiSelect.svelte

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

package/dist/components/MultiSelect/MultiSelect.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { MultiSelectProps, SelectItem } from '../../types.js';
+declare const MultiSelect: import("svelte").Component<MultiSelectProps<SelectItem>, {}, "value">;
+export default MultiSelect;

package/dist/components/Navbar/NavbarGroup.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	type Props = {
+		title: string;
+	};
+
+	let { title }: Props = $props();
+</script>
+
+<div class="text-xs transition-all duration-200">
+	<p class="hidden px-6 py-4 uppercase group-hover:sm:block md:block">{title}</p>
+	<hr class="mx-4 mb-[31px] mt-8 block group-hover:sm:hidden md:hidden" />
+</div>

package/dist/components/Navbar/NavbarGroup.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const NavbarGroup: import("svelte").Component<{
+    title: string;
+}, {}, "">;
+export default NavbarGroup;

package/dist/components/Navbar/NavbarItem.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import Icon from '../Icon/Icon.svelte';
+	import type { IconProps } from '../../types.js';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		title: string;
+		active?: boolean;
+		href: string;
+	} & IconProps;
+
+	let { href, title, active = false, ...iconProps }: Props = $props();
+
+	const styles = tv({
+		base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 pl-5 group-hover:sm:px-5 md:px-5',
+		variants: {
+			active: {
+				true: 'bg-primary/10 text-primary',
+				false: '',
+			},
+		},
+	});
+</script>
+
+<a {href} draggable="false" aria-current={active ? 'page' : undefined} class={styles({ active })}>
+	<div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
+		<Icon size="1.5em" class="shrink-0" aria-hidden={true} {...iconProps} />
+		<span class="text-sm font-medium">{title}</span>
+	</div>
+</a>

package/dist/components/Navbar/NavbarItem.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps } from '../../types.js';
+declare const NavbarItem: import("svelte").Component<{
+    title: string;
+    active?: boolean;
+    href: string;
+} & IconProps, {}, "">;
+export default NavbarItem;