@immich/ui 0.28.0 → 0.29.0

package/dist/components/Input/Input.svelte

@@ -16,6 +16,7 @@
 		value = $bindable<string>(),
 		leadingIcon,
 		trailingIcon,
+		inputSize,
 		...restProps
 	}: InputProps = $props();
 
@@ -119,6 +120,7 @@
 			aria-disabled={disabled}
 			aria-describedby={descriptionId}
 			readonly={readOnly}
+			size={inputSize}
 			aria-readonly={readOnly}
 			class={cleanClass(
 				inputStyles({

package/dist/components/PasswordInput/PasswordInput.svelte

@@ -13,6 +13,10 @@
 		size,
 		...props
 	}: PasswordInputProps = $props();
+
+	let labelValue = $derived(
+		isVisible ? t('hide_password', translations) : t('show_password', translations),
+	);
 </script>
 
 <Input bind:value {size} type={isVisible ? 'text' : 'password'} {color} {...props}>
@@ -26,8 +30,8 @@
 				class="me-1"
 				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
 				onclick={() => (isVisible = !isVisible)}
-				title={isVisible ? t('hide_password', translations) : t('show_password', translations)}
-				aria-label={t('show_password', translations)}
+				title={labelValue}
+				aria-label={labelValue}
 			/>
 		{/if}
 	{/snippet}

package/dist/components/Textarea/Textarea.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { getFieldContext } from '../../common/context.svelte.js';
+	import Label from '../Label/Label.svelte';
+	import Text from '../Text/Text.svelte';
+	import type { TextareaProps } from '../../types.js';
+	import { cleanClass, generateId } from '../../utils.js';
+	import type { FormEventHandler } from 'svelte/elements';
+	import { tv } from 'tailwind-variants';
+
+	let {
+		ref = $bindable(null),
+		containerRef = $bindable(null),
+		shape = 'semi-round',
+		size = 'medium',
+		class: className,
+		grow,
+		value = $bindable<string>(),
+		...restProps
+	}: TextareaProps = $props();
+
+	const { label, description, readOnly, required, invalid, disabled, ...labelProps } =
+		$derived(getFieldContext());
+
+	const styles = tv({
+		base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
+		variants: {
+			shape: {
+				rectangle: 'rounded-none',
+				'semi-round': '',
+				round: 'rounded-full',
+			},
+			padding: {
+				base: 'px-4 py-3',
+				round: 'px-5 py-3',
+			},
+			grow: {
+				true: 'resize-none',
+				false: '',
+			},
+			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-base',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+			invalid: {
+				true: 'border-danger/80 border',
+				false: '',
+			},
+		},
+	});
+
+	const id = generateId();
+	const inputId = `input-${id}`;
+	const labelId = `label-${id}`;
+	const descriptionId = $derived(description ? `description-${id}` : undefined);
+
+	const onInput: FormEventHandler<HTMLTextAreaElement> = (event) => {
+		const element = event.target as HTMLTextAreaElement;
+		if (element && grow) {
+			element.style.height = 'auto';
+			element.style.height = `${element.scrollHeight}px`;
+		}
+
+		restProps?.oninput?.(event);
+	};
+</script>
+
+<div class="flex w-full flex-col gap-1" bind:this={containerRef}>
+	{#if label}
+		<Label id={labelId} for={inputId} {label} {...labelProps} />
+	{/if}
+
+	{#if description}
+		<Text color="secondary" size="small" id={descriptionId}>{description}</Text>
+	{/if}
+
+	<div class="relative w-full">
+		<textarea
+			oninput={onInput}
+			id={inputId}
+			aria-labelledby={label && labelId}
+			{required}
+			aria-required={required}
+			{disabled}
+			aria-disabled={disabled}
+			aria-describedby={descriptionId}
+			readonly={readOnly}
+			aria-readonly={readOnly}
+			class={cleanClass(
+				styles({
+					shape,
+					textSize: size,
+					padding: shape === 'round' ? 'round' : 'base',
+					grow,
+					roundedSize: shape === 'semi-round' ? size : undefined,
+					invalid,
+				}),
+				className,
+			)}
+			bind:this={ref}
+			bind:value
+			{...restProps}
+		></textarea>
+	</div>
+</div>
+
+<style>
+	textarea::-ms-reveal {
+		display: none;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { TextareaProps } from '../../types.js';
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "value" | "ref" | "containerRef">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/index.d.ts

@@ -56,6 +56,7 @@ export { default as VStack } from './components/Stack/VStack.svelte';
 export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
+export { default as Textarea } from './components/Textarea/Textarea.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
 export * from './services/command-palette-manager.svelte.js';
 export * from './services/modal-manager.svelte.js';

package/dist/index.js

@@ -58,6 +58,7 @@ export { default as VStack } from './components/Stack/VStack.svelte';
 export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
+export { default as Textarea } from './components/Textarea/Textarea.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
 // helpers
 export * from './services/command-palette-manager.svelte.js';

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import type { Translations } from './services/translation.svelte.js';
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLInputAttributes, HTMLLabelAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLTextareaAttributes } from 'svelte/elements';
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 export type TextColor = Color | 'muted';
 export type TextVariant = 'italic';
@@ -119,9 +119,19 @@ export type InputProps = BaseInputProps & {
     trailingIcon?: IconLike | Snippet;
 };
 export type PasswordInputProps = BaseInputProps & {
+    ref?: HTMLInputElement | null;
     translations?: TranslationProps<'show_password' | 'hide_password'>;
     isVisible?: boolean;
 };
+export type TextareaProps = {
+    ref?: HTMLTextAreaElement | null;
+    containerRef?: HTMLElement | null;
+    class?: string;
+    value?: string;
+    size?: Size;
+    shape?: Shape;
+    grow?: boolean;
+} & HTMLTextareaAttributes;
 export type SelectItem = {
     label?: string;
     value: string;

package/package.json

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