@immich/ui 0.29.0 → 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,7 @@
 		value = $bindable<string>(),
 		leadingIcon,
 		trailingIcon,
+		trailingText,
 		inputSize,
 		...restProps
 	}: InputProps = $props();
@@ -24,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',
@@ -36,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',
@@ -55,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',
@@ -77,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',
 			},
 		},
 	});
@@ -99,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}
@@ -122,30 +135,29 @@
 			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/types.d.ts

@@ -117,6 +117,7 @@ export type InputProps = BaseInputProps & {
     type?: HTMLInputAttributes['type'];
     leadingIcon?: IconLike | Snippet;
     trailingIcon?: IconLike | Snippet;
+    trailingText?: string;
 };
 export type PasswordInputProps = BaseInputProps & {
     ref?: HTMLInputElement | null;

package/package.json

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