@immich/ui 0.29.0 → 0.30.1

package/dist/components/Card/Card.svelte

@@ -1,154 +1,150 @@
 <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 '../../utils.js';
-	import { mdiChevronDown } from '@mdi/js';
-	import { type Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { twMerge } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+  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 '../../utils.js';
+  import { mdiChevronDown } from '@mdi/js';
+  import { type Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
+  import { tv } from 'tailwind-variants';
 
-	type Props = HTMLAttributes<HTMLDivElement> & {
-		ref?: HTMLElement | null;
-		color?: Color;
-		shape?: 'round' | 'rectangle';
-		expanded?: boolean;
-		expandable?: boolean;
-		children: Snippet;
-	};
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLElement | null;
+    color?: Color;
+    shape?: 'round' | 'rectangle';
+    expanded?: boolean;
+    expandable?: boolean;
+    children: Snippet;
+  };
 
-	let {
-		ref = $bindable(null),
-		color,
-		class: className,
-		shape = 'round',
-		expanded = $bindable(true),
-		expandable = false,
-		children,
-		...restProps
-	}: Props = $props();
+  let {
+    ref = $bindable(null),
+    color,
+    class: className,
+    shape = 'round',
+    expanded = $bindable(true),
+    expandable = false,
+    children,
+    ...restProps
+  }: Props = $props();
 
-	const containerStyles = tv({
-		base: 'w-full overflow-hidden shadow-sm',
-		variants: {
-			shape: {
-				rectangle: '',
-				round: 'rounded-2xl',
-			},
-			border: {
-				true: 'border',
-				false: '',
-			},
-		},
-	});
+  const containerStyles = tv({
+    base: 'w-full overflow-hidden shadow-sm',
+    variants: {
+      shape: {
+        rectangle: '',
+        round: 'rounded-2xl',
+      },
+      border: {
+        true: 'border',
+        false: '',
+      },
+    },
+  });
 
-	const cardStyles = tv({
-		base: 'flex h-full w-full flex-col',
-		variants: {
-			color: {
-				primary: 'bg-primary/25 dark:bg-primary/25',
-				secondary: 'text-dark bg-gray-50 dark:bg-neutral-900 dark:text-white',
-				success: 'bg-success/15 dark:bg-success/30',
-				danger: 'bg-danger/15 dark:bg-danger/50',
-				warning: 'bg-warning/25 dark:bg-warning/50',
-				info: 'bg-info/25 dark:bg-info/50',
-			},
-		},
-	});
+  const cardStyles = tv({
+    base: 'flex h-full w-full flex-col',
+    variants: {
+      color: {
+        primary: 'bg-primary/25 dark:bg-primary/25',
+        secondary: 'text-dark bg-gray-50 dark:bg-neutral-900 dark:text-white',
+        success: 'bg-success/15 dark:bg-success/30',
+        danger: 'bg-danger/15 dark:bg-danger/50',
+        warning: 'bg-warning/25 dark:bg-warning/50',
+        info: 'bg-info/25 dark:bg-info/50',
+      },
+    },
+  });
 
-	const headerContainerStyles = tv({
-		base: 'p-4',
-		variants: {
-			padding: {
-				true: '',
-				false: 'pb-0',
-			},
-			border: {
-				true: 'border-b',
-				false: '',
-			},
-		},
-	});
+  const headerContainerStyles = tv({
+    base: 'p-4',
+    variants: {
+      padding: {
+        true: '',
+        false: 'pb-0',
+      },
+      border: {
+        true: 'border-b',
+        false: '',
+      },
+    },
+  });
 
-	const onToggle = () => {
-		expanded = !expanded;
-	};
+  const onToggle = () => {
+    expanded = !expanded;
+  };
 
-	const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Card);
-	const headerChild = $derived(getChildSnippet(ChildKey.CardHeader));
-	const bodyChild = $derived(getChildSnippet(ChildKey.CardBody));
-	const footerChild = $derived(getChildSnippet(ChildKey.CardFooter));
+  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Card);
+  const headerChild = $derived(getChildSnippet(ChildKey.CardHeader));
+  const bodyChild = $derived(getChildSnippet(ChildKey.CardBody));
+  const footerChild = $derived(getChildSnippet(ChildKey.CardFooter));
 
-	const headerBorder = $derived(!color);
-	const headerPadding = $derived(headerBorder || !expanded);
+  const headerBorder = $derived(!color);
+  const headerPadding = $derived(headerBorder || !expanded);
 
-	const headerContainerClasses = $derived(
-		twMerge(
-			cleanClass(
-				headerContainerStyles({
-					padding: headerPadding,
-					border: headerBorder,
-				}),
-				headerChild?.class,
-			),
-		),
-	);
+  const headerContainerClasses = $derived(
+    twMerge(
+      cleanClass(
+        headerContainerStyles({
+          padding: headerPadding,
+          border: headerBorder,
+        }),
+        headerChild?.class,
+      ),
+    ),
+  );
 </script>
 
 {#snippet header()}
-	{#if expandable}
-		<button
-			type="button"
-			onclick={onToggle}
-			class={cleanClass('flex w-full items-center justify-between px-4', headerContainerClasses)}
-		>
-			<div class="flex flex-col">
-				{@render headerChild?.snippet()}
-			</div>
-			<div>
-				<IconButton
-					color="secondary"
-					icon={mdiChevronDown}
-					flopped={expanded}
-					variant="ghost"
-					shape="round"
-					size="large"
-					aria-label="Expand"
-				/>
-			</div>
-		</button>
-	{:else}
-		<div class={cleanClass('flex flex-col', headerContainerClasses)}>
-			{@render headerChild?.snippet()}
-		</div>
-	{/if}
+  {#if expandable}
+    <button
+      type="button"
+      onclick={onToggle}
+      class={cleanClass('flex w-full items-center justify-between px-4', headerContainerClasses)}
+    >
+      <div class="flex flex-col">
+        {@render headerChild?.snippet()}
+      </div>
+      <div>
+        <IconButton
+          color="secondary"
+          icon={mdiChevronDown}
+          flopped={expanded}
+          variant="ghost"
+          shape="round"
+          size="large"
+          aria-label="Expand"
+        />
+      </div>
+    </button>
+  {:else}
+    <div class={cleanClass('flex flex-col', headerContainerClasses)}>
+      {@render headerChild?.snippet()}
+    </div>
+  {/if}
 {/snippet}
 
-<div
-	bind:this={ref}
-	class={cleanClass(containerStyles({ shape, border: !color }), className)}
-	{...restProps}
->
-	<div class={cleanClass(cardStyles({ color }))}>
-		{#if headerChild}
-			{@render header()}
-		{/if}
+<div bind:this={ref} class={cleanClass(containerStyles({ shape, border: !color }), className)} {...restProps}>
+  <div class={cleanClass(cardStyles({ color }))}>
+    {#if headerChild}
+      {@render header()}
+    {/if}
 
-		{#if bodyChild && expanded}
-			<Scrollable class={twMerge(cleanClass('p-4', bodyChild?.class))}>
-				{@render bodyChild?.snippet()}
-			</Scrollable>
-		{/if}
+    {#if bodyChild && expanded}
+      <Scrollable class={twMerge(cleanClass('p-4', bodyChild?.class))}>
+        {@render bodyChild?.snippet()}
+      </Scrollable>
+    {/if}
 
-		{#if footerChild}
-			<div class={twMerge(cleanClass('flex items-center border-t p-4', footerChild.class))}>
-				{@render footerChild.snippet()}
-			</div>
-		{/if}
+    {#if footerChild}
+      <div class={twMerge(cleanClass('flex items-center border-t p-4', footerChild.class))}>
+        {@render footerChild.snippet()}
+      </div>
+    {/if}
 
-		{@render children()}
-	</div>
+    {@render children()}
+  </div>
 </div>

package/dist/components/Card/CardBody.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { ChildKey } from '../../constants.js';
-	import Child from '../../internal/Child.svelte';
-	import type { Snippet } from 'svelte';
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		class?: string;
-		children: Snippet;
-	};
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
 
-	let { class: className, children }: Props = $props();
+  let { class: className, children }: Props = $props();
 </script>
 
 <Child for={ChildKey.Card} as={ChildKey.CardBody} class={className}>
-	{@render children?.()}
+  {@render children?.()}
 </Child>

package/dist/components/Card/CardDescription.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import Text from '../Text/Text.svelte';
-	import { cleanClass } from '../../utils.js';
-	import type { Snippet } from 'svelte';
+  import Text from '../Text/Text.svelte';
+  import { cleanClass } from '../../utils.js';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		class?: string;
-		children: Snippet;
-	};
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
 
-	let { children, class: className }: Props = $props();
+  let { children, class: className }: Props = $props();
 </script>
 
 <Text size="small" class={cleanClass('text-dark/75', className)}>
-	{@render children?.()}
+  {@render children?.()}
 </Text>

package/dist/components/Card/CardFooter.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { ChildKey } from '../../constants.js';
-	import Child from '../../internal/Child.svelte';
-	import type { Snippet } from 'svelte';
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		class?: string;
-		children: Snippet;
-	};
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
 
-	let { class: className, children }: Props = $props();
+  let { class: className, children }: Props = $props();
 </script>
 
 <Child for={ChildKey.Card} as={ChildKey.CardFooter} class={className}>
-	{@render children?.()}
+  {@render children?.()}
 </Child>

package/dist/components/Card/CardHeader.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { ChildKey } from '../../constants.js';
-	import Child from '../../internal/Child.svelte';
-	import type { Snippet } from 'svelte';
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		class?: string;
-		children: Snippet;
-	};
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
 
-	let { class: className, children }: Props = $props();
+  let { class: className, children }: Props = $props();
 </script>
 
 <Child for={ChildKey.Card} as={ChildKey.CardHeader} class={className}>
-	{@render children?.()}
+  {@render children?.()}
 </Child>

package/dist/components/Card/CardTitle.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import Heading from '../Heading/Heading.svelte';
-	import type { HeadingSize, HeadingTag } from '../../types.js';
-	import type { Snippet } from 'svelte';
+  import Heading from '../Heading/Heading.svelte';
+  import type { HeadingSize, HeadingTag } from '../../types.js';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		/**
-		 * The HTML element type.
-		 */
-		tag?: HeadingTag;
-		class?: string;
-		size?: HeadingSize;
-		children: Snippet;
-	};
+  type Props = {
+    /**
+     * The HTML element type.
+     */
+    tag?: HeadingTag;
+    class?: string;
+    size?: HeadingSize;
+    children: Snippet;
+  };
 
-	const { size = 'small', tag, class: className, children }: Props = $props();
+  const { size = 'small', tag, class: className, children }: Props = $props();
 </script>
 
 <Heading {tag} {size} class={className}>
-	{@render children?.()}
+  {@render children?.()}
 </Heading>