@immich/ui 0.30.0 → 0.30.1

package/dist/components/SupporterBadge/SupporterBadge.svelte

@@ -1,94 +1,94 @@
 <script lang="ts">
-	import Logo from '../Logo/Logo.svelte';
-	import Text from '../Text/Text.svelte';
-	import type { Size } from '../../types.js';
-	import { cleanClass } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-	import { tv } from 'tailwind-variants';
+  import Logo from '../Logo/Logo.svelte';
+  import Text from '../Text/Text.svelte';
+  import type { Size } from '../../types.js';
+  import { cleanClass } from '../../utils.js';
+  import type { Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
 
-	type Props = {
-		effect?: 'hover' | 'always';
-		text?: string;
-		size?: Size;
-		children?: Snippet;
-	};
+  type Props = {
+    effect?: 'hover' | 'always';
+    text?: string;
+    size?: Size;
+    children?: Snippet;
+  };
 
-	const { effect = 'hover', text = 'Supporter', size = 'medium', children }: Props = $props();
+  const { effect = 'hover', text = 'Supporter', size = 'medium', children }: Props = $props();
 
-	const iconSize: Record<Size, Size> = {
-		tiny: 'tiny',
-		small: 'tiny',
-		medium: 'small',
-		large: 'medium',
-		giant: 'medium',
-	};
+  const iconSize: Record<Size, Size> = {
+    tiny: 'tiny',
+    small: 'tiny',
+    medium: 'small',
+    large: 'medium',
+    giant: 'medium',
+  };
 
-	const containerStyles = tv({
-		base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg transition-all',
-		variants: {
-			size: {
-				tiny: 'px-2 py-1',
-				small: 'px-2 py-1',
-				medium: 'px-3 py-2',
-				large: 'px-3 py-2',
-				giant: 'px-3 py-2',
-			},
-			effect: {
-				hover: 'supporter-effect-hover border-dark/25 border',
-				always: 'supporter-effect shadow',
-			},
-		},
-	});
+  const containerStyles = tv({
+    base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg transition-all',
+    variants: {
+      size: {
+        tiny: 'px-2 py-1',
+        small: 'px-2 py-1',
+        medium: 'px-3 py-2',
+        large: 'px-3 py-2',
+        giant: 'px-3 py-2',
+      },
+      effect: {
+        hover: 'supporter-effect-hover border-dark/25 border',
+        always: 'supporter-effect shadow',
+      },
+    },
+  });
 </script>
 
 <div class={cleanClass(containerStyles({ effect, size }))}>
-	{#if children}
-		{@render children()}
-	{:else}
-		<Logo size={iconSize[size]} variant="icon" />
-		<Text fontWeight="normal" color="secondary" {size}>{text}</Text>
-	{/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    <Logo size={iconSize[size]} variant="icon" />
+    <Text fontWeight="normal" color="secondary" {size}>{text}</Text>
+  {/if}
 </div>
 
 <style>
-	.supporter-effect,
-	.supporter-effect-hover:hover {
-		position: relative;
-		background-clip: padding-box;
-		animation: gradient 10s ease infinite;
-		z-index: 1;
-	}
+  .supporter-effect,
+  .supporter-effect-hover:hover {
+    position: relative;
+    background-clip: padding-box;
+    animation: gradient 10s ease infinite;
+    z-index: 1;
+  }
 
-	.supporter-effect:after,
-	.supporter-effect-hover:hover:after {
-		position: absolute;
-		top: 0px;
-		bottom: 0px;
-		left: 0px;
-		right: 0px;
-		background: linear-gradient(
-			to right,
-			rgba(16, 132, 254, 0.15),
-			rgba(229, 125, 175, 0.15),
-			rgba(254, 36, 29, 0.15),
-			rgba(255, 183, 0, 0.15),
-			rgba(22, 193, 68, 0.15)
-		);
-		content: '';
-		animation: gradient 10s ease infinite;
-		background-size: 400% 400%;
-		z-index: -1;
-	}
+  .supporter-effect:after,
+  .supporter-effect-hover:hover:after {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    background: linear-gradient(
+      to right,
+      rgba(16, 132, 254, 0.15),
+      rgba(229, 125, 175, 0.15),
+      rgba(254, 36, 29, 0.15),
+      rgba(255, 183, 0, 0.15),
+      rgba(22, 193, 68, 0.15)
+    );
+    content: '';
+    animation: gradient 10s ease infinite;
+    background-size: 400% 400%;
+    z-index: -1;
+  }
 
-	@keyframes gradient {
-		0% {
-			background-position: 0% 50%;
-		}
-		50% {
-			background-position: 100% 50%;
-		}
-		100% {
-			background-position: 0% 50%;
-		}
-	}
+  @keyframes gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
 </style>

package/dist/components/Switch/Switch.svelte

@@ -1,110 +1,109 @@
 <script lang="ts">
-	import { getFieldContext } from '../../common/context.svelte.js';
-	import Label from '../Label/Label.svelte';
-	import Text from '../Text/Text.svelte';
-	import type { Color } from '../../types.js';
-	import { cleanClass, generateId } from '../../utils.js';
-	import { Switch, type WithoutChildrenOrChild } from 'bits-ui';
-	import { tv } from 'tailwind-variants';
+  import { getFieldContext } from '../../common/context.svelte.js';
+  import Label from '../Label/Label.svelte';
+  import Text from '../Text/Text.svelte';
+  import type { Color } from '../../types.js';
+  import { cleanClass, generateId } from '../../utils.js';
+  import { Switch, type WithoutChildrenOrChild } from 'bits-ui';
+  import { tv } from 'tailwind-variants';
 
-	type Props = {
-		checked?: boolean;
-		color?: Color;
-		disabled?: boolean;
-		class?: string;
-	} & WithoutChildrenOrChild<Switch.RootProps>;
+  type Props = {
+    checked?: boolean;
+    color?: Color;
+    disabled?: boolean;
+    class?: string;
+  } & WithoutChildrenOrChild<Switch.RootProps>;
 
-	let {
-		id = generateId(),
-		checked = $bindable(false),
-		ref = $bindable(null),
-		color = 'primary',
-		class: className,
-		...restProps
-	}: Props = $props();
+  let {
+    id = generateId(),
+    checked = $bindable(false),
+    ref = $bindable(null),
+    color = 'primary',
+    class: className,
+    ...restProps
+  }: Props = $props();
 
-	const { readOnly, required, disabled, label, description, ...labelProps } =
-		$derived(getFieldContext());
+  const { readOnly, required, disabled, label, description, ...labelProps } = $derived(getFieldContext());
 
-	const enabled = $derived(checked && !disabled);
+  const enabled = $derived(checked && !disabled);
 
-	const wrapper = tv({
-		base: 'relative flex flex-col justify-center',
-		variants: {
-			disabled: {
-				true: 'cursor-not-allowed opacity-38',
-				false: 'cursor-pointer',
-			},
-		},
-	});
+  const wrapper = tv({
+    base: 'relative flex flex-col justify-center',
+    variants: {
+      disabled: {
+        true: 'cursor-not-allowed opacity-38',
+        false: 'cursor-pointer',
+      },
+    },
+  });
 
-	const bar = tv({
-		base: 'h-8 w-13 rounded-full border border-2',
-		variants: {
-			fillColor: {
-				default: 'border-gray-400 bg-gray-300 dark:border-gray-500 dark:bg-gray-400',
-				primary: 'bg-primary/50 dark:bg-primary border-transparent',
-				secondary: 'bg-dark/50 border-transparent',
-				success: 'bg-success/50 border-transparent',
-				danger: 'bg-danger/50 border-transparent',
-				warning: 'bg-warning/50 border-transparent',
-				info: 'bg-info/50 border-transparent',
-			},
-		},
-	});
+  const bar = tv({
+    base: 'h-8 w-13 rounded-full border border-2',
+    variants: {
+      fillColor: {
+        default: 'border-gray-400 bg-gray-300 dark:border-gray-500 dark:bg-gray-400',
+        primary: 'bg-primary/50 dark:bg-primary border-transparent',
+        secondary: 'bg-dark/50 border-transparent',
+        success: 'bg-success/50 border-transparent',
+        danger: 'bg-danger/50 border-transparent',
+        warning: 'bg-warning/50 border-transparent',
+        info: 'bg-info/50 border-transparent',
+      },
+    },
+  });
 
-	const dot = tv({
-		base: 'absolute h-4 w-4 origin-center rounded-full transition-transform duration-100',
-		variants: {
-			checked: {
-				true: 'translate-x-7 scale-150 rtl:-translate-x-7',
-				false: 'translate-x-2 rtl:-translate-x-2',
-			},
-			fillColor: {
-				default: 'bg-gray-400 dark:bg-gray-500',
-				primary: 'bg-[#4250af]',
-				secondary: 'bg-dark',
-				success: 'bg-success',
-				danger: 'bg-danger',
-				warning: 'bg-warning',
-				info: 'bg-info',
-			},
-		},
-	});
+  const dot = tv({
+    base: 'absolute h-4 w-4 origin-center rounded-full transition-transform duration-100',
+    variants: {
+      checked: {
+        true: 'translate-x-7 scale-150 rtl:-translate-x-7',
+        false: 'translate-x-2 rtl:-translate-x-2',
+      },
+      fillColor: {
+        default: 'bg-gray-400 dark:bg-gray-500',
+        primary: 'bg-[#4250af]',
+        secondary: 'bg-dark',
+        success: 'bg-success',
+        danger: 'bg-danger',
+        warning: 'bg-warning',
+        info: 'bg-info',
+      },
+    },
+  });
 
-	const inputId = `input-${id}`;
-	const labelId = `label-${id}`;
-	const descriptionId = $derived(description ? `description-${id}` : undefined);
+  const inputId = `input-${id}`;
+  const labelId = `label-${id}`;
+  const descriptionId = $derived(description ? `description-${id}` : undefined);
 </script>
 
 <Switch.Root
-	bind:checked
-	bind:ref
-	id={inputId}
-	disabled={disabled || readOnly}
-	{required}
-	class={cleanClass(label && 'w-full', className)}
-	aria-readonly={readOnly}
-	aria-labelledby={labelId}
-	aria-describedby={descriptionId}
-	{...restProps}
+  bind:checked
+  bind:ref
+  id={inputId}
+  disabled={disabled || readOnly}
+  {required}
+  class={cleanClass(label && 'w-full', className)}
+  aria-readonly={readOnly}
+  aria-labelledby={labelId}
+  aria-describedby={descriptionId}
+  {...restProps}
 >
-	<Switch.Thumb>
-		{#snippet child()}
-			<div class={cleanClass(label && 'flex items-center justify-between gap-1')}>
-				{#if label}
-					<div class="text-start">
-						<Label id={labelId} for={inputId} {label} {...labelProps} />
-						{#if description}
-							<Text color="secondary" size="small" id={descriptionId}>{description}</Text>
-						{/if}
-					</div>
-				{/if}
-				<span class={wrapper({ disabled })}>
-					<span class={bar({ fillColor: enabled ? color : 'default' })}> </span>
-					<span class={dot({ checked: enabled, fillColor: enabled ? color : 'default' })}></span>
-				</span>
-			</div>
-		{/snippet}
-	</Switch.Thumb>
+  <Switch.Thumb>
+    {#snippet child()}
+      <div class={cleanClass(label && 'flex items-center justify-between gap-1')}>
+        {#if label}
+          <div class="text-start">
+            <Label id={labelId} for={inputId} {label} {...labelProps} />
+            {#if description}
+              <Text color="secondary" size="small" id={descriptionId}>{description}</Text>
+            {/if}
+          </div>
+        {/if}
+        <span class={wrapper({ disabled })}>
+          <span class={bar({ fillColor: enabled ? color : 'default' })}> </span>
+          <span class={dot({ checked: enabled, fillColor: enabled ? color : 'default' })}></span>
+        </span>
+      </div>
+    {/snippet}
+  </Switch.Thumb>
 </Switch.Root>

package/dist/components/Text/Text.svelte

@@ -1,42 +1,35 @@
 <script lang="ts">
-	import Text from '../../internal/Text.svelte';
-	import type { FontWeight, Size, TextColor, TextVariant } 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 Text from '../../internal/Text.svelte';
+  import type { FontWeight, Size, TextColor, TextVariant } 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 = {
-		size?: Size;
-		color?: TextColor;
-		fontWeight?: FontWeight;
-		variant?: TextVariant;
-		class?: string;
-		children: Snippet;
-	} & HTMLAttributes<HTMLElement>;
+  type Props = {
+    size?: Size;
+    color?: TextColor;
+    fontWeight?: FontWeight;
+    variant?: TextVariant;
+    class?: string;
+    children: Snippet;
+  } & HTMLAttributes<HTMLElement>;
 
-	const {
-		color,
-		size,
-		fontWeight = 'normal',
-		children,
-		class: className,
-		...restProps
-	}: Props = $props();
+  const { color, size, fontWeight = 'normal', children, class: className, ...restProps }: Props = $props();
 
-	const styles = tv({
-		variants: {
-			size: {
-				tiny: 'text-xs',
-				small: 'text-sm',
-				medium: 'text-base',
-				large: 'text-lg',
-				giant: 'text-xl',
-			},
-		},
-	});
+  const styles = tv({
+    variants: {
+      size: {
+        tiny: 'text-xs',
+        small: 'text-sm',
+        medium: 'text-base',
+        large: 'text-lg',
+        giant: 'text-xl',
+      },
+    },
+  });
 </script>
 
 <Text tag="p" {color} {fontWeight} class={cleanClass(styles({ size }), className)} {...restProps}>
-	{@render children()}
+  {@render children()}
 </Text>