@immich/ui 0.57.1 → 0.57.2

package/dist/components/Heading/Heading.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import Text from '../../internal/Text.svelte';
   import type { FontWeight, HeadingColor, HeadingSize, HeadingTag, TextVariant } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
-  import Text from '../../internal/Text.svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
@@ -26,12 +26,12 @@
     base: 'leading-none tracking-tight',
     variants: {
       size: {
-        tiny: 'text-base',
-        small: 'text-lg',
-        medium: 'text-xl',
-        large: 'text-3xl',
-        giant: 'text-5xl',
-        title: 'text-7xl',
+        tiny: 'text-sm md:text-base',
+        small: 'text-lg md:text-xl',
+        medium: 'text-xl md:text-2xl',
+        large: 'text-3xl md:text-4xl',
+        giant: 'text-4xl md:text-5xl',
+        title: 'text-5xl md:text-6xl',
       },
     },
   });

package/dist/components/Input/Input.svelte

@@ -49,11 +49,15 @@
         true: 'focus-within:ring-danger dark:focus-within:ring-danger dark:ring-danger-300 ring-danger-300 ring-1',
         false: '',
       },
+      disabled: {
+        true: 'bg-light-300 dark:bg-gray-900',
+        false: '',
+      },
     },
   });
 
   const inputStyles = tv({
-    base: cleanClass(styleVariants.inputCommon, 'flex-1 py-2.5'),
+    base: cleanClass(styleVariants.inputCommon, 'w-full flex-1 py-2.5'),
     variants: {
       textSize: styleVariants.textSize,
       leadingPadding: {
@@ -89,7 +93,7 @@
   const descriptionId = $derived(description ? `description-${id}` : undefined);
 </script>
 
-<div class="flex w-full flex-col gap-1" bind:this={containerRef}>
+<div class="flex w-full flex-col gap-1">
   {#if label}
     <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} {size} />
   {/if}
@@ -99,8 +103,10 @@
   {/if}
 
   <div
+    bind:this={containerRef}
     class={cleanClass(
       containerStyles({
+        disabled,
         shape,
         roundedSize: shape === 'semi-round' ? size : undefined,
         invalid,

package/dist/internal/Select.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import { getFieldContext } from '../common/context.svelte.js';
-  import Field from '../components/Field/Field.svelte';
   import Icon from '../components/Icon/Icon.svelte';
   import IconButton from '../components/IconButton/IconButton.svelte';
   import Input from '../components/Input/Input.svelte';
-  import Label from '../components/Label/Label.svelte';
   import { zIndex } from '../constants.js';
   import type { SelectCommonProps, SelectItem } from '../types.js';
-  import { cleanClass, generateId } from '../utilities/internal.js';
-  import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiUnfoldMoreHorizontal } from '@mdi/js';
+  import { cleanClass } from '../utilities/internal.js';
+  import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiChevronDown } from '@mdi/js';
   import { Select } from 'bits-ui';
+  import { tv } from 'tailwind-variants';
 
   type T = SelectItem;
 
@@ -46,16 +45,22 @@
   const options = $derived(asOptions(data));
 
   const context = getFieldContext();
-  const { readOnly, required, invalid, disabled, label, ...labelProps } = $derived(context());
+  const { invalid, disabled, ...labelProps } = $derived(context());
   const size = $derived(initialSize ?? labelProps.size ?? 'small');
 
-  const id = generateId();
-  const inputId = `input-${id}`;
-  const labelId = `label-${id}`;
-
   const selectedLabel = $derived(asLabel(values));
 
-  let inputRef = $state<HTMLElement | null>(null);
+  const triggerStyles = tv({
+    base: 'w-full gap-1 rounded-lg py-0 text-start focus-visible:outline-none',
+    variants: {
+      invalid: {
+        true: 'border-danger border',
+        false: '',
+      },
+    },
+  });
+
+  let inputRef = $state<HTMLInputElement | null>(null);
   let contentRef = $state<HTMLElement | null>(null);
   let ref = $state<HTMLElement | null>(null);
 
@@ -79,48 +84,37 @@
 </script>
 
 <div class={cleanClass('flex flex-col gap-1', className)} bind:this={ref}>
-  {#if label}
-    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} {size} />
-  {/if}
-
   <Select.Root type={multiple ? 'multiple' : 'single'} bind:value={internalValue as never} {onValueChange}>
-    <Select.Trigger
-      {disabled}
-      class="w-full items-center gap-1 rounded-lg py-0 focus-visible:outline-none"
-      aria-label={placeholder}
-    >
-      <Field {readOnly} {required} {disabled} {invalid}>
-        <Input
-          bind:containerRef={inputRef}
-          id={inputId}
-          {size}
-          {shape}
-          {placeholder}
-          value={selectedLabel}
-          readonly
-          aria-labelledby={labelId}
-          aria-readonly
-        >
-          {#snippet trailingIcon()}
-            <IconButton
-              variant="ghost"
-              shape="round"
-              color="secondary"
-              size="tiny"
-              class="m-1"
-              icon={mdiUnfoldMoreHorizontal}
-              {disabled}
-              aria-label="Expand"
-            />
-          {/snippet}
-        </Input>
-      </Field>
+    <Select.Trigger {disabled} class={cleanClass(triggerStyles({ invalid: false }))} aria-label={placeholder}>
+      <Input
+        bind:containerRef={inputRef}
+        {size}
+        {shape}
+        {placeholder}
+        value={selectedLabel}
+        readonly
+        class={cleanClass('text-start', invalid && 'border-danger')}
+      >
+        {#snippet trailingIcon()}
+          <IconButton
+            variant="ghost"
+            shape="round"
+            color="secondary"
+            size="tiny"
+            class="m-1"
+            icon={mdiChevronDown}
+            {disabled}
+            aria-label="Expand"
+          />
+        {/snippet}
+      </Input>
     </Select.Trigger>
     <Select.Portal>
       <Select.Content
         bind:ref={contentRef}
-        class="bg-light text-dark max-h-96 rounded-xl border py-3 outline-none select-none {zIndex.SelectDropdown}"
-        sideOffset={10}
+        class="text-dark dark:bg-primary-100 bg-light-100 max-h-96 rounded-xl border py-3 outline-none select-none {zIndex.SelectDropdown}"
+        customAnchor={inputRef}
+        sideOffset={4}
       >
         <Select.ScrollUpButton class="flex w-full items-center justify-center">
           <Icon icon={mdiArrowUp} />
@@ -129,7 +123,7 @@
           {#each options as { value, label, disabled }, i (i + value)}
             <Select.Item
               class={cleanClass(
-                'hover:bg-subtle data-selected:bg-primary/10 flex h-10 w-full items-center px-5 py-3 text-sm duration-75 outline-none select-none data-disabled:opacity-50',
+                'hover:bg-light-200 hover:dark:bg-primary-200 data-selected:bg-light-200 dark:data-selected:bg-primary-200 flex h-10 w-full items-center px-5 py-3 text-sm duration-75 outline-none select-none data-disabled:opacity-50',
                 disabled ? 'cursor-not-allowed' : 'cursor-pointer',
               )}
               {value}

package/package.json

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