@immich/ui 0.50.0 → 0.51.0

package/dist/components/Alert/Alert.svelte

@@ -83,7 +83,7 @@
 {#if open}
   <Card {color} class={cleanClass(className)}>
     <CardBody>
-      <div class="flex items-center justify-between">
+      <div class={cleanClass((closable || onClose) && 'flex items-center justify-between')}>
         <div class={cleanClass('flex gap-2')}>
           {#if icon}
             <div>

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 select-none',
+    base: 'flex h-full w-full items-center justify-center font-medium text-white select-none',
     variants: {
       size: {
         tiny: 'h-5 w-5 text-xs',
@@ -22,15 +22,15 @@
       },
       color: {
         primary: 'bg-primary text-light',
-        pink: 'text-light bg-pink-400',
-        red: 'text-light bg-red-500',
-        yellow: 'text-light bg-yellow-500',
-        purple: 'text-dark bg-purple-600',
-        orange: 'text-light bg-orange-600',
-        gray: 'text-dark bg-gray-600',
-        amber: 'text-light bg-amber-600',
-        blue: 'text-dark bg-blue-500',
-        green: 'text-dark bg-green-600',
+        pink: 'bg-pink-400',
+        red: 'bg-red-500',
+        yellow: 'bg-yellow-500',
+        purple: 'bg-purple-600',
+        orange: 'bg-orange-600',
+        gray: 'bg-gray-600',
+        amber: 'bg-amber-600',
+        blue: 'bg-blue-500',
+        green: 'bg-green-600',
       },
     },
   });

package/dist/components/Badge/Badge.svelte

@@ -24,31 +24,31 @@
   }: Props = $props();
 
   const styles = tv({
-    base: 'border px-2 py-0.5',
+    base: 'text-light inline-flex items-center font-medium antialiased',
     variants: {
       shape: styleVariants.shape,
       color: {
-        primary: 'border-primary-100 bg-primary-100 text-primary-950 dark:bg-primary-200 dark:border-primary-200',
-        secondary: 'border-light-300 bg-light-100 text-light-950 dark:bg-light-200',
-        success: 'border-success-100 bg-success-100 text-success-950 dark:bg-success-200 dark:border-success-200',
-        info: 'border-info-200 bg-info-200 text-info-950',
-        warning: 'border-warning-200 bg-warning-200 text-warning-950',
-        danger: 'border-danger-200 bg-danger-200 text-danger-950 dark:bg-danger-200',
+        primary: 'bg-primary',
+        secondary: 'bg-dark',
+        success: 'bg-success',
+        info: 'bg-info',
+        warning: 'bg-warning',
+        danger: 'bg-danger text-danger-50',
       },
       textSize: styleVariants.textSize,
       paddingSize: {
-        tiny: 'px-1.5 py-px',
-        small: 'px-1.75 py-0.5',
-        medium: 'px-2.5 py-0.75',
-        large: 'px-2.75 py-1',
-        giant: 'px-3 py-1.25',
+        tiny: 'px-3 py-1',
+        small: 'px-3.25 py-1.25',
+        medium: 'px-3.75 py-1.5',
+        large: 'px-4 py-1.75',
+        giant: 'px-4.25 py-2',
       },
       roundedSize: {
-        tiny: 'rounded-md',
-        small: 'rounded-md',
-        medium: 'rounded-md',
-        large: 'rounded-lg',
-        giant: 'rounded-lg',
+        tiny: 'rounded-lg',
+        small: 'rounded-lg',
+        medium: 'rounded-lg',
+        large: 'rounded-xl',
+        giant: 'rounded-xl',
       },
     },
   });

package/dist/components/Card/Card.svelte

@@ -52,8 +52,8 @@
         primary: 'bg-primary-50 dark:bg-primary-100',
         secondary: 'text-dark bg-light-50 dark:bg-light-100 dark:text-white',
         success: 'bg-success-50 dark:bg-success-100',
-        danger: 'bg-danger-50 dark:bg-danger-100',
-        warning: 'bg-warning-50 dark:bg-warning-100',
+        danger: 'bg-danger-100',
+        warning: 'bg-warning-100',
         info: 'bg-info-50 dark:bg-info-100',
       },
     },

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -43,11 +43,13 @@
     fullWidth
     variant={selected ? 'outline' : 'ghost'}
     color="secondary"
-    class="flex justify-between gap-3 border text-start {selected ? 'border-neutral-500!' : ''}"
+    class="hover:bg-primary-50 flex justify-between gap-3 border py-4 text-start {selected
+      ? 'border-primary/50 bg-primary-50'
+      : 'border-light-200 dark:border-light-300'}"
   >
     <div class="flex flex-col">
-      <div class="flex items-center gap-1">
-        <Text fontWeight="bold">{item.title}</Text>
+      <div class="flex place-items-center gap-2">
+        <Text fontWeight="semi-bold">{item.title}</Text>
         <Icon icon={item.icon} size="1.25rem" class={item.iconClass} />
       </div>
       {#if item.description}
@@ -58,9 +60,9 @@
         >
       {/if}
       <div class="mt-2">
-        <Badge size="small" color="primary" shape="rectangle">{item.type}</Badge>
+        <Badge color="primary" size="small" shape="round">{item.type}</Badge>
         {#if item.isGlobal}
-          <Badge size="small" shape="rectangle" color="warning">Global</Badge>
+          <Badge color="warning" size="small" shape="round">Global</Badge>
         {/if}
       </div>
     </div>

package/dist/components/ConfirmModal/ConfirmModal.svelte

@@ -4,8 +4,8 @@
   import ModalBody from '../Modal/ModalBody.svelte';
   import ModalFooter from '../Modal/ModalFooter.svelte';
   import HStack from '../Stack/HStack.svelte';
-  import type { Color } from '../../types.js';
   import { t } from '../../services/translation.svelte.js';
+  import type { Color, ModalSize } from '../../types.js';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -15,7 +15,7 @@
     confirmText?: string;
     confirmColor?: Color;
     disabled?: boolean;
-    size?: 'small' | 'medium';
+    size?: ModalSize;
     onClose: (confirmed: boolean) => void;
     promptSnippet?: Snippet;
   }

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

@@ -1,4 +1,4 @@
-import type { Color } from '../../types.js';
+import type { Color, ModalSize } from '../../types.js';
 import type { Snippet } from 'svelte';
 interface Props {
     title?: string;
@@ -7,7 +7,7 @@ interface Props {
     confirmText?: string;
     confirmColor?: Color;
     disabled?: boolean;
-    size?: 'small' | 'medium';
+    size?: ModalSize;
     onClose: (confirmed: boolean) => void;
     promptSnippet?: Snippet;
 }

package/dist/components/FormModal/FormModal.svelte

@@ -5,7 +5,7 @@
   import ModalFooter from '../Modal/ModalFooter.svelte';
   import HStack from '../Stack/HStack.svelte';
   import { t } from '../../services/translation.svelte.js';
-  import type { Color } from '../../types.js';
+  import type { Color, ModalSize } from '../../types.js';
   import { generateId } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
 
@@ -15,7 +15,7 @@
     submitText?: string;
     submitColor?: Color;
     disabled?: boolean;
-    size?: 'small' | 'medium';
+    size?: ModalSize;
     preventDefault?: boolean;
     onClose: () => void;
     onSubmit: (event: SubmitEvent) => void;

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

@@ -1,4 +1,4 @@
-import type { Color } from '../../types.js';
+import type { Color, ModalSize } from '../../types.js';
 import type { Snippet } from 'svelte';
 type Props = {
     title: string;
@@ -6,7 +6,7 @@ type Props = {
     submitText?: string;
     submitColor?: Color;
     disabled?: boolean;
-    size?: 'small' | 'medium';
+    size?: ModalSize;
     preventDefault?: boolean;
     onClose: () => void;
     onSubmit: (event: SubmitEvent) => void;

package/dist/components/IconButton/IconButton.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import Button from '../../internal/Button.svelte';
   import Icon from '../Icon/Icon.svelte';
+  import Button from '../../internal/Button.svelte';
   import type { IconButtonProps } from '../../types.js';
 
   const { icon, flipped, flopped, title, 'aria-label': ariaLabel, ...buttonProps }: IconButtonProps = $props();
 
-  const buttonTitle = $derived(title || ariaLabel);
+  const buttonTitle = $derived(title ?? ariaLabel);
 </script>
 
 <Button icon {...buttonProps} title={buttonTitle} aria-label={ariaLabel}>

package/dist/components/Modal/Modal.svelte

@@ -8,6 +8,7 @@
   import CloseButton from '../CloseButton/CloseButton.svelte';
   import Icon from '../Icon/Icon.svelte';
   import Logo from '../Logo/Logo.svelte';
+  import TooltipProvider from '../Tooltip/TooltipProvider.svelte';
   import { ChildKey, zIndex } from '../../constants.js';
   import { commandPaletteManager } from '../../services/command-palette-manager.svelte.js';
   import type { ModalSize } from '../../types.js';
@@ -99,35 +100,37 @@
       {interactOutsideBehavior}
       class={cleanClass(modalContentStyles({ size }))}
     >
-      <div class={cleanClass('flex w-full grow flex-col justify-center')}>
-        <Card bind:ref={cardRef} class={cleanClass(modalStyles({ size }), className)}>
-          <CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
-            {#if headerChildren}
-              {@render headerChildren.snippet()}
-            {:else if title}
-              <div class="flex items-center justify-between gap-2">
-                {#if typeof icon === 'string'}
-                  <Icon {icon} size="1.5rem" aria-hidden />
-                {:else if icon}
-                  <Logo variant="icon" size="tiny" />
-                {/if}
-                <CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
-                <CloseButton class="-me-2" onclick={() => handleClose()} />
-              </div>
-            {/if}
-          </CardHeader>
+      <TooltipProvider>
+        <div class={cleanClass('flex w-full grow flex-col justify-center')}>
+          <Card bind:ref={cardRef} class={cleanClass(modalStyles({ size }), className)}>
+            <CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
+              {#if headerChildren}
+                {@render headerChildren.snippet()}
+              {:else if title}
+                <div class="flex items-center justify-between gap-2">
+                  {#if typeof icon === 'string'}
+                    <Icon {icon} size="1.5rem" aria-hidden />
+                  {:else if icon}
+                    <Logo variant="icon" size="tiny" />
+                  {/if}
+                  <CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
+                  <CloseButton class="-me-2" onclick={() => handleClose()} />
+                </div>
+              {/if}
+            </CardHeader>
 
-          <CardBody class="grow px-5">
-            {@render bodyChildren?.snippet()}
-          </CardBody>
+            <CardBody class="grow px-5">
+              {@render bodyChildren?.snippet()}
+            </CardBody>
 
-          {#if footerChildren}
-            <CardFooter class="border-t border-gray-200 dark:border-white/10">
-              {@render footerChildren.snippet()}
-            </CardFooter>
-          {/if}
-        </Card>
-      </div>
+            {#if footerChildren}
+              <CardFooter class="border-t border-gray-200 dark:border-white/10">
+                {@render footerChildren.snippet()}
+              </CardFooter>
+            {/if}
+          </Card>
+        </div>
+      </TooltipProvider>
     </Dialog.Content>
   </Dialog.Portal>
 </Dialog.Root>

package/dist/components/Textarea/Textarea.svelte

@@ -22,7 +22,7 @@
   const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(getFieldContext());
 
   const styles = tv({
-    base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
+    base: 'focus-within:ring-primary dark:focus-within:ring-primary w-full bg-gray-100 ring-1 ring-gray-200 outline-none focus-within:ring-1 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-800 dark:ring-black dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
     variants: {
       shape: styleVariants.shape,
       padding: {

package/dist/components/Toast/ToastContent.svelte

@@ -27,15 +27,15 @@
   );
 
   const iconStyles = tv({
-    base: 'h-8 w-8 shrink-0 rounded-xl py-1.75',
+    base: 'h-8 w-8 shrink-0 rounded-xl py-1.75 text-white',
     variants: {
       color: {
-        primary: 'bg-primary-100 dark:bg-primary-200 text-primary',
-        secondary: 'bg-light-200 dark:bg-light-300',
-        success: 'bg-success-100 dark:bg-success-200 text-success',
-        info: 'bg-info-200 text-info',
-        warning: 'bg-warning-200 text-warning',
-        danger: 'bg-danger-200 text-danger',
+        primary: 'bg-primary dark:bg-primary-200',
+        secondary: 'bg-dark dark:bg-light-300',
+        success: 'bg-success dark:bg-success-200',
+        info: 'bg-info dark:text-info-50',
+        warning: 'bg-warning dark:text-warning-50',
+        danger: 'bg-danger dark:text-danger-50',
       },
     },
   });

package/dist/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { zIndex } from '../../constants.js';
+  import { Tooltip } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { fly } from 'svelte/transition';
+
+  type Props = Tooltip.RootProps & {
+    text?: string | null;
+    child: Snippet<[{ props: Record<string, unknown> }]>;
+  };
+
+  let { open = $bindable(false), child, text, ...restProps }: Props = $props();
+</script>
+
+{#if text}
+  <Tooltip.Root bind:open {...restProps}>
+    <Tooltip.Trigger {child} />
+    <Tooltip.Portal>
+      <Tooltip.Content
+        sideOffset={8}
+        forceMount
+        class="bg-light-800 text-light {zIndex.Tooltip} rounded-lg px-3.5 py-2 text-xs shadow-lg"
+      >
+        {#snippet child({ wrapperProps, props, open })}
+          {#if open}
+            <div {...wrapperProps}>
+              <div {...props} transition:fly={{ y: 4, duration: 150 }}>
+                {text}
+              </div>
+            </div>
+          {/if}
+        {/snippet}
+      </Tooltip.Content>
+    </Tooltip.Portal>
+  </Tooltip.Root>
+{:else}
+  {@render child({ props: {} })}
+{/if}

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

@@ -0,0 +1,11 @@
+import { Tooltip } from 'bits-ui';
+import type { Snippet } from 'svelte';
+type Props = Tooltip.RootProps & {
+    text?: string | null;
+    child: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/Tooltip/TooltipProvider.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Tooltip } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    delayDuration?: number;
+    children?: Snippet;
+  };
+
+  const { children, delayDuration }: Props = $props();
+</script>
+
+<Tooltip.Provider disableCloseOnTriggerClick ignoreNonKeyboardFocus {delayDuration}>
+  {@render children?.()}
+</Tooltip.Provider>

package/dist/components/Tooltip/TooltipProvider.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    delayDuration?: number;
+    children?: Snippet;
+};
+declare const TooltipProvider: import("svelte").Component<Props, {}, "">;
+type TooltipProvider = ReturnType<typeof TooltipProvider>;
+export default TooltipProvider;

package/dist/constants.d.ts

@@ -20,4 +20,5 @@ export declare const zIndex: {
     SelectDropdown: string;
     ToastPanel: string;
     ContextMenu: string;
+    Tooltip: string;
 };

package/dist/constants.js

@@ -21,4 +21,5 @@ export const zIndex = {
     SelectDropdown: 'z-55',
     ToastPanel: 'z-60',
     ContextMenu: 'z-70!',
+    Tooltip: 'z-90',
 };

package/dist/index.d.ts

@@ -73,6 +73,8 @@ export { default as Toast } from './components/Toast/Toast.svelte';
 export { default as ToastContainer } from './components/Toast/ToastContainer.svelte';
 export { default as ToastContent } from './components/Toast/ToastContent.svelte';
 export { default as ToastPanel } from './components/Toast/ToastPanel.svelte';
+export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
+export { default as TooltipProvider } from './components/Tooltip/TooltipProvider.svelte';
 export * from './services/command-palette-manager.svelte.js';
 export * from './services/menu-manager.svelte.js';
 export * from './services/modal-manager.svelte.js';

package/dist/index.js

@@ -75,6 +75,8 @@ export { default as Toast } from './components/Toast/Toast.svelte';
 export { default as ToastContainer } from './components/Toast/ToastContainer.svelte';
 export { default as ToastContent } from './components/Toast/ToastContent.svelte';
 export { default as ToastPanel } from './components/Toast/ToastPanel.svelte';
+export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
+export { default as TooltipProvider } from './components/Tooltip/TooltipProvider.svelte';
 // helpers
 export * from './services/command-palette-manager.svelte.js';
 export * from './services/menu-manager.svelte.js';

package/dist/internal/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from '../components/Icon/Icon.svelte';
   import LoadingSpinner from '../components/LoadingSpinner/LoadingSpinner.svelte';
+  import Tooltip from '../components/Tooltip/Tooltip.svelte';
   import { styleVariants } from '../styles.js';
   import type { ButtonProps, Size } from '../types.js';
   import { isExternalLink, resolveUrl } from '../utilities/common.js';
@@ -27,6 +28,7 @@
     leadingIcon,
     trailingIcon,
     icon = false,
+    title,
     class: className = '',
     children,
     ...restProps
@@ -149,29 +151,35 @@
   {/if}
 {/snippet}
 
-{#if href}
-  {@const resolved = resolveUrl(href)}
-  {@const external = isExternalLink(resolved)}
-  <a
-    bind:this={ref}
-    href={resolved}
-    class={classList}
-    aria-disabled={disabled}
-    target={external ? '_blank' : undefined}
-    rel={external ? 'noopener noreferrer' : undefined}
-    {...restProps as HTMLAnchorAttributes}
-  >
-    {@render wrapper()}
-  </a>
-{:else}
-  <ButtonPrimitive.Root
-    bind:ref
-    class={classList}
-    type={type as HTMLButtonAttributes['type']}
-    {...restProps as HTMLButtonAttributes}
-    {disabled}
-    aria-disabled={disabled}
-  >
-    {@render wrapper()}
-  </ButtonPrimitive.Root>
-{/if}
+<Tooltip text={title}>
+  {#snippet child({ props })}
+    {#if href}
+      {@const resolved = resolveUrl(href)}
+      {@const external = isExternalLink(resolved)}
+      <a
+        bind:this={ref}
+        {...props}
+        href={resolved}
+        class={classList}
+        aria-disabled={disabled}
+        target={external ? '_blank' : undefined}
+        rel={external ? 'noopener noreferrer' : undefined}
+        {...restProps as HTMLAnchorAttributes}
+      >
+        {@render wrapper()}
+      </a>
+    {:else}
+      <ButtonPrimitive.Root
+        bind:ref
+        {...props}
+        class={classList}
+        type={type as HTMLButtonAttributes['type']}
+        {...restProps as HTMLButtonAttributes}
+        {disabled}
+        aria-disabled={disabled}
+      >
+        {@render wrapper()}
+      </ButtonPrimitive.Root>
+    {/if}
+  {/snippet}
+</Tooltip>

package/dist/internal/Select.svelte

@@ -136,7 +136,7 @@
             >
               {#snippet children({ selected })}
                 <div
-                  class="flex cursor-pointer items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-colors"
+                  class="flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-colors"
                 >
                   <span>{label}</span>
                 </div>

package/dist/theme/default.css

@@ -119,7 +119,7 @@
     --immich-ui-primary-900: oklch(0.211 0.068 273.01);
     --immich-ui-primary-950: oklch(0.15 0.05 273.01);
 
-    --immich-ui-success-50: oklch(0.969 0.051 148.59);
+    --immich-ui-success-50: oklch(0.983 0.0115 162.06);
     --immich-ui-success-100: oklch(0.937 0.109 148.66);
     --immich-ui-success-200: oklch(0.863 0.249 147.5);
     --immich-ui-success-300: oklch(0.813 0.234 147.54);
@@ -131,7 +131,7 @@
     --immich-ui-success-900: oklch(0.252 0.073 147.47);
     --immich-ui-success-950: oklch(0.194 0.056 147.87);
 
-    --immich-ui-danger-50: oklch(0.96 0.018 17.57);
+    --immich-ui-danger-50: oklch(0.9747 0.0109 24.32);
     --immich-ui-danger-100: oklch(0.926 0.034 17.84);
     --immich-ui-danger-200: oklch(0.853 0.074 19.77);
     --immich-ui-danger-300: oklch(0.774 0.125 21.53);
@@ -143,7 +143,7 @@
     --immich-ui-danger-900: oklch(0.245 0.094 29.51);
     --immich-ui-danger-950: oklch(0.186 0.07 29.56);
 
-    --immich-ui-warning: oklch(0.812 0.17 76.3);
+    --immich-ui-warning: oklch(0.9887 0.0126 86.83);
     --immich-ui-warning-50: oklch(0.983 0.01 58.27);
     --immich-ui-warning-100: oklch(0.959 0.027 63.96);
     --immich-ui-warning-200: oklch(0.925 0.051 64.24);
@@ -156,7 +156,7 @@
     --immich-ui-warning-900: oklch(0.27 0.057 76.33);
     --immich-ui-warning-950: oklch(0.209 0.044 77.51);
 
-    --immich-ui-info-50: oklch(0.958 0.02 267.31);
+    --immich-ui-info-50: oklch(0.9801 0.0096 252.81);
     --immich-ui-info-100: oklch(0.922 0.036 268.3);
     --immich-ui-info-200: oklch(0.845 0.073 265.19);
     --immich-ui-info-300: oklch(0.769 0.114 261.53);

package/dist/utilities/common.js

@@ -24,7 +24,14 @@ export const resolveUrl = (url, currentHostname) => {
     }
 };
 export const isExternalLink = (href) => {
-    return !(href.startsWith('/') || href.startsWith('#'));
+    try {
+        const current = new URL(globalThis.location.href);
+        const target = new URL(href, current);
+        return target.origin !== current.origin;
+    }
+    catch {
+        return false;
+    }
 };
 export const isMenuItemType = (item) => {
     return item === MenuItemType.Divider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -51,7 +51,7 @@
     "@mdi/js": "^7.4.47",
     "bits-ui": "^2.9.8",
     "luxon": "^3.7.2",
-    "simple-icons": "^15.14.0",
+    "simple-icons": "^16.0.0",
     "svelte-highlight": "^7.8.4",
     "tailwind-merge": "^3.0.0",
     "tailwind-variants": "^3.0.0",