@immich/ui 0.57.3 → 0.58.1

package/dist/components/Avatar/Avatar.svelte

@@ -11,7 +11,7 @@
   const { color = 'primary', size = 'medium', name }: Props = $props();
 
   const styles = tv({
-    base: 'flex h-full w-full items-center justify-center font-medium text-white select-none',
+    base: 'flex items-center justify-center font-medium text-white select-none',
     variants: {
       size: {
         tiny: 'h-5 w-5 text-xs',
@@ -36,7 +36,7 @@
   });
 
   const wrapper = tv({
-    base: 'overflow-hidden rounded-full shadow-md',
+    base: 'block w-full overflow-hidden rounded-full shadow-md',
   });
 
   const getInitials = (name: string) => {

package/dist/components/Button/Button.svelte

@@ -2,7 +2,7 @@
   import Button from '../../internal/Button.svelte';
   import type { ButtonProps } from '../../types.js';
 
-  let { ref = $bindable(null), ...props }: ButtonProps = $props();
+  let { ref = $bindable(null), color = 'primary', ...props }: ButtonProps = $props();
 </script>
 
-<Button bind:ref {...props} />
+<Button bind:ref {color} {...props} />

package/dist/components/IconButton/IconButton.svelte

@@ -3,11 +3,19 @@
   import Button from '../../internal/Button.svelte';
   import type { IconButtonProps } from '../../types.js';
 
-  const { icon, flipped, flopped, title, 'aria-label': ariaLabel, ...buttonProps }: IconButtonProps = $props();
+  const {
+    icon,
+    flipped,
+    flopped,
+    title,
+    'aria-label': ariaLabel,
+    color = 'primary',
+    ...buttonProps
+  }: IconButtonProps = $props();
 
   const buttonTitle = $derived(title ?? ariaLabel);
 </script>
 
-<Button icon {...buttonProps} title={buttonTitle} aria-label={ariaLabel}>
+<Button icon {color} {...buttonProps} title={buttonTitle} aria-label={ariaLabel}>
   <Icon {icon} {flipped} {flopped} size="60%" aria-hidden />
 </Button>

package/dist/components/ListButton/ListButton.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import Icon from '../Icon/Icon.svelte';
+  import HStack from '../Stack/HStack.svelte';
+  import Button from '../../internal/Button.svelte';
+  import type { ButtonProps, IconLike } from '../../types.js';
+  import { cleanClass, isIconLike } from '../../utilities/internal.js';
+  import { mdiCheck } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
+
+  let {
+    ref = $bindable(null),
+    selected = false,
+    class: className,
+    selectedIcon = mdiCheck,
+    children,
+    ...props
+  }: ButtonProps & {
+    color?: never;
+    selected?: boolean;
+    disabled?: boolean;
+    selectedIcon?: IconLike | Snippet | false;
+  } = $props();
+
+  const styles = tv({
+    base: 'hover:bg-light-200 dark:hover:bg-light-300 text-dark',
+    variants: {
+      selected: {
+        true: 'bg-light-200 dark:bg-light-300',
+        false: '',
+      },
+    },
+  });
+</script>
+
+<Button bind:ref fullWidth class={cleanClass(styles({ selected }), className)} {...props}>
+  {#if selectedIcon}
+    <HStack fullWidth class="justify-between">
+      {@render children?.()}
+      {#if selected}
+        {#if isIconLike(selectedIcon)}
+          <Icon icon={selectedIcon} />
+        {:else}
+          {@render selectedIcon()}
+        {/if}
+      {/if}
+    </HStack>
+  {:else}
+    {@render children?.()}
+  {/if}
+</Button>

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

@@ -0,0 +1,11 @@
+import type { ButtonProps, IconLike } from '../../types.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = ButtonProps & {
+    color?: never;
+    selected?: boolean;
+    disabled?: boolean;
+    selectedIcon?: IconLike | Snippet | false;
+};
+declare const ListButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ListButton = ReturnType<typeof ListButton>;
+export default ListButton;

package/dist/components/MultiSelect/MultiSelect.svelte

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

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

@@ -1,4 +1,25 @@
-import type { MultiSelectProps, SelectItem } from '../../types.js';
-declare const MultiSelect: import("svelte").Component<MultiSelectProps<SelectItem>, {}, "values">;
-type MultiSelect = ReturnType<typeof MultiSelect>;
+import type { MultiSelectProps } from '../../types.js';
+declare function $$render<T extends string>(): {
+    props: MultiSelectProps<T>;
+    exports: {};
+    bindings: "values";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "values";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const MultiSelect: $$IsomorphicComponent;
+type MultiSelect<T extends string> = InstanceType<typeof MultiSelect<T>>;
 export default MultiSelect;

package/dist/components/Select/Select.svelte

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

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

@@ -1,4 +1,25 @@
-import type { SelectItem, SelectProps } from '../../types.js';
-declare const Select: import("svelte").Component<SelectProps<SelectItem>, {}, "value">;
-type Select = ReturnType<typeof Select>;
+import type { SelectProps } from '../../types.js';
+declare function $$render<T extends string>(): {
+    props: SelectProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<T extends string> = InstanceType<typeof Select<T>>;
 export default Select;

package/dist/components/Text/Text.svelte

@@ -12,11 +12,12 @@
     color?: TextColor;
     fontWeight?: FontWeight;
     variant?: TextVariant;
+    inline?: boolean;
     class?: string;
     children: Snippet;
   } & HTMLAttributes<HTMLElement>;
 
-  const { color, size, fontWeight = 'normal', children, class: className, ...restProps }: Props = $props();
+  const { color, inline, size, fontWeight = 'normal', children, class: className, ...restProps }: Props = $props();
 
   const styles = tv({
     variants: {
@@ -25,6 +26,6 @@
   });
 </script>
 
-<Text tag="p" {color} {fontWeight} class={cleanClass(styles({ size }), className)} {...restProps}>
+<Text tag={inline ? 'span' : 'p'} {color} {fontWeight} class={cleanClass(styles({ size }), className)} {...restProps}>
   {@render children()}
 </Text>

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

@@ -7,6 +7,7 @@ type Props = {
     color?: TextColor;
     fontWeight?: FontWeight;
     variant?: TextVariant;
+    inline?: boolean;
     class?: string;
     children: Snippet;
 } & HTMLAttributes<HTMLElement>;

package/dist/index.d.ts

@@ -48,6 +48,7 @@ export { default as Input } from './components/Input/Input.svelte';
 export { default as Kbd } from './components/Kbd/Kbd.svelte';
 export { default as Label } from './components/Label/Label.svelte';
 export { default as Link } from './components/Link/Link.svelte';
+export { default as ListButton } from './components/ListButton/ListButton.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
 export { Markdown } from './components/Markdown/index.js';

package/dist/index.js

@@ -50,6 +50,7 @@ export { default as Input } from './components/Input/Input.svelte';
 export { default as Kbd } from './components/Kbd/Kbd.svelte';
 export { default as Label } from './components/Label/Label.svelte';
 export { default as Link } from './components/Link/Link.svelte';
+export { default as ListButton } from './components/ListButton/ListButton.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
 export { Markdown } from './components/Markdown/index.js';

package/dist/internal/Button.svelte

@@ -20,7 +20,7 @@
     type = 'button',
     href,
     variant = 'filled',
-    color = 'primary',
+    color,
     shape = 'semi-round',
     size = 'medium',
     loading = false,

package/dist/internal/Select.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T extends string">
   import { getFieldContext } from '../common/context.svelte.js';
   import Icon from '../components/Icon/Icon.svelte';
   import IconButton from '../components/IconButton/IconButton.svelte';
@@ -10,13 +10,11 @@
   import { Select } from 'bits-ui';
   import { tv } from 'tailwind-variants';
 
-  type T = SelectItem;
-
   type Props = {
     multiple?: boolean;
-    values: T[];
-    asLabel?: (items: T[]) => string;
-    onChange?: (values: T[]) => void;
+    values: SelectItem<T>[];
+    asLabel?: (items: SelectItem<T>[]) => string;
+    onChange?: (values: SelectItem<T>[]) => void;
   } & SelectCommonProps<T>;
 
   let {
@@ -26,15 +24,15 @@
     multiple = false,
     values = $bindable([]),
     onChange,
-    asLabel = (options: T[]) => options.map(({ label }) => label).join(', '),
+    asLabel = (options: SelectItem<T>[]) => options.map(({ label }) => label).join(', '),
     placeholder,
     class: className,
   }: Props = $props();
 
-  const asOptions = (items: string[] | T[]) => {
+  const asOptions = (items: string[] | SelectItem<T>[]) => {
     return items.map((item) => {
       if (typeof item === 'string') {
-        return { value: item, label: item } as T;
+        return { value: item, label: item } as SelectItem<T>;
       }
 
       const label = item.label ?? item.value;
@@ -73,9 +71,7 @@
   const findOption = (value: string) => options.find((option) => option.value === value);
 
   const onValueChange = (items: string[] | string) => {
-    values = multiple
-      ? ((items as string[]).map(findOption) as T[])
-      : [findOption(items as string) as T].filter(Boolean);
+    values = (Array.isArray(items) ? items : [items]).map(findOption).filter((item) => item !== undefined);
 
     onChange?.(values);
   };

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

@@ -1,12 +1,31 @@
 import type { SelectCommonProps, SelectItem } from '../types.js';
 import { Select } from 'bits-ui';
-type T = SelectItem;
-type Props = {
-    multiple?: boolean;
-    values: T[];
-    asLabel?: (items: T[]) => string;
-    onChange?: (values: T[]) => void;
-} & SelectCommonProps<T>;
-declare const Select: import("svelte").Component<Props, {}, "values">;
-type Select = ReturnType<typeof Select>;
+declare function $$render<T extends string>(): {
+    props: {
+        multiple?: boolean;
+        values: SelectItem<T>[];
+        asLabel?: (items: SelectItem<T>[]) => string;
+        onChange?: (values: SelectItem<T>[]) => void;
+    } & SelectCommonProps<T>;
+    exports: {};
+    bindings: "values";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "values";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<T extends string> = InstanceType<typeof Select<T>>;
 export default Select;

package/dist/internal/Text.svelte

@@ -10,7 +10,7 @@
     /**
      * The HTML element type.
      */
-    tag?: HeadingTag;
+    tag?: HeadingTag | 'span';
     fontWeight?: FontWeight;
     variant?: TextVariant;
     color?: HeadingColor;

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

@@ -5,7 +5,7 @@ type Props = {
     /**
      * The HTML element type.
      */
-    tag?: HeadingTag;
+    tag?: HeadingTag | 'span';
     fontWeight?: FontWeight;
     variant?: TextVariant;
     color?: HeadingColor;

package/dist/styles.d.ts

@@ -74,11 +74,15 @@ export declare const styleVariants: {
         giant: string;
     };
     fontWeight: {
+        thin: string;
+        'extra-light': string;
         light: string;
         normal: string;
+        medium: string;
         'semi-bold': string;
         bold: string;
         'extra-bold': string;
+        black: string;
     };
     tableSpacing: {
         tiny: string;

package/dist/styles.js

@@ -70,11 +70,15 @@ export const styleVariants = {
         giant: 'text-xl',
     },
     fontWeight: {
+        thin: 'font-thin',
+        'extra-light': 'font-extralight',
         light: 'font-light',
         normal: 'font-normal',
+        medium: 'font-medium',
         'semi-bold': 'font-semibold',
         bold: 'font-bold',
         'extra-bold': 'font-extrabold',
+        black: 'font-black',
     },
     tableSpacing: {
         tiny: '',

package/dist/types.d.ts

@@ -6,7 +6,7 @@ import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLIn
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 export type TextColor = Color | 'muted';
 export type TextVariant = 'italic';
-export type FontWeight = 'light' | 'normal' | 'semi-bold' | 'bold' | 'extra-bold';
+export type FontWeight = 'thin' | 'extra-light' | 'light' | 'normal' | 'medium' | 'semi-bold' | 'bold' | 'extra-bold' | 'black';
 export type HeadingColor = TextColor;
 export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
 export type ModalSize = Size | 'full';
@@ -152,25 +152,25 @@ export type TextareaProps = {
     shape?: Shape;
     grow?: boolean;
 } & HTMLTextareaAttributes;
-export type SelectItem = {
+export type SelectItem<T extends string = string> = {
     label?: string;
-    value: string;
+    value: T;
     disabled?: boolean;
 };
-export type SelectCommonProps<T extends SelectItem> = {
-    data: string[] | T[];
+export type SelectCommonProps<T extends string> = {
+    data: string[] | SelectItem<T>[];
     size?: Size;
     shape?: Shape;
     placeholder?: string;
     class?: string;
 };
-export type SelectProps<T extends SelectItem> = SelectCommonProps<T> & {
-    value?: T;
-    onChange?: (value: T) => void;
+export type SelectProps<T extends string> = SelectCommonProps<T> & {
+    value?: SelectItem<T>;
+    onChange?: (value: SelectItem<T>) => void;
 };
-export type MultiSelectProps<T extends SelectItem> = SelectCommonProps<T> & {
-    values?: T[];
-    onChange?: (values: T[]) => void;
+export type MultiSelectProps<T extends string> = SelectCommonProps<T> & {
+    values?: SelectItem<T>[];
+    onChange?: (values: SelectItem<T>[]) => void;
 };
 export type ToastId = {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.57.3",
+  "version": "0.58.1",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     "@tailwindcss/vite": "^4.1.7",
     "@types/luxon": "^3.7.1",
     "autoprefixer": "^10.4.20",
-    "globals": "^16.0.0",
+    "globals": "^17.0.0",
     "publint": "^0.3.0",
     "svelte": "^5.37.0",
     "svelte-check": "^4.0.0",