@immich/ui 0.4.0 → 0.6.0

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

@@ -0,0 +1,4 @@
+import type { FieldContext } from '../types.js';
+export declare const setFieldContext: (field: FieldContext) => FieldContext;
+export declare const hasFieldContext: () => boolean;
+export declare const getFieldContext: () => FieldContext;

package/dist/common/context.svelte.js

@@ -0,0 +1,6 @@
+import { withPrefix } from '../utils.js';
+import { getContext, hasContext, setContext } from 'svelte';
+const fieldKey = Symbol(withPrefix('field'));
+export const setFieldContext = (field) => setContext(fieldKey, field);
+export const hasFieldContext = () => hasContext(fieldKey);
+export const getFieldContext = () => (getContext(fieldKey) || {});

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

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

package/dist/common/{use-context.svelte.js → use-child.svelte.js}

@@ -1,4 +1,4 @@
-import { ContextKey } from '../constants.js';
+import { ChildKey } from '../constants.js';
 import { withPrefix } from '../utils.js';
 import { setContext } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';

package/dist/components/Card/Card.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { withChildrenSnippets } from '../../common/use-context.svelte.js';
+	import { withChildrenSnippets } from '../../common/use-child.svelte.js';
 	import IconButton from '../IconButton/IconButton.svelte';
-	import { ContextKey } from '../../constants.js';
+	import { ChildKey } from '../../constants.js';
 	import type { Color, Shape } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import { mdiChevronDown } from '@mdi/js';
@@ -104,10 +104,10 @@
 		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 { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Card);
+	const headerChildren = $derived(getChildSnippet(ChildKey.CardHeader));
+	const bodyChildren = $derived(getChildSnippet(ChildKey.CardBody));
+	const footerChildren = $derived(getChildSnippet(ChildKey.CardFooter));
 
 	const headerClasses = 'flex flex-col space-y-1.5';
 	const headerContainerClasses = $derived(

package/dist/components/Card/CardBody.svelte

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

package/dist/components/Card/CardFooter.svelte

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

package/dist/components/Card/CardHeader.svelte

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

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/Form/Field.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { setFieldContext } from '../../common/context.svelte.js';
+	import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+	import { ChildKey } from '../../constants.js';
+	import type { FieldContext } from '../../types.js';
+	import { type Snippet } from 'svelte';
+
+	type Props = FieldContext & {
+		children: Snippet;
+	};
+
+	const { children, ...props }: Props = $props();
+
+	const state = $state(props);
+
+	setFieldContext(state);
+
+	const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Field);
+	const helperTextChildren = $derived(getChildSnippet(ChildKey.HelperText));
+</script>
+
+<div>
+	{@render children()}
+	{#if helperTextChildren}
+		<div class="pt-1">
+			{@render helperTextChildren?.()}
+		</div>
+	{/if}
+</div>

package/dist/components/Form/Field.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { FieldContext } from '../../types.js';
+import { type Snippet } from 'svelte';
+declare const Field: import("svelte").Component<FieldContext & {
+    children: Snippet;
+}, {}, "">;
+export default Field;

package/dist/components/Form/HelperText.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import Text from '../Text/Text.svelte';
+	import { ChildKey } from '../../constants.js';
+	import Child from '../../internal/Child.svelte';
+	import type { Color } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		color?: Color;
+		class?: string;
+		children?: Snippet;
+	};
+
+	let { class: className, children, color }: Props = $props();
+</script>
+
+<Child for={ChildKey.Field} as={ChildKey.HelperText}>
+	<div class={cleanClass(className)}>
+		<Text {color} size="small">
+			{@render children?.()}
+		</Text>
+	</div>
+</Child>

package/dist/components/Form/HelperText.svelte.d.ts

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

package/dist/components/Form/Input.svelte

@@ -1,22 +1,109 @@
 <script lang="ts">
+	import { getFieldContext } from '../../common/context.svelte.js';
+	import type { Shape, Size } from '../../types.js';
+	import { cleanClass, generateId } from '../../utils.js';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import type { WithElementRef } from 'bits-ui';
-	import { cleanClass } from '../../utils.js';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		class?: string;
+		value?: string;
+		size?: Size;
+		shape?: Shape;
+		inputSize?: HTMLInputAttributes['size'];
+	} & Omit<HTMLInputAttributes, 'size'>;
 
 	let {
-		ref = $bindable(null),
-		value = $bindable(),
+		shape = 'semi-round',
+		size = 'medium',
 		class: className,
+		value = $bindable<string>(),
 		...restProps
-	}: WithElementRef<HTMLInputAttributes> = $props();
+	}: Props = $props();
+
+	const {
+		label,
+		readOnly = false,
+		required = false,
+		invalid = false,
+		disabled = false,
+	} = $derived(getFieldContext());
+
+	const labelStyles = tv({
+		base: '',
+		variants: {
+			size: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+		},
+	});
+
+	const inputStyles = tv({
+		base: 'outline-none disabled:cursor-not-allowed bg-gray-200 dark:bg-gray-600 disabled:bg-gray-300 disabled:text-gray-200 dark:disabled:bg-gray-800 aria-readonly:text-dark/50 dark:aria-readonly:text-dark/75',
+		variants: {
+			shape: {
+				rectangle: 'rounded-none',
+				'semi-round': '',
+				round: 'rounded-full',
+			},
+			padding: {
+				base: 'px-3 py-2',
+				round: 'px-4 py-2',
+			},
+			roundedSize: {
+				tiny: 'rounded-xl',
+				small: 'rounded-xl',
+				medium: 'rounded-2xl',
+				large: 'rounded-2xl',
+				giant: 'rounded-2xl',
+			},
+			textSize: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+			invalid: {
+				true: 'border border-danger/80',
+				false: '',
+			},
+		},
+	});
+
+	const id = generateId();
+	const inputId = `input-${id}`;
+	const labelId = `label-${id}`;
 </script>
 
-<input
-	bind:this={ref}
-	class={cleanClass(
-		'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-		className,
-	)}
-	bind:value
-	{...restProps}
-/>
+<div class="flex flex-col gap-1">
+	{#if label}
+		<label id={labelId} for={inputId} class={labelStyles({ size })}>{label}</label>
+	{/if}
+	<input
+		id={label && inputId}
+		aria-labelledby={label && labelId}
+		{required}
+		aria-required={required}
+		{disabled}
+		aria-disabled={disabled}
+		readonly={readOnly}
+		aria-readonly={readOnly}
+		class={cleanClass(
+			inputStyles({
+				shape,
+				textSize: size,
+				padding: shape === 'round' ? 'round' : 'base',
+				roundedSize: shape === 'semi-round' ? size : undefined,
+				invalid,
+			}),
+			className,
+		)}
+		bind:value
+		{...restProps}
+	/>
+</div>

package/dist/components/Form/Input.svelte.d.ts

@@ -1,4 +1,10 @@
+import type { Shape, Size } from '../../types.js';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { WithElementRef } from 'bits-ui';
-declare const Input: import("svelte").Component<WithElementRef<HTMLInputAttributes>, {}, "value" | "ref">;
+declare const Input: import("svelte").Component<{
+    class?: string;
+    value?: string;
+    size?: Size;
+    shape?: Shape;
+    inputSize?: HTMLInputAttributes["size"];
+} & Omit<HTMLInputAttributes, "size">, {}, "value">;
 export default Input;

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/Stack/HStack.svelte

@@ -5,6 +5,6 @@
 	const { class: className, children, ...props }: HStackProps = $props();
 </script>
 
-<Stack direction="row" class={className} {...props}>
+<Stack direction="row" align="center" class={className} {...props}>
 	{@render children()}
 </Stack>

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

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

package/dist/components/Stack/Stack.svelte

@@ -24,14 +24,6 @@
 				center: 'items-center',
 				end: 'items-end',
 			},
-			fullWidth: {
-				true: 'w-full',
-				false: '',
-			},
-			fullHeight: {
-				true: 'h-full',
-				false: '',
-			},
 			gap: {
 				0: 'gap-0',
 				1: 'gap-1',
@@ -58,8 +50,6 @@
 			direction,
 			gap,
 			wrap,
-			fullWidth: direction === 'row',
-			fullHeight: direction === 'column',
 		}),
 		className,
 	)}

package/dist/components/Stack/VStack.svelte

@@ -5,6 +5,6 @@
 	const { class: className, children, ...props }: VStackProps = $props();
 </script>
 
-<Stack direction="column" class={className} {...props}>
+<Stack direction="column" align="center" class={className} {...props}>
 	{@render children()}
 </Stack>

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

@@ -1,8 +1,9 @@
 declare const VStack: import("svelte").Component<{
     class?: string;
     children: import("svelte").Snippet;
-    align?: "start" | "center" | "end";
     gap?: import("../../types.js").Gap;
     wrap?: boolean;
+    fullWidth?: boolean;
+    fullHeight?: 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

@@ -6,11 +6,11 @@
 
 	type Props = {
 		color?: Color;
+		class?: string;
 		size?: Size;
 		children: Snippet;
 		variant?: 'italic';
 		fontWeight?: 'light' | 'normal' | 'semi-bold' | 'bold';
-		class?: string;
 	};
 
 	const { color, size, fontWeight = 'normal', children, class: className }: Props = $props();

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

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

package/dist/constants.d.ts

@@ -1,4 +1,6 @@
-export declare enum ContextKey {
+export declare enum ChildKey {
+    Field = "field",
+    HelperText = "helped-text",
     Card = "card",
     CardHeader = "card-header",
     CardBody = "card-body",

package/dist/constants.js

@@ -1,7 +1,9 @@
-export var ContextKey;
-(function (ContextKey) {
-    ContextKey["Card"] = "card";
-    ContextKey["CardHeader"] = "card-header";
-    ContextKey["CardBody"] = "card-body";
-    ContextKey["CardFooter"] = "card-footer";
-})(ContextKey || (ContextKey = {}));
+export var ChildKey;
+(function (ChildKey) {
+    ChildKey["Field"] = "field";
+    ChildKey["HelperText"] = "helped-text";
+    ChildKey["Card"] = "card";
+    ChildKey["CardHeader"] = "card-header";
+    ChildKey["CardBody"] = "card-body";
+    ChildKey["CardFooter"] = "card-footer";
+})(ChildKey || (ChildKey = {}));

package/dist/index.d.ts

@@ -6,15 +6,20 @@ 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 Field } from './components/Form/Field.svelte';
+export { default as HelperText } from './components/Form/HelperText.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 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 SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export * from './types.js';

package/dist/index.js

@@ -6,15 +6,20 @@ 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 Field } from './components/Form/Field.svelte';
+export { default as HelperText } from './components/Form/HelperText.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 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 SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export * from './types.js';

package/dist/internal/Child.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { ContextKey } from '../constants.js';
+	import { ChildKey } from '../constants.js';
 	import { withPrefix } from '../utils.js';
 	import { getContext, type Snippet } from 'svelte';
 
-	type ContextType = { register: (key: ContextKey, snippet: Snippet) => void };
+	type ContextType = { register: (key: ChildKey, snippet: Snippet) => void };
 	type Props = {
-		for: ContextKey;
-		as: ContextKey;
+		for: ChildKey;
+		as: ChildKey;
 		children: Snippet;
 	};
 

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

@@ -1,8 +1,8 @@
-import { ContextKey } from '../constants.js';
+import { ChildKey } from '../constants.js';
 import { type Snippet } from 'svelte';
 declare const Child: import("svelte").Component<{
-    for: ContextKey;
-    as: ContextKey;
+    for: ChildKey;
+    as: ChildKey;
     children: Snippet;
 }, {}, "">;
 export default Child;

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;
@@ -39,13 +41,22 @@ export type ButtonProps = ButtonBaseProps & {
 type StackBaseProps = {
     class?: string;
     children: Snippet;
-    align?: 'start' | 'center' | 'end';
     gap?: Gap;
     wrap?: boolean;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
 };
 export type StackProps = StackBaseProps & {
+    align?: 'start' | 'center' | 'end';
     direction?: 'row' | 'column';
 };
 export type HStackProps = StackBaseProps;
 export type VStackProps = StackBaseProps;
+export type FieldContext = {
+    label?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
+};
 export {};

package/dist/utils.d.ts

@@ -1,3 +1,3 @@
-import type { ContextKey } from './constants.js';
 export declare const cleanClass: (...classNames: unknown[]) => string;
-export declare const withPrefix: (key: ContextKey) => string;
+export declare const withPrefix: (key: string) => string;
+export declare const generateId: () => string;

package/dist/utils.js

@@ -9,3 +9,5 @@ export const cleanClass = (...classNames) => {
         .join(' ');
 };
 export const withPrefix = (key) => `immich-ui-${key}`;
+let _count = 0;
+export const generateId = () => `id-${_count++}`;

package/package.json

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

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

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