@immich/ui 0.30.1 → 0.31.1

package/dist/components/Code/Code.svelte

@@ -8,17 +8,25 @@
   type Props = {
     color?: TextColor;
     size?: Size;
-    variant?: 'filled';
+    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',
+    base: 'font-monospace rounded-lg px-2 py-1',
     variants: {
-      textColor: {
+      ghostTheme: {
+        false: '',
         muted: 'text-gray-600 dark:text-gray-400',
         primary: 'text-primary',
         secondary: 'text-dark',
@@ -28,20 +36,26 @@
         info: 'text-info',
       },
 
-      filled: {
-        true: 'rounded-lg p-3',
-        false: '',
-      },
-
-      filledColor: {
+      filledTheme: {
         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',
+        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-dark',
+        info: 'bg-info text-light',
+      },
+
+      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: {
@@ -58,9 +72,9 @@
 <code
   class={cleanClass(
     styles({
-      filled: variant === 'filled',
-      filledColor: variant === 'filled' && color,
-      textColor: color,
+      filledTheme: variant === 'filled' ? color : false,
+      outlineTheme: variant === 'outline' ? color : false,
+      ghostTheme: variant === 'ghost' ? color : false,
       size,
     }),
     className,

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

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export { default as CardTitle } from './components/Card/CardTitle.svelte';
 export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
+export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte';
 export { default as CommandPalette } from './components/CommandPalette/CommandPalette.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';

package/dist/index.js

@@ -27,6 +27,7 @@ export { default as CardTitle } from './components/Card/CardTitle.svelte';
 export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
+export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte';
 export { default as CommandPalette } from './components/CommandPalette/CommandPalette.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';

package/dist/internal/Text.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { FontWeight, HeadingColor, HeadingTag, TextVariant } from '../types.js';
+  import type { FontWeight, HeadingColor, HeadingTag, Size, TextVariant } from '../types.js';
   import { cleanClass } from '../utils.js';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
@@ -13,12 +13,13 @@
     fontWeight?: FontWeight;
     variant?: TextVariant;
     color?: HeadingColor;
+    size?: Size;
     class?: string;
 
     children: Snippet;
   } & HTMLAttributes<HTMLElement>;
 
-  const { tag = 'p', color, fontWeight, variant, class: className, children, ...restProps }: Props = $props();
+  const { tag = 'p', color, fontWeight, variant, size, class: className, children, ...restProps }: Props = $props();
 
   const styles = tv({
     variants: {
@@ -38,13 +39,20 @@
         bold: 'font-bold',
         'extra-bold': 'font-extrabold',
       },
+      size: {
+        tiny: 'text-xs',
+        small: 'text-sm',
+        medium: 'text-base',
+        large: 'text-lg',
+        giant: 'text-xl',
+      },
       variant: {
         italic: 'italic',
       },
     },
   });
 
-  const classList = $derived(cleanClass(styles({ color, fontWeight, variant }), className));
+  const classList = $derived(cleanClass(styles({ color, size, fontWeight, variant }), className));
 </script>
 
 <svelte:element this={tag} class={classList} {...restProps}>

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

@@ -1,4 +1,4 @@
-import type { FontWeight, HeadingColor, HeadingTag, TextVariant } from '../types.js';
+import type { FontWeight, HeadingColor, HeadingTag, Size, TextVariant } from '../types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = {
@@ -9,6 +9,7 @@ type Props = {
     fontWeight?: FontWeight;
     variant?: TextVariant;
     color?: HeadingColor;
+    size?: Size;
     class?: string;
     children: Snippet;
 } & HTMLAttributes<HTMLElement>;

package/dist/services/translation.svelte.d.ts

@@ -3,6 +3,8 @@ declare const defaultTranslations: {
     cancel: string;
     close: string;
     confirm: string;
+    code_copy: string;
+    code_copied: string;
     search_placeholder: string;
     search_no_results: string;
     search_recently_used: string;

package/dist/services/translation.svelte.js

@@ -3,6 +3,10 @@ const defaultTranslations = {
     cancel: 'Cancel',
     close: 'Close',
     confirm: 'Confirm',
+    // code
+    code_copy: 'Copy',
+    code_copied: 'Copied',
+    // search
     search_placeholder: 'Search...',
     search_no_results: 'No results',
     search_recently_used: 'Recently used',

package/dist/site/constants.d.ts

@@ -15,12 +15,15 @@ export declare const Constants: {
     };
     Sites: {
         Api: string;
-        Demo: string;
-        My: string;
         Buy: string;
-        Get: string;
+        Data: string;
+        Datasets: string;
+        Demo: string;
         Docs: string;
+        Get: string;
+        My: string;
         Store: string;
+        Ui: string;
     };
     Pages: {
         CursedKnowledge: string;
@@ -28,6 +31,7 @@ export declare const Constants: {
     };
     Npm: {
         Sdk: string;
+        Ui: string;
     };
 };
 export declare const siteCommands: {

package/dist/site/constants.js

@@ -17,12 +17,15 @@ export const Constants = {
     },
     Sites: {
         Api: 'https://api.immich.app/',
-        Demo: 'https://demo.immich.app/',
-        My: 'https://my.immich.app/',
         Buy: 'https://buy.immich.app/',
-        Get: 'https://get.immich.app/',
+        Data: 'https://data.immich.app/',
+        Datasets: 'https://datasets.immich.app/',
+        Demo: 'https://demo.immich.app/',
         Docs: 'https://docs.immich.app/',
+        Get: 'https://get.immich.app/',
+        My: 'https://my.immich.app/',
         Store: 'https://immich.store/',
+        Ui: 'https://ui.immich.app/',
     },
     Pages: {
         CursedKnowledge: 'https://immich.app/cursed-knowledge',
@@ -30,6 +33,7 @@ export const Constants = {
     },
     Npm: {
         Sdk: 'https://www.npmjs.com/package/@immich/sdk',
+        Ui: 'https://www.npmjs.com/package/@immich/ui',
     },
 };
 export const siteCommands = [
@@ -73,6 +77,16 @@ export const siteCommands = [
         description: 'Support the project by purchasing Immich merchandise',
         href: Constants.Sites.Store,
     },
+    {
+        title: 'Immich Datasets',
+        description: 'Help improve Immich by contributing your own files',
+        href: Constants.Sites.Datasets,
+    },
+    {
+        title: 'Immich UI',
+        description: 'View our Svelte component library, @immich/ui',
+        href: Constants.Sites.Ui,
+    },
     {
         title: 'Cursed Knowledge',
         description: 'View our collection of cursed knowledge',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.30.1",
+  "version": "0.31.1",
   "license": "GNU Affero General Public License version 3",
   "scripts": {
     "create": "node scripts/create.js",
@@ -59,7 +59,7 @@
     "publint": "^0.3.0",
     "svelte": "^5.37.0",
     "svelte-check": "^4.0.0",
-    "svelte-highlight": "^7.8.0",
+    "svelte-highlight": "^7.8.4",
     "tailwindcss": "^4.1.7",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.34.1",