@butinapp/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yann Allard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# @butinapp/ui
+
+The embeddable, theme-portable design system + generic data-view renderer for [Butin](https://butin.app). Pure, prop-driven React — no Electron, no data-fetching.
+
+- `@butinapp/ui/primitives` — `button`, `card`, `input`, `badge`, `sheet`, … + `cn`
+- `@butinapp/ui/dashboard` — `DashboardRenderer` · `Overview` · view-models · charts
+- `@butinapp/ui/shell` — embeddable app scaffolding (`AppShell`, `Sidebar`, `ServiceTabs`, `ThemeToggle`)
+- `@butinapp/ui/i18n` — en/fr label contract + formatters
+- `@butinapp/ui/theme.css` — the shared brand tokens + `@theme` + dark variant
+
+## CSS (Tailwind host)
+
+`@butinapp/ui` ships **no compiled CSS**. Your app's single Tailwind build generates the utilities and imports the tokens:
+
+```css
+@import 'tailwindcss';
+@import '@butinapp/ui/theme.css';
+@source '../node_modules/@butinapp/ui/dist/**/*.js';
+```
+
+`react` / `react-dom` are peer dependencies. MIT licensed.

package/dist/components/badge.d.ts

@@ -0,0 +1,7 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "cyan" | "danger" | "default" | "destructive" | "fuchsia" | "indigo" | "info" | "neutral" | "outline" | "pink" | "purple" | "rose" | "secondary" | "success" | "teal" | "violet" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const Badge: ({ className, variant, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) => React.JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/badge.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+const badgeVariants = cva('inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap shrink-0 gap-1 [&>svg]:size-3 transition-[color,box-shadow] overflow-hidden', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground',
+            destructive: 'border-transparent bg-destructive text-white',
+            outline: 'text-foreground',
+            // Soft-fill tones: low-alpha fill + colored text, dark/light aware. The sentiment set
+            // (neutral/success/warning/danger/info) colors a role:'status' value. The categorical set below sits
+            // in the purple→pink→blue arc — deliberately clear of the sentiment hues — so a role:'category' badge
+            // never reads as good/bad; the renderer assigns one per value.
+            neutral: 'border-transparent bg-muted text-muted-foreground',
+            success: 'border-transparent bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
+            warning: 'border-transparent bg-amber-500/15 text-amber-700 dark:text-amber-300',
+            danger: 'border-transparent bg-red-500/15 text-red-700 dark:text-red-300',
+            info: 'border-transparent bg-sky-500/15 text-sky-700 dark:text-sky-300',
+            indigo: 'border-transparent bg-indigo-500/15 text-indigo-700 dark:text-indigo-300',
+            violet: 'border-transparent bg-violet-500/15 text-violet-700 dark:text-violet-300',
+            purple: 'border-transparent bg-purple-500/15 text-purple-700 dark:text-purple-300',
+            fuchsia: 'border-transparent bg-fuchsia-500/15 text-fuchsia-700 dark:text-fuchsia-300',
+            pink: 'border-transparent bg-pink-500/15 text-pink-700 dark:text-pink-300',
+            cyan: 'border-transparent bg-cyan-500/15 text-cyan-700 dark:text-cyan-300',
+            teal: 'border-transparent bg-teal-500/15 text-teal-700 dark:text-teal-300',
+            rose: 'border-transparent bg-rose-500/15 text-rose-700 dark:text-rose-300'
+        }
+    },
+    defaultVariants: { variant: 'default' }
+});
+const Badge = ({ className, variant, ...props }) => (_jsx("span", { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props }));
+export { Badge, badgeVariants };

package/dist/components/button.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+};
+declare const Button: ({ className, variant, size, asChild, ref, ...props }: ButtonProps) => React.JSX.Element;
+export { Button, buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+const buttonVariants = cva("inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
+            outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+            link: 'text-primary underline-offset-4 hover:underline'
+        },
+        size: {
+            default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+            xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+            lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+            icon: 'size-9'
+        }
+    },
+    defaultVariants: { variant: 'default', size: 'default' }
+});
+const Button = ({ className, variant = 'default', size = 'default', asChild = false, ref, ...props }) => {
+    const Comp = asChild ? Slot.Root : 'button';
+    return _jsx(Comp, { ref: ref, "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
+};
+export { Button, buttonVariants };

package/dist/components/card.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare const Card: ({ className, ...props }: React.ComponentProps<'div'>) => React.JSX.Element;
+declare const CardHeader: ({ className, ...props }: React.ComponentProps<'div'>) => React.JSX.Element;
+declare const CardTitle: ({ className, ...props }: React.ComponentProps<'div'>) => React.JSX.Element;
+declare const CardDescription: ({ className, ...props }: React.ComponentProps<'div'>) => React.JSX.Element;
+declare const CardContent: ({ className, ...props }: React.ComponentProps<'div'>) => React.JSX.Element;
+declare const CardFooter: ({ className, ...props }: React.ComponentProps<'div'>) => React.JSX.Element;
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/dist/components/card.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+const Card = ({ className, ...props }) => (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className), ...props }));
+const CardHeader = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-header", className: cn('flex flex-col gap-1.5 px-6', className), ...props }));
+const CardTitle = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-title", className: cn('leading-none font-semibold', className), ...props }));
+const CardDescription = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+const CardContent = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-content", className: cn('px-6', className), ...props }));
+const CardFooter = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center px-6', className), ...props }));
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,3 @@
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const Checkbox: ({ className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>) => import("react").JSX.Element;

package/dist/components/checkbox.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Check, Minus } from 'lucide-react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+// Themed checkbox (radix). Semantic tokens only, so it inherits the host theme.
+// `checked="indeterminate"` renders a dash (partial selection — e.g. a header that selects all rows).
+export const Checkbox = ({ className, ...props }) => (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground focus-visible:ring-ring/50 size-4 shrink-0 cursor-pointer rounded-[4px] border shadow-sm outline-none transition-colors focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: props.checked === 'indeterminate' ? (_jsx(Minus, { className: "size-3.5", strokeWidth: 3 })) : (_jsx(Check, { className: "size-3.5", strokeWidth: 3 })) }) }));

package/dist/components/combobox.d.ts

@@ -0,0 +1,14 @@
+import type { ConfigOption } from '@butinapp/sdk';
+export interface ComboboxProps {
+    id?: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    options: ConfigOption[];
+    loading?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    emptyHint?: string;
+    onOpen?: () => void;
+    allowFreeText?: boolean;
+}
+export declare const Combobox: ({ id, value, onValueChange, options, loading, disabled, placeholder, emptyHint, onOpen, allowFreeText }: ComboboxProps) => import("react").JSX.Element;

package/dist/components/combobox.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown, Loader2, Search, Sparkles } from 'lucide-react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import { useMemo, useRef, useState } from 'react';
+import { cn } from '../lib/utils.js';
+export const Combobox = ({ id, value, onValueChange, options, loading, disabled, placeholder, emptyHint, onOpen, allowFreeText = true }) => {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const inputRef = useRef(null);
+    const selected = options.find((o) => o.value === value);
+    // What the trigger shows: the matched option's label, else the raw stored value (a cold relaunch shows the
+    // id until the list loads), else the placeholder.
+    const triggerText = selected?.label ?? (value || placeholder);
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q) {
+            return options;
+        }
+        return options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
+    }, [options, query]);
+    // The typed query is usable as a literal value (paste-an-id fallback) when it matches no option's value.
+    const freeText = query.trim();
+    const showFreeText = allowFreeText && freeText.length > 0 && !options.some((o) => o.value === freeText);
+    const pick = (v) => {
+        onValueChange(v);
+        setQuery('');
+        setOpen(false);
+    };
+    const onOpenChange = (next) => {
+        setOpen(next);
+        if (next) {
+            onOpen?.();
+        }
+        else {
+            setQuery('');
+        }
+    };
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: [_jsxs(PopoverPrimitive.Trigger, { id: id, disabled: disabled, className: cn('border-input dark:bg-input/30 flex h-8 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs outline-none', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50'), children: [_jsx("span", { className: cn('truncate', !selected && !value && 'text-muted-foreground'), children: triggerText }), _jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-60" })] }), _jsx(PopoverPrimitive.Portal, { children: _jsxs(PopoverPrimitive.Content, { align: "start", sideOffset: 4, onOpenAutoFocus: (e) => {
+                        e.preventDefault();
+                        inputRef.current?.focus();
+                    }, className: cn('bg-popover text-popover-foreground relative z-50 w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-md border shadow-md', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0'), children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-2.5", children: [_jsx(Search, { className: "size-3.5 shrink-0 opacity-60" }), _jsx("input", { ref: inputRef, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            // Enter takes the first match, else the free-text literal — so "type an id, hit Enter" works.
+                                            if (filtered[0]) {
+                                                pick(filtered[0].value);
+                                            }
+                                            else if (showFreeText) {
+                                                pick(freeText);
+                                            }
+                                        }
+                                    }, placeholder: placeholder ?? 'Search…', className: "placeholder:text-muted-foreground h-9 w-full bg-transparent text-sm outline-none" })] }), _jsxs("div", { className: "max-h-64 overflow-auto p-1", children: [loading ? (_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 px-2 py-3 text-xs", children: [_jsx(Loader2, { className: "size-3.5 animate-spin" }), " Loading\u2026"] })) : filtered.length === 0 && !showFreeText ? (_jsx("div", { className: "text-muted-foreground px-2 py-3 text-xs", children: emptyHint ?? 'No matches.' })) : null, filtered.map((o) => (_jsxs("button", { type: "button", onClick: () => pick(o.value), className: "hover:bg-accent hover:text-accent-foreground flex w-full items-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none", children: [_jsx(Check, { className: cn('mt-0.5 size-4 shrink-0', o.value === value ? 'opacity-100' : 'opacity-0') }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "truncate", children: o.label }), o.recommended ? (_jsxs("span", { className: "text-primary inline-flex items-center gap-0.5 text-[10px] font-medium", children: [_jsx(Sparkles, { className: "size-3" }), " suggested"] })) : null] }), o.description ? (_jsx("span", { className: "text-muted-foreground block truncate text-xs", children: o.description })) : null] })] }, o.value))), showFreeText ? (_jsxs("button", { type: "button", onClick: () => pick(freeText), className: "hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none", children: [_jsx(Check, { className: "size-4 shrink-0 opacity-0" }), _jsxs("span", { className: "truncate", children: ["Use ", _jsx("span", { className: "font-mono", children: freeText })] })] })) : null] })] }) })] }));
+};

package/dist/components/data-table-model.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+export type DataTableColumn<Row> = {
+    key: string;
+    label: string;
+    align?: 'left' | 'right';
+    noWrap?: boolean;
+    grow?: boolean;
+    minWidth?: string;
+    sortable?: boolean;
+    hideable?: boolean;
+    cell?: (row: Row) => ReactNode;
+    sortValue?: (row: Row) => string | number | undefined;
+    exportValue?: (row: Row) => string | number | undefined;
+};
+export type DataTableState = {
+    sort?: {
+        key: string;
+        dir: 'asc' | 'desc';
+    };
+    columnOrder?: string[];
+    columnVisibility?: Record<string, boolean>;
+    pageSize?: number;
+};
+export type ExportFormat = 'csv' | 'json';
+export type ExportBlob = {
+    text: string;
+    mime: string;
+    ext: ExportFormat;
+};
+export declare const formatRows: <Row>(columns: DataTableColumn<Row>[], rows: Row[], format: ExportFormat) => ExportBlob;
+export declare const sortRows: <Row>(rows: Row[], sort: {
+    key: string;
+    dir: 'asc' | 'desc';
+}, columns: DataTableColumn<Row>[]) => Row[];
+export declare const selection: {
+    toggle: (set: Set<string>, id: string) => Set<string>;
+    setGroup: (set: Set<string>, ids: string[], on: boolean) => Set<string>;
+    allOn: (set: Set<string>, ids: string[]) => boolean;
+};
+export declare const normalizeTablePrefs: (prefs: DataTableState | undefined, columnKeys: string[]) => DataTableState;

package/dist/components/data-table-model.js

@@ -0,0 +1,105 @@
+const exportValueOf = (col, row) => col.exportValue ? col.exportValue(row) : row[col.key];
+// One field of a CSV record. Quote when it contains a comma, quote, or newline; double embedded quotes.
+const csvCell = (value) => {
+    if (value === undefined || value === null) {
+        return '';
+    }
+    const s = String(value);
+    return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+};
+// Format the GIVEN columns + rows to a downloadable blob. The caller passes only the columns it wants
+// exported (visible, in display order) and only the rows it wants (current sort/filter, all pages).
+export const formatRows = (columns, rows, format) => {
+    if (format === 'json') {
+        const objects = rows.map((row) => {
+            const o = {};
+            for (const col of columns) {
+                const v = exportValueOf(col, row);
+                o[col.key] = v === undefined ? null : v;
+            }
+            return o;
+        });
+        return { text: JSON.stringify(objects, null, 2), mime: 'application/json', ext: 'json' };
+    }
+    const header = columns.map((c) => csvCell(c.label)).join(',');
+    const body = rows.map((row) => columns.map((c) => csvCell(exportValueOf(c, row))).join(','));
+    return { text: [header, ...body].join('\n'), mime: 'text/csv', ext: 'csv' };
+};
+const sortValueOf = (col, row) => {
+    if (!col) {
+        return undefined;
+    }
+    return col.sortValue ? col.sortValue(row) : row[col.key];
+};
+// Stable, type-aware sort. Numbers compare numerically; everything else compares as a case-insensitive
+// string. undefined/null always sort last regardless of direction. Returns a new array.
+export const sortRows = (rows, sort, columns) => {
+    const col = columns.find((c) => c.key === sort.key);
+    const factor = sort.dir === 'desc' ? -1 : 1;
+    return rows
+        .map((row, i) => ({ row, i }))
+        .sort((a, b) => {
+        const av = sortValueOf(col, a.row);
+        const bv = sortValueOf(col, b.row);
+        if (av === undefined || av === null) {
+            return bv === undefined || bv === null ? a.i - b.i : 1;
+        }
+        if (bv === undefined || bv === null) {
+            return -1;
+        }
+        const cmp = typeof av === 'number' && typeof bv === 'number'
+            ? av - bv
+            : String(av).localeCompare(String(bv), undefined, { sensitivity: 'accent' });
+        return cmp === 0 ? a.i - b.i : cmp * factor;
+    })
+        .map((x) => x.row);
+};
+export const selection = {
+    toggle: (set, id) => {
+        const next = new Set(set);
+        if (next.has(id)) {
+            next.delete(id);
+        }
+        else {
+            next.add(id);
+        }
+        return next;
+    },
+    setGroup: (set, ids, on) => {
+        const next = new Set(set);
+        ids.forEach((id) => (on ? next.add(id) : next.delete(id)));
+        return next;
+    },
+    allOn: (set, ids) => ids.length > 0 && ids.every((id) => set.has(id))
+};
+// Sanitize persisted prefs against the table's CURRENT column keys. A plugin may add/remove/rename
+// columns between releases; stale references are silently dropped so a saved pref never throws or
+// hides/sorts by a column that no longer exists. Never returns undefined fields.
+export const normalizeTablePrefs = (prefs, columnKeys) => {
+    const known = new Set(columnKeys);
+    const out = {};
+    if (prefs?.sort && known.has(prefs.sort.key)) {
+        out.sort = prefs.sort;
+    }
+    if (prefs?.columnOrder) {
+        const order = prefs.columnOrder.filter((k) => known.has(k));
+        if (order.length > 0) {
+            out.columnOrder = order;
+        }
+    }
+    if (prefs?.columnVisibility) {
+        const vis = {};
+        for (const [k, v] of Object.entries(prefs.columnVisibility)) {
+            if (known.has(k)) {
+                vis[k] = v;
+            }
+        }
+        if (Object.keys(vis).length > 0) {
+            out.columnVisibility = vis;
+        }
+    }
+    if (typeof prefs?.pageSize === 'number' && prefs.pageSize > 0) {
+        out.pageSize = prefs.pageSize;
+    }
+    return out;
+};

package/dist/components/data-table.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import { type DataTableColumn, type DataTableState } from './data-table-model.js';
+export type DataTableProps<Row> = {
+    columns: DataTableColumn<Row>[];
+    rows: Row[];
+    getRowId: (row: Row) => string;
+    selection?: Set<string>;
+    onSelectionChange?: (next: Set<string>) => void;
+    grouped?: {
+        by: (row: Row) => string;
+        order?: string[];
+        groupAction?: (key: string, ids: string[], selectedIds: string[]) => ReactNode;
+    };
+    expandable?: (row: Row) => ReactNode | null;
+    paginated?: boolean;
+    pageSizes?: number[];
+    initialState?: DataTableState;
+    onStateChange?: (next: DataTableState) => void;
+    onExport?: (blob: {
+        text: string;
+        mime: string;
+    }, filename: string) => void;
+    exportName?: string;
+    toolbar?: {
+        search?: boolean;
+        columns?: boolean;
+    };
+    toolbarExtra?: ReactNode;
+    actionBar?: ReactNode;
+    emptyLabel?: string;
+    searchFloating?: boolean;
+};
+export declare const DataTable: <Row>({ columns, rows, getRowId, selection, onSelectionChange, grouped, expandable, paginated, pageSizes, initialState, onStateChange, onExport, exportName, toolbar, toolbarExtra, actionBar, emptyLabel, searchFloating }: DataTableProps<Row>) => import("react").JSX.Element;