@immich/ui 0.30.0 → 0.31.0

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,122 +1,121 @@
 <script lang="ts">
-	import { getFieldContext } from '../../common/context.svelte.js';
-	import Icon from '../Icon/Icon.svelte';
-	import Label from '../Label/Label.svelte';
-	import Text from '../Text/Text.svelte';
-	import type { Color, Shape, Size } from '../../types.js';
-	import { cleanClass, generateId } from '../../utils.js';
-	import { mdiCheck, mdiMinus } from '@mdi/js';
-	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-	import { tv } from 'tailwind-variants';
+  import { getFieldContext } from '../../common/context.svelte.js';
+  import Icon from '../Icon/Icon.svelte';
+  import Label from '../Label/Label.svelte';
+  import Text from '../Text/Text.svelte';
+  import type { Color, Shape, Size } from '../../types.js';
+  import { cleanClass, generateId } from '../../utils.js';
+  import { mdiCheck, mdiMinus } from '@mdi/js';
+  import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+  import { tv } from 'tailwind-variants';
 
-	type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & {
-		color?: Color;
-		shape?: Shape;
-		size?: Size;
-	};
+  type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & {
+    color?: Color;
+    shape?: Shape;
+    size?: Size;
+  };
 
-	let {
-		ref = $bindable(null),
-		checked = $bindable(false),
-		class: className,
-		color = 'primary',
-		shape = 'semi-round',
-		size = 'small',
-		...restProps
-	}: CheckboxProps = $props();
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    class: className,
+    color = 'primary',
+    shape = 'semi-round',
+    size = 'small',
+    ...restProps
+  }: CheckboxProps = $props();
 
-	const { readOnly, required, invalid, disabled, label, description, ...labelProps } =
-		$derived(getFieldContext());
+  const { readOnly, required, invalid, disabled, label, description, ...labelProps } = $derived(getFieldContext());
 
-	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',
-			},
-			size: {
-				tiny: 'size-4',
-				small: 'size-5',
-				medium: 'size-6',
-				large: 'size-8',
-				giant: 'size-10',
-			},
-			roundedSize: {
-				tiny: 'rounded-md',
-				small: 'rounded-md',
-				medium: 'rounded-md',
-				large: 'rounded-lg',
-				giant: 'rounded-xl',
-			},
-		},
-	});
+  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',
+      },
+      size: {
+        tiny: 'size-4',
+        small: 'size-5',
+        medium: 'size-6',
+        large: 'size-8',
+        giant: 'size-10',
+      },
+      roundedSize: {
+        tiny: 'rounded-md',
+        small: 'rounded-md',
+        medium: 'rounded-md',
+        large: 'rounded-lg',
+        giant: 'rounded-xl',
+      },
+    },
+  });
 
-	const iconStyles = tv({
-		variants: {
-			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',
-			},
-		},
-	});
+  const iconStyles = tv({
+    variants: {
+      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',
+      },
+    },
+  });
 
-	const id = generateId();
-	const inputId = `input-${id}`;
-	const labelId = `label-${id}`;
-	const descriptionId = $derived(description ? `description-${id}` : undefined);
+  const id = generateId();
+  const inputId = `input-${id}`;
+  const labelId = `label-${id}`;
+  const descriptionId = $derived(description ? `description-${id}` : undefined);
 </script>
 
 <div class="flex flex-col gap-1">
-	{#if label}
-		<Label id={labelId} for={inputId} {label} {...labelProps} />
-		{#if description}
-			<Text color="secondary" size="small" id={descriptionId}>{description}</Text>
-		{/if}
-	{/if}
+  {#if label}
+    <Label id={labelId} for={inputId} {label} {...labelProps} />
+    {#if description}
+      <Text color="secondary" size="small" id={descriptionId}>{description}</Text>
+    {/if}
+  {/if}
 
-	<CheckboxPrimitive.Root
-		bind:ref
-		class={cleanClass(
-			containerStyles({
-				size,
-				color: invalid ? 'danger' : color,
-				shape,
-				roundedSize: shape === 'semi-round' ? size : undefined,
-			}),
-			className,
-		)}
-		bind:checked
-		disabled={disabled || readOnly}
-		{required}
-		aria-readonly={disabled || readOnly}
-		aria-describedby={descriptionId}
-		{...restProps}
-	>
-		{#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 }))} />
-				{:else if checked}
-					<Icon icon={mdiCheck} size="100%" class={cleanClass(iconStyles({ color }))} />
-				{/if}
-			</div>
-		{/snippet}
-	</CheckboxPrimitive.Root>
+  <CheckboxPrimitive.Root
+    bind:ref
+    class={cleanClass(
+      containerStyles({
+        size,
+        color: invalid ? 'danger' : color,
+        shape,
+        roundedSize: shape === 'semi-round' ? size : undefined,
+      }),
+      className,
+    )}
+    bind:checked
+    disabled={disabled || readOnly}
+    {required}
+    aria-readonly={disabled || readOnly}
+    aria-describedby={descriptionId}
+    {...restProps}
+  >
+    {#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 }))} />
+        {:else if checked}
+          <Icon icon={mdiCheck} size="100%" class={cleanClass(iconStyles({ color }))} />
+        {/if}
+      </div>
+    {/snippet}
+  </CheckboxPrimitive.Root>
 </div>

package/dist/components/CloseButton/CloseButton.svelte

@@ -1,23 +1,18 @@
 <script lang="ts">
-	import IconButton from '../IconButton/IconButton.svelte';
-	import { t } from '../../services/translation.svelte.js';
-	import type { CloseButtonProps } from '../../types.js';
-	import { mdiClose } from '@mdi/js';
+  import IconButton from '../IconButton/IconButton.svelte';
+  import { t } from '../../services/translation.svelte.js';
+  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', translations, ...restProps }: CloseButtonProps = $props();
 </script>
 
 <IconButton
-	{...restProps}
-	icon={mdiClose}
-	shape="round"
-	{variant}
-	{size}
-	color="secondary"
-	aria-label={t('close', translations)}
+  {...restProps}
+  icon={mdiClose}
+  shape="round"
+  {variant}
+  {size}
+  color="secondary"
+  aria-label={t('close', translations)}
 />

package/dist/components/Code/Code.svelte

@@ -1,76 +1,83 @@
 <script lang="ts">
-	import type { Size, TextColor } from '../../types.js';
-	import { cleanClass } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { tv } from 'tailwind-variants';
+  import type { Size, TextColor } from '../../types.js';
+  import { cleanClass } from '../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
 
-	type Props = {
-		color?: TextColor;
-		size?: Size;
-		variant?: 'filled';
-		class?: string;
-		children: Snippet;
-	} & HTMLAttributes<HTMLElement>;
+  type Props = {
+    color?: TextColor;
+    size?: Size;
+    variant?: 'filled' | 'ghost' | 'outline';
+    class?: string;
+    children: Snippet;
+  } & HTMLAttributes<HTMLElement>;
 
-	const {
-		class: className,
-		size = 'medium',
-		variant,
-		color = 'secondary',
-		children,
-		...restProps
-	}: Props = $props();
+  const {
+    class: className,
+    size = 'medium',
+    variant = 'filled',
+    color = 'primary',
+    children,
+    ...restProps
+  }: Props = $props();
 
-	const styles = tv({
-		base: 'font-monospace',
-		variants: {
-			textColor: {
-				muted: 'text-gray-600 dark:text-gray-400',
-				primary: 'text-primary',
-				secondary: 'text-dark',
-				success: 'text-success',
-				danger: 'text-danger',
-				warning: 'text-warning',
-				info: 'text-info',
-			},
+  const styles = tv({
+    base: 'font-monospace rounded-lg px-2 py-1',
+    variants: {
+      ghostTheme: {
+        false: '',
+        muted: 'text-gray-600 dark:text-gray-400',
+        primary: 'text-primary',
+        secondary: 'text-dark',
+        success: 'text-success',
+        danger: 'text-danger',
+        warning: 'text-warning',
+        info: 'text-info',
+      },
 
-			filled: {
-				true: 'rounded-lg p-3',
-				false: '',
-			},
+      filledTheme: {
+        false: '',
+        muted: 'text-dark bg-subtle',
+        primary: 'text-dark dark:bg-primary/20 bg-gray-200 dark:text-gray-200',
+        secondary: 'text-light bg-gray-700 dark:bg-gray-200',
+        success: 'bg-success text-light',
+        danger: 'bg-danger text-light',
+        warning: 'bg-warning text-light',
+        info: 'bg-info text-light',
+      },
 
-			filledColor: {
-				false: '',
-				muted: 'text-light bg-gray-600 dark:bg-gray-800',
-				primary: 'text-primary dark:bg-primary/20 bg-gray-200 dark:text-gray-200',
-				secondary: 'text-light bg-gray-700 dark:bg-gray-200',
-				success: 'bg-success text-light',
-				danger: 'bg-danger text-light',
-				warning: 'bg-warning text-light',
-				info: 'bg-info text-dark',
-			},
+      outlineTheme: {
+        false: '',
+        muted: 'border border-gray-600 text-gray-600 dark:border-gray-400 dark:text-gray-400',
+        primary: 'border-primary text-primary border',
+        secondary: 'border-dark text-dark border',
+        success: 'border-success text-success border',
+        danger: 'border-danger text-danger border',
+        warning: 'border-warning text-warning border',
+        info: 'border-info text-info border',
+      },
 
-			size: {
-				tiny: 'text-xs',
-				small: 'text-sm',
-				medium: 'text-base',
-				large: 'text-lg',
-				giant: 'text-xl',
-			},
-		},
-	});
+      size: {
+        tiny: 'text-xs',
+        small: 'text-sm',
+        medium: 'text-base',
+        large: 'text-lg',
+        giant: 'text-xl',
+      },
+    },
+  });
 </script>
 
 <code
-	class={cleanClass(
-		styles({
-			filled: variant === 'filled',
-			filledColor: variant === 'filled' && color,
-			textColor: color,
-			size,
-		}),
-		className,
-	)}
-	{...restProps}>{@render children()}</code
+  class={cleanClass(
+    styles({
+      filledTheme: variant === 'filled' ? color : false,
+      outlineTheme: variant === 'outline' ? color : false,
+      ghostTheme: variant === 'ghost' ? color : false,
+      size,
+    }),
+    className,
+  )}
+  {...restProps}>{@render children()}</code
 >

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

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 type Props = {
     color?: TextColor;
     size?: Size;
-    variant?: 'filled';
+    variant?: 'filled' | 'ghost' | 'outline';
     class?: string;
     children: Snippet;
 } & HTMLAttributes<HTMLElement>;

package/dist/components/CodeBlock/CodeBlock.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import Card from '../Card/Card.svelte';
+  import IconButton from '../IconButton/IconButton.svelte';
+  import { theme } from '../../services/theme.svelte.js';
+  import { Theme, type TranslationProps } from '../../types.js';
+  import { t } from '../../index.ts/services/translation.svelte.js';
+  import { mdiCheckCircle, mdiContentCopy } from '@mdi/js';
+  import { Highlight, LineNumbers } from 'svelte-highlight';
+  import { typescript, type LanguageType } from 'svelte-highlight/languages';
+  import vsLight from 'svelte-highlight/styles/vs';
+  import vsDark from 'svelte-highlight/styles/vs2015';
+
+  type Props = {
+    code: string;
+    language?: LanguageType<string>;
+    lineNumbers?: boolean;
+    lightTheme?: string;
+    darkTheme?: string;
+    copy?: boolean;
+    translations?: TranslationProps<'code_copy' | 'code_copied'>;
+  };
+
+  let {
+    code,
+    copy = true,
+    language = typescript,
+    lineNumbers,
+    lightTheme = vsLight,
+    darkTheme = vsDark,
+    translations,
+  }: Props = $props();
+
+  let copied = $state(false);
+  let canCopy = $derived<boolean>(copy && !!(navigator.clipboard && globalThis.ClipboardItem));
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      copied = true;
+      setTimeout(() => (copied = false), 3000);
+    } catch (error) {
+      console.error('Failed to copy code to clipboard', error);
+    }
+  };
+</script>
+
+<svelte:head>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html theme.value === Theme.Dark ? darkTheme : lightTheme}
+</svelte:head>
+
+<Card class="relative">
+  <div class="text-sm">
+    {#if canCopy}
+      <span class="absolute top-2 right-2 cursor-pointer">
+        <IconButton
+          icon={copied ? mdiCheckCircle : mdiContentCopy}
+          size="small"
+          aria-label={copied ? t('code_copied', translations) : t('code_copy', translations)}
+          variant="ghost"
+          color={copied ? 'success' : 'secondary'}
+          onclick={handleCopy}
+        />
+      </span>
+    {/if}
+    {#if lineNumbers}
+      <Highlight {language} {code} let:highlighted>
+        <LineNumbers {highlighted} hideBorder wrapLines />
+      </Highlight>
+    {:else}
+      <Highlight {language} {code} />
+    {/if}
+  </div>
+</Card>

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

@@ -0,0 +1,14 @@
+import { type TranslationProps } from '../../types.js';
+import { type LanguageType } from 'svelte-highlight/languages';
+type Props = {
+    code: string;
+    language?: LanguageType<string>;
+    lineNumbers?: boolean;
+    lightTheme?: string;
+    darkTheme?: string;
+    copy?: boolean;
+    translations?: TranslationProps<'code_copy' | 'code_copied'>;
+};
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;