@immich/ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,4 @@
+import type { IconProps } from '../../types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const Icon: import("svelte").Component<IconProps & HTMLAttributes<EventTarget>, {}, "">;
+export default Icon;

package/dist/components/IconButton/IconButton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Button from '../../internal/Button.svelte';
+	import Icon from '../Icon/Icon.svelte';
+	import type { IconButtonProps } from '../../types.js';
+
+	const { icon, flipped, flopped, ...buttonProps }: IconButtonProps = $props();
+</script>
+
+<Button icon {...buttonProps}>
+	<Icon {icon} {flipped} {flopped} size="66%"></Icon>
+</Button>

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

@@ -0,0 +1,3 @@
+import type { IconButtonProps } from '../../types.js';
+declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;
+export default IconButton;

package/dist/components/Link/Link.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	type Props = {
+		class?: string;
+		children: Snippet;
+		href: string;
+	} & HTMLAnchorAttributes;
+
+	const { href, class: className, children, ...restProps }: Props = $props();
+</script>
+
+<a {href} class={cleanClass('underline', className)} {...restProps}>
+	{@render children()}
+</a>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+declare const Link: import("svelte").Component<{
+    class?: string;
+    children: Snippet;
+    href: string;
+} & HTMLAnchorAttributes, {}, "">;
+export default Link;

package/dist/components/{Logo.svelte → Logo/Logo.svelte}

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import icon from '../assets/immich-logo.svg';
-	import inlineDark from '../assets/immich-logo-inline-dark.svg';
-	import inlineLight from '../assets/immich-logo-inline-light.svg';
-	import stackedDark from '../assets/immich-logo-stacked-dark.svg';
-	import stackedLight from '../assets/immich-logo-stacked-light.svg';
-	import type { Size } from '../types.js';
-	import { cleanClass } from '../utils.js';
+	import icon from '../../assets/immich-logo.svg';
+	import inlineDark from '../../assets/immich-logo-inline-dark.svg';
+	import inlineLight from '../../assets/immich-logo-inline-light.svg';
+	import stackedDark from '../../assets/immich-logo-stacked-dark.svg';
+	import stackedLight from '../../assets/immich-logo-stacked-light.svg';
+	import type { Size } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
@@ -15,6 +15,8 @@
 		class?: string;
 	};
 
+	const { theme = 'light', variant = 'logo', size = 'medium', class: className }: Props = $props();
+
 	const getUrl = ({ theme, variant }: Required<Pick<Props, 'theme' | 'variant'>>): string => {
 		switch (variant) {
 			case 'stacked': {
@@ -31,7 +33,7 @@
 		}
 	};
 
-	const logo = tv({
+	const styles = tv({
 		variants: {
 			size: {
 				tiny: 'h-8',
@@ -51,8 +53,7 @@
 		},
 	});
 
-	const { theme = 'light', variant = 'logo', size = 'medium', class: className }: Props = $props();
 	const src = $derived(getUrl({ theme, variant }));
 </script>
 
-<img {src} class={cleanClass(logo({ size, variant }), className)} alt="Immich logo" />
+<img {src} class={cleanClass(styles({ size, variant }), className)} alt="Immich logo" />

package/dist/components/{Logo.svelte.d.ts → Logo/Logo.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { Size } from '../types.js';
+import type { Size } from '../../types.js';
 declare const Logo: import("svelte").Component<{
     size?: Size | "landing";
     theme?: "dark" | "light";

package/dist/components/Stack/HStack.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Stack from './Stack.svelte';
+	import type { HStackProps } from '../../types.js';
+
+	const { class: className, children, ...props }: HStackProps = $props();
+</script>
+
+<Stack direction="row" class={className} {...props}>
+	{@render children()}
+</Stack>

package/dist/components/Stack/HStack.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const HStack: import("svelte").Component<{
+    class?: string;
+    children: import("svelte").Snippet;
+    align?: "start" | "center" | "end";
+    gap?: import("../../types.js").Gap;
+    wrap?: boolean;
+}, {}, "">;
+export default HStack;

package/dist/components/Stack/Stack.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { StackProps } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import { tv } from 'tailwind-variants';
+
+	const {
+		align,
+		direction = 'column',
+		wrap = false,
+		class: className,
+		gap = 2,
+		children,
+	}: StackProps = $props();
+
+	const styles = tv({
+		base: 'flex gap-2',
+		variants: {
+			direction: {
+				row: 'flex-row',
+				column: 'flex-col',
+			},
+			align: {
+				start: 'items-start',
+				center: 'items-center',
+				end: 'items-end',
+			},
+			fullWidth: {
+				true: 'w-full',
+				false: '',
+			},
+			fullHeight: {
+				true: 'h-full',
+				false: '',
+			},
+			gap: {
+				0: 'gap-0',
+				1: 'gap-1',
+				2: 'gap-2',
+				3: 'gap-3',
+				4: 'gap-4',
+				5: 'gap-5',
+				6: 'gap-6',
+				7: 'gap-7',
+				8: 'gap-8',
+			},
+			wrap: {
+				true: 'flex-wrap',
+				false: '',
+			},
+		},
+	});
+</script>
+
+<div
+	class={cleanClass(
+		styles({
+			align,
+			direction,
+			gap,
+			wrap,
+			fullWidth: direction === 'row',
+			fullHeight: direction === 'column',
+		}),
+		className,
+	)}
+>
+	{@render children()}
+</div>

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

@@ -0,0 +1,3 @@
+import type { StackProps } from '../../types.js';
+declare const Stack: import("svelte").Component<StackProps, {}, "">;
+export default Stack;

package/dist/components/Stack/VStack.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Stack from './Stack.svelte';
+	import type { VStackProps } from '../../types.js';
+
+	const { class: className, children, ...props }: VStackProps = $props();
+</script>
+
+<Stack direction="column" class={className} {...props}>
+	{@render children()}
+</Stack>

package/dist/components/Stack/VStack.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const VStack: import("svelte").Component<{
+    class?: string;
+    children: import("svelte").Snippet;
+    align?: "start" | "center" | "end";
+    gap?: import("../../types.js").Gap;
+    wrap?: boolean;
+}, {}, "">;
+export default VStack;

package/dist/components/SupporterBadge/SupporterBadge.svelte

@@ -0,0 +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';
+
+	type Props = {
+		effect?: 'hover' | 'always';
+		text?: string;
+		size?: Size;
+		children?: Snippet;
+	};
+
+	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 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: 'border border-dark/25 supporter-effect-hover',
+				always: 'shadow supporter-effect',
+			},
+		},
+	});
+</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}
+</div>
+
+<style>
+	.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;
+	}
+
+	@keyframes gradient {
+		0% {
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 50%;
+		}
+		100% {
+			background-position: 0% 50%;
+		}
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { Size } from '../../types.js';
+import type { Snippet } from 'svelte';
+declare const SupporterBadge: import("svelte").Component<{
+    effect?: "hover" | "always";
+    text?: string;
+    size?: Size;
+    children?: Snippet;
+}, {}, "">;
+export default SupporterBadge;

package/dist/components/Text/Text.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Color, Size } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		color?: Color;
+		size?: Size;
+		children: Snippet;
+		variant?: 'italic';
+		fontWeight?: 'light' | 'normal' | 'semi-bold' | 'bold';
+		class?: string;
+	};
+
+	const { color, size, fontWeight = 'normal', children, class: className }: Props = $props();
+
+	const styles = tv({
+		variants: {
+			color: {
+				primary: 'text-primary',
+				secondary: 'text-dark',
+				success: 'text-success',
+				danger: 'text-danger',
+				warning: 'text-warning',
+				info: 'text-info',
+			},
+
+			size: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+
+			fontWeight: {
+				light: 'font-light',
+				normal: 'font-normal',
+				'semi-bold': 'font-semibold',
+				bold: 'font-bold',
+			},
+		},
+	});
+</script>
+
+<p class={cleanClass(styles({ color, size, fontWeight }), className)}>
+	{@render children()}
+</p>

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

@@ -0,0 +1,11 @@
+import type { Color, Size } from '../../types.js';
+import type { Snippet } from 'svelte';
+declare const Text: import("svelte").Component<{
+    color?: Color;
+    size?: Size;
+    children: Snippet;
+    variant?: "italic";
+    fontWeight?: "light" | "normal" | "semi-bold" | "bold";
+    class?: string;
+}, {}, "">;
+export default Text;

package/dist/constants.d.ts

@@ -0,0 +1,6 @@
+export declare enum ContextKey {
+    Card = "card",
+    CardHeader = "card-header",
+    CardBody = "card-body",
+    CardFooter = "card-footer"
+}

package/dist/constants.js

@@ -0,0 +1,7 @@
+export var ContextKey;
+(function (ContextKey) {
+    ContextKey["Card"] = "card";
+    ContextKey["CardHeader"] = "card-header";
+    ContextKey["CardBody"] = "card-body";
+    ContextKey["CardFooter"] = "card-footer";
+})(ContextKey || (ContextKey = {}));

package/dist/index.d.ts

@@ -1,2 +1,23 @@
-export * from './components/index.js';
+export { default as Alert } from './components/Alert/Alert.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';
+export { default as CardDescription } from './components/Card/CardDescription.svelte';
+export { default as CardFooter } from './components/Card/CardFooter.svelte';
+export { default as CardHeader } from './components/Card/CardHeader.svelte';
+export { default as CardTitle } from './components/Card/CardTitle.svelte';
+export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
+export { default as Checkbox } from './components/Form/Checkbox.svelte';
+export { default as Input } from './components/Form/Input.svelte';
+export { default as Label } from './components/Form/Label.svelte';
+export { default as Heading } from './components/Heading/Heading.svelte';
+export { default as Icon } from './components/Icon/Icon.svelte';
+export { default as IconButton } from './components/IconButton/IconButton.svelte';
+export { default as Link } from './components/Link/Link.svelte';
+export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
+export { default as Logo } from './components/Logo/Logo.svelte';
+export { default as HStack } from './components/Stack/HStack.svelte';
+export { default as Stack } from './components/Stack/Stack.svelte';
+export { default as VStack } from './components/Stack/VStack.svelte';
+export { default as Text } from './components/Text/Text.svelte';
 export * from './types.js';

package/dist/index.js

@@ -1,2 +1,23 @@
-export * from './components/index.js';
+export { default as Alert } from './components/Alert/Alert.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';
+export { default as CardDescription } from './components/Card/CardDescription.svelte';
+export { default as CardFooter } from './components/Card/CardFooter.svelte';
+export { default as CardHeader } from './components/Card/CardHeader.svelte';
+export { default as CardTitle } from './components/Card/CardTitle.svelte';
+export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
+export { default as Checkbox } from './components/Form/Checkbox.svelte';
+export { default as Input } from './components/Form/Input.svelte';
+export { default as Label } from './components/Form/Label.svelte';
+export { default as Heading } from './components/Heading/Heading.svelte';
+export { default as Icon } from './components/Icon/Icon.svelte';
+export { default as IconButton } from './components/IconButton/IconButton.svelte';
+export { default as Link } from './components/Link/Link.svelte';
+export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
+export { default as Logo } from './components/Logo/Logo.svelte';
+export { default as HStack } from './components/Stack/HStack.svelte';
+export { default as Stack } from './components/Stack/Stack.svelte';
+export { default as VStack } from './components/Stack/VStack.svelte';
+export { default as Text } from './components/Text/Text.svelte';
 export * from './types.js';

package/dist/{components → internal}/Button.svelte

@@ -1,114 +1,122 @@
 <script lang="ts">
-	import type { Color, Shape, Size } from '../types.js';
+	import type { ButtonProps } from '../types.js';
 	import { cleanClass } from '../utils.js';
 	import { Button as ButtonPrimitive } from 'bits-ui';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
 
-	type ButtonVariant = 'filled' | 'outline' | 'ghost' | 'hero';
-	type ButtonProps = {
-		class?: string;
-		color?: Color;
-		size?: Size;
-		shape?: Shape;
-		variant?: ButtonVariant;
-		fullWidth?: boolean;
-	} & (({ href?: never } & HTMLButtonAttributes) | ({ href: string } & HTMLAnchorAttributes));
-
-	const asOverride = (variant: ButtonVariant, colors: Record<Color, string>) =>
-		(Object.keys(colors) as Color[]).map((color) => ({ variant, color, class: colors[color] }));
-
-	const colorPlaceholder = {
-		primary: '',
-		secondary: '',
-		success: '',
-		danger: '',
-		warning: '',
-		info: '',
+	type InternalButtonProps = ButtonProps & {
+		/** when true, button width to height ratio is 1:1 */
+		icon?: boolean;
 	};
 
-	const variantPlaceholder = {
-		outline: '',
-		filled: '',
-		ghost: '',
-		hero: '',
-	};
+	const {
+		type = 'button',
+		href,
+		variant = 'filled',
+		color = 'primary',
+		shape = 'semi-round',
+		size = 'medium',
+		fullWidth = false,
+		icon = false,
+		class: className = '',
+		children,
+		...restProps
+	}: InternalButtonProps = $props();
 
 	const buttonVariants = tv({
 		base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',
-				'semi-round': 'rounded-lg',
+				'semi-round': 'rounded-xl',
 				round: 'rounded-full',
 			},
-			size: {
-				tiny: 'px-2 py-1 text-xs',
-				small: 'px-2 py-1 text-sm',
-				medium: 'px-4 py-2 text-md',
-				large: 'px-4 py-2 text-lg',
-				giant: 'px-8 py-4 text-xl',
-			},
 			fullWidth: {
 				true: 'w-full',
 			},
-			color: colorPlaceholder,
-			variant: variantPlaceholder,
-		},
-		compoundVariants: [
-			...asOverride('filled', {
+			textPadding: {
+				tiny: 'px-2 py-1',
+				small: 'px-2 py-1',
+				medium: 'px-4 py-2',
+				large: 'px-4 py-2',
+				giant: 'px-8 py-4',
+			},
+			textSize: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+			iconSize: {
+				tiny: 'h-4 w-4 text-xs',
+				small: 'h-6 w-6 text-sm',
+				medium: 'h-8 w-8 text-md',
+				large: 'h-10 w-10 text-lg',
+				giant: 'h-12 w-12 text-lg',
+			},
+			roundedSize: {
+				tiny: 'rounded-md',
+				small: 'rounded-md',
+				medium: 'rounded-lg',
+				large: 'rounded-lg',
+				giant: 'rounded-lg',
+			},
+			filledColor: {
 				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',
-			}),
-
-			...asOverride('outline', {
+			},
+			outlineColor: {
 				primary: 'bg-primary/10 text-primary border border-primary hover:bg-primary/20',
 				secondary: 'bg-dark/10 text-dark border border-dark hover:bg-dark/20',
 				success: 'bg-success/10 text-success border border-success hover:bg-success/20',
 				danger: 'bg-danger/10 text-danger border border-danger hover:bg-danger/20',
 				warning: 'bg-warning/10 text-warning border border-warning hover:bg-warning/20',
 				info: 'bg-info/10 text-info border border-info hover:bg-info/20',
-			}),
-
-			...asOverride('ghost', {
-				primary: 'text-primary hover:bg-primary/10',
-				secondary: 'text-dark hover:bg-dark/10',
-				success: 'text-success hover:bg-success/10',
-				danger: 'text-danger hover:bg-danger/10',
-				warning: 'text-warning hover:bg-warning/10',
-				info: 'text-info hover:bg-info/10',
-			}),
-
-			...asOverride('hero', {
+			},
+			heroColor: {
 				primary: 'bg-gradient-to-tr from-primary to-primary/60 text-light hover:bg-primary',
 				secondary: 'bg-gradient-to-tr from-dark to-dark/60 text-light hover:bg-dark',
 				success: 'bg-gradient-to-tr from-success to-success/60 text-light hover:bg-success',
 				danger: 'bg-gradient-to-tr from-danger to-danger/60 text-light hover:bg-danger',
 				warning: 'bg-gradient-to-tr from-warning to-warning/60 text-light hover:bg-warning',
 				info: 'bg-gradient-to-tr from-info to-info/60 text-light hover:bg-info',
-			}),
-		],
+			},
+			ghostColor: {
+				primary: 'text-primary hover:bg-primary/10',
+				secondary: 'text-dark hover:bg-dark/10',
+				success: 'text-success hover:bg-success/10',
+				danger: 'text-danger hover:bg-danger/10',
+				warning: 'text-warning hover:bg-warning/10',
+				info: 'text-info hover:bg-info/10',
+			},
+		},
 	});
 
-	const {
-		type = 'button',
-		href,
-		variant = 'filled',
-		color = 'primary',
-		shape = 'semi-round',
-		size = 'medium',
-		fullWidth = false,
-		class: className = '',
-		children,
-		...restProps
-	}: ButtonProps = $props();
-
 	const classList = $derived(
-		cleanClass(buttonVariants({ variant, color, shape, size, fullWidth }), className),
+		cleanClass(
+			twMerge(
+				buttonVariants({
+					shape,
+					fullWidth,
+					textPadding: icon ? undefined : size,
+					textSize: size,
+					iconSize: icon ? size : undefined,
+					roundedSize: shape === 'semi-round' ? size : undefined,
+					filledColor: variant === 'filled' ? color : undefined,
+					outlineColor: variant === 'outline' ? color : undefined,
+					heroColor: variant === 'hero' ? color : undefined,
+					ghostColor: variant === 'ghost' ? color : undefined,
+				}),
+				className,
+			),
+		),
 	);
 </script>
 

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

@@ -0,0 +1,6 @@
+import type { ButtonProps } from '../types.js';
+declare const Button: import("svelte").Component<ButtonProps & {
+    /** when true, button width to height ratio is 1:1 */
+    icon?: boolean;
+}, {}, "">;
+export default Button;