@immich/ui 0.7.0 → 0.9.0

package/dist/components/CloseButton/CloseButton.svelte

@@ -3,7 +3,7 @@
 	import type { CloseButtonProps } from '../../types.js';
 	import { mdiClose } from '@mdi/js';
 
-	const { size = 'medium', variant = 'ghost' }: CloseButtonProps = $props();
+	const { size = 'medium', variant = 'ghost', ...restProps }: CloseButtonProps = $props();
 </script>
 
-<IconButton icon={mdiClose} color="secondary" shape="round" {variant} {size} />
+<IconButton {...restProps} icon={mdiClose} shape="round" {variant} {size} color="secondary" />

package/dist/components/Code/Code.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Size, TextColor } from '../../types.js';
+	import type { Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		color?: TextColor;
+		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 { Size, TextColor } from '../../types.js';
+import type { Snippet } from 'svelte';
+declare const Code: import("svelte").Component<{
+    color?: TextColor;
+    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, indeterminate })}
-		<div class={cleanClass('flex items-center justify-center text-current')}>
-			{#if indeterminate}
-				<Icon icon={mdiMinus} size="100%" class={cleanClass(icon({ color }))} />
-			{:else if checked}
-				<Icon icon={mdiCheck} 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,5 +1,5 @@
-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;

package/dist/components/Form/HelperText.svelte

@@ -2,17 +2,17 @@
 	import Text from '../Text/Text.svelte';
 	import { ChildKey } from '../../constants.js';
 	import Child from '../../internal/Child.svelte';
-	import type { Color } from '../../types.js';
+	import type { TextColor } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
-		color?: Color;
+		color?: TextColor;
 		class?: string;
 		children?: Snippet;
 	};
 
-	let { class: className, children, color }: Props = $props();
+	let { class: className, children, color = 'muted' }: Props = $props();
 </script>
 
 <Child for={ChildKey.Field} as={ChildKey.HelperText}>

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

@@ -1,7 +1,7 @@
-import type { Color } from '../../types.js';
+import type { TextColor } from '../../types.js';
 import type { Snippet } from 'svelte';
 declare const HelperText: import("svelte").Component<{
-    color?: Color;
+    color?: TextColor;
     class?: string;
     children?: Snippet;
 }, {}, "">;

package/dist/components/Form/Input.svelte

@@ -5,6 +5,7 @@
 	import { tv } from 'tailwind-variants';
 
 	let {
+		containerRef = $bindable(null),
 		shape = 'semi-round',
 		size = 'medium',
 		class: className,
@@ -72,7 +73,7 @@
 	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}

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

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

package/dist/components/Form/PasswordInput.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { IconButton, Input, type PasswordInputProps } from '../../index.js';
+	import Input from './Input.svelte';
+	import IconButton from '../IconButton/IconButton.svelte';
+	import type { PasswordInputProps } from '../../types.js';
 	import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
 
 	let {

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

@@ -1,3 +1,3 @@
-import { type PasswordInputProps } from '../../index.js';
+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

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { Color, HeadingSize } from '../../types.js';
+	import type { HeadingColor, HeadingSize } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
 		size: HeadingSize;
-		color?: Color;
+		color?: HeadingColor;
 		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

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

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;

package/dist/components/Scrollable/Scrollable.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		class?: string;
+		children?: Snippet;
+	};
+
+	const { class: className, children }: Props = $props();
+</script>
+
+<div class={cleanClass('immich-scrollbar h-full w-full overflow-auto', className)}>
+	{@render children?.()}
+</div>
+
+<style>
+	/* width */
+	.immich-scrollbar::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+
+	/* Track */
+	.immich-scrollbar::-webkit-scrollbar-track {
+		background: #f1f1f1;
+		border-radius: 16px;
+	}
+
+	/* Handle */
+	.immich-scrollbar::-webkit-scrollbar-thumb {
+		background: rgba(85, 86, 87, 0.408);
+		border-radius: 16px;
+	}
+
+	/* Handle on hover */
+	.immich-scrollbar::-webkit-scrollbar-thumb:hover {
+		background: #4250afad;
+		border-radius: 16px;
+	}
+</style>

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

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

package/dist/components/Select/Select.svelte

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

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

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

package/dist/components/Switch/Switch.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { getFieldContext } from '../../common/context.svelte.js';
+	import type { Color } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		checked?: boolean;
+		color?: Color;
+		disabled?: boolean;
+		class?: string;
+		onToggle?: ((checked: boolean) => void) | undefined;
+	} & HTMLInputAttributes;
+
+	let {
+		checked = $bindable(false),
+		class: className,
+		color = 'primary',
+		onToggle = undefined,
+		...restProps
+	}: Props = $props();
+
+	const {
+		label,
+		readOnly = false,
+		required = false,
+		disabled = false,
+	} = $derived(getFieldContext());
+
+	const enabled = $derived(checked && !disabled);
+
+	const handleToggle = (event: Event) => onToggle?.((event.target as HTMLInputElement).checked);
+
+	const wrapper = tv({
+		base: 'relative flex flex-col justify-center',
+		variants: {
+			disabled: {
+				true: 'cursor-not-allowed',
+				false: 'cursor-pointer',
+			},
+		},
+	});
+
+	const bar = tv({
+		base: 'w-12 h-3 my-2 rounded-full border border-transparent',
+		variants: {
+			fillColor: {
+				default: 'bg-gray-400',
+				primary: 'bg-primary/50',
+				secondary: 'bg-dark/50',
+				success: 'bg-success/50',
+				danger: 'bg-danger/50',
+				warning: 'bg-warning/50',
+				info: 'bg-info/50',
+			},
+		},
+	});
+
+	const dot = tv({
+		base: 'absolute transition-colors h-6 w-6 rounded-full transition-transform duration-[400ms]',
+		variants: {
+			checked: {
+				true: 'translate-x-6',
+				false: '',
+			},
+			fillColor: {
+				default: 'bg-gray-600',
+				primary: 'bg-primary',
+				secondary: 'bg-dark',
+				success: 'bg-success',
+				danger: 'bg-danger',
+				warning: 'bg-warning',
+				info: 'bg-info',
+			},
+		},
+	});
+</script>
+
+<label class={cleanClass(className)}>
+	{label}
+	<span class={wrapper({ disabled })}>
+		<input
+			class="hidden"
+			type="checkbox"
+			bind:checked
+			onclick={handleToggle}
+			{required}
+			aria-required={required}
+			{disabled}
+			aria-disabled={disabled}
+			readonly={readOnly}
+			aria-readonly={readOnly}
+			{...restProps}
+		/>
+		<span class={bar({ fillColor: enabled ? color : 'default' })}> </span>
+		<span class={dot({ checked: enabled, fillColor: enabled ? color : 'default' })}></span>
+	</span>
+</label>