@immich/ui 0.57.1 → 0.57.3

package/dist/common/context.svelte.d.ts

@@ -452,5 +452,6 @@ export declare const getFieldContext: () => () => {
 export declare const setTableContext: (context: () => TableContext) => () => TableContext;
 export declare const getTableContext: () => () => {
     spacing: import("../types.js").Size;
+    size: import("../types.js").Size;
     striped: boolean;
 };

package/dist/common/context.svelte.js

@@ -14,7 +14,7 @@ export const setTableContext = (context) => setContext(tableKey, context);
 export const getTableContext = () => {
     return () => {
         const context = getContext(tableKey);
-        const { spacing = 'medium', striped = false } = context?.() || {};
-        return { spacing, striped };
+        const { spacing = 'medium', size = 'medium', striped = false } = context?.() || {};
+        return { spacing, size, striped };
     };
 };

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/components/Table/Table.svelte

@@ -11,13 +11,26 @@
   type Props = {
     class?: string;
     ref?: HTMLTableElement | null;
+    rounded?: boolean;
+    shape?: 'semi-round' | 'rectangle';
+    border?: boolean;
     children?: Snippet;
   } & TableContext &
     Omit<HTMLAttributes<HTMLTableElement>, 'color' | 'size'>;
 
-  let { ref = $bindable(null), class: className, striped = false, spacing, children, ...restProps }: Props = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    size,
+    striped = false,
+    spacing,
+    border = true,
+    shape = 'semi-round',
+    children,
+    ...restProps
+  }: Props = $props();
 
-  setTableContext(() => ({ spacing, striped }));
+  setTableContext(() => ({ spacing, striped, size }));
 
   const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Table);
   const headerChild = $derived(getChildSnippet(ChildKey.TableHeader));
@@ -28,13 +41,31 @@
     base: 'bg-dark-900 flex w-full place-items-center',
     variants: {
       spacing: styleVariants.tableSpacing,
+      shape: {
+        'semi-round': 'rounded-md',
+        rectangle: 'rounded-none',
+      },
+    },
+  });
+
+  const commonStyles = tv({
+    base: '',
+    variants: {
+      shape: {
+        'semi-round': 'rounded-md',
+        rectangle: 'rounded-none',
+      },
+      border: {
+        true: 'border',
+        false: '',
+      },
     },
   });
 </script>
 
 <table bind:this={ref} class={cleanClass('w-full text-center', className)} {...restProps}>
   {#if headerChild}
-    <thead class="text-primary mb-4 flex w-full overflow-hidden rounded-md border">
+    <thead class={cleanClass('text-primary mb-4 flex w-full overflow-hidden', commonStyles({ shape, border }))}>
       <tr class={headerRowStyles({ spacing })}>
         {@render headerChild?.snippet()}
       </tr>
@@ -42,7 +73,7 @@
   {/if}
 
   {#if bodyChild}
-    <tbody class={cleanClass('block w-full overflow-y-auto rounded-md border', bodyChild.class)}>
+    <tbody class={cleanClass('block w-full overflow-y-auto', bodyChild.class, commonStyles({ shape, border }))}>
       {@render bodyChild?.snippet()}
     </tbody>
   {/if}
@@ -51,7 +82,12 @@
 </table>
 
 {#if footerChild}
-  <div class="text-primary bg-subtle mt-4 flex h-12 w-full place-items-center rounded-md border p-4">
+  <div
+    class={cleanClass(
+      'text-primary bg-subtle mt-4 flex h-12 w-full place-items-center p-4',
+      commonStyles({ shape, border }),
+    )}
+  >
     {@render footerChild?.snippet()}
   </div>
 {/if}

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

@@ -4,6 +4,9 @@ import type { HTMLAttributes } from 'svelte/elements';
 type Props = {
     class?: string;
     ref?: HTMLTableElement | null;
+    rounded?: boolean;
+    shape?: 'semi-round' | 'rectangle';
+    border?: boolean;
     children?: Snippet;
 } & TableContext & Omit<HTMLAttributes<HTMLTableElement>, 'color' | 'size'>;
 declare const Table: import("svelte").Component<Props, {}, "ref">;

package/dist/components/Table/TableCell.svelte

@@ -1,23 +1,26 @@
 <script lang="ts">
   import { getTableContext } from '../../common/context.svelte.js';
+  import { styleVariants } from '../../styles.js';
   import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
   type Props = {
     class?: string;
     children?: Snippet;
-  };
+  } & HTMLAttributes<HTMLTableCellElement>;
 
-  const { class: className, children }: Props = $props();
+  const { class: className, children, ...restProps }: Props = $props();
 
   const context = getTableContext();
 
-  const { spacing } = $derived(context());
+  const { spacing, size } = $derived(context());
 
   const styles = tv({
     base: 'line-clamp-3 w-full overflow-hidden py-2 break-all text-ellipsis',
     variants: {
+      size: styleVariants.textSize,
       spacing: {
         tiny: 'px-0.5',
         small: 'px-1',
@@ -29,6 +32,6 @@
   });
 </script>
 
-<td class={cleanClass(styles({ spacing }), className)}>
+<td class={cleanClass(styles({ spacing, size }), className)} {...restProps}>
   {@render children?.()}
 </td>

package/dist/components/Table/TableCell.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 type Props = {
     class?: string;
     children?: Snippet;
-};
+} & HTMLAttributes<HTMLTableCellElement>;
 declare const TableCell: import("svelte").Component<Props, {}, "">;
 type TableCell = ReturnType<typeof TableCell>;
 export default TableCell;

package/dist/components/Table/TableHeading.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
   import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
 
   type Props = {
     class?: string;
     children?: Snippet;
-  };
+  } & HTMLAttributes<HTMLTableCellElement>;
 
-  const { class: className, children }: Props = $props();
+  const { class: className, children, ...restProps }: Props = $props();
 </script>
 
-<th class={cleanClass('w-full px-4 py-2', className)}>
+<th class={cleanClass('w-full px-4 py-2', className)} {...restProps}>
   {@render children?.()}
 </th>

package/dist/components/Table/TableHeading.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 type Props = {
     class?: string;
     children?: Snippet;
-};
+} & HTMLAttributes<HTMLTableCellElement>;
 declare const TableHeading: import("svelte").Component<Props, {}, "">;
 type TableHeading = ReturnType<typeof TableHeading>;
 export default TableHeading;

package/dist/components/Table/TableRow.svelte

@@ -4,6 +4,7 @@
   import type { Color } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
   type Props = {
@@ -11,9 +12,9 @@
     children?: Snippet;
     center?: boolean;
     color?: Color;
-  };
+  } & HTMLAttributes<HTMLTableRowElement>;
 
-  const { color, class: className, children }: Props = $props();
+  const { color, class: className, children, ...restProps }: Props = $props();
 
   const context = getTableContext();
 
@@ -40,6 +41,6 @@
   });
 </script>
 
-<tr class={cleanClass(styles({ color, striped, spacing }), className)}>
+<tr class={cleanClass(styles({ color, striped, spacing }), className)} {...restProps}>
   {@render children?.()}
 </tr>

package/dist/components/Table/TableRow.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Color } from '../../types.js';
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 type Props = {
     class?: string;
     children?: Snippet;
     center?: boolean;
     color?: Color;
-};
+} & HTMLAttributes<HTMLTableRowElement>;
 declare const TableRow: import("svelte").Component<Props, {}, "">;
 type TableRow = ReturnType<typeof TableRow>;
 export default TableRow;

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/dist/types.d.ts

@@ -120,6 +120,7 @@ export type FieldContext = {
 export type TableSpacing = Size;
 export type TableContext = {
     spacing?: TableSpacing;
+    size?: Size;
     striped?: boolean;
 };
 type BaseInputProps<T> = {

package/package.json

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