@streamscloud/kit 0.2.10 → 0.2.12

package/dist/ui/table/table-cells/table-badge-cell.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { ITableBadgeColumn } from '../types';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        item: T;
+        column: ITableBadgeColumn<T>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableBadgeCell: $$IsomorphicComponent;
+type TableBadgeCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableBadgeCell<T>>;
+export default TableBadgeCell;

package/dist/ui/table/table-cells/table-button-cell.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
+let { item, column } = $props();
+const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : String(item[column.id]));
+const variant = $derived(column.styleFactory ? column.styleFactory(item) : null);
+const size = $derived(column.sizeFactory ? column.sizeFactory(item) : null);
+const handleClick = (e) => {
+    e.stopPropagation();
+    column.onClick?.(item);
+};
+</script>
+
+{#if getValueForColumn(column, item) !== null}
+  <div class="table-button-cell">
+    <Button variant={variant} size={size} on={{ click: handleClick }}>{getValueForColumn(column, item)}</Button>
+  </div>
+{/if}
+
+<style>.table-button-cell {
+  width: 100%;
+}</style>

package/dist/ui/table/table-cells/table-button-cell.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { ITableButtonColumn } from '../types';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        item: T;
+        column: ITableButtonColumn<T>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableButtonCell: $$IsomorphicComponent;
+type TableButtonCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableButtonCell<T>>;
+export default TableButtonCell;

package/dist/ui/table/table-cells/table-by-cell.svelte

@@ -0,0 +1,105 @@
+<script lang="ts" generics="T extends {id: string}">import { DateHelper } from '../../../core/utils';
+import { ImageRound } from '../../image';
+import { Tooltip } from '../../tooltip';
+let { item, column } = $props();
+const fmt = (d, options) => new Intl.DateTimeFormat(undefined, options).format(d);
+const timeFormat = { hour: '2-digit', minute: '2-digit', hour12: false };
+const dateFormat = { day: '2-digit' };
+const monthFormat = { month: 'short' };
+const yearFormat = { year: '2-digit' };
+const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : item[column.id])?.toString();
+const getDateValueForColumn = (column, item) => {
+    const value = getValueForColumn(column, item);
+    return value ? DateHelper.toDate(value) : null;
+};
+const dateTime = $derived(getDateValueForColumn(column, item));
+const by = $derived(column.byValueFactory ? column.byValueFactory(item) : null);
+const getHref = (by) => {
+    return column.hrefFactory ? column.hrefFactory(by) : null;
+};
+const navigateToUser = (event, by) => {
+    if (column.onNavigate) {
+        event.stopPropagation();
+        event.preventDefault();
+        column.onNavigate(by);
+    }
+};
+</script>
+
+<span class="table-by-cell">
+  {#if dateTime}
+    {#if by}
+      <span class="table-by-cell__by">
+        <Tooltip position="bottom" offset={5}>
+          {#snippet trigger()}
+            {@const href = getHref(by)}
+            {#if href}
+              <a href={href} onclick={(e) => navigateToUser(e, by)} class="table-by-cell__by-image">
+                <ImageRound src={by.image} />
+              </a>
+            {:else}
+              <span class="table-by-cell__by-image">
+                <ImageRound src={by.image} />
+              </span>
+            {/if}
+          {/snippet}
+          <div class="table-by-cell__by-name">
+            {by.name}
+          </div>
+        </Tooltip>
+      </span>
+    {/if}
+    <span class="table-by-cell__date">
+      {fmt(dateTime, dateFormat)}.
+      <span class="table-by-cell__month">{fmt(dateTime, monthFormat)}</span>
+      {#if dateTime.getFullYear() !== new Date().getFullYear()}
+        .{fmt(dateTime, yearFormat)}
+      {/if}
+      <span>&nbsp;&middot;&nbsp;</span>
+      {fmt(dateTime, timeFormat)}
+    </span>
+  {:else}
+    <div class="table-by-cell__no-date">-</div>
+  {/if}
+</span>
+
+<style>.table-by-cell {
+  --_table-by-cell--font-size: var(--sc-kit--table--cell--font-size, 0.875em);
+  --_table-by-cell--no-date--color: var(--sc-color--text-paragraph, #9ca3af);
+  height: 3.125em;
+  min-height: 3.125em;
+  max-height: 3.125em;
+  display: inline-flex;
+  flex-wrap: nowrap;
+}
+.table-by-cell__date {
+  font-size: var(--_table-by-cell--font-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+.table-by-cell__no-date {
+  font-size: var(--_table-by-cell--font-size);
+  color: var(--_table-by-cell--no-date--color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.table-by-cell__month {
+  text-transform: lowercase;
+}
+.table-by-cell__by {
+  margin-right: 0.625em;
+}
+.table-by-cell__by-image {
+  display: flex;
+  align-items: center;
+  width: var(--_table-by-cell--image--size, 1.5em);
+}
+.table-by-cell__by-name {
+  font-size: var(--_table-by-cell--font-size);
+  padding: 1em;
+}</style>

package/dist/ui/table/table-cells/table-by-cell.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { ITableByColumn } from '../types';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        item: T;
+        column: ITableByColumn<T>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableByCell: $$IsomorphicComponent;
+type TableByCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableByCell<T>>;
+export default TableByCell;

package/dist/ui/table/table-cells/table-checkbox-cell.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" generics="T extends {id: string}">import { Checkbox } from '../../checkbox';
+let { item, selection } = $props();
+const selected = $derived(!!selection.items.find((x) => x.id === item.id));
+const disabled = $derived(!selected && !!selection.limit && selection.items.length >= selection.limit);
+const toggle = () => {
+    if (selected) {
+        selection.remove(item);
+    }
+    else {
+        selection.add(item);
+    }
+};
+</script>
+
+<div class="table-checkbox-cell">
+  <Checkbox checked={selected} disabled={disabled} on={{ change: toggle }} />
+</div>
+
+<style>.table-checkbox-cell {
+  font-size: var(--_table--cell--font-size);
+}</style>

package/dist/ui/table/table-cells/table-checkbox-cell.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { Repository } from '../../../core/repository';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        item: T;
+        selection: Repository<T>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableCheckboxCell: $$IsomorphicComponent;
+type TableCheckboxCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableCheckboxCell<T>>;
+export default TableCheckboxCell;

package/dist/ui/table/table-cells/table-custom-cell.svelte

@@ -0,0 +1,5 @@
+<script lang="ts" generics="T extends {id: string}">import { DynamicComponent } from '../../dynamic-component';
+let { item, column } = $props();
+</script>
+
+<DynamicComponent model={column.componentFactory(item)} />

package/dist/ui/table/table-cells/table-custom-cell.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { ITableCustomColumn } from '../types';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        item: T;
+        column: ITableCustomColumn<T>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableCustomCell: $$IsomorphicComponent;
+type TableCustomCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableCustomCell<T>>;
+export default TableCustomCell;

package/dist/ui/table/table-cells/table-hideable-cell.svelte

@@ -0,0 +1,7 @@
+<script lang="ts" generics="T extends {id: string}">let { column, children } = $props();
+export {};
+</script>
+
+{#if !column.hidden}
+  {@render children()}
+{/if}

package/dist/ui/table/table-cells/table-hideable-cell.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { ResolvedColumn } from '../table-column-models.svelte';
+import type { Snippet } from 'svelte';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        column: ResolvedColumn<T>;
+        children: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableHideableCell: $$IsomorphicComponent;
+type TableHideableCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableHideableCell<T>>;
+export default TableHideableCell;

package/dist/ui/table/table-cells/table-icon-cell.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" generics="T extends {id: string}">import { Icon } from '../../icon';
+import { Tooltip } from '../../tooltip';
+let { item, column } = $props();
+const iconSrc = $derived(column.iconSrcFactory ? column.iconSrcFactory(item) : String(item[column.id]));
+const iconColor = $derived(column.colorFactory ? column.colorFactory(item) : null);
+const cssWidth = (column) => {
+    if (column?.fixedCssWidth) {
+        return `width: ${column.fixedCssWidth};`;
+    }
+    return 'width: auto;';
+};
+</script>
+
+<div class="table-icon-cell" style={cssWidth(column)}>
+  {#if column.tooltipTextFactory && column.tooltipTextFactory(item)}
+    <Tooltip>
+      {#snippet trigger()}
+        <Icon src={iconSrc} color={iconColor} />
+      {/snippet}
+      <div class="table-icon-cell__tooltip">
+        {column.tooltipTextFactory(item)}
+      </div>
+    </Tooltip>
+  {:else}
+    <Icon src={iconSrc} color={iconColor} />
+  {/if}
+</div>
+
+<!--
+@component
+Icon cell for table rows. Displays an icon with optional tooltip.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--table-icon-cell--tooltip--color` | Tooltip text color | `white` |
+| `--sc-kit--table-icon-cell--tooltip--background` | Tooltip background color | `black` |
+| `--sc-kit--table-icon-cell--tooltip--opacity` | Tooltip opacity | `70%` |
+-->
+
+<style>.table-icon-cell {
+  --_table-icon-cell--tooltip--color: var(--sc-kit--table-icon-cell--tooltip--color, #ffffff);
+  --_table-icon-cell--tooltip--background: var(--sc-kit--table-icon-cell--tooltip--background, #000000);
+  --_table-icon-cell--tooltip--opacity: var(--sc-kit--table-icon-cell--tooltip--opacity, 70%);
+}
+.table-icon-cell__tooltip {
+  background-color: var(--_table-icon-cell--tooltip--background);
+  font-size: 0.875em;
+  padding: 0.5714em 1.1429em;
+  border-radius: 0.2857em;
+  color: var(--_table-icon-cell--tooltip--color);
+  opacity: var(--_table-icon-cell--tooltip--opacity);
+}</style>

package/dist/ui/table/table-cells/table-icon-cell.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { ITableIconColumn } from '../types';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        item: T;
+        column: ITableIconColumn<T>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Icon cell for table rows. Displays an icon with optional tooltip.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--table-icon-cell--tooltip--color` | Tooltip text color | `white` |
+ * | `--sc-kit--table-icon-cell--tooltip--background` | Tooltip background color | `black` |
+ * | `--sc-kit--table-icon-cell--tooltip--opacity` | Tooltip opacity | `70%` |
+ */
+declare const TableIconCell: $$IsomorphicComponent;
+type TableIconCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableIconCell<T>>;
+export default TableIconCell;

package/dist/ui/table/table-cells/table-image-cell.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" generics="T extends {id: string}">import { Image, ImageRound } from '../../image';
+import { ProportionalContainer } from '../../proportional-container';
+let { item, column, centered } = $props();
+const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : String(item[column.id]));
+</script>
+
+<div class="table-image-cell" class:table-image-cell--centered={centered} style={column.sizeCss ? `--_table-image-cell--image--size: ${column.sizeCss}` : ''}>
+  {#if column.format === 'circle'}
+    <div class="table-image-cell__image">
+      <ImageRound src={getValueForColumn(column, item)} />
+    </div>
+  {:else if column.format === 'square-contain'}
+    <div class="table-image-cell__image table-image-cell__image--contain" class:table-image-cell__image--fill-cell={column.sizeCss}>
+      <Image src={getValueForColumn(column, item)} />
+    </div>
+  {:else if column.format === 'square-cover'}
+    <div class="table-image-cell__image table-image-cell__image--cover" class:table-image-cell__image--fill-cell={column.sizeCss}>
+      <ProportionalContainer ratio={column.coverAspectRatio ?? 1}>
+        <div class="table-image-cell__cover-image-placer">
+          <Image src={getValueForColumn(column, item)} />
+        </div>
+      </ProportionalContainer>
+    </div>
+  {/if}
+</div>
+
+<style>.table-image-cell {
+  display: flex;
+  height: 3.125em;
+  min-height: 3.125em;
+  max-height: 3.125em;
+  align-items: center;
+}
+.table-image-cell--centered {
+  justify-content: center;
+}
+.table-image-cell__image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.25em;
+  overflow: hidden;
+  width: var(--_table-image-cell--image--size, 2em);
+  height: var(--_table-image-cell--image--size, 2em);
+  --sc-kit--image--object-fit: cover;
+}
+.table-image-cell__image--fill-cell {
+  height: var(--_table-image-cell--image--size) !important;
+  min-height: var(--_table-image-cell--image--size);
+  max-height: var(--_table-image-cell--image--size);
+}
+.table-image-cell__image--contain {
+  --sc-kit--image--object-fit: contain;
+  height: 2.5em;
+}
+.table-image-cell__image--cover {
+  height: 2.5em;
+}
+.table-image-cell__cover-image-placer {
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25em;
+  overflow: hidden;
+}</style>

package/dist/ui/table/table-cells/table-image-cell.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { ITableImageColumn } from '../types';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        item: T;
+        column: ITableImageColumn<T>;
+        centered: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableImageCell: $$IsomorphicComponent;
+type TableImageCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableImageCell<T>>;
+export default TableImageCell;

package/dist/ui/table/table-cells/table-move-row-cell.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import { Icon } from '../../icon';
+import IconArrowDown from '@fluentui/svg-icons/icons/arrow_down_20_regular.svg?raw';
+import IconArrowUp from '@fluentui/svg-icons/icons/arrow_up_20_regular.svg?raw';
+let { on } = $props();
+const onUp = () => on?.up?.();
+const onDown = () => on?.down?.();
+</script>
+
+<div class="move-row-cell">
+  <button type="button" disabled={!on.up} onclick={onUp}>
+    <Icon src={IconArrowUp} />
+  </button>
+  <button type="button" disabled={!on.down} onclick={onDown}>
+    <Icon src={IconArrowDown} />
+  </button>
+</div>
+
+<style>.move-row-cell {
+  display: flex;
+  flex-direction: row;
+  gap: 0.125rem;
+  justify-content: space-evenly;
+  --sc-kit--icon--size: 1rem;
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.move-row-cell button:disabled {
+  --sc-kit--icon--color: #6b7280;
+}</style>

package/dist/ui/table/table-cells/table-move-row-cell.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    on: {
+        up?: () => void;
+        down?: () => void;
+    };
+};
+declare const TableMoveRowCell: import("svelte").Component<Props, {}, "">;
+type TableMoveRowCell = ReturnType<typeof TableMoveRowCell>;
+export default TableMoveRowCell;

package/dist/ui/table/table-cells/table-select-cell.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" generics="T extends {id: string}">import { Singleselect } from '../../selects';
+let { item, column } = $props();
+const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : item[column.id]);
+const onSelected = (value) => {
+    column.onSelected(item, value);
+    item = item;
+};
+</script>
+
+{#if !column.visibilityFactory || column.visibilityFactory(item)}
+  <Singleselect
+    placeholder={column.placeholder || ' '}
+    value={getValueForColumn(column, item)}
+    options={column.optionsFactory(item)}
+    disabled={(column.disabledFactory && column.disabledFactory(item)) || false}
+    allowReset={column.allowReset}
+    on={{
+      change: (v) => {
+        onSelected(v);
+      }
+    }} />
+{/if}