@immich/ui 0.19.0 → 0.20.0

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -1,48 +1,25 @@
 <script lang="ts">
-	import { afterNavigate } from '$app/navigation';
-	import IconButton from '../IconButton/IconButton.svelte';
 	import Scrollable from '../Scrollable/Scrollable.svelte';
 	import { ChildKey } from '../../constants.js';
 	import Child from '../../internal/Child.svelte';
 	import { cleanClass } from '../../utils.js';
-	import { mdiClose, mdiMenu } from '@mdi/js';
-	import type { Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 
 	type Props = {
 		class?: string;
 		children: Snippet;
-		noBorder?: boolean;
+		open?: boolean;
 	};
 
-	let { class: className, children, noBorder = false }: Props = $props();
-
-	afterNavigate(() => {
-		if (!hidden) {
-			hidden = true;
-		}
-	});
-
-	let hidden = $state(true);
+	let { class: className, children, open = $bindable(true) }: Props = $props();
 </script>
 
 <Child for={ChildKey.AppShell} as={ChildKey.AppShellSidebar}>
-	<IconButton
-		size="giant"
-		onclick={() => (hidden = !hidden)}
-		icon={hidden ? mdiMenu : mdiClose}
-		shape="round"
-		color={hidden ? 'primary' : 'secondary'}
-		variant="filled"
-		class="absolute bottom-2 end-4 m-2 opacity-100 md:hidden"
-		aria-label="Menu"
-	/>
 	<Scrollable
 		class={cleanClass(
-			'h-dvh w-full shrink-0 bg-light pb-16 text-dark md:relative md:block md:w-min md:pb-0',
-
-			hidden ? 'hidden' : '',
+			'relative shrink-0 bg-light text-dark transition-all duration-200',
+			open ? 'w-[min(100vw,16rem)]' : 'w-[0px]',
 			className,
-			noBorder || 'border-e',
 		)}
 	>
 		{@render children?.()}

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

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

package/dist/components/Card/Card.svelte

@@ -138,11 +138,7 @@
 		{/if}
 
 		{#if footerChild}
-			<div
-				class={twMerge(
-					cleanClass('flex items-center border-t border-t-subtle p-4', footerChild.class),
-				)}
-			>
+			<div class={twMerge(cleanClass('flex items-center border-t p-4', footerChild.class))}>
 				{@render footerChild.snippet()}
 			</div>
 		{/if}

package/dist/components/Form/PasswordInput.svelte

@@ -23,7 +23,7 @@
 				shape="round"
 				color="secondary"
 				{size}
-				class="mr-1"
+				class="me-1"
 				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
 				onclick={() => (isVisible = !isVisible)}
 				title={isVisible ? t('hidePassword', translations) : t('showPassword', translations)}

package/dist/components/Heading/Heading.svelte

@@ -27,7 +27,7 @@
 	}: Props = $props();
 
 	const styles = tv({
-		base: 'font-bold leading-none tracking-tight',
+		base: 'font-semibold leading-none tracking-tight',
 		variants: {
 			color: {
 				muted: 'text-gray-600 dark:text-gray-400',

package/dist/components/Modal/Modal.svelte

@@ -63,7 +63,7 @@
 
 <Dialog.Root {open} onOpenChange={onChange}>
 	<Dialog.Portal>
-		<Dialog.Overlay class="absolute start-0 top-0 flex h-dvh w-screen backdrop-blur" />
+		<Dialog.Overlay class="absolute start-0 top-0 flex h-dvh w-screen bg-black/30" />
 		<Dialog.Content
 			class={cleanClass(
 				'absolute start-0 top-0 flex h-dvh w-screen items-center justify-center overflow-hidden sm:p-4',
@@ -71,7 +71,7 @@
 		>
 			<div class={cleanClass('flex h-full w-full flex-col items-center justify-center ')}>
 				<Card class={cleanClass(modalStyles({ size }), className)}>
-					<CardHeader class="border-b border-gray-400 py-2 dark:border-gray-500">
+					<CardHeader class="border-b border-gray-400 py-3 dark:border-gray-500">
 						<div class="flex items-center justify-between gap-2">
 							{#if typeof icon === 'string'}
 								<Icon {icon} size="1.5rem" aria-hidden />
@@ -85,7 +85,7 @@
 						</div>
 					</CardHeader>
 
-					<CardBody class="grow">
+					<CardBody class="grow p-5">
 						{@render bodyChildren?.snippet()}
 					</CardBody>
 

package/dist/components/Navbar/NavbarItem.svelte

@@ -12,7 +12,7 @@
 		isActive?: () => boolean;
 	} & { icon?: string & Omit<IconProps, 'icon'> };
 
-	const matchesPath = () => page.url.pathname === href;
+	const startsWithHref = () => page.url.pathname.startsWith(href);
 
 	let {
 		href,
@@ -23,11 +23,11 @@
 		...iconProps
 	}: Props = $props();
 
-	const isActive = isActiveOverride ?? matchesPath;
+	const isActive = isActiveOverride ?? startsWithHref;
 	let active = $derived(activeOverride ?? isActive());
 
 	const styles = tv({
-		base: 'flex w-full place-items-center gap-4 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5 md:rounded-e-full md:px-5',
+		base: 'flex w-full place-items-center gap-4 rounded-e-full px-5 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5',
 		variants: {
 			active: {
 				true: 'bg-primary/10 text-primary',

package/dist/components/Switch/Switch.svelte

@@ -78,7 +78,7 @@
 	bind:checked
 	bind:ref
 	id={inputId}
-	{disabled}
+	disabled={disabled || readOnly}
 	{required}
 	class={cleanClass(label && 'w-full', className)}
 	aria-readonly={readOnly}

package/dist/utils.js

@@ -1,12 +1,13 @@
+import { twMerge } from 'tailwind-merge';
 export const cleanClass = (...classNames) => {
-    return classNames
+    return twMerge(classNames
         .filter((className) => {
         if (!className || typeof className === 'boolean') {
             return false;
         }
         return typeof className === 'string';
     })
-        .join(' ');
+        .join(' '));
 };
 export const withPrefix = (key) => `immich-ui-${key}`;
 let _count = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.19.0",
+	"version": "0.20.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",
@@ -68,5 +68,8 @@
 		"bits-ui": "^1.0.0-next.46",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.3.0"
+	},
+	"volta": {
+		"node": "22.15.0"
 	}
 }