@immich/ui 0.56.0 → 0.57.0

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

@@ -1,5 +1,5 @@
-import type { FieldContext } from '../types.js';
-export declare const setFieldContext: (field: FieldContext) => FieldContext;
+import type { FieldContext, TableContext } from '../types.js';
+export declare const setFieldContext: (context: FieldContext) => FieldContext;
 export declare const hasFieldContext: () => boolean;
 export declare const getFieldContext: () => {
     label: string | undefined;
@@ -9,4 +9,10 @@ export declare const getFieldContext: () => {
     readOnly: boolean;
     required: boolean | "indicator";
     disabled: boolean;
+    size: import("../types.js").Size;
+};
+export declare const setTableContext: (context: () => TableContext) => () => TableContext;
+export declare const getTableContext: () => () => {
+    spacing: import("../types.js").Size;
+    striped: boolean;
 };

package/dist/common/context.svelte.js

@@ -1,9 +1,18 @@
 import { withPrefix } from '../utilities/internal.js';
 import { getContext, hasContext, setContext } from 'svelte';
 const fieldKey = Symbol(withPrefix('field'));
-export const setFieldContext = (field) => setContext(fieldKey, field);
+export const setFieldContext = (context) => setContext(fieldKey, context);
 export const hasFieldContext = () => hasContext(fieldKey);
 export const getFieldContext = () => {
-    const { label, color = 'secondary', invalid = false, readOnly = false, required = false, disabled = false, description, } = getContext(fieldKey) || {};
-    return { label, description, color, invalid, readOnly, required, disabled };
+    const { label, color = 'secondary', size = 'small', invalid = false, readOnly = false, required = false, disabled = false, description, } = getContext(fieldKey) || {};
+    return { label, description, color, invalid, readOnly, required, disabled, size };
+};
+const tableKey = Symbol(withPrefix('table'));
+export const setTableContext = (context) => setContext(tableKey, context);
+export const getTableContext = () => {
+    return () => {
+        const context = getContext(tableKey);
+        const { spacing = 'medium', striped = false } = context?.() || {};
+        return { spacing, striped };
+    };
 };

package/dist/common/use-child.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ChildKey } from '../constants.js';
 import type { ChildData } from '../types.js';
 export declare const withChildrenSnippets: (key: ChildKey) => {
-    getChildren: (key: ChildKey) => ChildData | undefined;
+    getChildren: <T>(key: ChildKey) => ChildData<T> | undefined;
 };

package/dist/components/FormModal/FormModal.svelte

@@ -68,7 +68,7 @@
   </ModalBody>
   <ModalFooter>
     <HStack fullWidth>
-      <Button shape="round" color={cancelColor} fullWidth onclick={onClose}>
+      <Button shape="round" color={cancelColor} fullWidth onclick={() => onClose()}>
         {cancelText}
       </Button>
       <Button shape="round" type="submit" tabindex={1} color={submitColor} fullWidth {disabled} form={formId}>

package/dist/components/Table/Table.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { setTableContext } from '../../common/context.svelte.js';
+  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import { ChildKey } from '../../constants.js';
+  import { styleVariants } from '../../styles.js';
+  import type { TableContext } 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 = {
+    class?: string;
+    ref?: HTMLTableElement | null;
+    children?: Snippet;
+  } & TableContext &
+    Omit<HTMLAttributes<HTMLTableElement>, 'color' | 'size'>;
+
+  let { ref = $bindable(null), class: className, striped = false, spacing, children, ...restProps }: Props = $props();
+
+  setTableContext(() => ({ spacing, striped }));
+
+  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Table);
+  const headerChild = $derived(getChildSnippet(ChildKey.TableHeader));
+  const bodyChild = $derived(getChildSnippet(ChildKey.TableBody));
+  const footerChild = $derived(getChildSnippet(ChildKey.TableFooter));
+
+  const headerRowStyles = tv({
+    base: 'bg-dark-900 flex w-full place-items-center',
+    variants: {
+      spacing: styleVariants.tableSpacing,
+    },
+  });
+</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">
+      <tr class={headerRowStyles({ spacing })}>
+        {@render headerChild?.snippet()}
+      </tr>
+    </thead>
+  {/if}
+
+  {#if bodyChild}
+    <tbody class={cleanClass('block w-full overflow-y-auto rounded-md border', bodyChild.class)}>
+      {@render bodyChild?.snippet()}
+    </tbody>
+  {/if}
+
+  {@render children?.()}
+</table>
+
+{#if footerChild}
+  <div class="text-primary bg-subtle mt-4 flex h-12 w-full place-items-center rounded-md border p-4">
+    {@render footerChild?.snippet()}
+  </div>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { TableContext } from '../../types.js';
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    ref?: HTMLTableElement | null;
+    children?: Snippet;
+} & TableContext & Omit<HTMLAttributes<HTMLTableElement>, 'color' | 'size'>;
+declare const Table: import("svelte").Component<Props, {}, "ref">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Table/TableBody.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { class: className, children }: Props = $props();
+</script>
+
+<Child for={ChildKey.Table} as={ChildKey.TableBody} class={className}>
+  {@render children?.()}
+</Child>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const TableBody: import("svelte").Component<Props, {}, "">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/components/Table/TableCell.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getTableContext } from '../../common/context.svelte.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import type { Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  };
+
+  const { class: className, children }: Props = $props();
+
+  const context = getTableContext();
+
+  const { spacing } = $derived(context());
+
+  const styles = tv({
+    base: 'line-clamp-3 w-full overflow-hidden py-2 break-all text-ellipsis',
+    variants: {
+      spacing: {
+        tiny: 'px-0.5',
+        small: 'px-1',
+        medium: 'px-2',
+        large: 'px-2',
+        giant: 'px-2',
+      },
+    },
+  });
+</script>
+
+<td class={cleanClass(styles({ spacing }), className)}>
+  {@render children?.()}
+</td>

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

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

package/dist/components/Table/TableFooter.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { class: className, children }: Props = $props();
+</script>
+
+<Child for={ChildKey.Table} as={ChildKey.TableFooter} class={className}>
+  {@render children?.()}
+</Child>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const TableFooter: import("svelte").Component<Props, {}, "">;
+type TableFooter = ReturnType<typeof TableFooter>;
+export default TableFooter;

package/dist/components/Table/TableHeader.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { class: className, children }: Props = $props();
+</script>
+
+<Child for={ChildKey.Table} as={ChildKey.TableHeader} class={className}>
+  {@render children?.()}
+</Child>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const TableHeader: import("svelte").Component<Props, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/Table/TableHeading.svelte

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

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

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

package/dist/components/Table/TableRow.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { getTableContext } from '../../common/context.svelte.js';
+  import { styleVariants } from '../../styles.js';
+  import type { Color } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import type { Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+    center?: boolean;
+    color?: Color;
+  };
+
+  const { color, class: className, children }: Props = $props();
+
+  const context = getTableContext();
+
+  const { spacing, striped } = $derived(context());
+
+  const styles = tv({
+    base: 'flex w-full place-items-center',
+    variants: {
+      striped: {
+        true: 'odd:bg-dark-900 even:bg-dark-950',
+        false: '',
+      },
+      color: {
+        primary: 'bg-primary-100',
+        secondary: 'bg-light-200 dark:bg-light-300',
+        muted: 'bg-subtle text-subtle dark:bg-subtle',
+        info: 'bg-info-100',
+        warning: 'bg-warning-100',
+        danger: 'bg-danger-100',
+        success: 'bg-success-100',
+      },
+      spacing: styleVariants.tableSpacing,
+    },
+  });
+</script>
+
+<tr class={cleanClass(styles({ color, striped, spacing }), className)}>
+  {@render children?.()}
+</tr>

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

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

package/dist/constants.d.ts

@@ -11,7 +11,11 @@ export declare enum ChildKey {
     Modal = "modal",
     ModalHeader = "modal-header",
     ModalBody = "modal-body",
-    ModalFooter = "modal-footer"
+    ModalFooter = "modal-footer",
+    Table = "table",
+    TableHeader = "table-header",
+    TableBody = "table-body",
+    TableFooter = "table-footer"
 }
 export declare const zIndex: {
     CarouselImage: string;

package/dist/constants.js

@@ -13,6 +13,10 @@ export var ChildKey;
     ChildKey["ModalHeader"] = "modal-header";
     ChildKey["ModalBody"] = "modal-body";
     ChildKey["ModalFooter"] = "modal-footer";
+    ChildKey["Table"] = "table";
+    ChildKey["TableHeader"] = "table-header";
+    ChildKey["TableBody"] = "table-body";
+    ChildKey["TableFooter"] = "table-footer";
 })(ChildKey || (ChildKey = {}));
 export const zIndex = {
     CarouselImage: 'z-1',

package/dist/index.d.ts

@@ -69,6 +69,13 @@ export { default as Stack } from './components/Stack/Stack.svelte';
 export { default as VStack } from './components/Stack/VStack.svelte';
 export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
+export { default as Table } from './components/Table/Table.svelte';
+export { default as TableBody } from './components/Table/TableBody.svelte';
+export { default as TableCell } from './components/Table/TableCell.svelte';
+export { default as TableFooter } from './components/Table/TableFooter.svelte';
+export { default as TableHeader } from './components/Table/TableHeader.svelte';
+export { default as TableHeading } from './components/Table/TableHeading.svelte';
+export { default as TableRow } from './components/Table/TableRow.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export { default as Textarea } from './components/Textarea/Textarea.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';

package/dist/index.js

@@ -71,6 +71,13 @@ export { default as Stack } from './components/Stack/Stack.svelte';
 export { default as VStack } from './components/Stack/VStack.svelte';
 export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
+export { default as Table } from './components/Table/Table.svelte';
+export { default as TableBody } from './components/Table/TableBody.svelte';
+export { default as TableCell } from './components/Table/TableCell.svelte';
+export { default as TableFooter } from './components/Table/TableFooter.svelte';
+export { default as TableHeader } from './components/Table/TableHeader.svelte';
+export { default as TableHeading } from './components/Table/TableHeading.svelte';
+export { default as TableRow } from './components/Table/TableRow.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export { default as Textarea } from './components/Textarea/Textarea.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';

package/dist/internal/Child.svelte

@@ -12,13 +12,14 @@
     as: ChildKey;
     class?: string;
     children: Snippet;
+    props?: unknown;
   };
 
-  const { for: key, as, children, class: className }: Props = $props();
+  const { for: key, as, children, class: className, props = {} }: Props = $props();
 
   const context = getContext<ContextType>(withPrefix(key));
 
-  const data = $derived({ snippet: children, class: className });
+  const data = $derived({ snippet: children, class: className, props });
 
   if (context) {
     context.register(as, () => data);

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

@@ -5,6 +5,7 @@ type Props = {
     as: ChildKey;
     class?: string;
     children: Snippet;
+    props?: unknown;
 };
 declare const Child: import("svelte").Component<Props, {}, "">;
 type Child = ReturnType<typeof Child>;

package/dist/styles.d.ts

@@ -80,4 +80,11 @@ export declare const styleVariants: {
         bold: string;
         'extra-bold': string;
     };
+    tableSpacing: {
+        tiny: string;
+        small: string;
+        medium: string;
+        large: string;
+        giant: string;
+    };
 };

package/dist/styles.js

@@ -12,8 +12,8 @@ export const styleVariants = {
         ...color,
         muted: 'text-gray-600 dark:text-gray-400',
     },
-    inputCommon: 'disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 bg-transparent transition outline-none disabled:cursor-not-allowed ',
-    inputContainerCommon: 'bg-gray-100 ring-1 ring-gray-200 focus-within:ring-primary dark:focus-within:ring-primary transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-black',
+    inputCommon: 'disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 bg-transparent transition outline-none disabled:cursor-not-allowed',
+    inputContainerCommon: 'bg-gray-100 ring-1 ring-gray-200 focus-within:ring-primary dark:focus-within:ring-primary transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-neutral-900',
     shape: {
         rectangle: 'rounded-none',
         'semi-round': '',
@@ -76,4 +76,11 @@ export const styleVariants = {
         bold: 'font-bold',
         'extra-bold': 'font-extrabold',
     },
+    tableSpacing: {
+        tiny: '',
+        small: 'py-1',
+        medium: 'py-2',
+        large: 'py-3',
+        giant: 'py-4',
+    },
 };

package/dist/types.d.ts

@@ -90,9 +90,10 @@ type StackBaseProps = {
     fullWidth?: boolean;
     fullHeight?: boolean;
 };
-export type ChildData = {
+export type ChildData<T = unknown> = {
     snippet: Snippet;
     class?: string;
+    props?: T;
 };
 export type StackProps = StackBaseProps & {
     align?: 'start' | 'center' | 'end';
@@ -116,6 +117,11 @@ export type FieldContext = {
     required?: boolean | 'indicator';
     readOnly?: boolean;
 } & LabelProps;
+export type TableSpacing = Size;
+export type TableContext = {
+    spacing?: TableSpacing;
+    striped?: boolean;
+};
 type BaseInputProps<T> = {
     ref?: HTMLInputElement | null;
     class?: string;

package/package.json

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