@immich/ui 0.15.0 → 0.16.0

package/dist/common/context.svelte.d.ts

@@ -1,4 +1,11 @@
 import type { FieldContext } from '../types.js';
 export declare const setFieldContext: (field: FieldContext) => FieldContext;
 export declare const hasFieldContext: () => boolean;
-export declare const getFieldContext: () => FieldContext;
+export declare const getFieldContext: () => {
+    label: string | undefined;
+    color: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "muted";
+    invalid: boolean;
+    readOnly: boolean;
+    required: boolean;
+    disabled: boolean;
+};

package/dist/common/context.svelte.js

@@ -3,4 +3,7 @@ import { getContext, hasContext, setContext } from 'svelte';
 const fieldKey = Symbol(withPrefix('field'));
 export const setFieldContext = (field) => setContext(fieldKey, field);
 export const hasFieldContext = () => hasContext(fieldKey);
-export const getFieldContext = () => (getContext(fieldKey) || {});
+export const getFieldContext = () => {
+    const { label, color = 'secondary', invalid = false, readOnly = false, required = false, disabled = false, } = getContext(fieldKey) || {};
+    return { label, color, invalid, readOnly, required, disabled };
+};

package/dist/components/Alert/Alert.svelte

@@ -10,7 +10,7 @@
 		mdiAlertOutline,
 		mdiCheckCircleOutline,
 		mdiCloseCircleOutline,
-		mdiInformationOutline,
+		mdiInformationVariantCircleOutline,
 	} from '@mdi/js';
 	import type { Snippet } from 'svelte';
 
@@ -73,7 +73,9 @@
 	};
 
 	const icon = $derived(
-		iconOverride === false ? undefined : iconOverride || (icons[color] ?? mdiInformationOutline),
+		iconOverride === false
+			? undefined
+			: iconOverride || (icons[color] ?? mdiInformationVariantCircleOutline),
 	);
 </script>
 
@@ -88,7 +90,7 @@
 						</div>
 					{/if}
 
-					<div class="flex flex-col gap-2">
+					<div class="flex flex-col gap-2 self-center">
 						{#if title}
 							<Text {size} fontWeight={children ? 'bold' : undefined}>{title}</Text>
 						{/if}

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

@@ -1,6 +1,6 @@
 import type { Color, Size } from '../../types.js';
 import type { Snippet } from 'svelte';
-declare const Alert: import("svelte").Component<{
+type Props = {
     color?: Color;
     size?: Size;
     icon?: string | false;
@@ -11,5 +11,7 @@ declare const Alert: import("svelte").Component<{
     controlled?: boolean;
     onClose?: () => void;
     children?: Snippet;
-}, {}, "">;
+};
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
 export default Alert;

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const AppShell: import("svelte").Component<{
+type Props = {
     class?: string;
     children?: Snippet;
-}, {}, "">;
+};
+declare const AppShell: import("svelte").Component<Props, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;

package/dist/components/AppShell/AppShellHeader.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { Snippet } from 'svelte';
-declare const AppShellHeader: import("svelte").Component<{
+type Props = {
     children: Snippet;
-}, {}, "">;
+};
+declare const AppShellHeader: import("svelte").Component<Props, {}, "">;
+type AppShellHeader = ReturnType<typeof AppShellHeader>;
 export default AppShellHeader;

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -34,6 +34,7 @@
 		color={hidden ? 'primary' : 'secondary'}
 		variant="filled"
 		class="absolute bottom-2 right-4 m-2 opacity-100 md:hidden"
+		aria-label="Menu"
 	/>
 	<Scrollable
 		class={cleanClass(

package/dist/components/AppShell/AppShellSidebar.svelte.d.ts

@@ -1,7 +1,9 @@
 import type { Snippet } from 'svelte';
-declare const AppShellSidebar: import("svelte").Component<{
+type Props = {
     class?: string;
     children: Snippet;
     noBorder?: boolean;
-}, {}, "">;
+};
+declare const AppShellSidebar: import("svelte").Component<Props, {}, "">;
+type AppShellSidebar = ReturnType<typeof AppShellSidebar>;
 export default AppShellSidebar;

package/dist/components/AppShell/PageLayout.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
-declare const PageLayout: import("svelte").Component<{
+interface Props {
     title?: string | undefined;
     description?: string | undefined;
     scrollbar?: boolean;
     buttons?: Snippet;
     children?: Snippet;
-}, {}, "">;
+}
+declare const PageLayout: import("svelte").Component<Props, {}, "">;
+type PageLayout = ReturnType<typeof PageLayout>;
 export default PageLayout;

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

@@ -1,7 +1,9 @@
 import type { Size } from '../../types.js';
-declare const Avatar: import("svelte").Component<{
+type Props = {
     size?: Size;
-    color?: "primary" | "pink" | "red" | "yellow" | "blue" | "green" | "purple" | "orange" | "gray" | "amber";
+    color?: 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green' | 'purple' | 'orange' | 'gray' | 'amber';
     name: string;
-}, {}, "">;
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

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

@@ -1,4 +1,5 @@
 import Button from '../../internal/Button.svelte';
 import type { ButtonProps } from '../../types.js';
 declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/Card/Card.svelte

@@ -114,6 +114,7 @@
 					variant="ghost"
 					shape="round"
 					size="large"
+					aria-label="Expand"
 				/>
 			</div>
 		</button>

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

@@ -1,11 +1,13 @@
 import type { Color } from '../../types.js';
 import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-declare const Card: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
     color?: Color;
-    shape?: "round" | "rectangle";
+    shape?: 'round' | 'rectangle';
     expanded?: boolean;
     expandable?: boolean;
     children: Snippet;
-}, {}, "expanded">;
+};
+declare const Card: import("svelte").Component<Props, {}, "expanded">;
+type Card = ReturnType<typeof Card>;
 export default Card;

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const CardBody: import("svelte").Component<{
+type Props = {
     class?: string;
     children: Snippet;
-}, {}, "">;
+};
+declare const CardBody: import("svelte").Component<Props, {}, "">;
+type CardBody = ReturnType<typeof CardBody>;
 export default CardBody;

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const CardDescription: import("svelte").Component<{
+type Props = {
     class?: string;
     children: Snippet;
-}, {}, "">;
+};
+declare const CardDescription: import("svelte").Component<Props, {}, "">;
+type CardDescription = ReturnType<typeof CardDescription>;
 export default CardDescription;

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

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

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const CardHeader: import("svelte").Component<{
+type Props = {
     class?: string;
     children: Snippet;
-}, {}, "">;
+};
+declare const CardHeader: import("svelte").Component<Props, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
 export default CardHeader;

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

@@ -1,8 +1,10 @@
 import type { HeadingSize } from '../../types.js';
 import type { Snippet } from 'svelte';
-declare const CardTitle: import("svelte").Component<{
+type Props = {
     class?: string;
     size?: HeadingSize;
     children: Snippet;
-}, {}, "">;
+};
+declare const CardTitle: import("svelte").Component<Props, {}, "">;
+type CardTitle = ReturnType<typeof CardTitle>;
 export default CardTitle;

package/dist/components/CloseButton/CloseButton.svelte

@@ -19,5 +19,5 @@
 	{variant}
 	{size}
 	color="secondary"
-	title={t('close', translations)}
+	aria-label={t('close', translations)}
 />

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

@@ -1,3 +1,4 @@
 import type { CloseButtonProps } from '../../types.js';
 declare const CloseButton: import("svelte").Component<CloseButtonProps, {}, "">;
+type CloseButton = ReturnType<typeof CloseButton>;
 export default CloseButton;

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

@@ -1,11 +1,13 @@
 import type { Size, TextColor } from '../../types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-declare const Code: import("svelte").Component<{
+type Props = {
     color?: TextColor;
     size?: Size;
-    variant?: "filled";
+    variant?: 'filled';
     class?: string;
     children: Snippet;
-} & HTMLAttributes<HTMLElement>, {}, "">;
+} & HTMLAttributes<HTMLElement>;
+declare const Code: import("svelte").Component<Props, {}, "">;
+type Code = ReturnType<typeof Code>;
 export default Code;

package/dist/components/Container/Container.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Size } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		size?: Size | 'full';
+		class?: string;
+		center?: boolean;
+		children?: Snippet;
+	};
+
+	const { center, class: className, size = 'full', children }: Props = $props();
+
+	const styles = tv({
+		base: '',
+		variants: {
+			size: {
+				tiny: 'max-w-lg',
+				small: 'max-w-screen-sm',
+				medium: 'max-w-screen-md',
+				large: 'max-w-screen-lg',
+				giant: 'max-w-screen-xl',
+				full: 'w-full',
+			},
+		},
+	});
+</script>
+
+<div class={cleanClass(styles({ size }), center && 'mx-auto w-full', className)}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Size } from '../../types.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    size?: Size | 'full';
+    class?: string;
+    center?: boolean;
+    children?: Snippet;
+};
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/components/Form/Checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getFieldContext } from '../../common/context.svelte.js';
 	import Icon from '../Icon/Icon.svelte';
+	import Label from '../Label/Label.svelte';
 	import type { Color, Shape, Size } from '../../types.js';
 	import { cleanClass, generateId } from '../../utils.js';
 	import { mdiCheck, mdiMinus } from '@mdi/js';
@@ -23,13 +24,8 @@
 		...restProps
 	}: CheckboxProps = $props();
 
-	const {
-		label,
-		readOnly = false,
-		required = false,
-		invalid = false,
-		disabled = false,
-	} = $derived(getFieldContext());
+	const { readOnly, required, invalid, disabled, label, ...labelProps } =
+		$derived(getFieldContext());
 
 	const containerStyles = tv({
 		base: 'ring-offset-background focus-visible:ring-ring peer box-content overflow-hidden border-2 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',
@@ -80,19 +76,6 @@
 		},
 	});
 
-	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}`;
@@ -100,7 +83,7 @@
 
 <div class="flex flex-col gap-1">
 	{#if label}
-		<label id={labelId} for={inputId} class={labelStyles({ size })}>{label}</label>
+		<Label id={labelId} for={inputId} {label} {...labelProps} />
 	{/if}
 
 	<CheckboxPrimitive.Root

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

@@ -1,8 +1,10 @@
 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"> & {
+import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & {
     color?: Color;
     shape?: Shape;
     size?: Size;
-}, {}, "checked" | "ref">;
+};
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked" | "ref">;
+type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/Form/Field.svelte

@@ -7,10 +7,11 @@
 	import { type Snippet } from 'svelte';
 
 	type Props = FieldContext & {
+		class?: string;
 		children: Snippet;
 	};
 
-	const { children, ...props }: Props = $props();
+	const { class: className, children, ...props }: Props = $props();
 
 	const state = $state(props);
 
@@ -20,7 +21,7 @@
 	const helperTextChildren = $derived(getChildSnippet(ChildKey.HelperText));
 </script>
 
-<div class="w-full">
+<div class={cleanClass('w-full', className)}>
 	{@render children()}
 	{#if helperTextChildren}
 		<div class={cleanClass('pt-1', helperTextChildren.class)}>

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

@@ -1,6 +1,9 @@
 import type { FieldContext } from '../../types.js';
 import { type Snippet } from 'svelte';
-declare const Field: import("svelte").Component<FieldContext & {
+type Props = FieldContext & {
+    class?: string;
     children: Snippet;
-}, {}, "">;
+};
+declare const Field: import("svelte").Component<Props, {}, "">;
+type Field = ReturnType<typeof Field>;
 export default Field;

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

@@ -1,8 +1,10 @@
 import type { TextColor } from '../../types.js';
 import type { Snippet } from 'svelte';
-declare const HelperText: import("svelte").Component<{
+type Props = {
     color?: TextColor;
     class?: string;
     children?: Snippet;
-}, {}, "">;
+};
+declare const HelperText: import("svelte").Component<Props, {}, "">;
+type HelperText = ReturnType<typeof HelperText>;
 export default HelperText;

package/dist/components/Form/Input.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { getFieldContext } from '../../common/context.svelte.js';
+	import Label from '../Label/Label.svelte';
 	import type { InputProps } from '../../types.js';
 	import { cleanClass, generateId } from '../../utils.js';
 	import { tv } from 'tailwind-variants';
@@ -14,26 +15,8 @@
 		...restProps
 	}: InputProps = $props();
 
-	const {
-		label,
-		readOnly = false,
-		required = false,
-		invalid = false,
-		disabled = false,
-	} = $derived(getFieldContext());
-
-	const labelStyles = tv({
-		base: '',
-		variants: {
-			size: {
-				tiny: 'text-xs',
-				small: 'text-sm',
-				medium: 'text-md',
-				large: 'text-lg',
-				giant: 'text-xl',
-			},
-		},
-	});
+	const { label, readOnly, required, invalid, disabled, ...labelProps } =
+		$derived(getFieldContext());
 
 	const inputStyles = tv({
 		base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-200 aria-readonly:text-dark/50 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:aria-readonly:text-dark/75',
@@ -54,6 +37,14 @@
 				large: 'rounded-2xl',
 				giant: 'rounded-2xl',
 			},
+			// match with Button `iconSize` variants
+			paddingRight: {
+				tiny: 'pr-6',
+				small: 'pr-8',
+				medium: 'pr-10',
+				large: 'pr-12',
+				giant: 'pr-14',
+			},
 			textSize: {
 				tiny: 'text-xs',
 				small: 'text-sm',
@@ -75,12 +66,12 @@
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>
 	{#if label}
-		<label id={labelId} for={inputId} class={labelStyles({ size })}>{label}</label>
+		<Label id={labelId} for={inputId} {label} {...labelProps} />
 	{/if}
 
 	<div class="relative mt-1.5 w-full">
 		<input
-			id={label && inputId}
+			id={inputId}
 			aria-labelledby={label && labelId}
 			{required}
 			aria-required={required}
@@ -93,10 +84,10 @@
 					shape,
 					textSize: size,
 					padding: shape === 'round' ? 'round' : 'base',
+					paddingRight: trailingIcon ? size : undefined,
 					roundedSize: shape === 'semi-round' ? size : undefined,
 					invalid,
 				}),
-				trailingIcon && '!pr-10',
 				className,
 			)}
 			bind:value

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

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

package/dist/components/Form/PasswordInput.svelte

@@ -10,22 +10,25 @@
 		translations,
 		isVisible = $bindable<boolean>(false),
 		color = 'secondary',
+		size,
 		...props
 	}: PasswordInputProps = $props();
 </script>
 
-<Input bind:value type={isVisible ? 'text' : 'password'} {color} {...props}>
+<Input bind:value {size} type={isVisible ? 'text' : 'password'} {color} {...props}>
 	{#snippet trailingIcon()}
 		{#if value?.length > 0}
 			<IconButton
 				variant="ghost"
 				shape="round"
 				color="secondary"
-				class="m-1"
+				{size}
+				class="mr-1"
 				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
 				onclick={() => (isVisible = !isVisible)}
 				title={isVisible ? t('hidePassword', translations) : t('showPassword', translations)}
-			></IconButton>
+				aria-label={t('showPassword', translations)}
+			/>
 		{/if}
 	{/snippet}
 </Input>

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

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

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

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

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

@@ -1,10 +1,12 @@
 import type { HeadingColor, HeadingSize } from '../../types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-declare const Heading: import("svelte").Component<{
+type Props = {
     size: HeadingSize;
     color?: HeadingColor;
     class?: string;
     children: Snippet;
-} & HTMLAttributes<HTMLHeadingElement>, {}, "">;
+} & HTMLAttributes<HTMLHeadingElement>;
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
 export default Heading;

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

@@ -1,4 +1,6 @@
 import type { IconProps } from '../../types.js';
 import type { HTMLAttributes } from 'svelte/elements';
-declare const Icon: import("svelte").Component<IconProps & HTMLAttributes<EventTarget>, {}, "">;
+type $$ComponentProps = IconProps & HTMLAttributes<EventTarget>;
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/components/IconButton/IconButton.svelte

@@ -3,9 +3,18 @@
 	import Icon from '../Icon/Icon.svelte';
 	import type { IconButtonProps } from '../../types.js';
 
-	const { icon, flipped, flopped, ...buttonProps }: IconButtonProps = $props();
+	const {
+		icon,
+		flipped,
+		flopped,
+		title,
+		'aria-label': ariaLabel,
+		...buttonProps
+	}: IconButtonProps = $props();
+
+	const buttonTitle = title || ariaLabel;
 </script>
 
-<Button icon {...buttonProps}>
-	<Icon {icon} {flipped} {flopped} size="45%"></Icon>
+<Button icon {...buttonProps} title={buttonTitle} aria-label={ariaLabel}>
+	<Icon {icon} {flipped} {flopped} size="45%" aria-hidden />
 </Button>

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

@@ -1,3 +1,4 @@
 import type { IconButtonProps } from '../../types.js';
 declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
 export default IconButton;

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

@@ -1,10 +1,12 @@
 import type { Color, Size } from '../../types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-declare const Kbd: import("svelte").Component<{
+type Props = {
     size?: Size;
     color?: Color;
     class?: string;
     children?: Snippet;
-} & HTMLAttributes<HTMLElement>, {}, "">;
+} & HTMLAttributes<HTMLElement>;
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
 export default Kbd;