@cronus-ui/ui 0.6.0

package/dist/components/currency-input.d.ts

@@ -0,0 +1,86 @@
+import { type InputHTMLAttributes } from "react";
+/**
+ * A premium, payments-grade money input. A compact currency selector (symbol +
+ * ISO code, e.g. `R$ BRL`) is fused to an end-aligned numeric field that
+ * live-formats thousands separators and decimals **as the user types**, driven
+ * entirely by `Intl.NumberFormat` for the active currency's locale.
+ *
+ * ## Value model
+ * The field is a **minor-unit accumulator** (the pattern used by Wise / Revolut /
+ * Cash App): each digit shifts the amount in from the right, so typing `1 2 3 4 5`
+ * with 2-decimal money reads `0,01 → 0,12 → 1,23 → 12,34 → 123,45`. Consumers
+ * always receive the value in **minor units** (integer cents) via
+ * `onValueChange(cents, meta)` — never a lossy float — with the display string,
+ * major-unit float, currency and locale carried in `meta`.
+ *
+ * ## Interaction
+ * - **Caret stability:** the caret is pinned to the end after every edit, so
+ *   grouping separators appearing/disappearing never make it jump.
+ * - **Backspace** removes the last digit; deleting through zero clears the field.
+ * - **Paste** is treated as its digit stream, so `1.234,56` pastes as `123456`.
+ * - **max** is a hard live ceiling (you can't type past it); **min** is enforced
+ *   on blur so in-progress entries below it aren't fought mid-type.
+ * - **disabled / invalid** dim the group and set `aria-invalid`.
+ *
+ * ## Performance / a11y
+ * - `Intl.NumberFormat` instances are cached per `locale:fractionDigits`; caret
+ *   pinning runs in a single `useLayoutEffect` — no timers, intervals, or RAF, so
+ *   there is nothing to leak on unmount.
+ * - The selector is a real Radix dropdown (roving focus, `Esc`, typeahead); the
+ *   numeric field forwards its ref and takes an accessible name. All transitions
+ *   degrade under `prefers-reduced-motion`.
+ */
+/** A currency the selector can switch between. */
+export interface CurrencyOption {
+    /** ISO 4217 code, e.g. `"BRL"`. Also the value passed to `onCurrencyChange`. */
+    code: string;
+    /** Symbol shown in the selector, e.g. `"R$"`, `"US$"`, `"€"`. */
+    symbol: string;
+    /** BCP-47 locale used to format grouping + decimals, e.g. `"pt-BR"`. */
+    locale: string;
+    /** Full name shown on the dropdown row, e.g. `"Brazilian Real"`. */
+    label?: string;
+    /** Minor-unit exponent (2 for cents, 0 for yen). Auto-derived from `Intl` when omitted. */
+    fractionDigits?: number;
+}
+/** Formatting context handed back alongside every value/currency change. */
+export interface CurrencyInputMeta {
+    /** Active ISO 4217 currency code. */
+    currency: string;
+    /** The string rendered in the field, e.g. `"1.234,56"`. */
+    formatted: string;
+    /** The amount in major units (e.g. `1234.56`), or `null` when empty. */
+    float: number | null;
+    /** Locale used for formatting. */
+    locale: string;
+}
+export interface CurrencyInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "min" | "max" | "type"> {
+    /** Controlled amount in **minor units** (integer cents). Use `null` for empty. Pair with `onValueChange`. */
+    value?: number | null;
+    /** Initial amount in minor units for uncontrolled usage. Defaults to `null` (empty). */
+    defaultValue?: number | null;
+    /** Fired on every edit with the amount in **minor units** (`null` when cleared) plus formatting `meta`. */
+    onValueChange?: (value: number | null, meta: CurrencyInputMeta) => void;
+    /** Selectable currencies. Defaults to BRL, USD and EUR. A single entry renders a static (non-interactive) prefix. */
+    currencies?: CurrencyOption[];
+    /** Controlled active currency code. Pair with `onCurrencyChange`. */
+    currency?: string;
+    /** Initial active currency code for uncontrolled usage. Defaults to the first `currencies` entry. */
+    defaultCurrency?: string;
+    /** Fired when the user picks a different currency (also re-fires `onValueChange` with the new `meta`). */
+    onCurrencyChange?: (code: string, meta: CurrencyInputMeta) => void;
+    /** Lower clamp in minor units, enforced on blur. Defaults to `0` (no negatives). */
+    min?: number;
+    /** Upper clamp in minor units — a hard live ceiling the value can never be typed past. */
+    max?: number;
+    /** Marks the field invalid (red border + `aria-invalid`). */
+    invalid?: boolean;
+    /** Disables the field and the currency selector. */
+    disabled?: boolean;
+    /** Accessible name for the currency selector button. @default "Select currency" */
+    selectorLabel?: string;
+    /** Extra classes for the underlying `<input>`. */
+    inputClassName?: string;
+}
+export declare const CurrencyInput: import("react").ForwardRefExoticComponent<CurrencyInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=currency-input.d.ts.map

package/dist/components/currency-input.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+/** ISO 4217 set covering the currencies a payments field actually sees. */
+const DEFAULT_CURRENCIES = [
+    { code: "BRL", symbol: "R$", locale: "pt-BR", label: "Brazilian Real" },
+    { code: "USD", symbol: "US$", locale: "en-US", label: "US Dollar" },
+    { code: "EUR", symbol: "€", locale: "de-DE", label: "Euro" },
+    { code: "GBP", symbol: "£", locale: "en-GB", label: "British Pound" },
+    { code: "JPY", symbol: "¥", locale: "ja-JP", label: "Japanese Yen", fractionDigits: 0 },
+    { code: "CNY", symbol: "¥", locale: "zh-CN", label: "Chinese Yuan" },
+    { code: "INR", symbol: "₹", locale: "en-IN", label: "Indian Rupee" },
+    { code: "AUD", symbol: "A$", locale: "en-AU", label: "Australian Dollar" },
+    { code: "CAD", symbol: "CA$", locale: "en-CA", label: "Canadian Dollar" },
+    { code: "CHF", symbol: "CHF", locale: "de-CH", label: "Swiss Franc" },
+    { code: "MXN", symbol: "MX$", locale: "es-MX", label: "Mexican Peso" },
+    { code: "ARS", symbol: "AR$", locale: "es-AR", label: "Argentine Peso" },
+    { code: "CLP", symbol: "CL$", locale: "es-CL", label: "Chilean Peso", fractionDigits: 0 },
+    { code: "COP", symbol: "CO$", locale: "es-CO", label: "Colombian Peso" },
+    { code: "PEN", symbol: "S/", locale: "es-PE", label: "Peruvian Sol" },
+    { code: "UYU", symbol: "$U", locale: "es-UY", label: "Uruguayan Peso" },
+    { code: "PYG", symbol: "₲", locale: "es-PY", label: "Paraguayan Guarani", fractionDigits: 0 },
+    { code: "BOB", symbol: "Bs", locale: "es-BO", label: "Bolivian Boliviano" },
+    { code: "KRW", symbol: "₩", locale: "ko-KR", label: "South Korean Won", fractionDigits: 0 },
+    { code: "HKD", symbol: "HK$", locale: "zh-HK", label: "Hong Kong Dollar" },
+    { code: "SGD", symbol: "S$", locale: "en-SG", label: "Singapore Dollar" },
+    { code: "NZD", symbol: "NZ$", locale: "en-NZ", label: "New Zealand Dollar" },
+    { code: "SEK", symbol: "kr", locale: "sv-SE", label: "Swedish Krona" },
+    { code: "NOK", symbol: "kr", locale: "nb-NO", label: "Norwegian Krone" },
+    { code: "DKK", symbol: "kr", locale: "da-DK", label: "Danish Krone" },
+    { code: "PLN", symbol: "zł", locale: "pl-PL", label: "Polish Zloty" }, // contract-ok: BCP-47 locale, not padding
+    { code: "CZK", symbol: "Kč", locale: "cs-CZ", label: "Czech Koruna" },
+    { code: "HUF", symbol: "Ft", locale: "hu-HU", label: "Hungarian Forint", fractionDigits: 0 },
+    { code: "RON", symbol: "lei", locale: "ro-RO", label: "Romanian Leu" },
+    { code: "TRY", symbol: "₺", locale: "tr-TR", label: "Turkish Lira" },
+    { code: "ZAR", symbol: "R", locale: "en-ZA", label: "South African Rand" },
+    { code: "NGN", symbol: "₦", locale: "en-NG", label: "Nigerian Naira" },
+    { code: "EGP", symbol: "E£", locale: "ar-EG", label: "Egyptian Pound" },
+    { code: "AED", symbol: "د.إ", locale: "ar-AE", label: "UAE Dirham" },
+    { code: "SAR", symbol: "﷼", locale: "ar-SA", label: "Saudi Riyal" },
+    { code: "ILS", symbol: "₪", locale: "he-IL", label: "Israeli Shekel" },
+    { code: "THB", symbol: "฿", locale: "th-TH", label: "Thai Baht" },
+    { code: "IDR", symbol: "Rp", locale: "id-ID", label: "Indonesian Rupiah" },
+    { code: "MYR", symbol: "RM", locale: "ms-MY", label: "Malaysian Ringgit" },
+    { code: "PHP", symbol: "₱", locale: "en-PH", label: "Philippine Peso" },
+    { code: "VND", symbol: "₫", locale: "vi-VN", label: "Vietnamese Dong", fractionDigits: 0 },
+    { code: "TWD", symbol: "NT$", locale: "zh-TW", label: "New Taiwan Dollar" },
+    { code: "PKR", symbol: "₨", locale: "en-PK", label: "Pakistani Rupee" },
+    { code: "BDT", symbol: "৳", locale: "bn-BD", label: "Bangladeshi Taka" },
+];
+/** The active option for `code`, always resolving to a real currency. */
+function resolveActive(list, code) {
+    return list.find((c) => c.code === code) ?? list[0] ?? DEFAULT_CURRENCIES[0];
+}
+/** Cap digits well under `Number.MAX_SAFE_INTEGER` so `Number(digits)` stays exact. */
+const MAX_DIGITS = 15;
+const FORMATTER_CACHE = new Map();
+function getFormatter(locale, fractionDigits) {
+    const key = `${locale}:${fractionDigits}`;
+    let fmt = FORMATTER_CACHE.get(key);
+    if (!fmt) {
+        fmt = new Intl.NumberFormat(locale, {
+            minimumFractionDigits: fractionDigits,
+            maximumFractionDigits: fractionDigits,
+            useGrouping: true,
+        });
+        FORMATTER_CACHE.set(key, fmt);
+    }
+    return fmt;
+}
+/** Resolve the minor-unit exponent, honouring an explicit override then `Intl`. */
+function resolveFractionDigits(option) {
+    if (option.fractionDigits !== undefined)
+        return option.fractionDigits;
+    try {
+        return (new Intl.NumberFormat(option.locale, {
+            style: "currency",
+            currency: option.code,
+        }).resolvedOptions().maximumFractionDigits ?? 2);
+    }
+    catch {
+        return 2;
+    }
+}
+function clampCents(cents, min, max) {
+    let next = cents;
+    if (min !== undefined)
+        next = Math.max(next, min);
+    if (max !== undefined)
+        next = Math.min(next, max);
+    return next;
+}
+function formatCents(cents, fmt, fractionDigits) {
+    return fmt.format(cents / 10 ** fractionDigits);
+}
+export const CurrencyInput = forwardRef(({ value: valueProp, defaultValue = null, onValueChange, currencies, currency: currencyProp, defaultCurrency, onCurrencyChange, min = 0, max, invalid = false, disabled = false, selectorLabel = "Select currency", className, inputClassName, placeholder, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, onFocus, onBlur, name, ...props }, ref) => {
+    const list = currencies && currencies.length > 0 ? currencies : DEFAULT_CURRENCIES;
+    // ---- currency (controlled / uncontrolled) ----
+    const isCurrencyControlled = currencyProp !== undefined;
+    const [uncontrolledCurrency, setUncontrolledCurrency] = useState(() => defaultCurrency ?? (list[0] ?? DEFAULT_CURRENCIES[0]).code);
+    const activeCode = isCurrencyControlled ? currencyProp : uncontrolledCurrency;
+    const active = useMemo(() => resolveActive(list, activeCode), [list, activeCode]);
+    const fractionDigits = useMemo(() => resolveFractionDigits(active), [active]);
+    const formatter = getFormatter(active.locale, fractionDigits);
+    // ---- amount in minor units (controlled / uncontrolled) ----
+    const isValueControlled = valueProp !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const cents = isValueControlled ? valueProp : uncontrolledValue;
+    // The visible string is a pure function of the value — no separate text state
+    // is needed because the accumulator never has partial ("1.") intermediates.
+    const display = cents == null ? "" : formatCents(cents, formatter, fractionDigits);
+    const zeroHint = formatCents(0, formatter, fractionDigits);
+    const inputRef = useRef(null);
+    const pinCaret = useRef(false);
+    const setRef = useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    // Keep the caret at the very end after a keystroke reformats the string, so
+    // grouping separators shifting around never yank it mid-word.
+    useLayoutEffect(() => {
+        if (!pinCaret.current)
+            return;
+        pinCaret.current = false;
+        const el = inputRef.current;
+        if (el && document.activeElement === el) {
+            // After render `el.value === display`, so pinning to `display.length`
+            // parks the caret at the very end (and keeps `display` a real dep).
+            el.setSelectionRange(display.length, display.length);
+        }
+    }, [display]);
+    const commitValue = useCallback((nextCents) => {
+        if (!isValueControlled)
+            setUncontrolledValue(nextCents);
+        onValueChange?.(nextCents, {
+            currency: active.code,
+            formatted: nextCents == null ? "" : formatCents(nextCents, formatter, fractionDigits),
+            float: nextCents == null ? null : nextCents / 10 ** fractionDigits,
+            locale: active.locale,
+        });
+    }, [isValueControlled, onValueChange, active, formatter, fractionDigits]);
+    const handleChange = useCallback((event) => {
+        const el = event.target;
+        const digits = el.value.replace(/[^0-9]/g, "");
+        const pinEnd = () => {
+            el.value = display;
+            el.setSelectionRange(display.length, display.length);
+        };
+        // Overflow guard — reject and restore the canonical string.
+        if (digits.length > MAX_DIGITS) {
+            pinEnd();
+            return;
+        }
+        const prevDigits = display.replace(/[^0-9]/g, "");
+        const deleting = digits.length < prevDigits.length;
+        let nextCents;
+        if (digits === "") {
+            nextCents = null;
+        }
+        else {
+            // Live editing only clamps the ceiling; the floor is applied on blur so
+            // values on their way up to `min` aren't fought mid-type.
+            nextCents = clampCents(Number(digits), undefined, max);
+            // Backspacing a lone/leading zero clears the field instead of sticking.
+            if (deleting && nextCents === 0)
+                nextCents = null;
+        }
+        // No net change → React won't rewrite the DOM value, so force the
+        // canonical string + caret back ourselves (handles ceiling + leading 0s).
+        if (nextCents === cents) {
+            pinEnd();
+            return;
+        }
+        pinCaret.current = true;
+        commitValue(nextCents);
+    }, [display, cents, max, commitValue]);
+    const handleBlur = useCallback((event) => {
+        if (cents != null) {
+            const clamped = clampCents(cents, min, max);
+            if (clamped !== cents)
+                commitValue(clamped);
+        }
+        onBlur?.(event);
+    }, [cents, min, max, commitValue, onBlur]);
+    const handleCurrencyChange = useCallback((code) => {
+        if (code === activeCode)
+            return;
+        if (!isCurrencyControlled)
+            setUncontrolledCurrency(code);
+        const next = resolveActive(list, code);
+        const nextFraction = resolveFractionDigits(next);
+        const nextFmt = getFormatter(next.locale, nextFraction);
+        const meta = {
+            currency: next.code,
+            formatted: cents == null ? "" : formatCents(cents, nextFmt, nextFraction),
+            float: cents == null ? null : cents / 10 ** nextFraction,
+            locale: next.locale,
+        };
+        onCurrencyChange?.(code, meta);
+        // Surface the currency swap to value listeners too — the integer amount is
+        // unchanged, but the active currency/locale in `meta` now differs.
+        onValueChange?.(cents ?? null, meta);
+    }, [activeCode, isCurrencyControlled, list, cents, onCurrencyChange, onValueChange]);
+    const isInvalid = invalid || ariaInvalid === true || ariaInvalid === "true";
+    const singleCurrency = list.length <= 1;
+    return (_jsxs("div", { "data-slot": "currency-input", "data-disabled": disabled ? "" : undefined, "data-invalid": isInvalid ? "" : undefined, className: cn("flex h-10 w-full items-stretch overflow-hidden rounded-lg border border-border bg-surface-inset text-fg shadow-xs", "transition-[border-color,box-shadow] duration-150 ease-[var(--ease-out-quart)] motion-reduce:transition-none", "focus-within:border-primary focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-surface-base", isInvalid && "border-error focus-within:border-error focus-within:ring-error/40", disabled && "pointer-events-none opacity-50", className), children: [singleCurrency ? (_jsxs("span", { "data-slot": "currency-input-prefix", "aria-hidden": "true", className: "flex shrink-0 select-none items-center gap-1.5 border-e border-border px-3 text-sm", children: [_jsx("span", { className: "font-medium text-fg", children: active.symbol }), _jsx("span", { className: "text-xs font-medium text-fg-tertiary", children: active.code })] })) : (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: disabled, "aria-label": selectorLabel, "data-slot": "currency-input-selector", className: cn("group/trigger flex shrink-0 select-none items-center gap-1.5 border-e border-border pe-2.5 ps-3 text-sm outline-none", "transition-colors duration-150 hover:bg-surface-overlay focus-visible:bg-surface-overlay data-[state=open]:bg-surface-overlay motion-reduce:transition-none"), children: [_jsx("span", { className: "font-medium text-fg", children: active.symbol }), _jsx("span", { className: "text-xs font-medium text-fg-tertiary", children: active.code }), _jsx(ChevronDown, { "aria-hidden": "true", className: "size-3.5 text-fg-tertiary transition-transform duration-200 ease-[var(--ease-out-quart)] group-data-[state=open]/trigger:rotate-180 motion-reduce:transition-none" })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "max-h-72 min-w-[16rem] overflow-y-auto", onCloseAutoFocus: (event) => event.preventDefault(), children: [_jsx(DropdownMenuLabel, { children: "Currency" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuRadioGroup, { value: activeCode, onValueChange: handleCurrencyChange, children: list.map((option) => (_jsxs(DropdownMenuRadioItem, { value: option.code, children: [_jsx("span", { className: "min-w-[2.5ch] font-medium text-fg", children: option.symbol }), _jsx("span", { className: "font-medium", children: option.code }), option.label ? (_jsx("span", { className: "ms-auto ps-6 text-xs text-fg-tertiary", children: option.label })) : null] }, option.code))) })] })] })), _jsx("input", { ref: setRef, type: "text", inputMode: "decimal", autoComplete: "off", autoCorrect: "off", spellCheck: false, disabled: disabled, value: display, placeholder: placeholder ?? zeroHint, "aria-label": ariaLabel, "aria-invalid": isInvalid ? true : ariaInvalid, "data-slot": "currency-input-field", className: cn("min-w-0 flex-1 bg-transparent px-3 text-end text-sm text-fg tabular-nums", "outline-none placeholder:text-fg-tertiary disabled:pointer-events-none", "selection:bg-primary selection:text-primary-foreground", inputClassName), onChange: handleChange, onFocus: onFocus, onBlur: handleBlur, ...props }), name ? _jsx("input", { type: "hidden", name: name, value: cents ?? "", readOnly: true }) : null] }));
+});
+CurrencyInput.displayName = "CurrencyInput";
+//# sourceMappingURL=currency-input.js.map

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

@@ -0,0 +1,232 @@
+import { type Column, type ColumnDef, type ColumnFiltersState, type FilterFn, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingState, type Table as TanstackTable, type VisibilityState } from "@tanstack/react-table";
+import { type ComponentType, type ReactNode } from "react";
+/** Cell padding density. `comfortable` matches the historical Table look. */
+export type DataTableDensity = "comfortable" | "compact";
+/** Option used to build a faceted (multi-select) column filter. */
+export interface DataTableFacetOption {
+    label: string;
+    value: string;
+    /** Optional leading icon rendered before the label. */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+}
+/** Configuration for a single faceted column filter rendered in the toolbar. */
+export interface DataTableFacetedFilter {
+    /** `id` of the column the filter targets. */
+    columnId: string;
+    /** Visible button label. */
+    title: string;
+    options: DataTableFacetOption[];
+}
+export interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    /** Show the toolbar with a global search field. */
+    searchable?: boolean;
+    /** Placeholder for the global search field. Defaults to "Search…". */
+    searchPlaceholder?: string;
+    /** Controlled global filter value. Implies a controlled toolbar search. */
+    globalFilter?: string;
+    /** Called when the global filter changes (controlled or uncontrolled). */
+    onGlobalFilterChange?: OnChangeFn<string>;
+    /** Faceted (multi-select) column filters rendered in the toolbar. */
+    facetedFilters?: DataTableFacetedFilter[];
+    /** Extra nodes rendered on the left side of the toolbar. */
+    toolbarStart?: ReactNode;
+    /** Extra nodes rendered on the right side of the toolbar (before the View menu). */
+    toolbarEnd?: ReactNode;
+    /** Show the "View" menu that toggles column visibility. */
+    enableColumnVisibility?: boolean;
+    /** Controlled column visibility state. */
+    columnVisibility?: VisibilityState;
+    /** Called when column visibility changes. */
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    /** Controlled sorting state. */
+    sorting?: SortingState;
+    /** Called when sorting changes. */
+    onSortingChange?: OnChangeFn<SortingState>;
+    /** Server-side sorting: skip the client sort model. */
+    manualSorting?: boolean;
+    /** Controlled column filters state. */
+    columnFilters?: ColumnFiltersState;
+    /** Called when column filters change. */
+    onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+    /** Server-side filtering: skip the client filter model. */
+    manualFiltering?: boolean;
+    /** Show the pagination footer. */
+    pagination?: boolean;
+    /** Controlled pagination state. */
+    paginationState?: PaginationState;
+    /** Called when pagination changes (controlled). */
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    /** Server-side pagination: provide `pageCount` or `rowCount`. */
+    manualPagination?: boolean;
+    /** Total page count for server-side pagination. */
+    pageCount?: number;
+    /** Total row count for server-side pagination (used to derive `pageCount`). */
+    rowCount?: number;
+    /** Initial page size when uncontrolled. Defaults to 10. */
+    initialPageSize?: number;
+    /** Page-size options offered in the footer select. Defaults to [10, 20, 30, 50]. */
+    pageSizeOptions?: number[];
+    /** Render a leading checkbox column with header select-all. */
+    enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+    /** Controlled row-selection state. */
+    rowSelection?: RowSelectionState;
+    /** Called when row selection changes. */
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    /**
+     * Render slot for bulk actions. Receives the currently selected rows; shown
+     * in a bar above the table only while at least one row is selected.
+     */
+    bulkActions?: (rows: Row<TData>[]) => ReactNode;
+    /**
+     * Controlled cell padding density. When provided, the toolbar toggle becomes
+     * controlled and you must update it via {@link onDensityChange}. Omit it to
+     * let the table manage density internally (see {@link initialDensity}).
+     */
+    density?: DataTableDensity;
+    /** Called when the density toggle is pressed (controlled or uncontrolled). */
+    onDensityChange?: (density: DataTableDensity) => void;
+    /** Initial density when uncontrolled. Defaults to "comfortable". */
+    initialDensity?: DataTableDensity;
+    /** Show a comfortable/compact density toggle in the toolbar. */
+    enableDensityToggle?: boolean;
+    /** Show a CSV export button in the toolbar. */
+    enableCsvExport?: boolean;
+    /** Download file name (without extension). Defaults to "export". */
+    csvFileName?: string;
+    /** Render skeleton rows instead of data. */
+    loading?: boolean;
+    /** Number of skeleton rows while `loading`. Defaults to the page size or 5. */
+    loadingRowCount?: number;
+    /** Render an error state with an optional retry button. */
+    error?: ReactNode;
+    /** Called when the error-state retry button is pressed. */
+    onRetry?: () => void;
+    /** Custom empty-state content. Defaults to "No results.". */
+    emptyState?: ReactNode;
+    /** Class applied to the outer wrapper. */
+    className?: string;
+    /** Accessible label for the toolbar region. Defaults to "Table controls". */
+    toolbarLabel?: string;
+    /**
+     * Override any subset of the built-in UI strings (selection checkbox labels,
+     * pagination, empty/loading/retry states…) for localization. Defaults are
+     * English; see {@link DataTableLabels}.
+     */
+    labels?: Partial<DataTableLabels>;
+    /**
+     * Accessible name for each row-selection checkbox, built from the row data
+     * (e.g. `(row) => "Select " + row.original.name`). Takes precedence over
+     * `labels.selectRow`. Only applies to the selection column injected by
+     * `enableRowSelection`.
+     */
+    getRowLabel?: (row: Row<TData>) => string;
+}
+/**
+ * Every built-in user-facing string the table renders. Pass any subset via the
+ * `labels` prop to localize; omitted keys keep their English defaults.
+ * Interpolated strings are builder functions so word order stays free per
+ * locale.
+ */
+export interface DataTableLabels {
+    /** `aria-label` of the header select-all checkbox. */
+    selectAllRows: string;
+    /** `aria-label` of a row checkbox. Receives the zero-based row index. */
+    selectRow: (rowIndex: number) => string;
+    /** Toolbar button that clears all active filters. */
+    reset: string;
+    /** Density toggle caption while compact (activating restores comfortable). */
+    densityComfortable: string;
+    /** Density toggle caption while comfortable (activating switches to compact). */
+    densityCompact: string;
+    /** Toolbar CSV export button. */
+    exportCsv: string;
+    /** Column-visibility menu trigger. */
+    view: string;
+    /** Column-visibility menu heading. */
+    toggleColumns: string;
+    /** Faceted-filter menu item that clears that filter. */
+    clearFilter: string;
+    /** `aria-label` of the bulk-actions bar. */
+    bulkActions: string;
+    /** Bulk-bar summary, e.g. "3 selected". */
+    selectedCount: (count: number) => string;
+    /** Selection summary under the table, e.g. "1 of 3 row(s) selected." */
+    selectedOfTotal: (selected: number, total: number) => string;
+    /** Label of the page-size select. */
+    rowsPerPage: string;
+    /** Visible row range, e.g. "1–10 of 42". */
+    rowRange: (first: number, last: number, total: number) => string;
+    /** Page position, e.g. "Page 2 of 5". */
+    pageOf: (page: number, pageCount: number) => string;
+    /** `aria-label` of the pagination nav. */
+    pagination: string;
+    /** `aria-label` of the first-page button. */
+    firstPage: string;
+    /** `aria-label` of the previous-page button. */
+    previousPage: string;
+    /** `aria-label` of the next-page button. */
+    nextPage: string;
+    /** `aria-label` of the last-page button. */
+    lastPage: string;
+    /** Default empty-state message (a custom `emptyState` node wins). */
+    noResults: string;
+    /** Error-state retry button. */
+    retry: string;
+    /** Polite screen-reader announcement while `loading`. */
+    loadingRows: string;
+}
+/** Reserved column id for the built-in selection checkbox column. */
+export declare const SELECTION_COLUMN_ID = "__select__";
+/**
+ * Case-insensitive "includes" global filter used by the toolbar search. It is
+ * exported so server-side callers can reuse the same matching semantics.
+ */
+export declare const fuzzyTextFilter: FilterFn<unknown>;
+/** Labels for the checkbox column built by {@link createSelectionColumn}. */
+export interface DataTableSelectionColumnOptions<TData> {
+    /** `aria-label` of the header select-all checkbox. */
+    selectAllLabel?: string;
+    /**
+     * `aria-label` of each row checkbox. Defaults to "Select row {n}" (1-based)
+     * so every checkbox has a distinguishable accessible name.
+     */
+    getRowLabel?: (row: Row<TData>) => string;
+}
+/**
+ * Build the leading checkbox selection column. Exposed so callers who supply
+ * their own `columns` can prepend an identical, accessible selection column
+ * instead of relying on `enableRowSelection` injection.
+ */
+export declare function createSelectionColumn<TData>(options?: DataTableSelectionColumnOptions<TData>): ColumnDef<TData, unknown>;
+/** Convert the visible (filtered/sorted) rows of a table to a CSV string. */
+export declare function tableRowsToCsv<TData>(table: TanstackTable<TData>): string;
+/**
+ * `aria-label` builders for the sort button, one per sort state. Pass any
+ * subset to localize; each receives the column title.
+ */
+export interface DataTableColumnHeaderLabels {
+    /** Unsorted — activation sorts ascending. */
+    sort: (title: string) => string;
+    /** Sorted ascending — activation sorts descending. */
+    sortedAscending: (title: string) => string;
+    /** Sorted descending — activation re-sorts ascending (never clears). */
+    sortedDescending: (title: string) => string;
+}
+export interface DataTableColumnHeaderProps<TData, TValue> {
+    column: Column<TData, TValue>;
+    title: string;
+    className?: string;
+    /** Localize the sort-button `aria-label`s. See {@link DataTableColumnHeaderLabels}. */
+    labels?: Partial<DataTableColumnHeaderLabels>;
+}
+/**
+ * Sortable header cell with a sort-state icon. Falls back to plain text when
+ * the column cannot sort, so it is safe to use everywhere.
+ */
+export declare function DataTableColumnHeader<TData, TValue>({ column, title, className, labels, }: DataTableColumnHeaderProps<TData, TValue>): import("react").JSX.Element;
+export declare function DataTable<TData, TValue>(props: DataTableProps<TData, TValue>): import("react").JSX.Element;
+//# sourceMappingURL=data-table.d.ts.map