@immich/ui 0.48.0 → 0.49.1

package/dist/components/Breadcrumbs/Breadcrumbs.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Icon from '../Icon/Icon.svelte';
+  import Link from '../Link/Link.svelte';
+  import type { BreadcrumbItem, BreadcrumbsProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { mdiChevronRight } from '@mdi/js';
+
+  let { separator = mdiChevronRight, class: className, items, ...props }: BreadcrumbsProps = $props();
+</script>
+
+{#snippet child({ title, icon }: BreadcrumbItem)}
+  <span class="flex items-center gap-1">
+    {#if icon}
+      <Icon {icon} size="1.25rem" />
+    {/if}
+    {#if title}
+      <span>{title}</span>
+    {/if}
+  </span>
+{/snippet}
+
+<nav class={cleanClass('flex items-center gap-1', className)} {...props}>
+  {#each items as item, index (index)}
+    {#if index > 0}
+      {#if typeof separator === 'object' && 'text' in separator}
+        <span class="mx-1">{separator.text}</span>
+      {:else}
+        <Icon icon={separator} size="1rem" />
+      {/if}
+    {/if}
+    {#if item.href}
+      <Link href={item.href} class="underline">
+        {@render child(item)}
+      </Link>
+    {:else}
+      {@render child(item)}
+    {/if}
+  {/each}
+</nav>

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

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

package/dist/components/Card/Card.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import { withChildrenSnippets } from '../../common/use-child.svelte.js';
   import IconButton from '../IconButton/IconButton.svelte';
-  import Scrollable from '../Scrollable/Scrollable.svelte';
   import { ChildKey } from '../../constants.js';
   import type { Color } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { mdiChevronDown } from '@mdi/js';
-  import { slide } from 'svelte/transition';
-  import { cubicOut } from 'svelte/easing';
   import { type Snippet } from 'svelte';
+  import { cubicOut } from 'svelte/easing';
   import type { HTMLAttributes } from 'svelte/elements';
+  import { slide } from 'svelte/transition';
   import { twMerge } from 'tailwind-merge';
   import { tv } from 'tailwind-variants';
 
@@ -136,10 +135,11 @@
     {/if}
 
     {#if bodyChild && expanded}
-      <div transition:slide={{ duration: expandable ? 200 : 0, easing: cubicOut }}>
-        <Scrollable class={twMerge(cleanClass('p-4', bodyChild?.class))}>
-          {@render bodyChild?.snippet()}
-        </Scrollable>
+      <div
+        transition:slide={{ duration: expandable ? 200 : 0, easing: cubicOut }}
+        class={twMerge(cleanClass('immich-scrollbar h-full w-full overflow-auto p-4', bodyChild?.class))}
+      >
+        {@render bodyChild?.snippet()}
       </div>
     {/if}
 

package/dist/components/Scrollable/Scrollable.svelte

@@ -23,45 +23,3 @@
 <div bind:this={ref} class={cleanClass('immich-scrollbar h-full w-full overflow-auto', className)}>
   {@render children?.()}
 </div>
-
-<style>
-  /* width */
-  .immich-scrollbar::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-    visibility: hidden;
-  }
-  /* Track */
-  .immich-scrollbar::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 16px;
-    visibility: hidden;
-  }
-
-  /* Handle */
-  .immich-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(85, 86, 87, 0.408);
-    border-radius: 16px;
-    visibility: hidden;
-  }
-
-  /* Handle on hover */
-  .immich-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: #4250afad;
-    border-radius: 16px;
-  }
-
-  /*
-		* Show scrollbar elements when hovering or actively scrolling
-		* Applies to the main scrollbar, track, and thumb components
-		* Changes visibility from hidden to visible on user interaction
-	*/
-  .immich-scrollbar:hover::-webkit-scrollbar,
-  .immich-scrollbar:active::-webkit-scrollbar,
-  .immich-scrollbar:hover::-webkit-scrollbar-track,
-  .immich-scrollbar:active::-webkit-scrollbar-track,
-  .immich-scrollbar:hover::-webkit-scrollbar-thumb,
-  .immich-scrollbar:active::-webkit-scrollbar-thumb {
-    visibility: visible;
-  }
-</style>

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as AppShellHeader } from './components/AppShell/AppShellHeader.
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as Badge } from './components/Badge/Badge.svelte';
+export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.svelte';
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Card } from './components/Card/Card.svelte';
 export { default as CardBody } from './components/Card/CardBody.svelte';
@@ -31,6 +32,7 @@ export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte';
 export { default as CommandPaletteContext } from './components/CommandPalette/CommandPaletteContext.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
+export { default as ContextMenuButton } from './components/ContextMenu/ContextMenuButton.svelte';
 export { default as DatePicker } from './components/DatePicker/DatePicker.svelte';
 export { default as Field } from './components/Field/Field.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';

package/dist/index.js

@@ -19,6 +19,7 @@ export { default as AppShellHeader } from './components/AppShell/AppShellHeader.
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as Badge } from './components/Badge/Badge.svelte';
+export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.svelte';
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Card } from './components/Card/Card.svelte';
 export { default as CardBody } from './components/Card/CardBody.svelte';
@@ -33,6 +34,7 @@ export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte';
 export { default as CommandPaletteContext } from './components/CommandPalette/CommandPaletteContext.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
+export { default as ContextMenuButton } from './components/ContextMenu/ContextMenuButton.svelte';
 export { default as DatePicker } from './components/DatePicker/DatePicker.svelte';
 export { default as Field } from './components/Field/Field.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';

package/dist/theme/default.css

@@ -299,3 +299,43 @@
     border-color: var(--immich-ui-default-border);
   }
 }
+
+/* width */
+.immich-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  visibility: hidden;
+}
+/* Track */
+.immich-scrollbar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 16px;
+  visibility: hidden;
+}
+
+/* Handle */
+.immich-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(85, 86, 87, 0.408);
+  border-radius: 16px;
+  visibility: hidden;
+}
+
+/* Handle on hover */
+.immich-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #4250afad;
+  border-radius: 16px;
+}
+
+/*
+		* Show scrollbar elements when hovering or actively scrolling
+		* Applies to the main scrollbar, track, and thumb components
+		* Changes visibility from hidden to visible on user interaction
+	*/
+.immich-scrollbar:hover::-webkit-scrollbar,
+.immich-scrollbar:active::-webkit-scrollbar,
+.immich-scrollbar:hover::-webkit-scrollbar-track,
+.immich-scrollbar:active::-webkit-scrollbar-track,
+.immich-scrollbar:hover::-webkit-scrollbar-thumb,
+.immich-scrollbar:active::-webkit-scrollbar-thumb {
+  visibility: visible;
+}

package/dist/types.d.ts

@@ -249,4 +249,19 @@ export type ActionItem<T = never> = Omit<{
 } & IfLike, [
     T
 ] extends [never] ? 'data' : ''>;
+export type BreadcrumbsProps = {
+    separator?: IconLike | {
+        text: string;
+    };
+    items: BreadcrumbItem[];
+} & HTMLAttributes<HTMLElement>;
+export type BreadcrumbItem = {
+    href?: string;
+} & ({
+    title: string;
+    icon?: IconLike;
+} | {
+    title?: string;
+    icon: IconLike;
+});
 export {};

package/package.json

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