@immich/ui 0.65.1 → 0.65.3

package/dist/components/Textarea/Textarea.svelte

@@ -12,8 +12,10 @@
     containerRef = $bindable(null),
     shape = 'semi-round',
     size: initialSize,
+    variant = 'input',
     class: className,
-    grow,
+    rows = variant === 'ghost' ? 1 : undefined,
+    grow = variant === 'ghost',
     value = $bindable<string>(),
     ...restProps
   }: TextareaProps = $props();
@@ -22,18 +24,35 @@
   const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(context());
   const size = $derived(initialSize ?? labelProps.size ?? 'small');
 
-  const styles = tv({
-    base: 'focus-within:ring-primary dark:focus-within:ring-primary w-full bg-gray-100 ring-1 ring-gray-200 outline-none focus-within:ring-1 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-800 dark:ring-black dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
+  const commonStyles = tv({
+    base: 'w-full outline-none disabled:cursor-not-allowed',
+    variants: {
+      textSize: styleVariants.textSize,
+      grow: { true: 'resize-none', false: '' },
+    },
+  });
+
+  const ghostStyles = tv({
+    base: 'pb-2',
+    variants: {
+      state: {
+        active:
+          'hover:border-b-light-200 focus-within:hover:border-primary focus-within:border-primary focus-within:border-b-2 hover:border-b-2',
+        error: 'border-b-danger border-b-2',
+        disabled: '',
+      },
+    },
+  });
+
+  const inputStyles = tv({
+    base: 'focus-within:ring-primary dark:focus-within:ring-primary bg-gray-100 ring-1 ring-gray-200 focus-within:ring-1 disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-800 dark:ring-black dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
     variants: {
       shape: styleVariants.shape,
       padding: {
         base: 'px-4 py-3',
         round: 'px-5 py-3',
       },
-      grow: {
-        true: 'resize-none',
-        false: '',
-      },
+      invalid: { true: 'border-danger/80 border', false: '' },
       roundedSize: {
         tiny: 'rounded-xl',
         small: 'rounded-xl',
@@ -41,11 +60,6 @@
         large: 'rounded-2xl',
         giant: 'rounded-2xl',
       },
-      textSize: styleVariants.textSize,
-      invalid: {
-        true: 'border-danger/80 border',
-        false: '',
-      },
     },
   });
 
@@ -54,21 +68,38 @@
   const labelId = `label-${id}`;
   const descriptionId = $derived(description ? `description-${id}` : undefined);
 
+  const parseStyleNumber = (raw: string) => {
+    if (raw === 'none') {
+      return;
+    }
+
+    const value = Number.parseFloat(raw);
+    if (Number.isNaN(value)) {
+      return;
+    }
+
+    return value;
+  };
+
   const autogrow = (element: HTMLTextAreaElement | null) => {
     if (element && grow) {
       element.style.minHeight = '0';
       element.style.height = 'auto';
-      element.style.height = `${element.scrollHeight}px`;
+
+      const style = getComputedStyle(element);
+      const borderTopWidth = parseStyleNumber(style.borderTopWidth) ?? 0;
+      const borderBottomWidth = parseStyleNumber(style.borderBottomWidth) ?? 0;
+      const height = element.scrollHeight + borderTopWidth + borderBottomWidth;
+
+      element.style.height = `${height}px`;
 
       // Show scrollbar only if there is a max-height and content exceeds it
-      const maxHeight = Number.parseFloat(getComputedStyle(element).maxHeight);
+      const maxHeight = parseStyleNumber(style.maxHeight);
       const hasMaxHeight = maxHeight !== undefined;
-      if (hasMaxHeight && element.scrollHeight > maxHeight) {
+      if (hasMaxHeight && height > maxHeight) {
         element.style.overflow = 'auto';
-      } else if (hasMaxHeight && element.scrollHeight <= maxHeight) {
-        element.style.overflow = 'hidden';
       } else {
-        element.style.overflow = '';
+        element.style.overflow = 'hidden';
       }
     }
   };
@@ -99,15 +130,17 @@
       aria-describedby={descriptionId}
       readonly={readOnly}
       aria-readonly={readOnly}
+      {rows}
       class={cleanClass(
-        styles({
-          shape,
-          textSize: size,
-          padding: shape === 'round' ? 'round' : 'base',
-          grow,
-          roundedSize: shape === 'semi-round' ? size : undefined,
-          invalid,
-        }),
+        commonStyles({ textSize: size, grow }),
+        variant === 'input' &&
+          inputStyles({
+            shape,
+            invalid,
+            padding: shape === 'round' ? 'round' : 'base',
+            roundedSize: shape === 'semi-round' ? size : undefined,
+          }),
+        variant === 'ghost' && ghostStyles({ state: invalid ? 'error' : disabled || readOnly ? 'disabled' : 'active' }),
         className,
       )}
       bind:this={ref}

package/dist/internal/DatePicker.svelte

@@ -102,16 +102,20 @@
             </DatePicker.Segment>
           {/each}
         </div>
-        <DatePicker.Trigger class="mr-2 rounded-full">
-          <IconButton
-            variant="ghost"
-            shape="round"
-            color="secondary"
-            {size}
-            icon={mdiCalendar}
-            {disabled}
-            aria-label={t('open_calendar')}
-          />
+        <DatePicker.Trigger>
+          {#snippet child({ props })}
+            <IconButton
+              {...props}
+              class="me-2 shrink-0 rounded-full"
+              variant="ghost"
+              shape="round"
+              color="secondary"
+              {size}
+              icon={mdiCalendar}
+              {disabled}
+              aria-label={t('open_calendar')}
+            />
+          {/snippet}
         </DatePicker.Trigger>
       {/snippet}
     </DatePicker.Input>

package/dist/types.d.ts

@@ -159,6 +159,7 @@ export type PasswordInputProps = BaseInputProps<string> & {
 export type TextareaProps = {
     ref?: HTMLTextAreaElement | null;
     containerRef?: HTMLElement | null;
+    variant?: 'input' | 'ghost';
     class?: string;
     value?: string;
     size?: Size;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.65.1",
+  "version": "0.65.3",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",