@immich/ui 0.57.2 → 0.58.0

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/Avatar/Avatar.svelte

@@ -11,7 +11,7 @@
   const { color = 'primary', size = 'medium', name }: Props = $props();
 
   const styles = tv({
-    base: 'flex h-full w-full items-center justify-center font-medium text-white select-none',
+    base: 'flex items-center justify-center font-medium text-white select-none',
     variants: {
       size: {
         tiny: 'h-5 w-5 text-xs',
@@ -36,7 +36,7 @@
   });
 
   const wrapper = tv({
-    base: 'overflow-hidden rounded-full shadow-md',
+    base: 'block w-full overflow-hidden rounded-full shadow-md',
   });
 
   const getInitials = (name: string) => {

package/dist/components/Button/Button.svelte

@@ -2,7 +2,7 @@
   import Button from '../../internal/Button.svelte';
   import type { ButtonProps } from '../../types.js';
 
-  let { ref = $bindable(null), ...props }: ButtonProps = $props();
+  let { ref = $bindable(null), color = 'primary', ...props }: ButtonProps = $props();
 </script>
 
-<Button bind:ref {...props} />
+<Button bind:ref {color} {...props} />

package/dist/components/IconButton/IconButton.svelte

@@ -3,11 +3,19 @@
   import Button from '../../internal/Button.svelte';
   import type { IconButtonProps } from '../../types.js';
 
-  const { icon, flipped, flopped, title, 'aria-label': ariaLabel, ...buttonProps }: IconButtonProps = $props();
+  const {
+    icon,
+    flipped,
+    flopped,
+    title,
+    'aria-label': ariaLabel,
+    color = 'primary',
+    ...buttonProps
+  }: IconButtonProps = $props();
 
   const buttonTitle = $derived(title ?? ariaLabel);
 </script>
 
-<Button icon {...buttonProps} title={buttonTitle} aria-label={ariaLabel}>
+<Button icon {color} {...buttonProps} title={buttonTitle} aria-label={ariaLabel}>
   <Icon {icon} {flipped} {flopped} size="60%" aria-hidden />
 </Button>

package/dist/components/ListButton/ListButton.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import Icon from '../Icon/Icon.svelte';
+  import HStack from '../Stack/HStack.svelte';
+  import Button from '../../internal/Button.svelte';
+  import type { ButtonProps, IconLike } from '../../types.js';
+  import { cleanClass, isIconLike } from '../../utilities/internal.js';
+  import { mdiCheck } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
+
+  let {
+    ref = $bindable(null),
+    selected = false,
+    class: className,
+    selectedIcon = mdiCheck,
+    children,
+    ...props
+  }: ButtonProps & {
+    color?: never;
+    selected?: boolean;
+    disabled?: boolean;
+    selectedIcon?: IconLike | Snippet | false;
+  } = $props();
+
+  const styles = tv({
+    base: 'hover:bg-light-200 dark:hover:bg-light-300 text-dark',
+    variants: {
+      selected: {
+        true: 'bg-light-200 dark:bg-light-300',
+        false: '',
+      },
+    },
+  });
+</script>
+
+<Button bind:ref fullWidth class={cleanClass(styles({ selected }), className)} {...props}>
+  {#if selectedIcon}
+    <HStack fullWidth class="justify-between">
+      {@render children?.()}
+      {#if selected}
+        {#if isIconLike(selectedIcon)}
+          <Icon icon={selectedIcon} />
+        {:else}
+          {@render selectedIcon()}
+        {/if}
+      {/if}
+    </HStack>
+  {:else}
+    {@render children?.()}
+  {/if}
+</Button>

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

@@ -0,0 +1,11 @@
+import type { ButtonProps, IconLike } from '../../types.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = ButtonProps & {
+    color?: never;
+    selected?: boolean;
+    disabled?: boolean;
+    selectedIcon?: IconLike | Snippet | false;
+};
+declare const ListButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ListButton = ReturnType<typeof ListButton>;
+export default ListButton;

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

@@ -12,11 +12,12 @@
     color?: TextColor;
     fontWeight?: FontWeight;
     variant?: TextVariant;
+    inline?: boolean;
     class?: string;
     children: Snippet;
   } & HTMLAttributes<HTMLElement>;
 
-  const { color, size, fontWeight = 'normal', children, class: className, ...restProps }: Props = $props();
+  const { color, inline, size, fontWeight = 'normal', children, class: className, ...restProps }: Props = $props();
 
   const styles = tv({
     variants: {
@@ -25,6 +26,6 @@
   });
 </script>
 
-<Text tag="p" {color} {fontWeight} class={cleanClass(styles({ size }), className)} {...restProps}>
+<Text tag={inline ? 'span' : 'p'} {color} {fontWeight} class={cleanClass(styles({ size }), className)} {...restProps}>
   {@render children()}
 </Text>

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

@@ -7,6 +7,7 @@ type Props = {
     color?: TextColor;
     fontWeight?: FontWeight;
     variant?: TextVariant;
+    inline?: boolean;
     class?: string;
     children: Snippet;
 } & HTMLAttributes<HTMLElement>;

package/dist/index.d.ts

@@ -48,6 +48,7 @@ export { default as Input } from './components/Input/Input.svelte';
 export { default as Kbd } from './components/Kbd/Kbd.svelte';
 export { default as Label } from './components/Label/Label.svelte';
 export { default as Link } from './components/Link/Link.svelte';
+export { default as ListButton } from './components/ListButton/ListButton.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
 export { Markdown } from './components/Markdown/index.js';

package/dist/index.js

@@ -50,6 +50,7 @@ export { default as Input } from './components/Input/Input.svelte';
 export { default as Kbd } from './components/Kbd/Kbd.svelte';
 export { default as Label } from './components/Label/Label.svelte';
 export { default as Link } from './components/Link/Link.svelte';
+export { default as ListButton } from './components/ListButton/ListButton.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
 export { Markdown } from './components/Markdown/index.js';

package/dist/internal/Button.svelte

@@ -20,7 +20,7 @@
     type = 'button',
     href,
     variant = 'filled',
-    color = 'primary',
+    color,
     shape = 'semi-round',
     size = 'medium',
     loading = false,

package/dist/internal/Text.svelte

@@ -10,7 +10,7 @@
     /**
      * The HTML element type.
      */
-    tag?: HeadingTag;
+    tag?: HeadingTag | 'span';
     fontWeight?: FontWeight;
     variant?: TextVariant;
     color?: HeadingColor;

package/dist/internal/Text.svelte.d.ts

@@ -5,7 +5,7 @@ type Props = {
     /**
      * The HTML element type.
      */
-    tag?: HeadingTag;
+    tag?: HeadingTag | 'span';
     fontWeight?: FontWeight;
     variant?: TextVariant;
     color?: HeadingColor;

package/dist/styles.d.ts

@@ -74,11 +74,15 @@ export declare const styleVariants: {
         giant: string;
     };
     fontWeight: {
+        thin: string;
+        'extra-light': string;
         light: string;
         normal: string;
+        medium: string;
         'semi-bold': string;
         bold: string;
         'extra-bold': string;
+        black: string;
     };
     tableSpacing: {
         tiny: string;

package/dist/styles.js

@@ -70,11 +70,15 @@ export const styleVariants = {
         giant: 'text-xl',
     },
     fontWeight: {
+        thin: 'font-thin',
+        'extra-light': 'font-extralight',
         light: 'font-light',
         normal: 'font-normal',
+        medium: 'font-medium',
         'semi-bold': 'font-semibold',
         bold: 'font-bold',
         'extra-bold': 'font-extrabold',
+        black: 'font-black',
     },
     tableSpacing: {
         tiny: '',

package/dist/types.d.ts

@@ -6,7 +6,7 @@ import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLIn
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 export type TextColor = Color | 'muted';
 export type TextVariant = 'italic';
-export type FontWeight = 'light' | 'normal' | 'semi-bold' | 'bold' | 'extra-bold';
+export type FontWeight = 'thin' | 'extra-light' | 'light' | 'normal' | 'medium' | 'semi-bold' | 'bold' | 'extra-bold' | 'black';
 export type HeadingColor = TextColor;
 export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
 export type ModalSize = Size | 'full';
@@ -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.2",
+  "version": "0.58.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     "@tailwindcss/vite": "^4.1.7",
     "@types/luxon": "^3.7.1",
     "autoprefixer": "^10.4.20",
-    "globals": "^16.0.0",
+    "globals": "^17.0.0",
     "publint": "^0.3.0",
     "svelte": "^5.37.0",
     "svelte-check": "^4.0.0",