sheer-ui 0.0.0

package/src/lib/components/data-table/column-helpers.ts

@@ -0,0 +1,97 @@
+import type { ColumnDef, CellContext } from '../../internal/table/types.js';
+import { renderComponent, renderSnippet } from './';
+import { createRawSnippet } from 'svelte';
+import { DataTableCheckbox } from './index';
+import DataTableSortButton from './data-table-sort-button.svelte';
+import type { CheckedState } from '../menu/utils.js';
+
+// `createRawSnippet`'s `render` returns a raw HTML string (like `{@html}`), so any cell text — which is usually
+// user-controlled (names, emails, …) — must be escaped before interpolation to avoid XSS.
+const ESCAPE: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+const escapeHtml = (value: string) => value.replace(/[&<>"']/g, (c) => ESCAPE[c]!);
+
+/**
+ * Creates a selection column with checkbox for selecting rows
+ */
+export function selectColumn<T>(): ColumnDef<T> {
+	return {
+		id: 'select',
+		header: ({ table }) =>
+			renderComponent(DataTableCheckbox, {
+				checked: table.isAllPageRowsSelected,
+				indeterminate: table.isSomePageRowsSelected && !table.isAllPageRowsSelected,
+				onCheckedChange: (value: CheckedState) => table.toggleAllPageRowsSelected(!!value),
+				'aria-label': 'Select all',
+			}),
+		cell: ({ row }) =>
+			renderComponent(DataTableCheckbox, {
+				checked: row.isSelected,
+				onCheckedChange: (value: CheckedState) => row.toggleSelected(!!value),
+				'aria-label': 'Select row',
+			}),
+		enableSorting: false,
+		enableHiding: false,
+	};
+}
+
+/**
+ * Creates a simple text header
+ */
+export function textHeader(label: string) {
+	return () => {
+		const snippet = createRawSnippet(() => ({
+			render: () => `<span>${label}</span>`,
+		}));
+		return renderSnippet(snippet, undefined);
+	};
+}
+
+type TextCellOptions = {
+	bold?: boolean;
+	prefix?: string;
+	suffix?: string;
+};
+
+/**
+ * Creates a text cell renderer
+ */
+export function textCell<T>(key: keyof T | ((row: T) => string | number | null | undefined), options?: TextCellOptions) {
+	return ({ row }: CellContext<T, unknown>) => {
+		const text = typeof key === 'function' ? key(row.original) : (row.original[key] ?? '');
+		const display = `${options?.prefix ?? ''}${text}${options?.suffix ?? ''}`;
+		const className = options?.bold ? 'font-medium' : '';
+		const snippet = createRawSnippet<[string]>((getText) => ({
+			render: () => `<span class="${className}">${escapeHtml(getText())}</span>`,
+		}));
+		return renderSnippet(snippet, display);
+	};
+}
+
+/**
+ * Creates a muted text cell renderer
+ */
+export function mutedCell<T>(
+	key: keyof T | ((row: T) => string | number | null | undefined),
+	options?: { prefix?: string; suffix?: string },
+) {
+	return ({ row }: CellContext<T, unknown>) => {
+		const value = typeof key === 'function' ? key(row.original) : row.original[key];
+		if (value == null) {
+			return renderSnippet(
+				createRawSnippet(() => ({
+					render: () => `<span class="text-muted-foreground">-</span>`,
+				})),
+				undefined,
+			);
+		}
+		return renderSnippet(
+			createRawSnippet<[string]>((getText) => ({
+				render: () => `<span class="text-muted-foreground">${escapeHtml(getText())}</span>`,
+			})),
+			`${options?.prefix ?? ''}${value}${options?.suffix ?? ''}`,
+		);
+	};
+}
+
+// Re-export SortButton as a convenient alias
+export { DataTableSortButton as SortButton };

package/src/lib/components/data-table/data-table-checkbox.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Checkbox } from '../checkbox';
+	import type { ClassValue } from 'svelte/elements';
+	import type { CheckedState } from '../menu/utils.js';
+
+	// The table owns selection state: `checked`/`indeterminate` are derived from the table
+	// (getIsSelected / getIsAllPageRowsSelected) and clicks flow out via `onCheckedChange`.
+	// So this is a *controlled* checkbox — passing the values one-way. Using `bind:` here makes
+	// the checkbox manage its own copy, which desyncs from the table (and trips
+	// ownership_invalid_mutation, since the table passes these by spread, not `bind:`).
+	let {
+		checked = false,
+		indeterminate = false,
+		onCheckedChange,
+		...restProps
+	}: {
+		checked?: boolean;
+		indeterminate?: boolean;
+		onCheckedChange?: (checked: CheckedState) => void;
+		'aria-label'?: string;
+		class?: ClassValue;
+	} = $props();
+</script>
+
+<Checkbox {checked} {indeterminate} {onCheckedChange} {...restProps} />

package/src/lib/components/data-table/data-table-sort-button.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import ArrowUpDownIcon from "@lucide/svelte/icons/arrow-up-down";
+	import { Button } from '../button';
+
+	let {
+		label,
+		variant = "ghost",
+		...restProps
+	}: ComponentProps<typeof Button> & { label: string } = $props();
+</script>
+
+<Button {variant} {...restProps}>
+	{label}
+	<ArrowUpDownIcon class="ms-2 size-4" />
+</Button>

package/src/lib/components/data-table/flex-render.svelte

@@ -0,0 +1,42 @@
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "../../internal/table/types.js";
+	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers";
+	import type { Attachment } from "svelte/attachments";
+	type Props = {
+		/** The cell or header field of the current cell's column definition. */
+		content?: TContext extends HeaderContext<TData, TValue>
+			? ColumnDefTemplate<HeaderContext<TData, TValue>>
+			: TContext extends CellContext<TData, TValue>
+				? ColumnDefTemplate<CellContext<TData, TValue>>
+				: never;
+		/** The result of the `getContext()` function of the header or cell */
+		context: TContext;
+
+		/** Used to pass attachments that can't be gotten through context */
+		attach?: Attachment;
+	};
+
+	let { content, context, attach }: Props = $props();
+</script>
+
+{#if typeof content === "string"}
+	{content}
+{:else if content instanceof Function}
+	<!-- It's unlikely that a CellContext will be passed to a Header -->
+	<!-- $derived is load-bearing: a plain declaration tag evaluates once, so signals read inside
+	     content() (e.g. a select-all header reading table.isAllPageRowsSelected) would go untracked. -->
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	{const result = $derived(content(context as any))}
+	{#if result instanceof RenderComponentConfig}
+		{const { component: Component, props } = $derived(result)}
+		<Component {...props} {attach} />
+	{:else if result instanceof RenderSnippetConfig}
+		{const { snippet, params } = $derived(result)}
+		{@render snippet(params)}
+	{:else}
+		{result}
+	{/if}
+{/if}

package/src/lib/components/data-table/index.ts

@@ -0,0 +1,29 @@
+export { default as FlexRender } from "./flex-render.svelte";
+export { renderComponent, renderSnippet } from "./render-helpers";
+export { Cell, Column, createDataTable, DataTable, Header, Row } from "../../internal/table/index.js";
+export type {
+	CellContext,
+	ColumnDef,
+	ColumnDefTemplate,
+	ColumnFilter,
+	ColumnSort,
+	DataTableOptions,
+	FilterFn,
+	HeaderContext,
+	HeaderGroup,
+} from "../../internal/table/index.js";
+
+export { default as DataTableCheckbox } from "./data-table-checkbox.svelte";
+export { default as DataTableSortButton } from "./data-table-sort-button.svelte";
+export { selectColumn, textHeader, textCell, mutedCell, SortButton } from "./column-helpers";
+
+export { default as DataTableCell } from "./table-cell.svelte";
+export { default as DataTableToolbar } from "./table-toolbar.svelte";
+export { default as DataTableViewOptions } from "./table-view-options.svelte";
+export { default as DataTableFacetedFilter } from "./table-faceted-filter.svelte";
+export { default as DataTablePagination } from "./table-pagination.svelte";
+export { default as DataTableColumnHeader } from "./table-column-header.svelte";
+export { default as DataTableRowActions } from "./table-row-actions.svelte";
+export { default as DataTableStatusCell } from "./table-status-cell.svelte";
+export { default as DataTablePriorityCell } from "./table-priority-cell.svelte";
+export { default as DataTableTitleCell } from "./table-title-cell.svelte";

package/src/lib/components/data-table/render-helpers.ts

@@ -0,0 +1,105 @@
+import type { Component, ComponentProps, Snippet } from 'svelte';
+
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export class RenderComponentConfig<TComponent extends Component> {
+	component: TComponent;
+	props: ComponentProps<TComponent> | Record<string, never>;
+	constructor(component: TComponent, props: ComponentProps<TComponent> | Record<string, never> = {}) {
+		this.component = component;
+		this.props = props;
+	}
+}
+
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export class RenderSnippetConfig<TProps> {
+	snippet: Snippet<[TProps]>;
+	params: TProps;
+	constructor(snippet: Snippet<[TProps]>, params: TProps) {
+		this.snippet = snippet;
+		this.params = params;
+	}
+}
+
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export const renderComponent = <
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	T extends Component<any>,
+	Props extends ComponentProps<T>,
+>(component: T, props: Props = {} as Props) => new RenderComponentConfig(component, props);
+
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export const renderSnippet = <TProps>(snippet: Snippet<[TProps]>, params: TProps = {} as TProps) =>
+	new RenderSnippetConfig(snippet, params);

package/src/lib/components/data-table/table-cell.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/data-table/table-column-header.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" generics="TData">
+	import * as DropdownMenu from '../dropdown-menu';
+	import { Button } from '../button';
+	import type { Column } from '../../internal/table/index.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
+	import ArrowDownIcon from '@lucide/svelte/icons/arrow-down';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import EyeOffIcon from '@lucide/svelte/icons/eye-off';
+
+	let { column, title, class: className, ...restProps }: { column: Column<TData>; title: string } & HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+{#if !column?.canSort}
+	<div class={className} {...restProps}>
+		{title}
+	</div>
+{:else}
+	<div class="flex items-center" {...restProps}>
+		{#snippet item(onclick: () => void, Icon: typeof ArrowUpIcon, label: string)}
+			<DropdownMenu.Item {onclick}>
+				<Icon class="text-muted-foreground/70 me-2 size-3.5" />
+				{label}
+			</DropdownMenu.Item>
+		{/snippet}
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Button {...props} variant="ghost" size="sm" class="data-open:bg-accent -ms-3">
+						<span>
+							{title}
+						</span>
+						{#if column.isSorted === 'desc'}
+							<ArrowDownIcon />
+						{:else if column.isSorted === 'asc'}
+							<ArrowUpIcon />
+						{:else}
+							<ChevronsUpDownIcon />
+						{/if}
+					</Button>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content align="start">
+				{@render item(() => column.toggleSorting(false), ArrowUpIcon, 'Asc')}
+				{@render item(() => column.toggleSorting(true), ArrowDownIcon, 'Desc')}
+				<DropdownMenu.Separator />
+				{@render item(() => column.toggleVisibility(false), EyeOffIcon, 'Hide')}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</div>
+{/if}

package/src/lib/components/data-table/table-faceted-filter.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" generics="TData, TValue">
+	import CirclePlusIcon from '@lucide/svelte/icons/circle-plus';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import type { Column } from '../../internal/table/index.js';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { Popover } from '../popover';
+	import * as Command from '../command';
+	import { Badge } from '../badge';
+	import { Button } from '../button';
+	import { Separator } from '../separator';
+	import type { Component } from 'svelte';
+
+	let {
+		column,
+		title,
+		options,
+		disabled,
+	}: {
+		column: Column<TData, TValue>;
+		title: string;
+		options: {
+			label: string;
+			value: string;
+			icon?: Component;
+		}[];
+		disabled?: boolean;
+	} = $props();
+
+	const facets = $derived(column?.facetedUniqueValues);
+	const selectedValues = $derived(new SvelteSet(column?.filterValue as string[]));
+</script>
+
+<Popover.Root>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="outline" size="sm" class="border-dashed" {disabled}>
+				<CirclePlusIcon />
+				{title}
+				{#if selectedValues.size > 0}
+					<Separator orientation="vertical" class="mx-2 h-4" />
+					<Badge variant="secondary" class="rounded-md! px-1! font-normal! lg:hidden">
+						{selectedValues.size}
+					</Badge>
+					<div class="hidden space-x-1 lg:flex">
+						{#if selectedValues.size > 2}
+							<Badge variant="secondary" class="rounded-md! px-1! font-normal!">
+								{selectedValues.size} selected
+							</Badge>
+						{:else}
+							{#each options.filter((opt) => selectedValues.has(opt.value)) as option (option)}
+								<Badge variant="secondary" class="rounded-md! px-1! font-normal!">
+									{option.label}
+								</Badge>
+							{/each}
+						{/if}
+					</div>
+				{/if}
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content class="w-50! p-0!" align="start">
+		<Command.Root>
+			<Command.Input placeholder={title} />
+			<Command.List>
+				<Command.Empty>No results found.</Command.Empty>
+				<Command.Group>
+					{#each options as option (option)}
+						{const isSelected = $derived(selectedValues.has(option.value))}
+						<Command.Item
+							onSelect={() => {
+								if (isSelected) {
+									selectedValues.delete(option.value);
+								} else {
+									selectedValues.add(option.value);
+								}
+								const filterValues = Array.from(selectedValues);
+								column?.setFilterValue(filterValues.length ? filterValues : undefined);
+							}}>
+							<div
+								class={[
+									'me-2 grid size-4 place-items-center rounded-md border border-primary',
+									isSelected ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible',
+								]}>
+								<CheckIcon class="size-4" />
+							</div>
+							{#if option.icon}
+								{const Icon = option.icon}
+								<Icon class="text-muted-foreground" />
+							{/if}
+
+							<span>{option.label}</span>
+							{#if facets?.get(option.value)}
+								<span class="ms-auto grid size-4 place-items-center font-mono text-xs">
+									{facets.get(option.value)}
+								</span>
+							{/if}
+						</Command.Item>
+					{/each}
+				</Command.Group>
+				{#if selectedValues.size > 0}
+					<Command.Separator />
+					<Command.Group>
+						<Command.Item onSelect={() => column?.setFilterValue(undefined)} class="justify-center text-center">Clear filters</Command.Item>
+					</Command.Group>
+				{/if}
+			</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>

package/src/lib/components/data-table/table-pagination.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" generics="TData">
+	import type { DataTable } from '../../internal/table/index.js';
+	import * as Select from '../select/index';
+	import { Button } from '../button';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import ChevronsLeftIcon from '@lucide/svelte/icons/chevrons-left';
+	import ChevronsRightIcon from '@lucide/svelte/icons/chevrons-right';
+
+	let {
+		table,
+	}: {
+		table: DataTable<TData>;
+		showSelected?: boolean;
+	} = $props();
+</script>
+
+<div class="flex items-center justify-between px-2">
+	<div class="text-muted-foreground flex-1 text-sm">
+		{table.filteredSelectedRows.length} of
+		{table.filteredRows.length} row(s) selected.
+	</div>
+	{#if table.filteredRows.length > table.pagination.pageSize}
+		<div class="flex items-center space-x-6 lg:space-x-8">
+			<div class="flex items-center space-x-2">
+				<p class="text-sm font-medium">Rows per page</p>
+				<Select.Root
+					class="w-17.5!"
+					side="top"
+					value={`${table.pagination.pageSize}`}
+					onchange={(e) => table.setPageSize(Number(e.currentTarget.value))}>
+					{#each [10, 20, 30, 40, 50] as pageSize (pageSize)}
+						<Select.Option value={`${pageSize}`}>{pageSize}</Select.Option>
+					{/each}
+				</Select.Root>
+			</div>
+			<div class="grid w-25 place-items-center text-sm font-medium">
+				Page {table.pagination.pageIndex + 1} of {table.pageCount}
+			</div>
+			{#snippet navBtn(onclick: () => void, disabled: boolean, label: string, Icon: typeof ChevronLeftIcon, lgOnly = false)}
+				<Button variant="outline" size="icon-sm" class={lgOnly ? 'max-lg:hidden' : undefined} {onclick} {disabled}>
+					<span class="sr-only">{label}</span>
+					<Icon />
+				</Button>
+			{/snippet}
+			<div class="flex items-center space-x-2">
+				{@render navBtn(() => table.setPageIndex(0), !table.canPreviousPage, 'Go to first page', ChevronsLeftIcon, true)}
+				{@render navBtn(() => table.previousPage(), !table.canPreviousPage, 'Go to previous page', ChevronLeftIcon)}
+				{@render navBtn(() => table.nextPage(), !table.canNextPage, 'Go to next page', ChevronRightIcon)}
+				{@render navBtn(() => table.setPageIndex(table.pageCount - 1), !table.canNextPage, 'Go to last page', ChevronsRightIcon, true)}
+			</div>
+		</div>
+	{/if}
+</div>

package/src/lib/components/data-table/table-priority-cell.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	let {
+		value,
+		options,
+	}: {
+		value: string;
+		options: Array<{ value: string; label: string; icon?: Component }>;
+	} = $props();
+
+	const match = $derived(options.find((o) => o.value === value));
+</script>
+
+{#if match}
+	<div class="flex items-center">
+		{#if match.icon}
+			<match.icon class="text-muted-foreground me-2 size-4" />
+		{/if}
+		<span>{match.label}</span>
+	</div>
+{/if}

package/src/lib/components/data-table/table-row-actions.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" generics="TData">
+	import type { Row } from '../../internal/table/index.js';
+	import type { Snippet } from 'svelte';
+	import * as DropdownMenu from '../dropdown-menu';
+	import { Button } from '../button';
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+
+	let {
+		row,
+		children,
+	}: {
+		row: Row<TData>;
+		children: Snippet<[{ row: Row<TData>; original: TData }]>;
+	} = $props();
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="ghost" size="icon-sm" class="data-open:bg-muted">
+				<EllipsisIcon />
+				<span class="sr-only">Open Menu</span>
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content class="w-40" align="end">
+		{@render children({ row, original: row.original })}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/src/lib/components/data-table/table-status-cell.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { Component } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	let {
+		value,
+		options,
+		href,
+		class: className,
+	}: {
+		value: string;
+		options: Array<{ value: string; label: string; icon?: Component; iconClass?: ClassValue }>;
+		href?: string;
+		class?: ClassValue;
+	} = $props();
+
+	const match = $derived(options.find((o) => o.value === value));
+</script>
+
+{#if match}
+	{const inner = $derived({ iconClass: join(match.iconClass ?? 'text-muted-foreground'), label: match.label })}
+	{#if href}
+		<a {href} class="flex w-25 items-center hover:underline {join(className)}">
+			{#if match.icon}<match.icon class="{inner.iconClass} me-2 size-4 shrink-0" />{/if}
+			<span>{inner.label}</span>
+		</a>
+	{:else}
+		<div class="flex w-25 items-center {join(className)}">
+			{#if match.icon}<match.icon class="{inner.iconClass} me-2 size-4 shrink-0" />{/if}
+			<span>{inner.label}</span>
+		</div>
+	{/if}
+{/if}

package/src/lib/components/data-table/table-title-cell.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Badge } from '../badge';
+
+	let {
+		value,
+		labelValue,
+		labels,
+	}: {
+		value: string;
+		labelValue?: string;
+		labels?: Array<{ value: string; label: string }>;
+	} = $props();
+
+	const label = $derived(labels?.find((l) => l.value === labelValue));
+</script>
+
+<div class="flex space-x-2">
+	{#if label}
+		<Badge variant="outline">{label.label}</Badge>
+	{/if}
+	<span class="max-w-125 truncate font-medium">
+		{value}
+	</span>
+</div>