@immich/ui 0.4.0 → 0.5.0

package/dist/components/CloseButton/CloseButton.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import IconButton from '../IconButton/IconButton.svelte';
+	import type { CloseButtonProps } from '../../types.js';
+	import { mdiClose } from '@mdi/js';
+
+	const { size = 'medium', variant = 'ghost' }: CloseButtonProps = $props();
+</script>
+
+<IconButton icon={mdiClose} color="secondary" shape="round" {variant} {size} />

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

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

package/dist/components/Heading/Heading.svelte

@@ -8,6 +8,7 @@
 		size: HeadingSize;
 		color?: Color;
 		class?: string;
+
 		children: Snippet;
 	};
 
@@ -23,7 +24,7 @@
 	};
 
 	const styles = tv({
-		base: 'leading-none tracking-tight',
+		base: 'font-bold leading-none tracking-tight',
 		variants: {
 			color: {
 				primary: 'text-primary',
@@ -34,12 +35,12 @@
 				info: 'text-info',
 			},
 			size: {
-				tiny: 'text-lg font-bold',
-				small: 'text-xl font-bold',
-				medium: 'text-2xl font-bold',
-				large: 'text-3xl font-bold',
-				giant: 'text-4xl font-bold',
-				title: 'text-5xl font-bold',
+				tiny: 'text-lg',
+				small: 'text-xl',
+				medium: 'text-2xl',
+				large: 'text-3xl',
+				giant: 'text-4xl',
+				title: 'text-5xl',
 			},
 		},
 	});

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/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/index.d.ts

@@ -6,12 +6,15 @@ export { default as CardDescription } from './components/Card/CardDescription.sv
 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';

package/dist/index.js

@@ -6,12 +6,15 @@ export { default as CardDescription } from './components/Card/CardDescription.sv
 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';

package/dist/types.d.ts

@@ -11,12 +11,14 @@ type ButtonOrAnchor = ({
 } & HTMLButtonAttributes) | ({
     href: string;
 } & HTMLAnchorAttributes);
-type ButtonBaseProps = {
+export type CloseButtonProps = {
+    size?: Size;
+    variant?: Variants;
+};
+type ButtonBaseProps = CloseButtonProps & {
     class?: string;
     color?: Color;
-    size?: Size;
     shape?: Shape;
-    variant?: Variants;
 } & ButtonOrAnchor;
 export type IconProps = {
     icon: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"start": "npm run start:dev",