@streamscloud/kit 0.2.10 → 0.2.11

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

@@ -0,0 +1,38 @@
+import type { ITableSelectColumn } from '../types';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        item: T;
+        column: ITableSelectColumn<T, keyof 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 TableSelectCell: $$IsomorphicComponent;
+type TableSelectCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableSelectCell<T>>;
+export default TableSelectCell;

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

@@ -0,0 +1,60 @@
+<script lang="ts" generics="T extends {id: string}">import { HtmlHelper, DateHelper } from '../../../core/utils';
+import { LineClamp } from '../../line-clamp';
+let { item, column, centered } = $props();
+const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : item[column.id])?.toString();
+const value = $derived(getValueForColumn(column, item) ?? '');
+const getDateValueForColumn = (column, item) => {
+    return DateHelper.toDate(getValueForColumn(column, item));
+};
+const dateValue = $derived(getDateValueForColumn(column, item) ?? null);
+const fmt = (d, options) => new Intl.DateTimeFormat(undefined, options).format(d);
+</script>
+
+<span class="table-text-cell" class:table-text-cell--centered={centered} class:table-text-cell--clickable={!!column.onClick}>
+  {#if column.format === 'date'}
+    {!dateValue ? '' : fmt(dateValue, { dateStyle: 'medium' })}
+  {:else if column.format === 'date-time'}
+    {!dateValue ? '' : `${fmt(dateValue, { dateStyle: 'medium' })} ${fmt(dateValue, { timeStyle: 'medium' })}`}
+  {:else if column.format === 'html'}
+    {#if column.maxLines === 'single-line-no-trim'}
+      <span class="table-text-cell__single-line-no-trim">{HtmlHelper.stripHtml(value)}</span>
+    {:else}
+      <LineClamp maxLines={column.maxLines || 3}>
+        {@html HtmlHelper.sanitizeHtml(value)}
+      </LineClamp>
+    {/if}
+  {:else if column.maxLines === 'single-line-no-trim'}
+    <span class="table-text-cell__single-line-no-trim">{value}</span>
+  {:else}
+    <LineClamp maxLines={column.maxLines || 3}>{value}</LineClamp>
+  {/if}
+</span>
+
+<!--
+@component
+Text cell for table rows. Supports plain text, date, date-time, and HTML formats with optional line clamping.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--table-text-cell--clickable--color` | Text color when column has onClick | `light-dark(primary-500, primary-400)` |
+-->
+
+<style>.table-text-cell {
+  --_table-text-cell--clickable--color: var(
+    --sc-kit--table-text-cell--clickable--color,
+    light-dark(#144ab0, #5a8dec)
+  );
+  display: flex;
+  align-content: center;
+  font-size: var(--_table--cell--font-size);
+}
+.table-text-cell__single-line-no-trim {
+  white-space: nowrap;
+}
+.table-text-cell--clickable {
+  color: var(--_table-text-cell--clickable--color);
+}
+.table-text-cell--centered {
+  justify-content: center;
+}</style>

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

@@ -0,0 +1,47 @@
+import type { ITableTextColumn } from '../types';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        item: T;
+        column: ITableTextColumn<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']>;
+}
+/**
+ * Text cell for table rows. Supports plain text, date, date-time, and HTML formats with optional line clamping.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--table-text-cell--clickable--color` | Text color when column has onClick | `light-dark(primary-500, primary-400)` |
+ */
+declare const TableTextCell: $$IsomorphicComponent;
+type TableTextCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableTextCell<T>>;
+export default TableTextCell;

package/dist/ui/table/table-cells/table-text-input-cell.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" generics="T extends {id: string}">import { Input, NumeralInput } from '../../inputs';
+import { LineClamp } from '../../line-clamp';
+import { untrack } from 'svelte';
+let { item, column } = $props();
+let errorText = $state('');
+const onInput = async (val) => {
+    item[column.id] = String(val);
+    await validate();
+    if (column.onInput) {
+        column.onInput(item, item[column.id]);
+    }
+};
+const validate = async () => {
+    if (!column.validationSchema) {
+        return;
+    }
+    try {
+        await column.validationSchema.validate(item[column.id]);
+        errorText = '';
+    }
+    catch (error) {
+        const err = error;
+        if (err.name !== 'ValidationError') {
+            throw error;
+        }
+        errorText = err.message;
+        return;
+    }
+    finally {
+        if (column.onValidated) {
+            column.onValidated(item, errorText);
+        }
+    }
+};
+$effect(() => {
+    untrack(() => void validate());
+});
+</script>
+
+<div class="table-text-input-cell" class:table-text-input-cell--errored={!!errorText}>
+  {#if column.inputType === 'number'}
+    <NumeralInput value={item[column.id]} on={{ input: onInput }} />
+  {:else}
+    <Input value={item[column.id]} on={{ input: onInput }} />
+  {/if}
+  {#if errorText}
+    <div class="table-text-input-cell__error">
+      <LineClamp maxLines={2}>{errorText}</LineClamp>
+    </div>
+  {/if}
+</div>
+
+<style>.table-text-input-cell {
+  font-size: var(--_table--cell--font-size);
+  --sc-kit--validatable--margin-bottom: 1.5em;
+  padding-top: 1.5em;
+  --_validatable--error--color: var(--sc-kit--validatable--error--color, #e71d36);
+  --_validatable--error--position: var(--sc-kit--validatable--error--position, absolute);
+  --_validatable--error--left: var(--sc-kit--validatable--error--left, 0);
+  --_validatable--error--right: var(--sc-kit--validatable--error--right, 0);
+  --_validatable--margin-bottom: var(--sc-kit--validatable--margin-bottom, 1.1em);
+  --_validatable--margin-right: var(--sc-kit--validatable--margin-right, 0);
+  --_validatable--display: var(--sc-kit--validatable--display, block);
+  --_validatable--width: var(--sc-kit--validatable--width, auto);
+  position: relative;
+  margin-bottom: var(--_validatable--margin-bottom);
+  margin-right: var(--_validatable--margin-right);
+  display: var(--_validatable--display);
+  width: var(--_validatable--width);
+}
+.table-text-input-cell--errored {
+  --_input--explicit-shadow-color: var(--_validatable--error--color);
+}
+.table-text-input-cell__error {
+  position: var(--_validatable--error--position);
+  top: calc(100% + 0.1em);
+  left: var(--_validatable--error--left);
+  right: var(--_validatable--error--right);
+  display: block;
+  color: var(--_validatable--error--color);
+  font-size: 0.7rem;
+  font-weight: 400;
+}</style>

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

@@ -0,0 +1,38 @@
+import type { ITableTextInputColumn } from '../types';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        item: any;
+        column: ITableTextInputColumn<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 TableTextInputCell: $$IsomorphicComponent;
+type TableTextInputCell<T extends {
+    id: string;
+}> = InstanceType<typeof TableTextInputCell<T>>;
+export default TableTextInputCell;

package/dist/ui/table/table-column-models.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { DynamicComponentModel } from '../dynamic-component';
+import type { IOneOfTableColumn, ITableActionsColumn, TableColumnSortDirection, TableColumnType, WithId } from './types';
+export type ColumnDef<T extends WithId> = IOneOfTableColumn<T, keyof T> | ITableActionsColumn;
+export type SortableTableColumn = {
+    uniqueId: symbol;
+    title: string;
+    centered: boolean;
+    sortDirection: TableColumnSortDirection;
+    type: TableColumnType;
+    onSort: ((state: TableColumnSortDirection) => Promise<void>) | null;
+};
+export declare class ResolvedColumn<T extends WithId> {
+    readonly def: ColumnDef<T>;
+    readonly uniqueId: symbol;
+    headerView: DynamicComponentModel;
+    editorColumn: ResolvedColumn<T> | null;
+    hidden: boolean;
+    sortDirection: TableColumnSortDirection;
+    constructor(def: ColumnDef<T>);
+    get type(): TableColumnType;
+    get id(): keyof T;
+    get title(): string;
+    get centered(): boolean;
+    get fixedCssWidth(): string;
+    get hideable(): boolean;
+    get onSort(): ((state: TableColumnSortDirection) => Promise<void>) | null;
+    get onClick(): ((item: T) => Promise<void> | void) | null;
+}

package/dist/ui/table/table-column-models.svelte.js

@@ -0,0 +1,57 @@
+export class ResolvedColumn {
+    def;
+    uniqueId = Symbol();
+    headerView = null;
+    editorColumn = null;
+    hidden = $state(false);
+    sortDirection = $state('none');
+    constructor(def) {
+        this.def = def;
+        if ('hidden' in def && def.hidden) {
+            this.hidden = def.hidden;
+        }
+        if ('sortDirection' in def && def.sortDirection) {
+            this.sortDirection = def.sortDirection;
+        }
+    }
+    get type() {
+        return this.def.type;
+    }
+    get id() {
+        if ('id' in this.def) {
+            return this.def.id;
+        }
+        return 'id';
+    }
+    get title() {
+        if ('title' in this.def) {
+            return this.def.title || '';
+        }
+        return '';
+    }
+    get centered() {
+        return this.def.centered ?? false;
+    }
+    get fixedCssWidth() {
+        return this.def.fixedCssWidth ?? '';
+    }
+    get hideable() {
+        if ('hideable' in this.def) {
+            return this.def.hideable ?? true;
+        }
+        // Structural columns (checkbox, actions, move-row) have no id — not hideable by default
+        return 'id' in this.def;
+    }
+    get onSort() {
+        if ('onSort' in this.def) {
+            return this.def.onSort ?? null;
+        }
+        return null;
+    }
+    get onClick() {
+        if ('onClick' in this.def) {
+            return this.def.onClick ?? null;
+        }
+        return null;
+    }
+}

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte

@@ -0,0 +1,84 @@
+<script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
+import { Dropdown } from '../../dropdown';
+import { IconText } from '../../icon-text';
+import { Toggle } from '../../toggle';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import IconColumnTwo from '@fluentui/svg-icons/icons/text_column_two_20_regular.svg?raw';
+let { columns } = $props();
+</script>
+
+<Dropdown position="bottom-end" keepDropdownOpen>
+  {#snippet trigger()}
+    <Button variant="standard" size="small">
+      <IconText icon={IconColumnTwo} iconColor="blue" secondaryIcon={IconChevronDown}>Columns</IconText>
+    </Button>
+  {/snippet}
+  <div class="columns-manager">
+    <div class="columns-manager__title">Select Columns</div>
+    <div class="columns-manager__body">
+      {#each columns.filter((c) => c.hideable) as column (column)}
+        <div class="columns-manager__item">
+          <div class="columns-manager__label">{column.title}</div>
+          <Toggle isOn={!column.hidden} on={{ change: (value) => (column.hidden = !value) }} />
+        </div>
+      {/each}
+    </div>
+  </div>
+</Dropdown>
+
+<!--
+@component
+Column visibility manager for tables. Shows a dropdown with toggles for each hideable column.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+| `--sc-kit--table-columns-manager--label--color` | Column label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+-->
+
+<style>.columns-manager {
+  --_columns-manager--title--color: var(
+    --sc-kit--table-columns-manager--title--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  --_columns-manager--label--color: var(
+    --sc-kit--table-columns-manager--label--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  width: 21.875rem;
+  padding: 1.5rem;
+}
+.columns-manager__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  color: var(--_columns-manager--title--color);
+  margin-bottom: 0.5rem;
+}
+.columns-manager__body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-block: 0.5rem;
+}
+.columns-manager__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  --sc-kit--toggle--switch--height: 1.125rem;
+  --sc-kit--toggle--switch--width: 2.3125rem;
+}
+.columns-manager__label {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: var(--_columns-manager--label--color);
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { ResolvedColumn } from '../table-column-models.svelte';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        columns: Array<ResolvedColumn<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']>;
+}
+/**
+ * Column visibility manager for tables. Shows a dropdown with toggles for each hideable column.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--table-columns-manager--label--color` | Column label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends {
+    id: string;
+}> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
+import { Dropdown, DropdownItem } from '../../dropdown';
+import { IconText } from '../../icon-text';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+let { groupActions, selection } = $props();
+const isActionVisible = (action, items) => {
+    return action.visibilityFactory ? action.visibilityFactory(items) : true;
+};
+const availableGroupActions = $derived(groupActions.filter((a) => isActionVisible(a, selection.items)));
+const singleGroupAction = $derived(availableGroupActions[0]);
+</script>
+
+{#if selection.items.length && availableGroupActions.length}
+  <div class="table-group-actions">
+    {#if availableGroupActions.length > 1}
+      <Dropdown position="bottom-end">
+        {#snippet trigger()}
+          <Button variant="standard" size="small">
+            <IconText icon={IconChevronDown} iconPosition="right">Actions</IconText>
+          </Button>
+        {/snippet}
+        {#each groupActions as action (action)}
+          {#if isActionVisible(action, selection.items)}
+            <DropdownItem on={{ click: () => action.action(selection.items) }}>
+              <IconText icon={action.icon} iconColor={action.color}>
+                {action.title}
+              </IconText>
+            </DropdownItem>
+          {/if}
+        {/each}
+      </Dropdown>
+    {:else if singleGroupAction}
+      <Button variant="standard" size="small" on={{ click: () => singleGroupAction.action(selection.items) }}>
+        <IconText icon={singleGroupAction.icon} iconColor={singleGroupAction.color}>
+          {singleGroupAction.title}
+        </IconText>
+      </Button>
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+Group actions toolbar for table selections. Shows a single button or dropdown with multiple actions based on the current selection.
+-->
+
+<style>.table-group-actions {
+  display: contents;
+  --sc-kit--dropdown-item--font-size: 0.875rem;
+  --sc-kit--dropdown-item--min-width: 11.25rem;
+  --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;
+}</style>

package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { Repository } from '../../../core/repository';
+import type { TableGroupAction } from './types.svelte';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        groupActions: TableGroupAction<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']>;
+}
+/** Group actions toolbar for table selections. Shows a single button or dropdown with multiple actions based on the current selection. */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends {
+    id: string;
+}> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/table/table-group-actions/types.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '../../icon';
+export type TableGroupAction<T> = {
+    title: string;
+    icon?: string;
+    color?: IconColor;
+    action: (items: T[]) => void;
+    visibilityFactory?: (items: T[]) => boolean;
+};

package/dist/ui/table/table-group-actions/types.svelte.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export { default as TableCheckboxHeader } from './table-checkbox-header.svelte';
+export { default as TableHeader } from './table-header.svelte';
+export { default as TableHeaderSortable } from './table-header-sortable.svelte';

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

@@ -0,0 +1,3 @@
+export { default as TableCheckboxHeader } from './table-checkbox-header.svelte';
+export { default as TableHeader } from './table-header.svelte';
+export { default as TableHeaderSortable } from './table-header-sortable.svelte';

package/dist/ui/table/table-headers/table-checkbox-header.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" generics="T extends {id: string}">import { Checkbox } from '../../checkbox';
+import TableHeader from './table-header.svelte';
+let { column } = $props();
+const allSelected = $derived(!!column.data.items.length && column.data.items.every((x) => !!column.selection.items.find((i) => i.id === x.id)));
+const canSelectAll = $derived(column.data.items.length > 0 && (!column.selection.limit || column.data.items.length <= column.selection.limit));
+const toggleSelectedAll = () => {
+    if (allSelected) {
+        column.selection.remove(...column.data.items);
+    }
+    else {
+        column.selection.add(...column.data.items);
+    }
+};
+</script>
+
+<TableHeader column={column}>
+  <Checkbox checked={allSelected} disabled={!allSelected && !canSelectAll} on={{ change: () => toggleSelectedAll() }} />
+</TableHeader>

package/dist/ui/table/table-headers/table-checkbox-header.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { Repository } from '../../../core/repository';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        column: {
+            title: string;
+            data: Repository<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 TableCheckboxHeader: $$IsomorphicComponent;
+type TableCheckboxHeader<T extends {
+    id: string;
+}> = InstanceType<typeof TableCheckboxHeader<T>>;
+export default TableCheckboxHeader;