@immich/ui 0.37.1 → 0.38.0

package/dist/components/Checkbox/Checkbox.svelte

@@ -3,6 +3,7 @@
   import Icon from '../Icon/Icon.svelte';
   import Label from '../Label/Label.svelte';
   import Text from '../Text/Text.svelte';
+  import { styleVariants } from '../../styles.js';
   import type { Color, Shape, Size } from '../../types.js';
   import { cleanClass, generateId } from '../../utilities/internal.js';
   import { mdiCheck, mdiMinus } from '@mdi/js';
@@ -30,19 +31,8 @@
   const containerStyles = tv({
     base: 'ring-offset-background focus-visible:ring-ring peer data-[state=checked]:bg-primary box-content overflow-hidden border-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
     variants: {
-      shape: {
-        rectangle: 'rounded-none',
-        'semi-round': 'rounded-lg',
-        round: 'rounded-full',
-      },
-      color: {
-        primary: 'border-primary',
-        secondary: 'border-dark',
-        success: 'border-success',
-        danger: 'border-danger',
-        warning: 'border-warning',
-        info: 'border-info',
-      },
+      shape: styleVariants.shape,
+      borderColor: styleVariants.borderColor,
       size: {
         tiny: 'size-4',
         small: 'size-5',
@@ -65,14 +55,8 @@
       fullWidth: {
         true: 'w-full',
       },
-      color: {
-        primary: 'bg-primary text-light hover:bg-primary/80',
-        secondary: 'bg-dark text-light hover:bg-dark/80',
-        success: 'bg-success text-light hover:bg-success/80',
-        danger: 'bg-danger text-light hover:bg-danger/80',
-        warning: 'bg-warning text-light hover:bg-warning/80',
-        info: 'bg-info text-light hover:bg-info/80',
-      },
+      filledColor: styleVariants.filledColor,
+      filledColorHover: styleVariants.filledColorHover,
     },
   });
 
@@ -82,6 +66,19 @@
   const descriptionId = $derived(description ? `description-${id}` : undefined);
 </script>
 
+{#snippet icon(icon: string)}
+  <Icon
+    {icon}
+    size="100%"
+    class={cleanClass(
+      iconStyles({
+        filledColor: color,
+        filledColorHover: color,
+      }),
+    )}
+  />
+{/snippet}
+
 <div class="flex flex-col gap-1">
   {#if label}
     <Label id={labelId} for={inputId} {label} {...labelProps} />
@@ -95,7 +92,7 @@
     class={cleanClass(
       containerStyles({
         size,
-        color: invalid ? 'danger' : color,
+        borderColor: invalid ? 'danger' : color,
         shape,
         roundedSize: shape === 'semi-round' ? size : undefined,
       }),
@@ -111,9 +108,9 @@
     {#snippet children({ checked, indeterminate })}
       <div class={cleanClass('flex items-center justify-center text-current')}>
         {#if indeterminate}
-          <Icon icon={mdiMinus} size="100%" class={cleanClass(iconStyles({ color }))} />
+          {@render icon(mdiMinus)}
         {:else if checked}
-          <Icon icon={mdiCheck} size="100%" class={cleanClass(iconStyles({ color }))} />
+          {@render icon(mdiCheck)}
         {/if}
       </div>
     {/snippet}

package/dist/components/CloseButton/CloseButton.svelte

@@ -4,7 +4,13 @@
   import type { CloseButtonProps } from '../../types.js';
   import { mdiClose } from '@mdi/js';
 
-  const { size = 'medium', variant = 'ghost', translations, ...restProps }: CloseButtonProps = $props();
+  const {
+    size = 'medium',
+    variant = 'ghost',
+    color = 'secondary',
+    translations,
+    ...restProps
+  }: CloseButtonProps = $props();
 </script>
 
 <IconButton
@@ -13,6 +19,6 @@
   shape="round"
   {variant}
   {size}
-  color="secondary"
+  {color}
   aria-label={t('close', translations)}
 />

package/dist/components/Code/Code.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { styleVariants } from '../../styles.js';
   import type { Size, TextColor } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
@@ -58,13 +59,7 @@
         info: 'border-info text-info border',
       },
 
-      size: {
-        tiny: 'text-xs',
-        small: 'text-sm',
-        medium: 'text-base',
-        large: 'text-lg',
-        giant: 'text-xl',
-      },
+      size: styleVariants.textSize,
     },
   });
 </script>

package/dist/components/Input/Input.svelte

@@ -3,6 +3,7 @@
   import Icon from '../Icon/Icon.svelte';
   import Label from '../Label/Label.svelte';
   import Text from '../Text/Text.svelte';
+  import { styleVariants } from '../../styles.js';
   import type { InputProps } from '../../types.js';
   import { cleanClass, generateId, isIconLike } from '../../utilities/internal.js';
   import { tv } from 'tailwind-variants';
@@ -39,11 +40,7 @@
   const containerStyles = tv({
     base: 'flex w-full items-center 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',
     variants: {
-      shape: {
-        rectangle: 'rounded-none',
-        'semi-round': '',
-        round: 'rounded-full',
-      },
+      shape: styleVariants.shape,
       roundedSize: {
         tiny: 'rounded-xl',
         small: 'rounded-xl',
@@ -61,13 +58,7 @@
   const inputStyles = tv({
     base: 'flex-1 bg-transparent py-3 outline-none disabled:cursor-not-allowed',
     variants: {
-      textSize: {
-        tiny: 'text-xs',
-        small: 'text-sm',
-        medium: 'text-base',
-        large: 'text-lg',
-        giant: 'text-xl',
-      },
+      textSize: styleVariants.textSize,
       leadingPadding: {
         base: 'pl-4',
         icon: 'pl-0',

package/dist/components/LoadingSpinner/LoadingSpinner.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { styleVariants } from '../../styles.js';
   import type { Color, Size } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { tv } from 'tailwind-variants';
@@ -21,14 +22,7 @@
         large: 'h-6',
         giant: 'h-12',
       },
-      color: {
-        primary: 'fill-primary',
-        secondary: 'fill-dark',
-        success: 'fill-success',
-        danger: 'fill-danger',
-        warning: 'fill-warning',
-        info: 'fill-info',
-      },
+      color: styleVariants.fillColor,
     },
   });
 </script>

package/dist/components/NumberInput/NumberInput.svelte

@@ -5,7 +5,13 @@
   let { value = $bindable(), color = 'secondary', size, ...props }: NumberInputProps = $props();
 
   const getValue = () => (typeof value === 'number' ? String(value) : '');
-  const setValue = (newValue: string) => {
+  const setValue = (newValue: string | number | null) => {
+    if (typeof newValue === 'number') {
+      value = newValue;
+      return;
+    }
+
+    // empty string or null
     if (!newValue) {
       value = undefined;
       return;

package/dist/components/Switch/Switch.svelte

@@ -38,7 +38,7 @@
   });
 
   const bar = tv({
-    base: 'h-8 w-13 rounded-full border border-2',
+    base: 'h-8 w-13 rounded-full border-2',
     variants: {
       fillColor: {
         default: 'border-gray-400 bg-gray-300 dark:border-gray-500 dark:bg-gray-400',

package/dist/components/Text/Text.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Text from '../../internal/Text.svelte';
+  import { styleVariants } from '../../styles.js';
   import type { FontWeight, Size, TextColor, TextVariant } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
@@ -19,13 +20,7 @@
 
   const styles = tv({
     variants: {
-      size: {
-        tiny: 'text-xs',
-        small: 'text-sm',
-        medium: 'text-base',
-        large: 'text-lg',
-        giant: 'text-xl',
-      },
+      size: styleVariants.textSize,
     },
   });
 </script>

package/dist/components/Textarea/Textarea.svelte

@@ -2,6 +2,7 @@
   import { getFieldContext } from '../../common/context.svelte.js';
   import Label from '../Label/Label.svelte';
   import Text from '../Text/Text.svelte';
+  import { styleVariants } from '../../styles.js';
   import type { TextareaProps } from '../../types.js';
   import { cleanClass, generateId } from '../../utilities/internal.js';
   import type { FormEventHandler } from 'svelte/elements';
@@ -23,11 +24,7 @@
   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',
     variants: {
-      shape: {
-        rectangle: 'rounded-none',
-        'semi-round': '',
-        round: 'rounded-full',
-      },
+      shape: styleVariants.shape,
       padding: {
         base: 'px-4 py-3',
         round: 'px-5 py-3',
@@ -43,13 +40,7 @@
         large: 'rounded-2xl',
         giant: 'rounded-2xl',
       },
-      textSize: {
-        tiny: 'text-xs',
-        small: 'text-sm',
-        medium: 'text-base',
-        large: 'text-lg',
-        giant: 'text-xl',
-      },
+      textSize: styleVariants.textSize,
       invalid: {
         true: 'border-danger/80 border',
         false: '',

package/dist/components/Toast/Toast.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import ToastContainer from './ToastContainer.svelte';
+  import ToastContent from './ToastContent.svelte';
+  import type { ToastProps } from '../../types.js';
+
+  let { children, title, description, icon, onClose, ...props }: ToastProps = $props();
+</script>
+
+<ToastContainer {...props}>
+  {#if children}
+    {@render children()}
+  {:else if title}
+    <ToastContent {title} {description} {icon} {onClose} {...props} />
+  {/if}
+</ToastContainer>

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

@@ -0,0 +1,4 @@
+import type { ToastProps } from '../../types.js';
+declare const Toast: import("svelte").Component<ToastProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/Toast/ToastContainer.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { styleVariants } from '../../styles.js';
+  import type { ToastContainerProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { fade, fly } from 'svelte/transition';
+  import { tv } from 'tailwind-variants';
+
+  let {
+    color = 'primary',
+    shape = 'semi-round',
+    size = 'medium',
+    variant = 'filled',
+    class: className,
+    children,
+    ...restProps
+  }: ToastContainerProps = $props();
+
+  const containerStyles = tv({
+    base: 'bg-light text-dark overflow-hidden transition-all',
+    variants: {
+      shape: styleVariants.shape,
+      size: {
+        tiny: 'w-64',
+        small: 'w-72',
+        medium: 'w-xs',
+        large: 'w-sm',
+        giant: 'w-lg',
+        full: 'w-full',
+      },
+
+      border: styleVariants.border,
+      borderColor: styleVariants.borderColor,
+      roundedSize: {
+        tiny: 'rounded-lg',
+        small: 'rounded-lg',
+        medium: 'rounded-xl',
+        large: 'rounded-xl',
+        giant: 'rounded-2xl',
+      },
+    },
+  });
+
+  const container2Styles = tv({
+    variants: {
+      filled: {
+        primary: 'bg-primary/20 dark:bg-primary/25',
+        secondary: 'bg-dark/20 dark:bg-dark/25',
+        muted: 'bg-subtle dark:bg-subtle',
+        info: 'bg-info/20 dark:bg-info/25',
+        warning: 'bg-warning/20 dark:bg-warning/25',
+        danger: 'bg-danger/20 dark:bg-danger/25',
+        success: 'bg-success/20 dark:bg-success/25',
+      },
+      outline: {
+        primary: 'bg-primary/10 text-primary hover:bg-primary/20',
+        secondary: 'bg-dark/10 text-dark hover:bg-dark/20',
+        success: 'bg-success/10 text-success hover:bg-success/20',
+        danger: 'bg-danger/10 text-danger hover:bg-danger/20',
+        warning: 'bg-warning/10 text-warning hover:bg-warning/20',
+        info: 'bg-info/10 text-info hover:bg-info/20',
+      },
+    },
+  });
+</script>
+
+<div
+  out:fade|global={{ duration: 100 }}
+  in:fly|global={{ y: 200, duration: 250 }}
+  class={cleanClass(
+    containerStyles({
+      shape,
+      size,
+      roundedSize: shape === 'semi-round' ? 'medium' : undefined,
+      border: variant === 'outline',
+      borderColor: variant === 'outline' ? color : undefined,
+    }),
+    className,
+  )}
+  {...restProps}
+>
+  <div
+    class={container2Styles({
+      outline: variant === 'outline' ? color : undefined,
+      filled: variant === 'filled' ? color : undefined,
+    })}
+  >
+    {@render children?.()}
+  </div>
+</div>

package/dist/components/Toast/ToastContainer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToastContainerProps } from '../../types.js';
+declare const ToastContainer: import("svelte").Component<ToastContainerProps, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;

package/dist/components/Toast/ToastContent.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import CloseButton from '../CloseButton/CloseButton.svelte';
+  import Icon from '../Icon/Icon.svelte';
+  import Text from '../Text/Text.svelte';
+  import { styleVariants } from '../../styles.js';
+  import type { ToastContentProps } from '../../types.js';
+  import { resolveIcon } from '../../utilities/internal.js';
+  import { mdiAlert, mdiBell, mdiCheck, mdiCloseOctagon, mdiInformation } from '@mdi/js';
+  import { type Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
+
+  let {
+    color = 'primary',
+    variant = 'filled',
+    icon: iconOverride,
+    title,
+    description,
+    onClose,
+    children,
+  }: ToastContentProps = $props();
+
+  const icon = $derived(
+    resolveIcon({
+      icons: {
+        primary: mdiBell,
+        danger: mdiCloseOctagon,
+        info: mdiInformation,
+        warning: mdiAlert,
+        success: mdiCheck,
+      },
+      color,
+      override: iconOverride,
+      fallback: mdiBell,
+    }),
+  );
+
+  const iconStyles = tv({
+    base: 'h-10 w-10 shrink-0 py-2',
+    variants: {
+      color: styleVariants.textColor,
+    },
+  });
+</script>
+
+{#snippet resolve(text: string | Snippet)}
+  {#if typeof text === 'string'}{text}{:else}{@render text()}{/if}
+{/snippet}
+
+<div class="flex items-center px-2">
+  <div class="flex items-center">
+    {#if icon}
+      <Icon {icon} class={iconStyles({ color: variant === 'filled' ? color : undefined })} />
+    {/if}
+  </div>
+  <div class="flex grow justify-between">
+    <div class="flex flex-col p-2">
+      {#if title}
+        <Text fontWeight="bold">{@render resolve(title)}</Text>
+      {/if}
+      {#if description}
+        <Text size="small">{@render resolve(description)}</Text>
+      {/if}
+    </div>
+    {#if onClose}
+      <div class="flex items-center">
+        <CloseButton color={variant === 'filled' ? 'secondary' : color} variant="ghost" onclick={onClose} />
+      </div>
+    {/if}
+  </div>
+</div>
+{@render children?.()}

package/dist/components/Toast/ToastContent.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToastContentProps } from '../../types.js';
+declare const ToastContent: import("svelte").Component<ToastContentProps, {}, "">;
+type ToastContent = ReturnType<typeof ToastContent>;
+export default ToastContent;

package/dist/components/Toast/ToastPanel.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import Toast from './Toast.svelte';
+  import { zIndex } from '../../constants.js';
+  import { isCustomToast } from '../../services/toast-manager.svelte.js';
+  import type { ToastId, ToastItem } from '../../types.js';
+
+  type Props = {
+    items: Array<ToastItem & ToastId>;
+  };
+
+  const { items }: Props = $props();
+</script>
+
+<div class="absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4 {zIndex.ToastPanel}">
+  {#each items as item (item.id)}
+    {#if isCustomToast(item)}
+      <item.component {...item.props} />
+    {:else}
+      <Toast {...item} />
+    {/if}
+  {/each}
+</div>

package/dist/components/Toast/ToastPanel.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ToastId, ToastItem } from '../../types.js';
+type Props = {
+    items: Array<ToastItem & ToastId>;
+};
+declare const ToastPanel: import("svelte").Component<Props, {}, "">;
+type ToastPanel = ReturnType<typeof ToastPanel>;
+export default ToastPanel;

package/dist/constants.d.ts

@@ -17,4 +17,5 @@ export declare const zIndex: {
     AppShellSidebar: string;
     ModalBackdrop: string;
     ModalContent: string;
+    ToastPanel: string;
 };

package/dist/constants.js

@@ -18,4 +18,5 @@ export const zIndex = {
     AppShellSidebar: 'z-30',
     ModalBackdrop: 'z-40',
     ModalContent: 'z-50',
+    ToastPanel: 'z-60',
 };

package/dist/index.d.ts

@@ -62,9 +62,14 @@ export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export { default as Textarea } from './components/Textarea/Textarea.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
+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 * from './services/command-palette-manager.svelte.js';
 export * from './services/modal-manager.svelte.js';
 export * from './services/theme.svelte.js';
+export * from './services/toast-manager.svelte.js';
 export * from './services/translation.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';

package/dist/index.js

@@ -64,10 +64,15 @@ export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export { default as Textarea } from './components/Textarea/Textarea.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
+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';
 // helpers
 export * from './services/command-palette-manager.svelte.js';
 export * from './services/modal-manager.svelte.js';
 export * from './services/theme.svelte.js';
+export * from './services/toast-manager.svelte.js';
 export * from './services/translation.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';

package/dist/internal/Button.svelte

@@ -42,11 +42,7 @@
         true: 'disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50',
         false: 'cursor-pointer',
       },
-      shape: {
-        rectangle: 'rounded-none',
-        'semi-round': 'rounded-xl',
-        round: 'rounded-full',
-      },
+      shape: styleVariants.shape,
       fullWidth: {
         true: 'w-full',
       },
@@ -72,14 +68,8 @@
         large: 'rounded-xl',
         giant: 'rounded-2xl',
       },
-      filledColor: {
-        primary: 'bg-primary text-light hover:bg-primary/80',
-        secondary: 'bg-dark text-light hover:bg-dark/80',
-        success: 'bg-success text-light hover:bg-success/80',
-        danger: 'bg-danger text-light hover:bg-danger/80',
-        warning: 'bg-warning text-light hover:bg-warning/80',
-        info: 'bg-info text-light hover:bg-info/80',
-      },
+      filledColor: styleVariants.filledColor,
+      filledColorHover: styleVariants.filledColorHover,
       outlineColor: {
         primary: 'border-primary bg-primary/10 text-primary hover:bg-primary/20 border',
         secondary: 'border-dark bg-dark/10 text-dark hover:bg-dark/20 border',
@@ -119,6 +109,7 @@
           disabled,
           roundedSize: shape === 'semi-round' ? size : undefined,
           filledColor: variant === 'filled' ? color : undefined,
+          filledColorHover: variant === 'filled' ? color : undefined,
           outlineColor: variant === 'outline' ? color : undefined,
           ghostColor: variant === 'ghost' ? color : undefined,
         }),
@@ -148,6 +139,19 @@
   {/if}
 {/snippet}
 
+{#snippet wrapper()}
+  {#if loading}
+    <div class="flex items-center justify-center gap-2">
+      <LoadingSpinner {color} size={spinnerSizes[size]} />
+      {#if !icon}
+        {@render content()}
+      {/if}
+    </div>
+  {:else}
+    {@render content()}
+  {/if}
+{/snippet}
+
 {#if href}
   {@const resolved = resolveUrl(href)}
   {@const external = isExternalLink(resolved)}
@@ -160,14 +164,7 @@
     rel={external ? 'noopener noreferrer' : undefined}
     {...restProps as HTMLAnchorAttributes}
   >
-    {#if loading}
-      <div class="flex items-center justify-center gap-2">
-        <LoadingSpinner {color} size={spinnerSizes[size]} />
-        {@render content()}
-      </div>
-    {:else}
-      {@render content()}
-    {/if}
+    {@render wrapper()}
   </a>
 {:else}
   <ButtonPrimitive.Root
@@ -178,13 +175,6 @@
     {disabled}
     aria-disabled={disabled}
   >
-    {#if loading}
-      <div class="flex items-center justify-center gap-2">
-        <LoadingSpinner {color} size={spinnerSizes[size]} />
-        {@render content()}
-      </div>
-    {:else}
-      {@render content()}
-    {/if}
+    {@render wrapper()}
   </ButtonPrimitive.Root>
 {/if}

package/dist/internal/Text.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { styleVariants } from '../styles.js';
   import type { FontWeight, HeadingColor, HeadingTag, Size, TextVariant } from '../types.js';
   import { cleanClass } from '../utilities/internal.js';
   import type { Snippet } from 'svelte';
@@ -32,20 +33,8 @@
         warning: 'text-warning',
         info: 'text-info',
       },
-      fontWeight: {
-        light: 'font-light',
-        normal: 'font-normal',
-        'semi-bold': 'font-semibold',
-        bold: 'font-bold',
-        'extra-bold': 'font-extrabold',
-      },
-      size: {
-        tiny: 'text-xs',
-        small: 'text-sm',
-        medium: 'text-base',
-        large: 'text-lg',
-        giant: 'text-xl',
-      },
+      fontWeight: styleVariants.fontWeight,
+      size: styleVariants.textSize,
       variant: {
         italic: 'italic',
       },

package/dist/services/toast-manager.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ToastCustom, ToastItem, ToastOptions, ToastShow } from '../types.js';
+export declare const isCustomToast: (item: ToastItem) => item is ToastCustom;
+declare class ToastManager {
+    #private;
+    show(item: ToastShow, options?: ToastOptions): void;
+    custom(item: ToastCustom, options?: ToastOptions): void;
+    open(item: ToastItem, options?: ToastOptions): void;
+    unmount(): Promise<void>;
+    primary(item: ToastShow): void;
+    success(item: ToastShow): void;
+    info(item: ToastShow): void;
+    warning(item: ToastShow): void;
+    danger(item: ToastShow): void;
+    mount(): Promise<void>;
+    private remove;
+}
+export declare const toastManager: ToastManager;
+export {};

package/dist/services/toast-manager.svelte.js

@@ -0,0 +1,65 @@
+import ToastPanel from '../components/Toast/ToastPanel.svelte';
+import { generateId } from '../utilities/internal.js';
+import { mount, unmount } from 'svelte';
+export const isCustomToast = (item) => !!item.component;
+class ToastManager {
+    #ref;
+    #props = $state({ items: [] });
+    show(item, options) {
+        return this.open(item, options);
+    }
+    custom(item, options) {
+        return this.open(item, options);
+    }
+    open(item, options) {
+        const { timeout = 3000, closable = true, id = generateId() } = options || {};
+        const toast = item;
+        toast.id = id;
+        if (closable) {
+            const onClose = () => this.remove(toast);
+            if (isCustomToast(item)) {
+                item.props.onClose = onClose;
+            }
+            else {
+                item.onClose = onClose;
+            }
+        }
+        this.#props.items.push(toast);
+        void this.mount();
+        if (timeout) {
+            setTimeout(() => this.remove(toast), timeout);
+        }
+    }
+    async unmount() {
+        if (this.#ref) {
+            await unmount(this.#ref);
+        }
+    }
+    primary(item) {
+        this.show({ ...item, color: 'primary' });
+    }
+    success(item) {
+        this.show({ ...item, color: 'success' });
+    }
+    info(item) {
+        this.show({ ...item, color: 'info' });
+    }
+    warning(item) {
+        this.show({ ...item, color: 'warning' });
+    }
+    danger(item) {
+        this.show({ ...item, color: 'danger' });
+    }
+    async mount() {
+        if (!this.#ref) {
+            this.#ref = await mount(ToastPanel, {
+                target: document.body,
+                props: this.#props,
+            });
+        }
+    }
+    remove(target) {
+        this.#props.items = this.#props.items.filter((item) => item.id !== target.id);
+    }
+}
+export const toastManager = new ToastManager();

package/dist/styles.d.ts

@@ -16,6 +16,47 @@ export declare const styleVariants: {
         warning: string;
         info: string;
     };
+    shape: {
+        rectangle: string;
+        'semi-round': string;
+        round: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    borderColor: {
+        primary: string;
+        secondary: string;
+        success: string;
+        danger: string;
+        warning: string;
+        info: string;
+    };
+    fillColor: {
+        primary: string;
+        secondary: string;
+        success: string;
+        danger: string;
+        warning: string;
+        info: string;
+    };
+    filledColor: {
+        primary: string;
+        secondary: string;
+        success: string;
+        danger: string;
+        warning: string;
+        info: string;
+    };
+    filledColorHover: {
+        primary: string;
+        secondary: string;
+        success: string;
+        danger: string;
+        warning: string;
+        info: string;
+    };
     textSize: {
         tiny: string;
         small: string;
@@ -23,4 +64,11 @@ export declare const styleVariants: {
         large: string;
         giant: string;
     };
+    fontWeight: {
+        light: string;
+        normal: string;
+        'semi-bold': string;
+        bold: string;
+        'extra-bold': string;
+    };
 };

package/dist/styles.js

@@ -12,6 +12,47 @@ export const styleVariants = {
         ...color,
         muted: 'text-gray-600 dark:text-gray-400',
     },
+    shape: {
+        rectangle: 'rounded-none',
+        'semi-round': '',
+        round: 'rounded-full',
+    },
+    border: {
+        true: 'border',
+        false: '',
+    },
+    borderColor: {
+        primary: 'border-primary',
+        secondary: 'border-dark',
+        success: 'border-success',
+        danger: 'border-danger',
+        warning: 'border-warning',
+        info: 'border-info',
+    },
+    fillColor: {
+        primary: 'fill-primary',
+        secondary: 'fill-dark',
+        success: 'fill-success',
+        danger: 'fill-danger',
+        warning: 'fill-warning',
+        info: 'fill-info',
+    },
+    filledColor: {
+        primary: 'bg-primary text-light',
+        secondary: 'bg-dark text-light',
+        success: 'bg-success text-light',
+        danger: 'bg-danger text-light',
+        warning: 'bg-warning text-light',
+        info: 'bg-info text-light',
+    },
+    filledColorHover: {
+        primary: 'hover:bg-primary/80',
+        secondary: 'hover:bg-dark/80',
+        success: 'hover:bg-success/80',
+        danger: 'hover:bg-danger/80',
+        warning: 'hover:bg-warning/80',
+        info: 'hover:bg-info/80',
+    },
     textSize: {
         tiny: 'text-xs',
         small: 'text-sm',
@@ -19,4 +60,11 @@ export const styleVariants = {
         large: 'text-lg',
         giant: 'text-xl',
     },
+    fontWeight: {
+        light: 'font-light',
+        normal: 'font-normal',
+        'semi-bold': 'font-semibold',
+        bold: 'font-bold',
+        'extra-bold': 'font-extrabold',
+    },
 };

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import type { Translations } from './services/translation.svelte.js';
-import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLTextareaAttributes } from 'svelte/elements';
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLTextareaAttributes } from 'svelte/elements';
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 export type TextColor = Color | 'muted';
 export type TextVariant = 'italic';
@@ -13,6 +13,7 @@ export type HeadingSize = Size | 'title';
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
 export type Variants = 'filled' | 'outline' | 'ghost';
+export type ToastVariant = 'filled' | 'outline';
 export type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 export declare enum Theme {
     Light = "light",
@@ -40,25 +41,26 @@ export type IconProps = {
 };
 type ButtonOrAnchor = ({
     href?: never;
-} & HTMLButtonAttributes) | ({
+} & Omit<HTMLButtonAttributes, 'color' | 'size'>) | ({
     href: string;
-} & HTMLAnchorAttributes);
+} & Omit<HTMLAnchorAttributes, 'color' | 'size'>);
 type ButtonBase = {
     size?: Size;
     variant?: Variants;
     class?: string;
     color?: Color;
     shape?: Shape;
+    loading?: boolean;
 };
 export type ButtonProps = ButtonBase & {
     ref?: HTMLElement | null;
     fullWidth?: boolean;
-    loading?: boolean;
     leadingIcon?: IconLike;
     trailingIcon?: IconLike;
 } & ButtonOrAnchor;
 export type CloseButtonProps = {
     size?: Size;
+    color?: Color;
     variant?: Variants;
     class?: string;
     translations?: TranslationProps<'close'>;
@@ -151,4 +153,52 @@ export type MultiSelectProps<T extends SelectItem> = SelectCommonProps<T> & {
     values?: T[];
     onChange?: (values: T[]) => void;
 };
+export type ToastId = {
+    id: string;
+};
+type ToastCommonProps = {
+    color?: Color;
+    variant?: ToastVariant;
+};
+export type ToastContentProps = ToastCommonProps & {
+    title?: string | Snippet;
+    description?: string | Snippet;
+    icon?: IconLike | false;
+    onClose?: () => void;
+    children?: Snippet;
+};
+export type ToastContainerProps = ToastCommonProps & {
+    shape?: Shape;
+    size?: ContainerSize;
+} & Omit<HTMLAttributes<HTMLElement>, 'title' | 'color' | 'size'>;
+export type ToastProps = ToastContentProps & ToastContainerProps;
+type Closable = {
+    onClose: () => void;
+};
+export type ToastCustom<T extends Closable = any> = {
+    component: Component<T>;
+    props: T;
+};
+export type ToastShow = {
+    title: string;
+    description?: string;
+    color?: Color;
+    shape?: Shape;
+    size?: ContainerSize;
+    variant?: ToastVariant;
+};
+export type ToastOptions = {
+    id?: string;
+    timeout?: number;
+    closable?: boolean;
+};
+export type ToastItem = ToastProps | ToastCustom;
+export type ToastButton = {
+    label: string;
+    size?: Size;
+    color?: Color;
+    shape?: Shape;
+    variant?: Variants;
+    onClick: () => void;
+};
 export {};

package/package.json

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