@immich/ui 0.3.0 → 0.4.0

package/dist/common/use-context.svelte.d.ts

@@ -0,0 +1,5 @@
+import { ContextKey } from '../constants.js';
+import { type Snippet } from 'svelte';
+export declare const withChildrenSnippets: (key: ContextKey) => {
+    getChildren: (key: ContextKey) => Snippet<[]> | undefined;
+};

package/dist/common/use-context.svelte.js

@@ -0,0 +1,19 @@
+import { ContextKey } from '../constants.js';
+import { withPrefix } from '../utils.js';
+import { setContext } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+export const withChildrenSnippets = (key) => {
+    const map = $state(new SvelteMap());
+    setContext(withPrefix(key), {
+        register: async (child, snippet) => {
+            if (map.has(child)) {
+                console.warn(`Snippet with key ${child} already exists in the context`);
+                return;
+            }
+            map.set(child, snippet);
+        },
+    });
+    return {
+        getChildren: (key) => map.get(key),
+    };
+};

package/dist/components/Alert/Alert.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import Card from '../Card/Card.svelte';
+	import CardHeader from '../Card/CardHeader.svelte';
+	import Icon from '../Icon/Icon.svelte';
+	import Text from '../Text/Text.svelte';
+	import type { Color } from '../../types.js';
+	import {
+		mdiAlertOutline,
+		mdiCheckCircleOutline,
+		mdiCloseCircleOutline,
+		mdiInformationOutline,
+	} from '@mdi/js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		color?: Color;
+		icon?: string;
+		title: string;
+		children?: Snippet;
+	};
+
+	const { color = 'info', icon: iconOverride, title, children }: Props = $props();
+
+	const icons: Partial<Record<Color, string>> = {
+		success: mdiCheckCircleOutline,
+		warning: mdiAlertOutline,
+		danger: mdiCloseCircleOutline,
+	};
+
+	const icon = $derived(iconOverride || (icons[color] ?? mdiInformationOutline));
+</script>
+
+<Card {color} variant="subtle">
+	<CardHeader>
+		<div class="flex gap-2">
+			{#if icon}
+				<div>
+					<Icon {icon} size="1.5em" class="h-7" />
+				</div>
+			{/if}
+
+			<div class="flex flex-col gap-2">
+				<Text size="large" fontWeight={children ? 'bold' : undefined}>{title}</Text>
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+		</div>
+	</CardHeader>
+</Card>

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

@@ -0,0 +1,9 @@
+import type { Color } from '../../types.js';
+import type { Snippet } from 'svelte';
+declare const Alert: import("svelte").Component<{
+    color?: Color;
+    icon?: string;
+    title: string;
+    children?: Snippet;
+}, {}, "">;
+export default Alert;

package/dist/components/Button/Button.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Button from '../../internal/Button.svelte';
+	import type { ButtonProps } from '../../types.js';
+
+	const props: ButtonProps = $props();
+</script>
+
+<Button {...props} />

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

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

package/dist/components/Card/Card.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+	import { withChildrenSnippets } from '../../common/use-context.svelte.js';
+	import IconButton from '../IconButton/IconButton.svelte';
+	import { ContextKey } from '../../constants.js';
+	import type { Color, Shape } 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 { tv } from 'tailwind-variants';
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		color?: Color;
+		shape?: Shape;
+		variant?: 'filled' | 'outline' | 'subtle';
+		expandable?: boolean;
+		children: Snippet;
+	};
+
+	let {
+		color = 'secondary',
+		class: className,
+		expandable = false,
+		variant,
+		children,
+		...restProps
+	}: Props = $props();
+
+	const cardStyles = tv({
+		base: 'rounded-2xl bg-light text-dark shadow-sm dark:border-gray-600 w-full overflow-hidden',
+		variants: {
+			defaultStyle: {
+				true: 'border border-gray-300 dark:border-gray-600',
+				false: '',
+				default: '',
+			},
+			outlineColor: {
+				primary: 'border border-primary',
+				secondary: 'border border-gray-300 dark:border-gray-600',
+				success: 'border border-success',
+				danger: 'border border-danger',
+				warning: 'border border-warning',
+				info: 'border border-info',
+			},
+			subtleColor: {
+				primary: 'bg-primary/50 dark:bg-primary/25',
+				secondary: 'bg-dark/15 text-dark',
+				success: 'bg-success/25 dark:bg-success/50',
+				danger: 'bg-danger/25 dark:bg-danger/50',
+				warning: 'bg-warning/25 dark:bg-warning/50',
+				info: 'bg-info/25',
+			},
+		},
+	});
+
+	const headerContainerStyles = tv({
+		variants: {
+			bottomPadding: {
+				true: '',
+				false: 'pb-0',
+			},
+			filledColor: {
+				primary: 'bg-primary text-light rounded-t-xl',
+				secondary: 'bg-dark text-light rounded-t-xl',
+				success: 'bg-success text-light rounded-t-xl',
+				danger: 'bg-danger text-light rounded-t-xl',
+				warning: 'bg-warning text-black rounded-t-xl',
+				info: 'bg-info text-light rounded-t-xl',
+			},
+			outlineColor: {
+				primary: 'text-primary',
+				secondary: 'text-dark',
+				success: 'text-success',
+				danger: 'text-danger',
+				warning: 'text-warning',
+				info: 'text-info',
+			},
+		},
+	});
+
+	const iconStyles = tv({
+		variants: {
+			filledColor: {
+				primary: 'text-light',
+				secondary: 'text-light',
+				success: 'text-light',
+				danger: 'text-light',
+				warning: 'text-dark',
+				info: 'text-light',
+			},
+			outlineColor: {
+				primary: 'text-primary',
+				secondary: 'text-dark',
+				success: 'text-success',
+				danger: 'text-danger',
+				warning: 'text-warning',
+				info: 'text-info',
+			},
+		},
+	});
+
+	let expanded = $state(!expandable);
+	const onToggle = () => {
+		expanded = !expanded;
+	};
+
+	const { getChildren: getChildSnippet } = withChildrenSnippets(ContextKey.Card);
+	const headerChildren = $derived(getChildSnippet(ContextKey.CardHeader));
+	const bodyChildren = $derived(getChildSnippet(ContextKey.CardBody));
+	const footerChildren = $derived(getChildSnippet(ContextKey.CardFooter));
+
+	const headerClasses = 'flex flex-col space-y-1.5';
+	const headerContainerClasses = $derived(
+		cleanClass(
+			headerContainerStyles({
+				bottomPadding: variant === 'filled' || !bodyChildren,
+				outlineColor: variant === 'outline' ? color : undefined,
+				filledColor: variant === 'filled' ? color : undefined,
+			}),
+		),
+	);
+</script>
+
+{#snippet header()}
+	{#if expandable}
+		<button type="button" onclick={onToggle} class="w-full">
+			<div class={cleanClass(headerContainerClasses, 'flex items-center justify-between px-4')}>
+				<div class={cleanClass(headerClasses, 'py-4')}>
+					{@render headerChildren?.()}
+				</div>
+				<div>
+					<IconButton
+						class={iconStyles({
+							filledColor: variant === 'filled' ? color : undefined,
+							outlineColor: variant === 'outline' ? color : undefined,
+						}) as Color}
+						icon={mdiChevronDown}
+						flopped={expanded}
+						variant="ghost"
+						shape="round"
+						size="large"
+					/>
+				</div>
+			</div>
+		</button>
+	{:else}
+		<div class={cleanClass(headerClasses, headerContainerClasses, 'p-4')}>
+			{@render headerChildren?.()}
+		</div>
+	{/if}
+{/snippet}
+
+{#snippet body()}
+	{@render bodyChildren?.()}
+{/snippet}
+
+{#snippet footer()}
+	<div class="flex items-center p-4 pt-0">
+		{@render footerChildren?.()}
+	</div>
+{/snippet}
+
+<div
+	class={cleanClass(
+		cardStyles({
+			defaultStyle: variant === undefined,
+			outlineColor: variant === 'outline' || variant === 'filled' ? color : undefined,
+			subtleColor: variant === 'subtle' ? color : undefined,
+		}),
+		className,
+	)}
+	{...restProps}
+>
+	{#if headerChildren}
+		{@render header()}
+	{/if}
+
+	{#if bodyChildren && expanded}
+		{@render body()}
+	{/if}
+
+	{#if footerChildren}
+		{@render footer()}
+	{/if}
+
+	{@render children()}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Color, Shape } from '../../types.js';
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const Card: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
+    color?: Color;
+    shape?: Shape;
+    variant?: "filled" | "outline" | "subtle";
+    expandable?: boolean;
+    children: Snippet;
+}, {}, "">;
+export default Card;

package/dist/components/Card/CardBody.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ContextKey } from '../../constants.js';
+	import Child from '../../internal/Child.svelte';
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		class?: string;
+		children: Snippet;
+	};
+
+	let { class: className, children }: Props = $props();
+</script>
+
+<Child for={ContextKey.Card} as={ContextKey.CardBody}>
+	<div class={twMerge(cleanClass('p-4', className))}>
+		{@render children?.()}
+	</div>
+</Child>

package/dist/components/Card/CardBody.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+declare const CardBody: import("svelte").Component<{
+    class?: string;
+    children: Snippet;
+}, {}, "">;
+export default CardBody;

package/dist/components/Card/CardDescription.svelte

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

package/dist/components/Card/CardDescription.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+declare const CardDescription: import("svelte").Component<{
+    class?: string;
+    children: Snippet;
+}, {}, "">;
+export default CardDescription;

package/dist/components/Card/CardFooter.svelte

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

package/dist/components/Card/CardFooter.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const CardFooter: import("svelte").Component<{
+    children: Snippet;
+}, {}, "">;
+export default CardFooter;

package/dist/components/Card/CardHeader.svelte

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

package/dist/components/Card/CardHeader.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const CardHeader: import("svelte").Component<{
+    children: Snippet;
+}, {}, "">;
+export default CardHeader;

package/dist/components/Card/CardTitle.svelte

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

package/dist/components/Card/CardTitle.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HeadingSize } from '../../types.js';
+import type { Snippet } from 'svelte';
+declare const CardTitle: import("svelte").Component<{
+    class?: string;
+    size?: HeadingSize;
+    children: Snippet;
+}, {}, "">;
+export default CardTitle;

package/dist/components/{Checkbox.svelte → Form/Checkbox.svelte}

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
 	import { mdiCheck, mdiMinus } from '@mdi/js';
-	import Icon from './Icon.svelte';
+	import Icon from '../Icon/Icon.svelte';
 	import { tv } from 'tailwind-variants';
-	import type { Color, Shape, Size } from '../types.js';
-	import { cleanClass } from '../utils.js';
+	import type { Color, Shape, Size } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
 
 	type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & {
 		color?: Color;
@@ -40,30 +40,17 @@
 			},
 			size: {
 				tiny: 'size-4',
-				small: 'size-6',
-				medium: 'size-8',
-				large: 'size-16',
-				giant: 'size-32',
+				small: 'size-5',
+				medium: 'size-6',
+				large: 'size-8',
+				giant: 'size-10',
 			},
-		},
-		compoundVariants: [
-			//
-			{ size: 'tiny', shape: 'semi-round', class: 'rounded' },
-			{ size: 'small', shape: 'semi-round', class: 'rounded-md' },
-			{ size: 'large', shape: 'semi-round', class: 'rounded-xl' },
-			{ size: 'giant', shape: 'semi-round', class: 'rounded-2xl' },
-		],
-	});
-
-	const parent = tv({
-		base: 'flex items-center justify-center text-current',
-		variants: {
-			size: {
-				tiny: 'size-4',
-				small: 'size-6',
-				medium: 'size-8',
-				large: 'size-16',
-				giant: 'size-32',
+			roundedSize: {
+				tiny: 'rounded-md',
+				small: 'rounded-md',
+				medium: 'rounded-md',
+				large: 'rounded-lg',
+				giant: 'rounded-xl',
 			},
 		},
 	});
@@ -87,16 +74,19 @@
 
 <CheckboxPrimitive.Root
 	bind:ref
-	class={cleanClass(container({ size, color, shape }), className)}
+	class={cleanClass(
+		container({ size, color, shape, roundedSize: shape === 'semi-round' ? size : undefined }),
+		className,
+	)}
 	bind:checked
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<div class={parent({ size })}>
+		<div class={cleanClass('flex items-center justify-center text-current')}>
 			{#if checked === true}
-				<Icon path={mdiCheck} size="100%" class={cleanClass(icon({ color }))} />
+				<Icon icon={mdiCheck} size="100%" class={cleanClass(icon({ color }))} />
 			{:else if checked === 'indeterminate'}
-				<Icon path={mdiMinus} size="100%" class={cleanClass(icon({ color }))} />
+				<Icon icon={mdiMinus} size="100%" class={cleanClass(icon({ color }))} />
 			{/if}
 		</div>
 	{/snippet}

package/dist/components/{Checkbox.svelte.d.ts → Form/Checkbox.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-import type { Color, Shape, Size } from '../types.js';
+import type { Color, Shape, Size } from '../../types.js';
 declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children"> & {
     color?: Color;
     shape?: Shape;

package/dist/components/{Input.svelte → Form/Input.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { WithElementRef } from 'bits-ui';
-	import { cleanClass } from '../utils.js';
+	import { cleanClass } from '../../utils.js';
 
 	let {
 		ref = $bindable(null),

package/dist/components/{Label.svelte → Form/Label.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cleanClass } from '../utils.js';
+	import { cleanClass } from '../../utils.js';
 	import { Label as LabelPrimitive } from 'bits-ui';
 
 	let {

package/dist/components/Heading/Heading.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Color, HeadingSize } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		size: HeadingSize;
+		color?: Color;
+		class?: string;
+		children: Snippet;
+	};
+
+	const { color, size, class: className, children }: Props = $props();
+
+	const sizes = {
+		title: 'h1',
+		giant: 'h2',
+		large: 'h3',
+		medium: 'h4',
+		small: 'h5',
+		tiny: 'h6',
+	};
+
+	const styles = tv({
+		base: 'leading-none tracking-tight',
+		variants: {
+			color: {
+				primary: 'text-primary',
+				secondary: 'text-dark',
+				success: 'text-success',
+				danger: 'text-danger',
+				warning: 'text-warning',
+				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',
+			},
+		},
+	});
+
+	const tag = $derived(sizes[size] ?? 'h6');
+	const classList = $derived(cleanClass(styles({ color, size }), className));
+</script>
+
+<svelte:element this={tag} class={classList} role="heading">
+	{@render children()}
+</svelte:element>

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

@@ -0,0 +1,9 @@
+import type { Color, HeadingSize } from '../../types.js';
+import type { Snippet } from 'svelte';
+declare const Heading: import("svelte").Component<{
+    size: HeadingSize;
+    color?: Color;
+    class?: string;
+    children: Snippet;
+}, {}, "">;
+export default Heading;

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { IconProps } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	const {
+		size = '1em',
+		viewBox = '0 0 24 24',
+		class: className = '',
+		flipped = false,
+		flopped = false,
+		spin = false,
+		strokeColor = 'transparent',
+		strokeWidth = 2,
+		role = 'img',
+		title,
+		icon,
+		color = 'currentColor',
+		description,
+		...restProps
+	}: IconProps & HTMLAttributes<EventTarget> = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	{viewBox}
+	class={cleanClass(
+		className,
+		flipped && '-scale-x-100',
+		flopped && 'rotate-180',
+		spin && 'animate-spin',
+	)}
+	stroke={strokeColor}
+	stroke-width={strokeWidth}
+	{role}
+	{...restProps}
+>
+	{#if title}
+		<title>{title}</title>
+	{/if}
+	{#if description}
+		<desc>{description}</desc>
+	{/if}
+	<path d={icon} fill={color} />
+</svg>
+
+<style>
+	svg {
+		transition: transform 0.2s ease;
+	}
+</style>

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>