@immich/ui 0.17.0 → 0.17.2

package/dist/components/Form/Input.svelte

@@ -69,7 +69,7 @@
 		<Label id={labelId} for={inputId} {label} {...labelProps} />
 	{/if}
 
-	<div class="relative mt-1.5 w-full">
+	<div class={cleanClass('relative w-full', label && 'mt-1.5')}>
 		<input
 			id={inputId}
 			aria-labelledby={label && labelId}

package/dist/components/IconButton/IconButton.svelte

@@ -16,5 +16,5 @@
 </script>
 
 <Button icon {...buttonProps} title={buttonTitle} aria-label={ariaLabel}>
-	<Icon {icon} {flipped} {flopped} size="45%" aria-hidden />
+	<Icon {icon} {flipped} {flopped} size="60%" aria-hidden />
 </Button>

package/dist/components/Switch/Switch.svelte

@@ -3,7 +3,7 @@
 	import Label from '../Label/Label.svelte';
 	import type { Color } from '../../types.js';
 	import { cleanClass, generateId } from '../../utils.js';
-	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { Switch, type WithoutChildrenOrChild } from 'bits-ui';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
@@ -11,16 +11,14 @@
 		color?: Color;
 		disabled?: boolean;
 		class?: string;
-		onToggle?: ((checked: boolean) => void) | undefined;
-		inputSize?: HTMLInputAttributes['size'];
-	} & Omit<HTMLInputAttributes, 'size'>;
+	} & WithoutChildrenOrChild<Switch.RootProps>;
 
 	let {
+		id = generateId(),
 		checked = $bindable(false),
-		class: className,
+		ref = $bindable(null),
 		color = 'primary',
-		onToggle = undefined,
-		inputSize,
+		class: className,
 		...restProps
 	}: Props = $props();
 
@@ -28,8 +26,6 @@
 
 	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: {
@@ -45,7 +41,7 @@
 		variants: {
 			fillColor: {
 				default: 'bg-gray-300 dark:bg-gray-400',
-				primary: 'bg-primary/60',
+				primary: 'bg-primary',
 				secondary: 'bg-dark/50',
 				success: 'bg-success/50',
 				danger: 'bg-danger/50',
@@ -64,7 +60,7 @@
 			},
 			fillColor: {
 				default: 'bg-gray-400 dark:bg-gray-500',
-				primary: 'bg-primary',
+				primary: 'bg-[#4250af]',
 				secondary: 'bg-dark',
 				success: 'bg-success',
 				danger: 'bg-danger',
@@ -74,34 +70,32 @@
 		},
 	});
 
-	const id = generateId();
 	const inputId = `input-${id}`;
 	const labelId = `label-${id}`;
 </script>
 
-<div class="flex w-full justify-between gap-1">
-	{#if label}
-		<Label id={labelId} for={inputId} {label} {...labelProps} />
-	{/if}
-
-	<span class={cleanClass(wrapper({ disabled }), className)}>
-		<input
-			id={inputId}
-			aria-labelledby={label && labelId}
-			class="hidden"
-			type="checkbox"
-			bind:checked
-			onclick={handleToggle}
-			{required}
-			aria-required={required}
-			{disabled}
-			aria-disabled={disabled}
-			readonly={readOnly}
-			aria-readonly={readOnly}
-			size={inputSize}
-			{...restProps}
-		/>
-		<span class={bar({ fillColor: enabled ? color : 'default' })}> </span>
-		<span class={dot({ checked: enabled, fillColor: enabled ? color : 'default' })}></span>
-	</span>
-</div>
+<Switch.Root
+	bind:checked
+	bind:ref
+	id={inputId}
+	{disabled}
+	{required}
+	class={cleanClass(label && 'w-full', className)}
+	aria-readonly={readOnly}
+	aria-labelledby={labelId}
+	{...restProps}
+>
+	<Switch.Thumb>
+		{#snippet child()}
+			<div class={cleanClass(label && 'flex justify-between gap-1')}>
+				{#if label}
+					<Label id={labelId} for={inputId} {label} {...labelProps} />
+				{/if}
+				<span class={wrapper({ disabled })}>
+					<span class={bar({ fillColor: enabled ? color : 'default' })}> </span>
+					<span class={dot({ checked: enabled, fillColor: enabled ? color : 'default' })}></span>
+				</span>
+			</div>
+		{/snippet}
+	</Switch.Thumb>
+</Switch.Root>

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

@@ -1,13 +1,11 @@
 import type { Color } from '../../types.js';
-import type { HTMLInputAttributes } from 'svelte/elements';
+import { Switch, type WithoutChildrenOrChild } from 'bits-ui';
 type Props = {
     checked?: boolean;
     color?: Color;
     disabled?: boolean;
     class?: string;
-    onToggle?: ((checked: boolean) => void) | undefined;
-    inputSize?: HTMLInputAttributes['size'];
-} & Omit<HTMLInputAttributes, 'size'>;
-declare const Switch: import("svelte").Component<Props, {}, "checked">;
+} & WithoutChildrenOrChild<Switch.RootProps>;
+declare const Switch: import("svelte").Component<Props, {}, "checked" | "ref">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/internal/Button.svelte

@@ -129,15 +129,25 @@
 			),
 		),
 	);
+
+	const iconSizes = {
+		tiny: 'h-4 w-4',
+		small: 'h-4 w-4',
+		medium: 'h-4 w-4',
+		large: 'h-6 w-6',
+		giant: 'h-8 w-8',
+	};
 </script>
 
 {#snippet content()}
 	{#if leadingIcon && !loading}
-		<Icon size="1.15rem" icon={leadingIcon} aria-hidden />
+		<div>
+			<Icon size="100%" class={iconSizes[size]} icon={leadingIcon} aria-hidden />
+		</div>
 	{/if}
 	{@render children?.()}
 	{#if trailingIcon}
-		<Icon size="1.15rem" icon={trailingIcon} aria-hidden />
+		<Icon size="100%" class={iconSizes[size]} icon={trailingIcon} aria-hidden />
 	{/if}
 {/snippet}
 

package/dist/services/theme.svelte.d.ts

@@ -14,4 +14,5 @@ type ThemePreference = {
 };
 export declare const theme: ThemePreference;
 export declare const onThemeChange: () => void;
+export declare const initializeTheme: (options?: ThemeOptions) => void;
 export {};

package/dist/services/theme.svelte.js

@@ -5,7 +5,7 @@ const defaultOptions = {
     darkClass: 'dark',
     selector: 'body',
 };
-let options = $state(defaultOptions);
+let options = defaultOptions;
 export const setThemeOptions = (newOptions) => (options = { ...defaultOptions, ...newOptions });
 const defaultTheme = { value: Theme.Dark };
 const { state, sync: syncToLocalStorage } = preference({
@@ -56,4 +56,9 @@ const syncToDom = () => {
         }
     }
 };
-syncToDom();
+export const initializeTheme = (options) => {
+    if (options) {
+        setThemeOptions(options);
+    }
+    syncToDom();
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.17.0",
+	"version": "0.17.2",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",