@immich/ui 0.19.1 → 0.21.0

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

@@ -3,7 +3,7 @@ export declare const setFieldContext: (field: FieldContext) => FieldContext;
 export declare const hasFieldContext: () => boolean;
 export declare const getFieldContext: () => {
     label: string | undefined;
-    color: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "muted";
+    color: "primary" | "success" | "danger" | "warning" | "info" | "secondary" | "muted";
     invalid: boolean;
     readOnly: boolean;
     required: boolean;

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/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/Navbar/NavbarItem.svelte

@@ -10,9 +10,11 @@
 		href: string;
 		variant?: 'compact';
 		isActive?: () => boolean;
-	} & { icon?: string & Omit<IconProps, 'icon'> };
+		icon?: string | IconProps;
+		activeIcon?: string | IconProps;
+	};
 
-	const matchesPath = () => page.url.pathname === href;
+	const startsWithHref = () => page.url.pathname.startsWith(href);
 
 	let {
 		href,
@@ -20,14 +22,20 @@
 		title,
 		variant,
 		active: activeOverride,
-		...iconProps
+		icon,
+		activeIcon,
 	}: Props = $props();
 
-	const isActive = isActiveOverride ?? matchesPath;
+	const isActive = isActiveOverride ?? startsWithHref;
 	let active = $derived(activeOverride ?? isActive());
 
+	const iconProps = $derived(typeof icon === 'string' ? { icon } : icon);
+	const activeIconProps = $derived(
+		typeof activeIcon === 'string' ? { icon: activeIcon } : activeIcon,
+	);
+
 	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',
@@ -48,13 +56,12 @@
 	class={styles({ active, variant: variant ?? 'default' })}
 >
 	<div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
-		{#if iconProps.icon}
+		{#if iconProps}
 			<Icon
 				size="1.375em"
 				class="shrink-0"
 				aria-hidden={true}
-				{...iconProps}
-				icon={iconProps.icon}
+				{...active && activeIconProps ? activeIconProps : iconProps}
 			/>
 		{/if}
 		<span class="text-sm font-medium">{title}</span>

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

@@ -5,8 +5,8 @@ type Props = {
     href: string;
     variant?: 'compact';
     isActive?: () => boolean;
-} & {
-    icon?: string & Omit<IconProps, 'icon'>;
+    icon?: string | IconProps;
+    activeIcon?: string | IconProps;
 };
 declare const NavbarItem: import("svelte").Component<Props, {}, "">;
 type NavbarItem = ReturnType<typeof NavbarItem>;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as immichLogoStackedLight } from './assets/immich-logo-stacked-
 export { default as immichLogoJson } from './assets/immich-logo.json';
 export { default as immichLogo } from './assets/immich-logo.svg';
 export { default as playStoreBadge } from './assets/playstore-badge.png';
+export * from './theme/default.js';
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
 export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';

package/dist/index.js

@@ -8,6 +8,8 @@ export { default as immichLogoStackedLight } from './assets/immich-logo-stacked-
 export { default as immichLogoJson } from './assets/immich-logo.json';
 export { default as immichLogo } from './assets/immich-logo.svg';
 export { default as playStoreBadge } from './assets/playstore-badge.png';
+// theme
+export * from './theme/default.js';
 // components
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';

package/dist/theme/default.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		/* light */
+		--immich-ui-primary: 66 80 175;
+		--immich-ui-dark: 58 58 58;
+		--immich-ui-light: 255 255 255;
+		--immich-ui-success: 16 188 99;
+		--immich-ui-danger: 200 60 60;
+		--immich-ui-warning: 216 143 64;
+		--immich-ui-info: 8 111 230;
+		--immich-ui-gray: 246 246 246;
+
+		--immich-ui-default-border: 209 213 219;
+	}
+
+	.dark {
+		/* dark */
+		--immich-ui-primary: 172 203 250;
+		--immich-ui-light: 0 0 0;
+		--immich-ui-dark: 229 231 235;
+		--immich-ui-success: 72 237 152;
+		--immich-ui-danger: 246 125 125;
+		--immich-ui-warning: 254 197 132;
+		--immich-ui-info: 121 183 254;
+		--immich-ui-gray: 33 33 33;
+
+		--immich-ui-default-border: 55 65 81;
+	}
+}

package/dist/theme/default.d.ts

@@ -0,0 +1,13 @@
+export declare const tailwindConfig: () => {
+    colors: {
+        primary: string;
+        light: string;
+        dark: string;
+        success: string;
+        danger: string;
+        warning: string;
+        info: string;
+        subtle: string;
+    };
+    borderColor: ({ theme }: import("tailwindcss/types/config").PluginUtils) => any;
+};

package/dist/theme/default.js

@@ -0,0 +1,16 @@
+export const tailwindConfig = () => ({
+    colors: {
+        primary: 'rgb(var(--immich-ui-primary) / <alpha-value>)',
+        light: 'rgb(var(--immich-ui-light) / <alpha-value>)',
+        dark: 'rgb(var(--immich-ui-dark) / <alpha-value>)',
+        success: 'rgb(var(--immich-ui-success) / <alpha-value>)',
+        danger: 'rgb(var(--immich-ui-danger) / <alpha-value>)',
+        warning: 'rgb(var(--immich-ui-warning) / <alpha-value>)',
+        info: 'rgb(var(--immich-ui-info) / <alpha-value>)',
+        subtle: 'rgb(var(--immich-ui-gray) / <alpha-value>)',
+    },
+    borderColor: ({ theme }) => ({
+        ...theme('colors'),
+        DEFAULT: 'rgb(var(--immich-ui-default-border) / <alpha-value>)',
+    }),
+});

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.1",
+	"version": "0.21.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"
 	}
 }