@immich/ui 0.28.1 → 0.30.0

package/dist/components/Input/Input.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { getFieldContext } from '../../common/context.svelte.js';
+	import Icon from '../Icon/Icon.svelte';
 	import Label from '../Label/Label.svelte';
 	import Text from '../Text/Text.svelte';
 	import type { InputProps } from '../../types.js';
 	import { cleanClass, generateId, isIconLike } from '../../utils.js';
-	import Icon from '../Icon/Icon.svelte';
 	import { tv } from 'tailwind-variants';
 
 	let {
@@ -16,6 +16,8 @@
 		value = $bindable<string>(),
 		leadingIcon,
 		trailingIcon,
+		trailingText,
+		inputSize,
 		...restProps
 	}: InputProps = $props();
 
@@ -23,7 +25,7 @@
 		$derived(getFieldContext());
 
 	const iconStyles = tv({
-		base: 'absolute inset-y-0 flex items-center justify-around',
+		base: 'flex flex-shrink-0 items-center justify-center',
 		variants: {
 			size: {
 				tiny: 'w-6',
@@ -35,18 +37,14 @@
 		},
 	});
 
-	const inputStyles = 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',
+	const containerStyles = tv({
+		base: 'flex w-full items-center 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',
-			},
 			roundedSize: {
 				tiny: 'rounded-xl',
 				small: 'rounded-xl',
@@ -54,21 +52,16 @@
 				large: 'rounded-2xl',
 				giant: 'rounded-2xl',
 			},
-			// match with Button `iconSize` variants
-			paddingLeft: {
-				tiny: 'ps-6',
-				small: 'ps-8',
-				medium: 'ps-10',
-				large: 'ps-12',
-				giant: 'ps-14',
-			},
-			paddingRight: {
-				tiny: 'pe-6',
-				small: 'pe-8',
-				medium: 'pe-10',
-				large: 'pe-12',
-				giant: 'pe-14',
+			invalid: {
+				true: 'border-danger/80 border',
+				false: '',
 			},
+		},
+	});
+
+	const inputStyles = tv({
+		base: 'flex-1 bg-transparent py-3 outline-none disabled:cursor-not-allowed',
+		variants: {
 			textSize: {
 				tiny: 'text-xs',
 				small: 'text-sm',
@@ -76,9 +69,22 @@
 				large: 'text-lg',
 				giant: 'text-xl',
 			},
-			invalid: {
-				true: 'border-danger/80 border',
-				false: '',
+			leadingPadding: {
+				base: 'pl-4',
+				icon: 'pl-0',
+			},
+			trailingPadding: {
+				base: 'pr-4',
+				icon: 'pr-0',
+			},
+		},
+	});
+
+	const trailingTextStyles = tv({
+		variants: {
+			padding: {
+				base: 'px-4',
+				icon: 'pl-4',
 			},
 		},
 	});
@@ -98,18 +104,26 @@
 		<Text color="secondary" size="small" id={descriptionId}>{description}</Text>
 	{/if}
 
-	<div class="relative w-full">
+	<div
+		class={cleanClass(
+			containerStyles({
+				shape,
+				roundedSize: shape === 'semi-round' ? size : undefined,
+				invalid,
+			}),
+			className,
+		)}
+	>
 		{#if leadingIcon}
 			<div tabindex="-1" class={iconStyles({ size })}>
-				{#if leadingIcon}
-					{#if isIconLike(leadingIcon)}
-						<Icon size="60%" icon={leadingIcon} />
-					{:else}
-						{@render leadingIcon()}
-					{/if}
+				{#if isIconLike(leadingIcon)}
+					<Icon size="60%" icon={leadingIcon} />
+				{:else}
+					{@render leadingIcon()}
 				{/if}
 			</div>
 		{/if}
+
 		<input
 			id={inputId}
 			aria-labelledby={label && labelId}
@@ -119,31 +133,31 @@
 			aria-disabled={disabled}
 			aria-describedby={descriptionId}
 			readonly={readOnly}
+			size={inputSize}
 			aria-readonly={readOnly}
-			class={cleanClass(
-				inputStyles({
-					shape,
-					textSize: size,
-					padding: shape === 'round' ? 'round' : 'base',
-					paddingLeft: leadingIcon ? size : undefined,
-					paddingRight: trailingIcon ? size : undefined,
-					roundedSize: shape === 'semi-round' ? size : undefined,
-					invalid,
-				}),
-				className,
-			)}
+			class={inputStyles({
+				textSize: size,
+				leadingPadding: leadingIcon ? 'icon' : 'base',
+				trailingPadding: trailingIcon || trailingText ? 'icon' : 'base',
+			})}
 			bind:this={ref}
 			bind:value
 			{...restProps}
 		/>
+		{#if trailingText}
+			<Text
+				{size}
+				color="muted"
+				class={trailingTextStyles({ padding: trailingIcon ? 'icon' : 'base' })}>{trailingText}</Text
+			>
+		{/if}
+
 		{#if trailingIcon}
-			<div tabindex="-1" class={cleanClass(iconStyles({ size }), 'end-0')}>
-				{#if trailingIcon}
-					{#if isIconLike(trailingIcon)}
-						<Icon size="60%" icon={trailingIcon} />
-					{:else}
-						{@render trailingIcon()}
-					{/if}
+			<div tabindex="-1" class={iconStyles({ size })}>
+				{#if isIconLike(trailingIcon)}
+					<Icon size="60%" icon={trailingIcon} />
+				{:else}
+					{@render trailingIcon()}
 				{/if}
 			</div>
 		{/if}

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';
@@ -117,11 +117,22 @@ export type InputProps = BaseInputProps & {
     type?: HTMLInputAttributes['type'];
     leadingIcon?: IconLike | Snippet;
     trailingIcon?: IconLike | Snippet;
+    trailingText?: string;
 };
 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.1",
+	"version": "0.30.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",