@streamscloud/kit 0.2.9 → 0.2.11

package/dist/ui/table/cmp.table.svelte

@@ -0,0 +1,417 @@
+<script lang="ts" generics="T extends {id: string}">import { Button } from '../button';
+import { DropdownItem } from '../dropdown';
+import { DynamicComponent } from '../dynamic-component';
+import { Icon } from '../icon';
+import { IconText } from '../icon-text';
+import { Placeholder } from '../placeholder';
+import { TableActionsCell, TableBadgeCell, TableButtonCell, TableByCell, TableCheckboxCell, TableHideableCell, TableIconCell, TableImageCell, TableMoveRowCell, TableCustomCell, TableSelectCell, TableTextCell, TableTextInputCell } from './table-cells';
+import { ResolvedColumn } from './table-column-models.svelte';
+import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
+import { untrack } from 'svelte';
+import { flip } from 'svelte/animate';
+import { dndzone } from 'svelte-dnd-action';
+let { model, rowsDraggable = false, showPlaceholder = false, showAlternativeView = false, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
+let showNoItemsPlaceholder = $state(false);
+let showNoItemsTimeout = 0;
+let showNoItemsPlaceholderFn = null;
+let hideNoItemsPlaceholderFn = null;
+// One-time setup: selection subscriptions + no-items placeholder logic
+$effect(() => untrack(() => {
+    const subscriptions = [
+        model.selection.subscribeOnChange((values) => on?.selectionChanged?.(values)),
+        model.selection.subscribeOnAdd((values) => on?.itemsSelected?.(values)),
+        model.selection.subscribeOnRemove((values) => on?.itemsDeselected?.(values))
+    ];
+    showNoItemsPlaceholderFn = () => {
+        showNoItemsTimeout = window.setTimeout(() => {
+            showNoItemsPlaceholder = !model.items.length;
+        }, 700);
+    };
+    hideNoItemsPlaceholderFn = () => {
+        clearTimeout(showNoItemsTimeout);
+        showNoItemsPlaceholder = false;
+    };
+    return () => {
+        subscriptions.forEach((unsubscribe) => unsubscribe());
+    };
+}));
+$effect(() => {
+    if (!model.items.length) {
+        untrack(() => showNoItemsPlaceholderFn?.());
+    }
+    else {
+        untrack(() => hideNoItemsPlaceholderFn?.());
+    }
+});
+// region Drag and Drop
+const flipDurationMs = 200;
+let tableRef = $state.raw(null);
+const handleConsider = (e) => {
+    const { items: newItems } = e.detail;
+    model.items = newItems;
+};
+const handleFinalize = (e) => {
+    const { items: newItems } = e.detail;
+    model.items = newItems;
+    on?.itemsReordered?.(newItems);
+};
+const startDrag = (e) => {
+    // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
+    e.preventDefault();
+};
+const transformDraggedElement = (draggedRow) => {
+    if (!draggedRow) {
+        return;
+    }
+    const referenceColumns = tableRef.querySelector('tbody')?.querySelector('tr')?.querySelectorAll('td') || [];
+    const draggedColumns = draggedRow.querySelectorAll('td');
+    if (referenceColumns.length !== draggedColumns.length) {
+        console.error('not equal count of model.columns withing table rows');
+        return;
+    }
+    for (let i = 0, length = referenceColumns.length; i < length; i++) {
+        draggedColumns[i].style.width = `${referenceColumns[i].clientWidth}px`;
+    }
+};
+// endregion Drag and Drop
+const changeItemPosition = (item, positionChange) => {
+    const index = model.items.indexOf(item);
+    const newIndex = index + positionChange;
+    const newItems = [...model.items];
+    newItems.splice(index, 1);
+    newItems.splice(newIndex, 0, item);
+    model.items = newItems;
+    on?.itemsReordered?.(newItems);
+};
+const disableMoveRowCell = (def) => {
+    if (!def.disableFactory) {
+        return false;
+    }
+    return def.disableFactory();
+};
+const cssWidth = (column) => {
+    if (column.fixedCssWidth) {
+        return `width: ${column.fixedCssWidth};`;
+    }
+    return 'width: auto;';
+};
+const anyVisibleItemActions = (item) => {
+    return model.itemActions.some((action) => (action.visibilityFactory ? action.visibilityFactory(item) : true));
+};
+const getEditorColumnOrDefault = (column, editMode) => {
+    if (!editMode) {
+        return column;
+    }
+    if (column.editorColumn) {
+        return column.editorColumn;
+    }
+    return column;
+};
+</script>
+
+<div class="table-container">
+  {#if alternativeView && showAlternativeView}
+    {#if showPlaceholder || showNoItemsPlaceholder}
+      <div class="alternative-view__placeholder">
+        {#if showPlaceholder}
+          {@render placeholderRow?.()}
+        {:else if customNoItemsPlaceholder}
+          {@render customNoItemsPlaceholder()}
+        {/if}
+      </div>
+    {:else}
+      {@render alternativeView()}
+    {/if}
+  {:else}
+    <table class="table" class:table--sticky-header={model.styles?.stickyHeader === true} bind:this={tableRef}>
+      <thead class="table__head">
+        <tr>
+          {#if rowsDraggable && !model.editingItem}
+            <th class="table__th table__drag-handle">&nbsp;</th>
+          {/if}
+          {#each model.columns as column (column)}
+            <TableHideableCell column={column}>
+              <th class="table__th" class:table__th--centered={column.centered} style={cssWidth(column)} title={column.title}>
+                <DynamicComponent model={column.headerView} />
+              </th>
+            </TableHideableCell>
+          {/each}
+        </tr>
+      </thead>
+      <tbody
+        use:dndzone={{ items: model.items, dragDisabled: !rowsDraggable, flipDurationMs, dropTargetStyle: {}, transformDraggedElement, type: 'table' }}
+        onconsider={handleConsider}
+        onfinalize={handleFinalize}>
+        {#if showPlaceholder || showNoItemsPlaceholder}
+          <tr class="table__tr table__tr--placeholder">
+            <td colspan={model.columns.length}>
+              <div class="table__placeholder">
+                {#if showPlaceholder}
+                  {@render placeholderRow?.()}
+                {:else if customNoItemsPlaceholder}
+                  {@render customNoItemsPlaceholder()}
+                {:else}
+                  <Placeholder imageSrc="/placeholders/default.svg" title="No Items <span>Found</span>" body="No data found. Create one to get started" />
+                {/if}
+              </div>
+            </td>
+          </tr>
+        {:else}
+          {#snippet cell({ item, column, itemIndex }: { item: T; column: ResolvedColumn<T>; itemIndex: Number })}
+            {@const editMode = model.editingItem?.id === item.id}
+            {@const def = column.def}
+            {#if def.type === 'actions'}
+              {#if anyVisibleItemActions(item)}
+                {#if editMode}
+                  <div class="table__save-cancel">
+                    <Button size="small" variant="transparent-success" on={{ click: () => on?.saveChanges?.(item) }}>Save</Button>
+                    <Button size="small" variant="gray" on={{ click: () => on?.cancelChanges?.() }}>Cancel</Button>
+                  </div>
+                {:else}
+                  <TableActionsCell dropdownPosition={model.styles?.actionsDropdownTopDirection ? 'top' : 'bottom'}>
+                    <div class="table__actions">
+                      {#each model.itemActions as action (action)}
+                        {#if action.visibilityFactory ? action.visibilityFactory(item) : true}
+                          <DropdownItem on={{ click: () => action.action(item) }}>
+                            <IconText icon={action.icon} iconColor={action.color}>
+                              {action.title}
+                            </IconText>
+                          </DropdownItem>
+                        {/if}
+                      {/each}
+                    </div>
+                  </TableActionsCell>
+                {/if}
+              {/if}
+            {:else if def.type === 'badge'}
+              <TableBadgeCell column={def} item={item} />
+            {:else if def.type === 'button'}
+              <TableButtonCell column={def} item={item} />
+            {:else if def.type === 'by'}
+              <TableByCell column={def} item={item} />
+            {:else if def.type === 'checkbox'}
+              <TableCheckboxCell item={item} selection={model.selection} />
+            {:else if def.type === 'custom'}
+              <TableCustomCell column={def} item={item} />
+            {:else if def.type === 'icon'}
+              <TableIconCell column={def} item={item} />
+            {:else if def.type === 'image'}
+              <TableImageCell column={def} item={item} centered={column.centered} />
+            {:else if def.type === 'move-row'}
+              {#if !editMode}
+                <TableMoveRowCell
+                  on={{
+                    up: disableMoveRowCell(def) || itemIndex < 1 ? undefined : () => changeItemPosition(item, -1),
+                    down: disableMoveRowCell(def) || itemIndex >= model.items.length - 1 ? undefined : () => changeItemPosition(item, 1)
+                  }} />
+              {/if}
+            {:else if def.type === 'select'}
+              <TableSelectCell column={def} item={item} />
+            {:else if def.type === 'text'}
+              <TableTextCell column={def} item={item} centered={column.centered} />
+            {:else if def.type === 'text-input'}
+              <TableTextInputCell column={def} item={item}></TableTextInputCell>
+            {:else}
+              <TableTextCell column={def} item={item} centered={false} />
+            {/if}
+          {/snippet}
+          {#each model.items as item, itemIndex (item)}
+            {@const editMode = model.editingItem?.id === item.id}
+            <tr
+              animate:flip={{ duration: flipDurationMs }}
+              class="table__tr"
+              id={item.id}
+              class:table__tr--highlighted={model.highlightedItemIds.includes(item.id)}>
+              {#if rowsDraggable && !model.editingItem}
+                <td class="table__td table__drag-handle table__drag-handle--dragging" onmousedown={startDrag} ontouchstart={startDrag}>
+                  <Icon src={IconReorderDotsHorizontal} />
+                </td>
+              {/if}
+
+              {#each model.columns as column (column)}
+                <TableHideableCell column={column}>
+                  <td
+                    class="table__td"
+                    class:table__td--centered={column.centered}
+                    class:table__td--clickable={!!column.onClick && !editMode}
+                    style={cssWidth(column)}
+                    onclick={() => !editMode && column.onClick && column.onClick(item)}>
+                    {@render cell({
+                      item: editMode && model.editingItem ? model.editingItem : item,
+                      column: getEditorColumnOrDefault(column, editMode),
+                      itemIndex
+                    })}
+                  </td>
+                </TableHideableCell>
+              {/each}
+            </tr>
+          {/each}
+        {/if}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<!--
+@component
+Data table component with support for sorting, selection, drag-and-drop row reordering,
+inline editing, column visibility management, and group actions.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--table--row--height` | Row height | `3.125em` |
+| `--sc-kit--table--padding-left` | Left padding for first column | `2em` |
+| `--sc-kit--table--padding-right` | Right padding for last column | `3em` |
+| `--sc-kit--table--head--background-color` | Header background | `light-dark(gray-50, dark-800)` |
+| `--sc-kit--table--border-color` | Border color between rows | `light-dark(neutral-100, dark-800)` |
+| `--sc-kit--table--cell--font-size` | Cell font size | `0.875em` |
+| `--sc-kit--table--row--color` | Row background | `transparent` |
+| `--sc-kit--table--row--alternative-color` | Hover/highlighted row background | `light-dark(neutral-100, dark-800)` |
+| `--sc-kit--table-actions-cell--trigger--border-color` | Actions trigger border color | `light-dark(primary-50, primary-900)` |
+| `--sc-kit--table-actions-cell--trigger--icon-color` | Actions trigger icon color | `light-dark(primary-300, primary-400)` |
+| `--sc-kit--table-text-cell--clickable--color` | Clickable text cell color | `light-dark(primary-500, primary-400)` |
+| `--sc-kit--table-icon-cell--tooltip--color` | Icon cell tooltip text color | `white` |
+| `--sc-kit--table-icon-cell--tooltip--background` | Icon cell tooltip background | `black` |
+| `--sc-kit--table-icon-cell--tooltip--opacity` | Icon cell tooltip opacity | `70%` |
+-->
+
+<style>.alternative-view__placeholder {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80%;
+  user-select: none;
+}
+
+.table-container {
+  --_table--row--height: var(--sc-kit--table--row--height, 3.125em);
+  --_table--padding-left: var(--sc-kit--table--padding-left, 2em);
+  --_table--padding-right: var(--sc-kit--table--padding-right, 3em);
+  --_table--head--height: 2.625em;
+  --_table--head--background-color: var(--sc-kit--table--head--background-color, light-dark(#fafafa, #1e1e1e));
+  --_table--border-color: var(--sc-kit--table--border-color, light-dark(#f2f2f3, #1e1e1e));
+  --_table--cell--font-size: var(--sc-kit--table--cell--font-size, 0.875em);
+  --_table--cell--horizontal-padding: 0.75em;
+  --_table--row--color: var(--sc-kit--table--row--color, transparent);
+  --_table--row--alternative-color: var(--sc-kit--table--row--alternative-color, light-dark(#f2f2f3, #1e1e1e));
+  display: flex;
+  overflow-x: auto;
+  height: 100%;
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.table-container::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.table-container::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.table-container::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .table-container {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+
+.table {
+  width: 100%;
+  table-layout: auto;
+  height: fit-content;
+}
+.table__head {
+  height: var(--_table--head--height);
+  max-height: var(--_table--head--height);
+  background: var(--_table--head--background-color);
+  border-bottom: 1px solid var(--_table--border-color);
+}
+.table__th {
+  padding: 0 var(--_table--cell--horizontal-padding);
+  text-align: left;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.table__th :global([contenteditable]) {
+  user-select: text;
+}
+.table__th--centered {
+  text-align: center;
+}
+.table__th:first-child {
+  padding-left: var(--_table--padding-left);
+}
+.table__th:last-child {
+  padding-right: var(--_table--padding-right);
+}
+.table__tr {
+  height: var(--_table--row--height);
+  max-height: var(--_table--row--height);
+  background: var(--_table--row--color);
+}
+.table__tr:hover, .table__tr--highlighted {
+  background: var(--_table--row--alternative-color);
+}
+.table__tr:hover :global(.move-row-cell), .table__tr--highlighted :global(.move-row-cell) {
+  opacity: 1;
+}
+.table__tr--placeholder {
+  background: var(--_table--row--color) !important;
+}
+.table__td {
+  padding: 0 var(--_table--cell--horizontal-padding);
+  border-bottom: 1px solid var(--_table--border-color);
+}
+.table__td--centered {
+  text-align: center;
+}
+.table__td--clickable {
+  cursor: pointer;
+}
+.table__td:first-child {
+  padding-left: var(--_table--padding-left);
+}
+.table__td:last-child {
+  padding-right: var(--_table--padding-right);
+}
+.table__save-cancel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  --button--min-width: 4.6875em;
+}
+.table__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80%;
+  user-select: none;
+}
+.table__actions {
+  display: contents;
+  --sc-kit--dropdown-item--font-size: 0.875rem;
+  --sc-kit--dropdown-item--min-width: 8.75rem;
+  --sc-kit--dropdown-item--padding: 0.75rem 1.25rem;
+  --sc-kit--icon-text--text--font-size: 0.875rem;
+  --sc-kit--icon-text--icon--font-size: 1.125rem;
+}
+.table__drag-handle {
+  width: 3.125em;
+  cursor: grab;
+  --sc-kit--icon--size: 1.5em;
+  --sc-kit--icon--stroke-width: 1.1;
+}
+.table__drag-handle--dragging {
+  cursor: grabbing;
+}
+.table--sticky-header thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}</style>

package/dist/ui/table/cmp.table.svelte.d.ts

@@ -0,0 +1,74 @@
+import type { TableModel } from './table-model.svelte';
+import { type Snippet } from 'svelte';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        model: TableModel<T>;
+        rowsDraggable?: boolean;
+        showPlaceholder?: boolean;
+        showAlternativeView?: boolean;
+        on?: {
+            selectionChanged?: (e: T[]) => void;
+            itemsSelected?: (e: T[]) => void;
+            itemsDeselected?: (e: T[]) => void;
+            itemsReordered?: (e: T[]) => void;
+            saveChanges?: (e: T) => void;
+            cancelChanges?: () => void;
+        };
+        alternativeView?: Snippet;
+        placeholderRow?: Snippet;
+        customNoItemsPlaceholder?: 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']>;
+}
+/**
+ * Data table component with support for sorting, selection, drag-and-drop row reordering,
+ * inline editing, column visibility management, and group actions.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--table--row--height` | Row height | `3.125em` |
+ * | `--sc-kit--table--padding-left` | Left padding for first column | `2em` |
+ * | `--sc-kit--table--padding-right` | Right padding for last column | `3em` |
+ * | `--sc-kit--table--head--background-color` | Header background | `light-dark(gray-50, dark-800)` |
+ * | `--sc-kit--table--border-color` | Border color between rows | `light-dark(neutral-100, dark-800)` |
+ * | `--sc-kit--table--cell--font-size` | Cell font size | `0.875em` |
+ * | `--sc-kit--table--row--color` | Row background | `transparent` |
+ * | `--sc-kit--table--row--alternative-color` | Hover/highlighted row background | `light-dark(neutral-100, dark-800)` |
+ * | `--sc-kit--table-actions-cell--trigger--border-color` | Actions trigger border color | `light-dark(primary-50, primary-900)` |
+ * | `--sc-kit--table-actions-cell--trigger--icon-color` | Actions trigger icon color | `light-dark(primary-300, primary-400)` |
+ * | `--sc-kit--table-text-cell--clickable--color` | Clickable text cell color | `light-dark(primary-500, primary-400)` |
+ * | `--sc-kit--table-icon-cell--tooltip--color` | Icon cell tooltip text color | `white` |
+ * | `--sc-kit--table-icon-cell--tooltip--background` | Icon cell tooltip background | `black` |
+ * | `--sc-kit--table-icon-cell--tooltip--opacity` | Icon cell tooltip opacity | `70%` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends {
+    id: string;
+}> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/table/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Table } from './cmp.table.svelte';
+export { default as TableColumnsManager } from './table-columns-manager/cmp.table-columns-manager.svelte';
+export { default as TableGroupActions } from './table-group-actions/cmp.table-group-actions.svelte';
+export type { TableColumnSortDirection, TableColumnType, TableImageColumnFormat, TableItemAction, TableTextColumnFormat, TableOrderByState, PageQuery, IAnyTableColumn } from './types';
+export type { TableGroupAction } from './table-group-actions/types.svelte';
+export { TableModel } from './table-model.svelte';
+export { pickDirectionFromOrderByState, generatePagination } from './service';

package/dist/ui/table/index.js

@@ -0,0 +1,5 @@
+export { default as Table } from './cmp.table.svelte';
+export { default as TableColumnsManager } from './table-columns-manager/cmp.table-columns-manager.svelte';
+export { default as TableGroupActions } from './table-group-actions/cmp.table-group-actions.svelte';
+export { TableModel } from './table-model.svelte';
+export { pickDirectionFromOrderByState, generatePagination } from './service';

package/dist/ui/table/service.d.ts

@@ -0,0 +1,7 @@
+import type { TableColumnSortDirection, TableOrderByState, PageQuery } from './types';
+export declare const pickDirectionFromOrderByState: <TOrder>(orderBy: TOrder, orderByState: TableOrderByState<TOrder>) => TableColumnSortDirection;
+export declare const generatePagination: <TOrder>(data: {
+    pageSize: number;
+    pageNumber: number;
+    orderByState: TableOrderByState<TOrder>;
+}) => PageQuery<TOrder>;

package/dist/ui/table/service.js

@@ -0,0 +1,17 @@
+export const pickDirectionFromOrderByState = (orderBy, orderByState) => {
+    if (orderByState.orderBy === orderBy) {
+        return orderByState.ascendingOrder ? 'asc' : 'desc';
+    }
+    return 'none';
+};
+export const generatePagination = (data) => {
+    const { pageSize, pageNumber, orderByState } = data;
+    const query = {
+        perPage: pageSize,
+        page: pageNumber,
+        fetchTotal: pageNumber === 1,
+        orderBy: orderByState.orderBy,
+        ascendingOrder: orderByState.ascendingOrder
+    };
+    return query;
+};

package/dist/ui/table/table-cells/index.d.ts

@@ -0,0 +1,13 @@
+export { default as TableActionsCell } from './table-actions-cell.svelte';
+export { default as TableBadgeCell } from './table-badge-cell.svelte';
+export { default as TableButtonCell } from './table-button-cell.svelte';
+export { default as TableByCell } from './table-by-cell.svelte';
+export { default as TableCheckboxCell } from './table-checkbox-cell.svelte';
+export { default as TableCustomCell } from './table-custom-cell.svelte';
+export { default as TableIconCell } from './table-icon-cell.svelte';
+export { default as TableImageCell } from './table-image-cell.svelte';
+export { default as TableMoveRowCell } from './table-move-row-cell.svelte';
+export { default as TableSelectCell } from './table-select-cell.svelte';
+export { default as TableTextCell } from './table-text-cell.svelte';
+export { default as TableTextInputCell } from './table-text-input-cell.svelte';
+export { default as TableHideableCell } from './table-hideable-cell.svelte';

package/dist/ui/table/table-cells/index.js

@@ -0,0 +1,13 @@
+export { default as TableActionsCell } from './table-actions-cell.svelte';
+export { default as TableBadgeCell } from './table-badge-cell.svelte';
+export { default as TableButtonCell } from './table-button-cell.svelte';
+export { default as TableByCell } from './table-by-cell.svelte';
+export { default as TableCheckboxCell } from './table-checkbox-cell.svelte';
+export { default as TableCustomCell } from './table-custom-cell.svelte';
+export { default as TableIconCell } from './table-icon-cell.svelte';
+export { default as TableImageCell } from './table-image-cell.svelte';
+export { default as TableMoveRowCell } from './table-move-row-cell.svelte';
+export { default as TableSelectCell } from './table-select-cell.svelte';
+export { default as TableTextCell } from './table-text-cell.svelte';
+export { default as TableTextInputCell } from './table-text-input-cell.svelte';
+export { default as TableHideableCell } from './table-hideable-cell.svelte';

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

@@ -0,0 +1,53 @@
+<script lang="ts">import { Dropdown } from '../../dropdown';
+import { Icon } from '../../icon';
+import IconMoreHorizontal from '@fluentui/svg-icons/icons/more_horizontal_20_regular.svg?raw';
+let { dropdownPosition = 'bottom-end', children } = $props();
+let toggleOpen = $state(null);
+</script>
+
+<button type="button" class="table-actions-cell__dropdown-wrapper" onclick={toggleOpen}>
+  <span>
+    <Dropdown position={dropdownPosition} on={{ mounted: (e) => (toggleOpen = e.toggleOpen) }}>
+      {#snippet trigger()}
+        <button type="button" class="table-actions-cell__trigger">
+          <Icon src={IconMoreHorizontal} />
+        </button>
+      {/snippet}
+      {@render children()}
+    </Dropdown>
+  </span>
+</button>
+
+<!--
+@component
+Actions cell for table rows. Shows a dropdown trigger with a "more" icon.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--table-actions-cell--trigger--border-color` | Trigger button border color | `light-dark(primary-50, primary-900)` |
+| `--sc-kit--table-actions-cell--trigger--icon-color` | Trigger icon color | `light-dark(primary-300, primary-400)` |
+-->
+
+<style>.table-actions-cell__trigger {
+  --_table-actions-cell--trigger--border-color: var(
+    --sc-kit--table-actions-cell--trigger--border-color,
+    light-dark(#f1f6fd, #0a2557)
+  );
+  --_table-actions-cell--trigger--icon-color: var(
+    --sc-kit--table-actions-cell--trigger--icon-color,
+    light-dark(#91b3f3, #5a8dec)
+  );
+  border: 1px solid var(--_table-actions-cell--trigger--border-color);
+  padding: 0.125em 0.25em;
+  border-radius: 0.375em;
+  --sc-kit--icon--stroke-width: 0.6;
+  --sc-kit--icon--color: var(--_table-actions-cell--trigger--icon-color);
+}
+.table-actions-cell__dropdown-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}</style>

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

@@ -0,0 +1,18 @@
+import { type DropdownPosition } from '../../dropdown';
+import type { Snippet } from 'svelte';
+type Props = {
+    dropdownPosition?: DropdownPosition;
+    children: Snippet;
+};
+/**
+ * Actions cell for table rows. Shows a dropdown trigger with a "more" icon.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--table-actions-cell--trigger--border-color` | Trigger button border color | `light-dark(primary-50, primary-900)` |
+ * | `--sc-kit--table-actions-cell--trigger--icon-color` | Trigger icon color | `light-dark(primary-300, primary-400)` |
+ */
+declare const TableActionsCell: import("svelte").Component<Props, {}, "">;
+type TableActionsCell = ReturnType<typeof TableActionsCell>;
+export default TableActionsCell;

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

@@ -0,0 +1,15 @@
+<script lang="ts" generics="T extends {id: string}">import { Badge } from '../../badge';
+let { item, column } = $props();
+const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : String(item[column.id]));
+const color = $derived(column.colorFactory ? column.colorFactory(item) : 'default');
+</script>
+
+{#if getValueForColumn(column, item) !== null}
+  <div class="table-badge-cell">
+    <Badge color={color} rounded={column.roundedBadge ?? false}>{getValueForColumn(column, item)}</Badge>
+  </div>
+{/if}
+
+<style>.table-badge-cell {
+  width: 100%;
+}</style>