sveltacular 1.0.27 → 1.0.28

package/dist/tables/data-grid-actions-cell.svelte

@@ -1,27 +1,11 @@
-<script lang="ts">
-	import type { JsonObject } from '../types/data.js';
+<script lang="ts" generics="T extends JsonObject">
+	import type { JsonObject, DataGridActions } from '../types/data.js';
 	import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
 	import TableCell from './table-cell.svelte';
 	import Button from '../forms/button/button.svelte';
 	import DropdownButton from '../navigation/dropdown-button/dropdown-button.svelte';
 	import DropdownItem from '../generic/dropdown-item/dropdown-item.svelte';
 
-	interface Action {
-		text: string;
-		variant?: ButtonVariant;
-		href?: (row: JsonObject) => string;
-		onClick?: (row: JsonObject) => unknown;
-	}
-
-	interface Actions {
-		text?: string;
-		type?: 'buttons' | 'dropdown';
-		variant?: ButtonVariant | 'default';
-		size?: FormFieldSizeOptions;
-		align?: 'left' | 'center' | 'right';
-		items: Action[];
-	}
-
 	let {
 		actions,
 		row,
@@ -29,8 +13,8 @@
 		actionButtonSize = 'sm',
 		actionAlign = 'center'
 	}: {
-		actions: Actions;
-		row: JsonObject;
+		actions: DataGridActions<T>;
+		row: T;
 		actionButtonVariant?: ButtonVariant;
 		actionButtonSize?: FormFieldSizeOptions;
 		actionAlign?: 'left' | 'center' | 'right';

package/dist/tables/data-grid-actions-cell.svelte.d.ts

@@ -1,26 +1,32 @@
-import type { JsonObject } from '../types/data.js';
+import type { JsonObject, DataGridActions } from '../types/data.js';
 import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
-interface Action {
-    text: string;
-    variant?: ButtonVariant;
-    href?: (row: JsonObject) => string;
-    onClick?: (row: JsonObject) => unknown;
+declare function $$render<T extends JsonObject>(): {
+    props: {
+        actions: DataGridActions<T>;
+        row: T;
+        actionButtonVariant?: ButtonVariant;
+        actionButtonSize?: FormFieldSizeOptions;
+        actionAlign?: "left" | "center" | "right";
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends JsonObject> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-interface Actions {
-    text?: string;
-    type?: 'buttons' | 'dropdown';
-    variant?: ButtonVariant | 'default';
-    size?: FormFieldSizeOptions;
-    align?: 'left' | 'center' | 'right';
-    items: Action[];
+interface $$IsomorphicComponent {
+    new <T extends JsonObject>(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 JsonObject>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-type $$ComponentProps = {
-    actions: Actions;
-    row: JsonObject;
-    actionButtonVariant?: ButtonVariant;
-    actionButtonSize?: FormFieldSizeOptions;
-    actionAlign?: 'left' | 'center' | 'right';
-};
-declare const DataGridActionsCell: import("svelte").Component<$$ComponentProps, {}, "">;
-type DataGridActionsCell = ReturnType<typeof DataGridActionsCell>;
+declare const DataGridActionsCell: $$IsomorphicComponent;
+type DataGridActionsCell<T extends JsonObject> = InstanceType<typeof DataGridActionsCell<T>>;
 export default DataGridActionsCell;

package/dist/tables/data-grid-cell.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T extends JsonObject">
 	import type { Snippet } from 'svelte';
 	import type { ColumnDef, JsonObject } from '../types/data.js';
 	import TableCell from './table-cell.svelte';
@@ -12,10 +12,10 @@
 		formatArrayCell
 	} from './cell-renderers.js';
 
-	interface CellContext<T extends JsonObject = JsonObject> {
-		row: T;
+	interface CellContext<TRow extends JsonObject = JsonObject> {
+		row: TRow;
 		value: unknown;
-		column: ColumnDef<T>;
+		column: ColumnDef<TRow>;
 		rowIndex: number;
 	}
 
@@ -26,10 +26,10 @@
 		cellSnippet = undefined,
 		width = undefined
 	}: {
-		row: JsonObject;
-		column: ColumnDef;
+		row: T;
+		column: ColumnDef<T>;
 		rowIndex: number;
-		cellSnippet?: Snippet<[CellContext]>;
+		cellSnippet?: Snippet<[CellContext<T>]>;
 		width?: number | string;
 	} = $props();
 

package/dist/tables/data-grid-cell.svelte.d.ts

@@ -1,18 +1,37 @@
 import type { Snippet } from 'svelte';
 import type { ColumnDef, JsonObject } from '../types/data.js';
-interface CellContext<T extends JsonObject = JsonObject> {
-    row: T;
-    value: unknown;
-    column: ColumnDef<T>;
-    rowIndex: number;
-}
-type $$ComponentProps = {
-    row: JsonObject;
-    column: ColumnDef;
-    rowIndex: number;
-    cellSnippet?: Snippet<[CellContext]>;
-    width?: number | string;
+declare function $$render<T extends JsonObject>(): {
+    props: {
+        row: T;
+        column: ColumnDef<T>;
+        rowIndex: number;
+        cellSnippet?: Snippet<[{
+            row: T;
+            value: unknown;
+            column: ColumnDef<T>;
+            rowIndex: number;
+        }]>;
+        width?: number | string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
 };
-declare const DataGridCell: import("svelte").Component<$$ComponentProps, {}, "">;
-type DataGridCell = ReturnType<typeof DataGridCell>;
+declare class __sveltets_Render<T extends JsonObject> {
+    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 JsonObject>(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 JsonObject>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataGridCell: $$IsomorphicComponent;
+type DataGridCell<T extends JsonObject> = InstanceType<typeof DataGridCell<T>>;
 export default DataGridCell;

package/dist/tables/data-grid-row.svelte

@@ -1,35 +1,19 @@
-<script lang="ts">
+<script lang="ts" generics="T extends JsonObject">
 	import type { Snippet } from 'svelte';
-	import type { ColumnDef, JsonObject } from '../types/data.js';
+	import type { ColumnDef, JsonObject, DataGridActions } from '../types/data.js';
 	import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
 	import TableRow from './table-row.svelte';
 	import TableSelectionCell from './table-selection-cell.svelte';
 	import DataGridCell from './data-grid-cell.svelte';
 	import DataGridActionsCell from './data-grid-actions-cell.svelte';
 
-	interface CellContext<T extends JsonObject = JsonObject> {
-		row: T;
+	interface CellContext<TRow extends JsonObject = JsonObject> {
+		row: TRow;
 		value: unknown;
-		column: ColumnDef<T>;
+		column: ColumnDef<TRow>;
 		rowIndex: number;
 	}
 
-	interface Action {
-		text: string;
-		variant?: ButtonVariant;
-		href?: (row: JsonObject) => string;
-		onClick?: (row: JsonObject) => unknown;
-	}
-
-	interface Actions {
-		text?: string;
-		type?: 'buttons' | 'dropdown';
-		variant?: ButtonVariant | 'default';
-		size?: FormFieldSizeOptions;
-		align?: 'left' | 'center' | 'right';
-		items: Action[];
-	}
-
 	let {
 		row,
 		rowIndex,
@@ -42,13 +26,13 @@
 		actionButtonSize = 'sm',
 		actionAlign = 'center'
 	}: {
-		row: JsonObject;
+		row: T;
 		rowIndex: number;
-		visibleCols: ColumnDef[];
+		visibleCols: ColumnDef<T>[];
 		hasSelectionCol?: boolean;
 		hasActionCol?: boolean;
-		actions?: Actions;
-		cells?: Record<string, Snippet<[CellContext]>>;
+		actions?: DataGridActions<T>;
+		cells?: Record<string, Snippet<[CellContext<T>]>>;
 		actionButtonVariant?: ButtonVariant;
 		actionButtonSize?: FormFieldSizeOptions;
 		actionAlign?: 'left' | 'center' | 'right';

package/dist/tables/data-grid-row.svelte.d.ts

@@ -1,38 +1,43 @@
 import type { Snippet } from 'svelte';
-import type { ColumnDef, JsonObject } from '../types/data.js';
+import type { ColumnDef, JsonObject, DataGridActions } from '../types/data.js';
 import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
-interface CellContext<T extends JsonObject = JsonObject> {
-    row: T;
-    value: unknown;
-    column: ColumnDef<T>;
-    rowIndex: number;
-}
-interface Action {
-    text: string;
-    variant?: ButtonVariant;
-    href?: (row: JsonObject) => string;
-    onClick?: (row: JsonObject) => unknown;
+declare function $$render<T extends JsonObject>(): {
+    props: {
+        row: T;
+        rowIndex: number;
+        visibleCols: ColumnDef<T>[];
+        hasSelectionCol?: boolean;
+        hasActionCol?: boolean;
+        actions?: DataGridActions<T>;
+        cells?: Record<string, Snippet<[{
+            row: T;
+            value: unknown;
+            column: ColumnDef<T>;
+            rowIndex: number;
+        }]>>;
+        actionButtonVariant?: ButtonVariant;
+        actionButtonSize?: FormFieldSizeOptions;
+        actionAlign?: "left" | "center" | "right";
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends JsonObject> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-interface Actions {
-    text?: string;
-    type?: 'buttons' | 'dropdown';
-    variant?: ButtonVariant | 'default';
-    size?: FormFieldSizeOptions;
-    align?: 'left' | 'center' | 'right';
-    items: Action[];
+interface $$IsomorphicComponent {
+    new <T extends JsonObject>(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 JsonObject>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-type $$ComponentProps = {
-    row: JsonObject;
-    rowIndex: number;
-    visibleCols: ColumnDef[];
-    hasSelectionCol?: boolean;
-    hasActionCol?: boolean;
-    actions?: Actions;
-    cells?: Record<string, Snippet<[CellContext]>>;
-    actionButtonVariant?: ButtonVariant;
-    actionButtonSize?: FormFieldSizeOptions;
-    actionAlign?: 'left' | 'center' | 'right';
-};
-declare const DataGridRow: import("svelte").Component<$$ComponentProps, {}, "">;
-type DataGridRow = ReturnType<typeof DataGridRow>;
+declare const DataGridRow: $$IsomorphicComponent;
+type DataGridRow<T extends JsonObject> = InstanceType<typeof DataGridRow<T>>;
 export default DataGridRow;

package/dist/tables/data-grid-type-example.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	/**
+	 * This file demonstrates the type-safe usage of DataGrid with generics.
+	 * It shows how TypeScript will catch errors at compile time.
+	 */
+	import DataGrid from './data-grid.svelte';
+	import type { ColumnDef, JsonObject, DataGridActions } from '../types/data.js';
+
+	// Define a strongly-typed interface for our data
+	interface Product extends JsonObject {
+		id: number;
+		name: string;
+		price: number;
+		category: string;
+		inStock: boolean;
+		rating: number;
+	}
+
+	// Sample data with the Product type
+	const products: Product[] = [
+		{
+			id: 1,
+			name: 'Laptop',
+			price: 1299.99,
+			category: 'Electronics',
+			inStock: true,
+			rating: 4.5
+		},
+		{
+			id: 2,
+			name: 'Coffee Mug',
+			price: 12.99,
+			category: 'Kitchen',
+			inStock: true,
+			rating: 4.8
+		},
+		{
+			id: 3,
+			name: 'Desk Chair',
+			price: 299.99,
+			category: 'Furniture',
+			inStock: false,
+			rating: 4.2
+		}
+	];
+
+	// Type-safe column definitions
+	// The 'key' property must match a property in the Product interface
+	const columns: ColumnDef<Product>[] = [
+		{ key: 'name', label: 'Product Name', type: 'text', sortable: true },
+		{ key: 'category', label: 'Category', type: 'text', sortable: true },
+		{ key: 'price', label: 'Price', type: 'currency', sortable: true },
+		{ key: 'inStock', label: 'In Stock', type: 'check', align: 'center' },
+		{ key: 'rating', label: 'Rating', type: 'number', sortable: true }
+		// TypeScript error if you try to use a key that doesn't exist:
+		// { key: 'invalidKey', label: 'Invalid', type: 'text' }  // ❌ Error!
+	];
+
+	// Type-safe actions with typed row parameter
+	const actions: DataGridActions<Product> = {
+		type: 'dropdown',
+		items: [
+			{
+				text: 'View Details',
+				href: (row) => {
+					// row is typed as Product, so we get autocomplete and type checking
+					return `/products/${row.id}`;
+				}
+			},
+			{
+				text: 'Edit',
+				onClick: (row) => {
+					// row.name, row.price, etc. are all typed correctly
+					console.log(`Editing ${row.name} (${row.category})`);
+					// row.invalidProperty would be a TypeScript error ❌
+				}
+			},
+			{
+				text: 'Toggle Stock',
+				onClick: (row) => {
+					// Type-safe property access
+					console.log(`Toggling stock for ${row.name}: ${!row.inStock}`);
+				}
+			}
+		]
+	};
+
+	// Type-safe selection handler
+	function handleSelectionChange(selectedProducts: Product[]) {
+		// selectedProducts is typed as Product[], not JsonObject[]
+		selectedProducts.forEach((product) => {
+			console.log(`Selected: ${product.name} - $${product.price}`);
+			// Full type safety and autocomplete here
+		});
+	}
+
+	// Type-safe format function
+	const columnsWithFormat: ColumnDef<Product>[] = [
+		{
+			key: 'name',
+			label: 'Product',
+			type: 'text',
+			format: (value: string, row: Product) => {
+				// row is typed as Product
+				return `${value} (${row.category})`;
+			}
+		},
+		{
+			key: 'price',
+			label: 'Price',
+			type: 'currency',
+			format: (value: number, row: Product) => {
+				// value is typed as number, row is typed as Product
+				const discount = row.inStock ? 0 : 0.1;
+				return `$${(value * (1 - discount)).toFixed(2)}`;
+			}
+		}
+	];
+</script>
+
+<!-- Example 1: Basic type-safe DataGrid -->
+<DataGrid rows={products} cols={columns} />
+
+<!-- Example 2: With actions (type-safe) -->
+<DataGrid rows={products} cols={columns} {actions} />
+
+<!-- Example 3: With selection (type-safe callback) -->
+<DataGrid
+	rows={products}
+	cols={columns}
+	selectionMode="multi"
+	onSelectionChange={handleSelectionChange}
+/>
+
+<!-- Example 4: With custom formatting (type-safe) -->
+<DataGrid rows={products} cols={columnsWithFormat} />
+
+<!--
+  Type Safety Benefits Demonstrated:
+  
+  1. Column keys are validated against the Product interface
+  2. Action callbacks receive typed Product objects
+  3. Selection callbacks receive Product[] arrays
+  4. Format functions have typed parameters
+  5. Link generators have typed row parameters
+  6. Custom components receive typed CellRendererProps<Product>
+  
+  Try these to see TypeScript errors:
+  - Add a column with key: 'nonExistentField'
+  - Access row.invalidProperty in an action callback
+  - Try to assign wrong type to rows prop
+-->

package/dist/tables/data-grid-type-example.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DataGridTypeExample: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataGridTypeExample = InstanceType<typeof DataGridTypeExample>;
+export default DataGridTypeExample;

package/dist/tables/data-grid.svelte

@@ -1,11 +1,16 @@
-<script lang="ts">
+<script lang="ts" generics="T extends JsonObject">
 	import TableCell from './table-cell.svelte';
 	import TableHeaderCell from './table-header-cell.svelte';
 	import TableHeader from './table-header.svelte';
 	import Table from './table.svelte';
 	import TableSelectionHeaderCell from './table-selection-header-cell.svelte';
 	import DataGridRow from './data-grid-row.svelte';
-	import type { ColumnDef, JsonObject, PaginationProperties } from '../types/data.js';
+	import type {
+		ColumnDef,
+		JsonObject,
+		PaginationProperties,
+		DataGridActions
+	} from '../types/data.js';
 	import Empty from '../generic/empty/empty.svelte';
 	import Icon from '../icons/icon.svelte';
 	import Pagination from '../navigation/pagination/pagination.svelte';
@@ -18,29 +23,13 @@
 
 	type PaginationEvent = (pagination: PaginationProperties) => void;
 
-	interface CellContext<T extends JsonObject = JsonObject> {
-		row: T;
+	interface CellContext<TRow extends JsonObject = JsonObject> {
+		row: TRow;
 		value: unknown;
-		column: ColumnDef<T>;
+		column: ColumnDef<TRow>;
 		rowIndex: number;
 	}
 
-	interface Action {
-		text: string;
-		variant?: ButtonVariant;
-		href?: (row: JsonObject) => string;
-		onClick?: (row: JsonObject) => unknown;
-	}
-
-	interface Actions {
-		text?: string;
-		type?: 'buttons' | 'dropdown';
-		variant?: ButtonVariant | 'default';
-		size?: FormFieldSizeOptions;
-		align?: 'left' | 'center' | 'right';
-		items: Action[];
-	}
-
 	let {
 		captionSide = 'top' as 'top' | 'bottom',
 		captionAlign = 'center' as 'left' | 'center' | 'right',
@@ -64,20 +53,20 @@
 	}: {
 		captionSide?: 'top' | 'bottom';
 		captionAlign?: 'left' | 'center' | 'right';
-		rows?: JsonObject[];
-		cols: ColumnDef[];
+		rows?: T[];
+		cols: ColumnDef<T>[];
 		pagination?: PaginationProperties;
-		actions?: Actions;
+		actions?: DataGridActions<T>;
 		stickyHeader?: boolean;
 		enableSorting?: boolean;
 		selectionMode?: 'none' | 'single' | 'multi';
 		rowIdKey?: string;
 		onPageChange?: PaginationEvent | null;
 		onSort?: (column: string, direction: 'asc' | 'desc') => void;
-		onSelectionChange?: (selectedRows: JsonObject[]) => void;
+		onSelectionChange?: (selectedRows: T[]) => void;
 		selectedCount?: number;
 		children?: Snippet;
-		cells?: Record<string, Snippet<[CellContext]>>;
+		cells?: Record<string, Snippet<[CellContext<T>]>>;
 		virtualScroll?: boolean;
 		rowHeight?: number;
 		maxHeight?: string;
@@ -173,7 +162,7 @@
 
 	// Virtual scrolling setup (only when pagination is disabled)
 	let tbodyRef: HTMLElement | null = null;
-	let virtual = $state<ReturnType<typeof useVirtualList<JsonObject>> | null>(null);
+	let virtual = $state<ReturnType<typeof useVirtualList<T>> | null>(null);
 
 	// Initialize virtual list
 	$effect(() => {

package/dist/tables/data-grid.svelte.d.ts

@@ -1,48 +1,51 @@
-import type { ColumnDef, JsonObject, PaginationProperties } from '../types/data.js';
+import type { ColumnDef, JsonObject, PaginationProperties, DataGridActions } from '../types/data.js';
 import type { Snippet } from 'svelte';
-import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
-type PaginationEvent = (pagination: PaginationProperties) => void;
-interface CellContext<T extends JsonObject = JsonObject> {
-    row: T;
-    value: unknown;
-    column: ColumnDef<T>;
-    rowIndex: number;
-}
-interface Action {
-    text: string;
-    variant?: ButtonVariant;
-    href?: (row: JsonObject) => string;
-    onClick?: (row: JsonObject) => unknown;
+declare function $$render<T extends JsonObject>(): {
+    props: {
+        captionSide?: "top" | "bottom";
+        captionAlign?: "left" | "center" | "right";
+        rows?: T[];
+        cols: ColumnDef<T>[];
+        pagination?: PaginationProperties;
+        actions?: DataGridActions<T>;
+        stickyHeader?: boolean;
+        enableSorting?: boolean;
+        selectionMode?: "none" | "single" | "multi";
+        rowIdKey?: string;
+        onPageChange?: ((pagination: PaginationProperties) => void) | null;
+        onSort?: (column: string, direction: "asc" | "desc") => void;
+        onSelectionChange?: (selectedRows: T[]) => void;
+        selectedCount?: number;
+        children?: Snippet;
+        cells?: Record<string, Snippet<[{
+            row: T;
+            value: unknown;
+            column: ColumnDef<T>;
+            rowIndex: number;
+        }]>>;
+        virtualScroll?: boolean;
+        rowHeight?: number;
+        maxHeight?: string;
+    };
+    exports: {};
+    bindings: "selectedCount";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends JsonObject> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "selectedCount";
+    exports(): {};
 }
-interface Actions {
-    text?: string;
-    type?: 'buttons' | 'dropdown';
-    variant?: ButtonVariant | 'default';
-    size?: FormFieldSizeOptions;
-    align?: 'left' | 'center' | 'right';
-    items: Action[];
+interface $$IsomorphicComponent {
+    new <T extends JsonObject>(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 JsonObject>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-type $$ComponentProps = {
-    captionSide?: 'top' | 'bottom';
-    captionAlign?: 'left' | 'center' | 'right';
-    rows?: JsonObject[];
-    cols: ColumnDef[];
-    pagination?: PaginationProperties;
-    actions?: Actions;
-    stickyHeader?: boolean;
-    enableSorting?: boolean;
-    selectionMode?: 'none' | 'single' | 'multi';
-    rowIdKey?: string;
-    onPageChange?: PaginationEvent | null;
-    onSort?: (column: string, direction: 'asc' | 'desc') => void;
-    onSelectionChange?: (selectedRows: JsonObject[]) => void;
-    selectedCount?: number;
-    children?: Snippet;
-    cells?: Record<string, Snippet<[CellContext]>>;
-    virtualScroll?: boolean;
-    rowHeight?: number;
-    maxHeight?: string;
-};
-declare const DataGrid: import("svelte").Component<$$ComponentProps, {}, "selectedCount">;
-type DataGrid = ReturnType<typeof DataGrid>;
+declare const DataGrid: $$IsomorphicComponent;
+type DataGrid<T extends JsonObject> = InstanceType<typeof DataGrid<T>>;
 export default DataGrid;

package/dist/tables/example-status-cell.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
 	import type { CellRendererProps } from '../types/data.js';
-	import Pill from '../generic/pill/pill.svelte';
 
-	type StatusValue = 'active' | 'completed' | 'on-hold';
-
-	let { value }: CellRendererProps = $props();
+	let {
+		row
+	}: CellRendererProps<{
+		name: string;
+	}> = $props();
 </script>
 
-{#if value === 'active'}
-	<Pill variant="positive" compact label="✓ Active" />
-{:else if value === 'completed'}
-	<Pill variant="standard" compact label="✓ Completed" />
-{:else}
-	<Pill variant="negative" compact label="⚠ On Hold" />
-{/if}
+<div>foobar {row.name}</div>

package/dist/tables/example-status-cell.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { CellRendererProps } from '../types/data.js';
-declare const ExampleStatusCell: import("svelte").Component<CellRendererProps<import("../types/data.js").JsonObject>, {}, "">;
+declare const ExampleStatusCell: import("svelte").Component<CellRendererProps<{
+    name: string;
+}>, {}, "">;
 type ExampleStatusCell = ReturnType<typeof ExampleStatusCell>;
 export default ExampleStatusCell;

package/dist/tables/index.d.ts

@@ -9,3 +9,4 @@ export { createTableContext, getTableContext, TableContext } from './table-conte
 export type { TableContextConfig } from './table-context.svelte.js';
 export { formatCell, formatTextCell, formatNumberCell, formatCurrencyCell, formatDateCell, formatDateTimeCell, formatBooleanCell, formatEmailCell, formatArrayCell, formatCustomCell, getCellValue, getCellLink, getCellAlignment, getCellTypeClass, sortRows, compareValues } from './cell-renderers.js';
 export type { ArrayCellResult, CellRenderContext } from './cell-renderers.js';
+export type { CellRendererProps } from '../types/data.js';

package/dist/types/data.d.ts

@@ -95,4 +95,18 @@ export interface SelectionState<T = string | number> {
     selectedIds: Set<T>;
     lastSelectedIndex: number | null;
 }
+export interface DataGridAction<T extends JsonObject = JsonObject> {
+    text: string;
+    variant?: string;
+    href?: (row: T) => string;
+    onClick?: (row: T) => unknown;
+}
+export interface DataGridActions<T extends JsonObject = JsonObject> {
+    text?: string;
+    type?: 'buttons' | 'dropdown';
+    variant?: string;
+    size?: string;
+    align?: 'left' | 'center' | 'right';
+    items: DataGridAction<T>[];
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "1.0.27",
+	"version": "1.0.28",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",