@immich/ui 0.9.0 → 0.10.0

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

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

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

@@ -3,17 +3,11 @@ import { withPrefix } from '../utils.js';
 import { setContext } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 export const withChildrenSnippets = (key) => {
-    const map = $state(new SvelteMap());
+    const map = 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);
-        },
+        register: (child, data) => map.set(child, data),
     });
     return {
-        getChildren: (key) => map.get(key),
+        getChildren: (key) => map.get(key)?.(),
     };
 };

package/dist/components/Alert/Alert.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import Card from '../Card/Card.svelte';
-	import CardHeader from '../Card/CardHeader.svelte';
+	import CardBody from '../Card/CardBody.svelte';
+	import CloseButton from '../CloseButton/CloseButton.svelte';
 	import Icon from '../Icon/Icon.svelte';
 	import Text from '../Text/Text.svelte';
-	import CloseButton from '../CloseButton/CloseButton.svelte';
 	import type { Color, Size } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import {
@@ -78,9 +78,9 @@
 </script>
 
 {#if open}
-	<Card {color} variant="subtle" class={cleanClass(className)}>
-		<CardHeader>
-			<div class="flex justify-between">
+	<Card {color} class={cleanClass(className)}>
+		<CardBody>
+			<div class="flex items-center justify-between">
 				<div class={cleanClass('flex gap-2')}>
 					{#if icon}
 						<div>
@@ -103,6 +103,6 @@
 					</div>
 				{/if}
 			</div>
-		</CardHeader>
+		</CardBody>
 	</Card>
 {/if}

package/dist/components/AppShell/AppShell.svelte

@@ -20,12 +20,12 @@
 <div class={cleanClass('flex h-screen flex-col overflow-hidden', className)}>
 	{#if header}
 		<header class="border-b">
-			{@render header?.()}
+			{@render header?.snippet()}
 		</header>
 	{/if}
 	<div class="flex w-full grow overflow-y-auto">
 		{#if sidebar}
-			{@render sidebar()}
+			{@render sidebar?.snippet()}
 		{/if}
 		<Scrollable class="grow">
 			{@render children?.()}

package/dist/components/Card/Card.svelte

@@ -1,48 +1,52 @@
 <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, Shape } from '../../types.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> & {
 		color?: Color;
-		shape?: Shape;
-		variant?: 'filled' | 'outline' | 'subtle';
+		shape?: 'round' | 'rectangle';
+		expanded?: boolean;
 		expandable?: boolean;
 		children: Snippet;
 	};
 
 	let {
-		color = 'secondary',
+		color,
 		class: className,
+		shape = 'round',
+		expanded = $bindable(true),
 		expandable = false,
-		variant,
 		children,
 		...restProps
 	}: Props = $props();
 
-	const cardStyles = tv({
-		base: 'flex flex-col rounded-2xl bg-light text-dark shadow-sm w-full overflow-hidden',
+	const containerStyles = tv({
+		base: 'w-full overflow-hidden bg-light text-dark shadow-sm',
 		variants: {
-			defaultStyle: {
+			shape: {
+				rectangle: '',
+				round: 'rounded-2xl',
+			},
+			border: {
 				true: 'border',
 				false: '',
-				default: '',
 			},
-			outlineColor: {
-				primary: 'border border-primary',
-				secondary: 'border',
-				success: 'border border-success',
-				danger: 'border border-danger',
-				warning: 'border border-warning',
-				info: 'border border-info',
-			},
-			subtleColor: {
+		},
+	});
+
+	const cardStyles = tv({
+		base: 'flex flex-col w-full h-full',
+		variants: {
+			color: {
 				primary: 'bg-primary/25 dark:bg-primary/25',
 				secondary: 'bg-dark/5 dark:bg-dark/25 text-dark',
 				success: 'bg-success/15 dark:bg-success/30',
@@ -54,132 +58,103 @@
 	});
 
 	const headerContainerStyles = tv({
+		base: 'p-4',
 		variants: {
-			bottomPadding: {
+			padding: {
 				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',
+			border: {
+				true: 'border-b',
+				false: '',
 			},
 		},
 	});
 
-	let expanded = $state(!expandable);
 	const onToggle = () => {
 		expanded = !expanded;
 	};
 
 	const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Card);
-	const headerChildren = $derived(getChildSnippet(ChildKey.CardHeader));
-	const bodyChildren = $derived(getChildSnippet(ChildKey.CardBody));
-	const footerChildren = $derived(getChildSnippet(ChildKey.CardFooter));
+	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 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,
-			}),
+		twMerge(
+			cleanClass(
+				headerContainerStyles({
+					padding: headerPadding,
+					border: headerBorder,
+				}),
+				headerChild?.class,
+			),
 		),
 	);
 </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>
+		<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"
+				/>
 			</div>
 		</button>
 	{:else}
-		<div class={cleanClass(headerClasses, headerContainerClasses, 'p-4')}>
-			{@render headerChildren?.()}
+		<div class={cleanClass('flex flex-col', headerContainerClasses)}>
+			{@render headerChild?.snippet()}
 		</div>
 	{/if}
 {/snippet}
 
-{#snippet body()}
-	{@render bodyChildren?.()}
-{/snippet}
-
-{#snippet footer()}
-	{@render footerChildren?.()}
-{/snippet}
-
 <div
 	class={cleanClass(
-		cardStyles({
-			defaultStyle: variant === undefined,
-			outlineColor: variant === 'outline' || variant === 'filled' ? color : undefined,
-			subtleColor: variant === 'subtle' ? color : undefined,
+		containerStyles({
+			shape,
+			border: !color,
 		}),
 		className,
 	)}
 	{...restProps}
 >
-	{#if headerChildren}
-		{@render header()}
-	{/if}
+	<div class={cleanClass(cardStyles({ color }))}>
+		{#if headerChild}
+			{@render header()}
+		{/if}
 
-	{#if bodyChildren && expanded}
-		{@render body()}
-	{/if}
+		{#if bodyChild && expanded}
+			<Scrollable class={twMerge(cleanClass('p-4', bodyChild?.class))}>
+				{@render bodyChild?.snippet()}
+			</Scrollable>
+		{/if}
 
-	{#if footerChildren}
-		{@render footer()}
-	{/if}
+		{#if footerChild}
+			<div
+				class={twMerge(
+					cleanClass('flex items-center border-t border-t-subtle p-4', footerChild.class),
+				)}
+			>
+				{@render footerChild.snippet()}
+			</div>
+		{/if}
 
-	{@render children()}
+		{@render children()}
+	</div>
 </div>

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

@@ -1,11 +1,11 @@
-import type { Color, Shape } from '../../types.js';
+import type { Color } 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";
+    shape?: "round" | "rectangle";
+    expanded?: boolean;
     expandable?: boolean;
     children: Snippet;
-}, {}, "">;
+}, {}, "expanded">;
 export default Card;

package/dist/components/Card/CardBody.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { ChildKey } 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;
@@ -13,8 +11,6 @@
 	let { class: className, children }: Props = $props();
 </script>
 
-<Child for={ChildKey.Card} as={ChildKey.CardBody}>
-	<div class={twMerge(cleanClass('w-full grow p-4', className))}>
-		{@render children?.()}
-	</div>
+<Child for={ChildKey.Card} as={ChildKey.CardBody} class={className}>
+	{@render children?.()}
 </Child>

package/dist/components/Card/CardFooter.svelte

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

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

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

package/dist/components/Card/CardHeader.svelte

@@ -4,12 +4,13 @@
 	import type { Snippet } from 'svelte';
 
 	type Props = {
+		class?: string;
 		children: Snippet;
 	};
 
-	let { children }: Props = $props();
+	let { class: className, children }: Props = $props();
 </script>
 
-<Child for={ChildKey.Card} as={ChildKey.CardHeader}>
+<Child for={ChildKey.Card} as={ChildKey.CardHeader} class={className}>
 	{@render children?.()}
 </Child>

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

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

package/dist/components/Form/Field.svelte

@@ -3,6 +3,7 @@
 	import { withChildrenSnippets } from '../../common/use-child.svelte.js';
 	import { ChildKey } from '../../constants.js';
 	import type { FieldContext } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
 	import { type Snippet } from 'svelte';
 
 	type Props = FieldContext & {
@@ -22,8 +23,8 @@
 <div>
 	{@render children()}
 	{#if helperTextChildren}
-		<div class="pt-1">
-			{@render helperTextChildren?.()}
+		<div class={cleanClass('pt-1', helperTextChildren.class)}>
+			{@render helperTextChildren.snippet()}
 		</div>
 	{/if}
 </div>

package/dist/components/Heading/Heading.svelte

@@ -12,7 +12,7 @@
 		children: Snippet;
 	};
 
-	const { color, size, class: className, children }: Props = $props();
+	const { color, size = 'medium', class: className, children }: Props = $props();
 
 	const sizes = {
 		title: 'h1',

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+	import Card from '../Card/Card.svelte';
+	import CardBody from '../Card/CardBody.svelte';
+	import CardFooter from '../Card/CardFooter.svelte';
+	import CardHeader from '../Card/CardHeader.svelte';
+	import CardTitle from '../Card/CardTitle.svelte';
+	import CloseButton from '../CloseButton/CloseButton.svelte';
+	import { ChildKey } from '../../constants.js';
+	import type { ModalSize } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import { Dialog } from 'bits-ui';
+	import { type Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	type Props = Dialog.RootProps & {
+		title: string;
+		size?: ModalSize;
+		class?: string;
+		open?: boolean;
+		expandable?: boolean;
+		children: Snippet;
+	};
+
+	let {
+		title,
+		size = 'medium',
+		open = $bindable(true),
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+
+	const modalStyles = tv({
+		base: 'flex  rounded-none border border-subtle bg-subtle  sm:rounded-2xl',
+		variants: {
+			size: {
+				tiny: 'h-full sm:h-min md:max-w-64',
+				small: 'h-full sm:h-min md:max-w-96',
+				medium: 'h-full sm:h-min md:max-w-screen-sm',
+				large: 'h-full sm:h-min md:max-w-screen-md',
+				giant: 'h-full sm:h-min md:max-w-screen-lg',
+				full: 'h-full w-full',
+			},
+		},
+	});
+
+	const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Modal);
+	const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
+	const footerChildren = $derived(getChildSnippet(ChildKey.ModalFooter));
+
+	const handleClose = () => {
+		open = false;
+	};
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="absolute left-0 top-0 flex h-screen w-screen backdrop-blur" />
+		<Dialog.Content
+			class={cleanClass(
+				'absolute left-0 top-0 flex h-dvh w-screen items-center justify-center overflow-hidden sm:p-4',
+			)}
+		>
+			<div class={cleanClass('flex h-full w-full flex-col items-center justify-center ')}>
+				<Card class={cleanClass(modalStyles({ size }), className)}>
+					<CardHeader class="border-0 py-2">
+						<div class="flex items-center justify-between">
+							<CardTitle>{title}</CardTitle>
+							<CloseButton size="large" onclick={handleClose} />
+						</div>
+					</CardHeader>
+
+					<CardBody class="grow py-2">
+						{@render bodyChildren?.snippet()}
+					</CardBody>
+
+					{#if footerChildren}
+						<CardFooter class="py-2">
+							{@render footerChildren.snippet()}
+						</CardFooter>
+					{/if}
+				</Card>
+			</div>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+{@render children?.()}

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

@@ -0,0 +1,17 @@
+import type { ModalSize } from '../../types.js';
+import { type Snippet } from 'svelte';
+declare const Modal: import("svelte").Component<{
+    open?: boolean;
+    onOpenChange?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
+    controlledOpen?: boolean;
+} & {
+    children?: Snippet | undefined;
+} & {
+    title: string;
+    size?: ModalSize;
+    class?: string;
+    open?: boolean;
+    expandable?: boolean;
+    children: Snippet;
+}, {}, "open">;
+export default Modal;

package/dist/components/Modal/ModalBody.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ChildKey } 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={ChildKey.Modal} as={ChildKey.ModalBody}>
+	{@render children?.()}
+</Child>

package/dist/components/Modal/ModalBody.svelte.d.ts

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

package/dist/components/Modal/ModalFooter.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ChildKey } 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={ChildKey.Modal} as={ChildKey.ModalFooter}>
+	{@render children?.()}
+</Child>

package/dist/components/Modal/ModalFooter.svelte.d.ts

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

package/dist/components/Modal/ModalHeader.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ChildKey } 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={ChildKey.Modal} as={ChildKey.ModalHeader}>
+	{@render children?.()}
+</Child>

package/dist/components/Modal/ModalHeader.svelte.d.ts

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

package/dist/constants.d.ts

@@ -7,5 +7,9 @@ export declare enum ChildKey {
     Card = "card",
     CardHeader = "card-header",
     CardBody = "card-body",
-    CardFooter = "card-footer"
+    CardFooter = "card-footer",
+    Modal = "modal",
+    ModalHeader = "modal-header",
+    ModalBody = "modal-body",
+    ModalFooter = "modal-footer"
 }

package/dist/constants.js

@@ -9,4 +9,8 @@ export var ChildKey;
     ChildKey["CardHeader"] = "card-header";
     ChildKey["CardBody"] = "card-body";
     ChildKey["CardFooter"] = "card-footer";
+    ChildKey["Modal"] = "modal";
+    ChildKey["ModalHeader"] = "modal-header";
+    ChildKey["ModalBody"] = "modal-body";
+    ChildKey["ModalFooter"] = "modal-footer";
 })(ChildKey || (ChildKey = {}));

package/dist/index.d.ts

@@ -19,6 +19,9 @@ 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 Modal } from './components/Modal/Modal.svelte';
+export { default as ModalBody } from './components/Modal/ModalBody.svelte';
+export { default as ModalFooter } from './components/Modal/ModalFooter.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
 export { default as Checkbox } from './components/Form/Checkbox.svelte';

package/dist/index.js

@@ -21,6 +21,9 @@ 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 Modal } from './components/Modal/Modal.svelte';
+export { default as ModalBody } from './components/Modal/ModalBody.svelte';
+export { default as ModalFooter } from './components/Modal/ModalFooter.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
 export { default as Checkbox } from './components/Form/Checkbox.svelte';

package/dist/internal/Child.svelte

@@ -1,20 +1,27 @@
 <script lang="ts">
 	import { ChildKey } from '../constants.js';
+	import type { ChildData } from '../types.js';
 	import { withPrefix } from '../utils.js';
 	import { getContext, type Snippet } from 'svelte';
 
-	type ContextType = { register: (key: ChildKey, snippet: Snippet) => void };
+	type ContextType = {
+		register: (key: ChildKey, data: () => ChildData) => void;
+	};
 	type Props = {
 		for: ChildKey;
 		as: ChildKey;
+		class?: string;
 		children: Snippet;
 	};
 
-	const { for: key, as, children }: Props = $props();
+	const { for: key, as, children, class: className }: Props = $props();
 
 	const context = getContext<ContextType>(withPrefix(key));
+
+	const data = $derived({ snippet: children, class: className });
+
 	if (context) {
-		context.register(as, children);
+		context.register(as, () => data);
 	} else {
 		console.log('Unable to find context for key:', key);
 	}

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

@@ -3,6 +3,7 @@ import { type Snippet } from 'svelte';
 declare const Child: import("svelte").Component<{
     for: ChildKey;
     as: ChildKey;
+    class?: string;
     children: Snippet;
 }, {}, "">;
 export default Child;

package/dist/types.d.ts

@@ -4,6 +4,7 @@ export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' |
 export type TextColor = Color | 'muted';
 export type HeadingColor = TextColor;
 export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
+export type ModalSize = Size | 'full';
 export type HeadingSize = Size | 'title';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
 export type Variants = 'filled' | 'outline' | 'ghost';
@@ -60,6 +61,10 @@ type StackBaseProps = {
     fullWidth?: boolean;
     fullHeight?: boolean;
 };
+export type ChildData = {
+    snippet: Snippet;
+    class?: string;
+};
 export type StackProps = StackBaseProps & {
     align?: 'start' | 'center' | 'end';
     direction?: 'row' | 'column';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.9.0",
+	"version": "0.10.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",