@immich/ui 0.5.0 → 0.7.0

package/README.md

@@ -1,58 +1,52 @@
-# create-svelte
+# @immich/ui
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+A component library for [Immich](https://immich.app), written in [Svelte](https://svelte.dev).
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+## Install
 
 ```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+npm i -D @immich/ui
 ```
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+## Usage
+
+Import components from `@immich/ui`. For example:
+
+```html
+<script lang="ts">
+	import {
+		Card,
+		CardBody,
+		CardHeader,
+		CardTitle,
+		CardDescription,
+		Heading,
+		Text,
+	} from '@immich/ui';
+</script>
+
+<Card>
+	<CardHeader>
+		<CardTitle>@immich/ui</CardTitle>
+		<CardDescription>A component library</CardDescription>
+	</CardHeader>
+	<CardBody>
+		<Lorem />
+	</CardBody>
+	<CardFooter>Privacy should not be a luxury</CardFooter>
+</Card>
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+## Documentation
 
-## Building
+To view the examples located at `src/routes/examples`, run `npm start` and navigate to http://localhost:5173/.
 
-To build your library:
+## Contributing
 
-```bash
-npm run package
-```
+PR's are welcome! Also feel free to reach out to the team on [Discord](https://discord.immich.app).
 
-To create a production version of your showcase app:
+## Technology
 
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+- [Svelte](https://svelte.dev)
+- [tailwindcss](https://tailwindcss.com)
+- [Material Design icons (@mdi/js)](https://pictogrammers.com/library/mdi/)

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/Alert/Alert.svelte

@@ -14,8 +14,8 @@
 
 	type Props = {
 		color?: Color;
-		icon?: string;
-		title: string;
+		icon?: string | false;
+		title?: string;
 		children?: Snippet;
 	};
 
@@ -27,7 +27,9 @@
 		danger: mdiCloseCircleOutline,
 	};
 
-	const icon = $derived(iconOverride || (icons[color] ?? mdiInformationOutline));
+	const icon = $derived(
+		iconOverride === false ? undefined : iconOverride || (icons[color] ?? mdiInformationOutline),
+	);
 </script>
 
 <Card {color} variant="subtle">
@@ -40,7 +42,9 @@
 			{/if}
 
 			<div class="flex flex-col gap-2">
-				<Text size="large" fontWeight={children ? 'bold' : undefined}>{title}</Text>
+				{#if title}
+					<Text size="large" fontWeight={children ? 'bold' : undefined}>{title}</Text>
+				{/if}
 				{#if children}
 					{@render children()}
 				{/if}

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

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

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

@@ -81,12 +81,12 @@
 	bind:checked
 	{...restProps}
 >
-	{#snippet children({ checked })}
+	{#snippet children({ checked, indeterminate })}
 		<div class={cleanClass('flex items-center justify-center text-current')}>
-			{#if checked === true}
-				<Icon icon={mdiCheck} size="100%" class={cleanClass(icon({ color }))} />
-			{:else if checked === 'indeterminate'}
+			{#if indeterminate}
 				<Icon icon={mdiMinus} size="100%" class={cleanClass(icon({ color }))} />
+			{:else if checked}
+				<Icon icon={mdiCheck} size="100%" class={cleanClass(icon({ color }))} />
 			{/if}
 		</div>
 	{/snippet}

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

@@ -4,5 +4,5 @@ declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.R
     color?: Color;
     shape?: Shape;
     size?: Size;
-}, {}, "ref" | "checked">;
+}, {}, "checked" | "ref">;
 export default Checkbox;

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,116 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import type { WithElementRef } from 'bits-ui';
-	import { cleanClass } from '../../utils.js';
+	import { getFieldContext } from '../../common/context.svelte.js';
+	import type { InputProps } from '../../types.js';
+	import { cleanClass, generateId } from '../../utils.js';
+	import { tv } from 'tailwind-variants';
 
 	let {
-		ref = $bindable(null),
-		value = $bindable(),
+		shape = 'semi-round',
+		size = 'medium',
 		class: className,
+		value = $bindable<string>(),
+		trailingIcon,
 		...restProps
-	}: WithElementRef<HTMLInputAttributes> = $props();
+	}: InputProps = $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: 'w-full 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}
+
+	<div class="relative">
+		<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,
+				}),
+				trailingIcon && '!pr-10',
+				className,
+			)}
+			bind:value
+			{...restProps}
+		/>
+		{#if trailingIcon}
+			<div tabindex="-1" class={cleanClass('absolute inset-y-0 end-0 flex items-center')}>
+				{@render trailingIcon()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	input::-ms-reveal {
+		display: none;
+	}
+</style>

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

@@ -1,4 +1,3 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-import type { WithElementRef } from 'bits-ui';
-declare const Input: import("svelte").Component<WithElementRef<HTMLInputAttributes>, {}, "value" | "ref">;
+import type { InputProps } from '../../types.js';
+declare const Input: import("svelte").Component<InputProps, {}, "value">;
 export default Input;

package/dist/components/Form/PasswordInput.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { IconButton, Input, type PasswordInputProps } from '../../index.js';
+	import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
+
+	let {
+		value = $bindable<string>(),
+		showLabel = 'Show password',
+		hideLabel = 'Hide password',
+		isVisible = $bindable<boolean>(false),
+		color = 'secondary',
+		...props
+	}: PasswordInputProps = $props();
+</script>
+
+<Input bind:value type={isVisible ? 'text' : 'password'} {color} {...props}>
+	{#snippet trailingIcon()}
+		{#if value?.length > 0}
+			<IconButton
+				variant="ghost"
+				shape="round"
+				color="secondary"
+				class="m-1"
+				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
+				onclick={() => (isVisible = !isVisible)}
+				title={isVisible ? hideLabel : showLabel}
+			></IconButton>
+		{/if}
+	{/snippet}
+</Input>

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

@@ -0,0 +1,3 @@
+import { type PasswordInputProps } from '../../index.js';
+declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "value" | "isVisible">;
+export default PasswordInput;

package/dist/components/LoadingSpinner/LoadingSpinner.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Color, Size } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import { tv } from 'tailwind-variants';
+
+	interface Props {
+		size?: Size;
+		color?: Color;
+		class?: string;
+	}
+
+	let { size = 'medium', color = 'primary', class: className }: Props = $props();
+
+	const styles = tv({
+		base: 'animate-spin fill-primary text-gray-400 dark:text-gray-600',
+		variants: {
+			size: {
+				tiny: 'h-3',
+				small: 'h-4',
+				medium: 'h-5',
+				large: 'h-6',
+				giant: 'h-12',
+			},
+			color: {
+				primary: 'fill-primary',
+				secondary: 'fill-dark',
+				success: 'fill-success',
+				danger: 'fill-danger',
+				warning: 'fill-warning',
+				info: 'fill-info',
+			},
+		},
+	});
+</script>
+
+<div>
+	<svg
+		role="status"
+		class={cleanClass(styles({ color, size }), className)}
+		viewBox="0 0 100 101"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		data-testid="loading-spinner"
+	>
+		<path
+			d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+			fill="currentFill"
+		/>
+	</svg>
+</div>

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

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

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/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

@@ -8,16 +8,20 @@ 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 PasswordInput } from './components/Form/PasswordInput.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 LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.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

@@ -8,16 +8,20 @@ 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 PasswordInput } from './components/Form/PasswordInput.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 LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.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/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import type { ButtonProps } from '../types.js';
+	import type { ButtonProps, Size } from '../types.js';
 	import { cleanClass } from '../utils.js';
+	import { LoadingSpinner } from '../index.js';
 	import { Button as ButtonPrimitive } from 'bits-ui';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
@@ -18,6 +19,7 @@
 		color = 'primary',
 		shape = 'semi-round',
 		size = 'medium',
+		loading = false,
 		fullWidth = false,
 		icon = false,
 		class: className = '',
@@ -25,6 +27,8 @@
 		...restProps
 	}: InternalButtonProps = $props();
 
+	const disabled = $derived((restProps as HTMLButtonAttributes).disabled || loading);
+
 	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: {
@@ -58,11 +62,11 @@
 				giant: 'h-12 w-12 text-lg',
 			},
 			roundedSize: {
-				tiny: 'rounded-md',
-				small: 'rounded-md',
-				medium: 'rounded-lg',
-				large: 'rounded-lg',
-				giant: 'rounded-lg',
+				tiny: 'rounded-lg',
+				small: 'rounded-lg',
+				medium: 'rounded-xl',
+				large: 'rounded-xl',
+				giant: 'rounded-2xl',
 			},
 			filledColor: {
 				primary: 'bg-primary text-light hover:bg-primary/80',
@@ -99,6 +103,14 @@
 		},
 	});
 
+	const spinnerSizes: Record<Size, Size> = {
+		tiny: 'tiny',
+		small: 'tiny',
+		medium: 'small',
+		large: 'medium',
+		giant: 'large',
+	};
+
 	const classList = $derived(
 		cleanClass(
 			twMerge(
@@ -129,7 +141,16 @@
 		class={classList}
 		type={type as HTMLButtonAttributes['type']}
 		{...restProps as HTMLButtonAttributes}
+		{disabled}
+		aria-disabled={disabled}
 	>
-		{@render children?.()}
+		{#if loading}
+			<div class="flex items-center justify-center gap-2">
+				<LoadingSpinner {color} size={spinnerSizes[size]} />
+				{@render children?.()}
+			</div>
+		{:else}
+			{@render children?.()}
+		{/if}
 	</ButtonPrimitive.Root>
 {/if}

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
 export type HeadingSize = Size | 'title';
@@ -37,17 +37,43 @@ export type IconProps = {
 export type IconButtonProps = ButtonBaseProps & IconProps;
 export type ButtonProps = ButtonBaseProps & {
     fullWidth?: boolean;
+    loading?: boolean;
 };
 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;
+};
+type BaseInputProps = {
+    class?: string;
+    value?: string;
+    size?: Size;
+    shape?: Shape;
+    inputSize?: HTMLInputAttributes['size'];
+} & Omit<HTMLInputAttributes, 'size' | 'type'>;
+export type InputProps = BaseInputProps & {
+    type?: HTMLInputAttributes['type'];
+    trailingIcon?: Snippet;
+};
+export type PasswordInputProps = BaseInputProps & {
+    showLabel?: string;
+    hideLabel?: string;
+    isVisible?: 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.5.0",
+	"version": "0.7.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"start": "npm run start:dev",
@@ -57,7 +57,7 @@
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.4.9",
 		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.0.0",
+		"typescript-eslint": "^8.15.0",
 		"vite": "^5.0.11",
 		"vitest": "^2.0.4"
 	},

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;
-};