@immich/ui 0.57.2 → 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/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/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.2",
+  "version": "0.57.3",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",