@immich/ui 0.58.3 → 0.59.0

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -4,24 +4,34 @@
   import Child from '../../internal/Child.svelte';
   import { cleanClass } from '../../utilities/internal.js';
   import { type Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
 
   type Props = {
     class?: string;
     children: Snippet;
     open?: boolean;
+    border?: boolean;
   };
 
-  let { class: className, children, open = $bindable(true) }: Props = $props();
+  let { class: className, border = true, children, open = $bindable(true) }: Props = $props();
+
+  const styles = tv({
+    base: 'bg-light text-dark absolute shrink-0 transition-all duration-200 md:relative',
+    variants: {
+      border: {
+        true: 'border-e shadow-lg',
+        false: '',
+      },
+      open: {
+        true: `${zIndex.AppShellSidebar} w-[min(100vw,16rem)]`,
+        false: 'w-0 border-e-0',
+      },
+    },
+  });
 </script>
 
 <Child for={ChildKey.AppShell} as={ChildKey.AppShellSidebar}>
-  <Scrollable
-    class={cleanClass(
-      'bg-light text-dark absolute shrink-0 border-e shadow-lg transition-all duration-200 md:relative',
-      open ? `${zIndex.AppShellSidebar} w-[min(100vw,16rem)]` : 'w-0 border-e-0',
-      className,
-    )}
-  >
+  <Scrollable class={cleanClass(styles({ border, open }), className)}>
     {@render children?.()}
   </Scrollable>
 </Child>

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

@@ -3,6 +3,7 @@ type Props = {
     class?: string;
     children: Snippet;
     open?: boolean;
+    border?: boolean;
 };
 declare const AppShellSidebar: import("svelte").Component<Props, {}, "open">;
 type AppShellSidebar = ReturnType<typeof AppShellSidebar>;

package/dist/components/MultiSelect/MultiSelect.svelte

@@ -1,16 +1,16 @@
 <script lang="ts" generics="T extends string">
   import InternalSelect from '../../internal/Select.svelte';
-  import type { MultiSelectProps, SelectItem } from '../../types.js';
+  import type { MultiSelectProps, SelectOption } from '../../types.js';
 
-  let { onChange, onItemChange, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
+  let { onChange, onSelect, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
 
   const handleChange = (values: T[]) => {
     onChange?.(values);
   };
 
-  const handleItemChange = (items: SelectItem<T>[]) => {
-    onItemChange?.(items);
+  const handleSelect = (items: SelectOption<T>[]) => {
+    onSelect?.(items);
   };
 </script>
 
-<InternalSelect multiple bind:values onItemChange={handleItemChange} onChange={handleChange} {...restProps} />
+<InternalSelect multiple bind:values onSelect={handleSelect} onChange={handleChange} {...restProps} />

package/dist/components/Navbar/NavbarGroup.svelte

@@ -1,11 +1,32 @@
 <script lang="ts">
+  import Text from '../Text/Text.svelte';
+  import type { FontWeight, NavbarVariant, Size, TextColor } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { tv } from 'tailwind-variants';
+
   type Props = {
     title: string;
+    size?: Size;
+    color?: TextColor;
+    fontWeight?: FontWeight;
+    variant?: NavbarVariant;
+    inline?: boolean;
+    class?: string;
   };
 
-  let { title }: Props = $props();
+  let { title, size = 'small', variant, fontWeight, color, class: className }: Props = $props();
+
+  const styles = tv({
+    base: 'ps-6 transition-all duration-200',
+    variants: {
+      variant: {
+        compact: 'py-4',
+        default: 'py-6',
+      },
+    },
+  });
 </script>
 
-<div class="text-sm transition-all duration-200 md:text-sm">
-  <p class="py-2 ps-4">{title}</p>
+<div class={cleanClass(styles({ variant: variant ?? 'default' }), className)}>
+  <Text {color} {size} {fontWeight}>{title}</Text>
 </div>

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

@@ -1,5 +1,12 @@
+import type { FontWeight, NavbarVariant, Size, TextColor } from '../../types.js';
 type Props = {
     title: string;
+    size?: Size;
+    color?: TextColor;
+    fontWeight?: FontWeight;
+    variant?: NavbarVariant;
+    inline?: boolean;
+    class?: string;
 };
 declare const NavbarGroup: import("svelte").Component<Props, {}, "">;
 type NavbarGroup = ReturnType<typeof NavbarGroup>;

package/dist/components/Navbar/NavbarItem.svelte

@@ -2,59 +2,94 @@
   import { page } from '$app/state';
   import Icon from '../Icon/Icon.svelte';
   import Link from '../Link/Link.svelte';
-  import type { IconProps } from '../../types.js';
+  import NavbarItem from './NavbarItem.svelte';
+  import { t } from '../../services/translation.svelte.js';
+  import type { NavbarProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
   import { tv } from 'tailwind-variants';
 
-  type Props = {
-    title: string;
-    href: string;
-    active?: boolean;
-    variant?: 'compact';
-    isActive?: () => boolean;
-    icon?: string | IconProps;
-    activeIcon?: string | IconProps;
-  };
-
   const startsWithHref = () => page.url.pathname.startsWith(href);
 
-  let { href, isActive: isActiveOverride, title, variant, active: activeOverride, icon, activeIcon }: Props = $props();
+  let {
+    href,
+    isActive: isActiveOverride,
+    title,
+    variant,
+    active: activeOverride,
+    icon,
+    activeIcon,
+    expanded = $bindable(false),
+    items,
+    class: className,
+  }: NavbarProps = $props();
 
-  const isActive = isActiveOverride ?? startsWithHref;
+  const isActive = $derived(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: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-e-full px-5 transition-[padding] delay-100 duration-100 group-hover:sm:px-5',
+    base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-e-full ps-5 transition-[padding] delay-100 duration-100',
     variants: {
       active: {
         true: 'bg-primary/10 text-primary',
         false: '',
       },
       variant: {
-        default: 'py-3 ps-5',
-        compact: 'py-2 ps-3',
+        default: 'py-3',
+        compact: 'py-2',
       },
     },
   });
 </script>
 
-<Link
-  {href}
-  aria-current={active ? 'page' : undefined}
-  underline={false}
-  class={styles({ active, variant: variant ?? 'default' })}
->
-  <div class="flex w-full place-items-center gap-4 truncate overflow-hidden">
-    {#if iconProps}
-      <Icon
-        size="1.375em"
-        class="shrink-0"
-        aria-hidden={true}
-        {...active && activeIconProps ? activeIconProps : iconProps}
-      />
+<div>
+  <div class="relative flex items-center">
+    {#if items}
+      <button
+        type="button"
+        aria-label={expanded ? t('collapse') : t('expand')}
+        class="hover:bg-subtle hover:text-primary absolute me-2 hidden h-full rounded-lg px-0.5 md:block"
+        onclick={() => (expanded = !expanded)}
+      >
+        <Icon
+          icon={expanded ? mdiChevronDown : mdiChevronRight}
+          size="1em"
+          class="shrink-0 delay-100 duration-100 "
+          aria-hidden
+        />
+      </button>
     {/if}
-    <span class="text-sm font-medium">{title}</span>
+    <Link
+      {href}
+      aria-current={active ? 'page' : undefined}
+      underline={false}
+      class={cleanClass(styles({ active, variant: variant ?? 'default' }), className)}
+    >
+      <div class="relative flex w-full place-items-center {variant === 'compact' ? 'gap-2' : 'gap-4'}">
+        {#if iconProps}
+          <Icon
+            size="1.375em"
+            class="shrink-0"
+            aria-hidden={true}
+            {...active && activeIconProps ? activeIconProps : iconProps}
+          />
+        {/if}
+        <span class="truncate text-sm font-medium">{title}</span>
+      </div>
+    </Link>
   </div>
-</Link>
+
+  {#if expanded}
+    <div>
+      {#if Array.isArray(items)}
+        {#each items as { class: className, ...item }, i (i)}
+          <NavbarItem {variant} {...item} class={cleanClass('ps-8', className)} />
+        {/each}
+      {:else if items}
+        {@render items()}
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -1,13 +1,5 @@
-import type { IconProps } from '../../types.js';
-type Props = {
-    title: string;
-    href: string;
-    active?: boolean;
-    variant?: 'compact';
-    isActive?: () => boolean;
-    icon?: string | IconProps;
-    activeIcon?: string | IconProps;
-};
-declare const NavbarItem: import("svelte").Component<Props, {}, "">;
+import NavbarItem from './NavbarItem.svelte';
+import type { NavbarProps } from '../../types.js';
+declare const NavbarItem: import("svelte").Component<NavbarProps, {}, "expanded">;
 type NavbarItem = ReturnType<typeof NavbarItem>;
 export default NavbarItem;

package/dist/components/Select/Select.svelte

@@ -1,19 +1,19 @@
 <script lang="ts" generics="T extends string">
   import InternalSelect from '../../internal/Select.svelte';
-  import type { SelectItem, SelectProps } from '../../types.js';
+  import type { SelectOption, SelectProps } from '../../types.js';
 
-  let { onChange, onItemChange, value = $bindable(), ...restProps }: SelectProps<T> = $props();
+  let { onChange, onSelect, value = $bindable(), ...restProps }: SelectProps<T> = $props();
 
-  let values = $derived(value ? [value] : []);
+  let values = $derived(value === null || value === undefined ? [] : [value]);
 
   const handleChange = (values: T[]) => {
     value = values[0];
     onChange?.(value);
   };
 
-  const handleItemChange = (items: SelectItem<T>[]) => {
-    onItemChange?.(items[0]);
+  const handleSelect = (items: SelectOption<T>[]) => {
+    onSelect?.(items[0]);
   };
 </script>
 
-<InternalSelect bind:values onChange={handleChange} onItemChange={handleItemChange} {...restProps} />
+<InternalSelect bind:values onChange={handleChange} onSelect={handleSelect} {...restProps} />

package/dist/internal/Select.svelte

@@ -4,7 +4,7 @@
   import IconButton from '../components/IconButton/IconButton.svelte';
   import Input from '../components/Input/Input.svelte';
   import { zIndex } from '../constants.js';
-  import type { SelectCommonProps, SelectItem } from '../types.js';
+  import type { SelectCommonProps, SelectOption } from '../types.js';
   import { cleanClass } from '../utilities/internal.js';
   import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiChevronDown } from '@mdi/js';
   import { Select } from 'bits-ui';
@@ -13,28 +13,28 @@
   type Props = {
     multiple?: boolean;
     values: T[];
-    asLabel?: (items: SelectItem<T>[]) => string;
+    asLabel?: (items: SelectOption<T>[]) => string;
     onChange?: (values: T[]) => void;
-    onItemChange?: (items: SelectItem<T>[]) => void;
+    onSelect?: (items: SelectOption<T>[]) => void;
   } & SelectCommonProps<T>;
 
   let {
-    data,
+    options: optionsOrItems,
     shape,
     size: initialSize,
     multiple = false,
     values = $bindable([]),
     onChange,
-    onItemChange,
-    asLabel = (options: SelectItem<T>[]) => options.map(({ label }) => label).join(', '),
+    onSelect: onItemChange,
+    asLabel = (options: SelectOption<T>[]) => options.map(({ label }) => label).join(', '),
     placeholder,
     class: className,
   }: Props = $props();
 
-  const asOptions = (items: string[] | SelectItem<T>[]) => {
+  const asOptions = (items: string[] | SelectOption<T>[]) => {
     return items.map((item) => {
       if (typeof item === 'string') {
-        return { value: item, label: item } as SelectItem<T>;
+        return { value: item, label: item } as SelectOption<T>;
       }
 
       const label = item.label ?? item.value;
@@ -45,11 +45,11 @@
   const context = getFieldContext();
   const { invalid, disabled, ...labelProps } = $derived(context());
   const size = $derived(initialSize ?? labelProps.size ?? 'small');
-  const options = $derived(asOptions(data));
+  const options = $derived(asOptions(optionsOrItems));
 
   const findOption = (value: string) => options.find((option) => option.value === value);
   const valuesToOptions = (values: T[]) =>
-    values.map(findOption).filter((item): item is SelectItem<T> => Boolean(item));
+    values.map(findOption).filter((item): item is SelectOption<T> => Boolean(item));
 
   const selectedLabel = $derived(asLabel(valuesToOptions(values)));
 
@@ -75,7 +75,9 @@
 
   const onValueChange = (newValues: string[] | string) => {
     values = (Array.isArray(newValues) ? newValues : [newValues]) as T[];
-    const items = values.map((value) => findOption(value)).filter((item): item is SelectItem<T> => item !== undefined);
+    const items = values
+      .map((value) => findOption(value))
+      .filter((item): item is SelectOption<T> => item !== undefined);
 
     onChange?.(values);
     onItemChange?.(items);

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

@@ -1,12 +1,12 @@
-import type { SelectCommonProps, SelectItem } from '../types.js';
+import type { SelectCommonProps, SelectOption } from '../types.js';
 import { Select } from 'bits-ui';
 declare function $$render<T extends string>(): {
     props: {
         multiple?: boolean;
         values: T[];
-        asLabel?: (items: SelectItem<T>[]) => string;
+        asLabel?: (items: SelectOption<T>[]) => string;
         onChange?: (values: T[]) => void;
-        onItemChange?: (items: SelectItem<T>[]) => void;
+        onSelect?: (items: SelectOption<T>[]) => void;
     } & SelectCommonProps<T>;
     exports: {};
     bindings: "values";

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

@@ -3,6 +3,8 @@ declare const defaultTranslations: {
     cancel: string;
     close: string;
     confirm: string;
+    expand: string;
+    collapse: string;
     code_copy: string;
     code_copied: string;
     search_placeholder: string;

package/dist/services/translation.svelte.js

@@ -3,6 +3,8 @@ const defaultTranslations = {
     cancel: 'Cancel',
     close: 'Close',
     confirm: 'Confirm',
+    expand: 'Expand',
+    collapse: 'Collapse',
     // code
     code_copy: 'Copy',
     code_copied: 'Copied',

package/dist/types.d.ts

@@ -29,6 +29,19 @@ export type IconLike = string | {
 };
 export type MaybeArray<T> = T | T[];
 export type MaybePromise<T> = T | Promise<T>;
+export type NavbarVariant = 'compact';
+export type NavbarProps = {
+    title: string;
+    href: string;
+    active?: boolean;
+    variant?: NavbarVariant;
+    isActive?: () => boolean;
+    icon?: string | IconProps;
+    activeIcon?: string | IconProps;
+    expanded?: boolean;
+    items?: NavbarProps[] | Snippet;
+    class?: string;
+};
 export type IconProps = {
     icon: IconLike;
     title?: string;
@@ -152,13 +165,13 @@ export type TextareaProps = {
     shape?: Shape;
     grow?: boolean;
 } & HTMLTextareaAttributes;
-export type SelectItem<T extends string = string> = {
+export type SelectOption<T extends string = string> = {
     label?: string;
     value: T;
     disabled?: boolean;
 };
 export type SelectCommonProps<T extends string> = {
-    data: string[] | SelectItem<T>[];
+    options: string[] | SelectOption<T>[];
     size?: Size;
     shape?: Shape;
     placeholder?: string;
@@ -167,12 +180,12 @@ export type SelectCommonProps<T extends string> = {
 export type SelectProps<T extends string> = SelectCommonProps<T> & {
     value?: T;
     onChange?: (value: T) => void;
-    onItemChange?: (item: SelectItem<T>) => void;
+    onSelect?: (options: SelectOption<T>) => void;
 };
 export type MultiSelectProps<T extends string> = SelectCommonProps<T> & {
     values?: T[];
     onChange?: (values: T[]) => void;
-    onItemChange?: (items: SelectItem<T>[]) => void;
+    onSelect?: (options: SelectOption<T>[]) => void;
 };
 export type ToastId = {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.58.3",
+  "version": "0.59.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",