@immich/ui 0.57.3 → 0.58.0

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/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/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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.57.3",
+  "version": "0.58.0",
   "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",